
Innehållsförteckning:
- Steg 1: Vad du behöver
- Steg 2: Starta Visuino och välj M5 Stack Stick C -korttyp
- Steg 3: Ställ in StickC -kortet i Visuino
- Steg 4: Lägg till komponenter i Visuino
- Steg 5: I Visuino Set Components
- Steg 6: I Visuino Connect -komponenter
- Steg 7: Generera, kompilera och ladda upp Arduino -koden
- Steg 8: Spela
2025 Författare: John Day | [email protected]. Senast ändrad: 2025-01-23 15:10
I denna handledning lär vi oss hur man programmerar ESP32 M5Stack StickC med Arduino IDE och Visuino för att visa en tid på LCD -skärmen och ställa in tid och ljusstyrka med hjälp av menyn och StickC -knapparna.
Se en demonstrationsvideo.
Steg 1: Vad du behöver


M5StickC ESP32: du kan få det här
Visuino -program: Ladda ner Visuino
Obs! Läs den här handledningen om hur du installerar StickC ESP32 -kort
Steg 2: Starta Visuino och välj M5 Stack Stick C -korttyp



Starta Visuino som visas på den första bilden Klicka på "Verktyg" -knappen på Arduino -komponenten (bild 1) i Visuino När dialogrutan visas väljer du "M5 Stack Stick C" som visas på bild 2
Steg 3: Ställ in StickC -kortet i Visuino




- Klicka på "M5 Stack Stick C" -kortet för att välja det
- I fönstret "Egenskaper" väljer du "Moduler" och klickar på "+" för att expandera,
- Välj "Display ST7735" och klicka på "+" för att expandera den,
- Ställ in "Orientering" på "goRight"
- Ställ in "Bakgrundsfärg" på "ClBlack"
- Välj "Element" och klicka på den blå knappen med tre prickar …
- Elements -dialogrutan visas
- I dialogrutan Elements drar du 2X "Textfält" från höger sida till vänster
- Klicka på "Textfält1" till vänster för att välja det, klicka sedan på "Färg" i fönstret "Egenskaper" och ställ in det till "aclOrange" och klicka på "Fyll färg" och ställ in det till "aclBlack" (Du kan leka med färgerna om du vill) -och även i egenskaperna windows ställer in X: 10 och Y: 20 här vill du visa tiden på LCD -storleken: 3 (detta är tidens teckenstorlek)
- Klicka på "Textfält2" på vänster sida för att välja det, klicka sedan på "Färg" i fönstret "Egenskaper" och ställ in det till "aclAqua" och klicka på "Fyll färg" och ställ in det till "aclBlack"
(Du kan spela med färgerna om du vill) -sätt "Initial Value" till: Ställ in HOUR
-och i egenskaper windows ställer in X: 10 och Y: 2 det är här du vill visa menyn på LCD -storleken: 1 (detta är teckenstorleken på menyn)
Stäng elementfönstret
- Klicka på "M5 Stack Stick C" -kortet för att välja det
- I fönstret "Egenskaper" väljer du "Moduler" och klickar på "+" för att expandera,
- Välj "Visa realtids väckarklocka (RTC)" och klicka på "+" för att expandera den,
- Välj "Element" och klicka på den blå knappen med tre prickar …
- I dialogrutan Elements drar du "Ställ in timme" från höger till vänster och i egenskapsfönstret ställer du in "Lägg till värde" till: Sant och "Värde" till: 1
- I Elements-dialogrutan drar du "Ställ in minut" från höger sida till vänster och i egenskapsfönstret ställer du in "Lägg till värde" till: Sant och "Värde" till: 1
- I elementdialogen drar du "Ställ in andra" från höger till vänster och i egenskapsfönstret ställer du in "Lägg till värde" till: Sant och "Värde" till: 1
Stäng elementfönstret
Steg 4: Lägg till komponenter i Visuino

- Lägg till 2x "Debounce Button" -komponent
- Lägg till "Auto Repeat Button" -komponenten
- Lägg till "Text Array" -komponent
- Lägg till komponenten "Analog Array"
- Lägg till 2x "Counter" -komponent
- Lägg till komponenten "Clock Demux (Multiple Output channel Switch)"
- Lägg till "Decode (Split) Date/Time" -komponent
- Lägg till komponenten "FormattedText1"
Steg 5: I Visuino Set Components



- Välj "FormattedText1" -komponenten och under "Egenskaper" -fönstret ställ in "Text" på:%0:%1:%2
- Dubbelklicka på "FormattedText1" -komponenten och dra i dialogrutan Elements 3x "Textelement" till vänster
- Välj "TextElement1" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
- Välj "TextElement2" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
- Välj "TextElement3" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
- Välj komponenten "ClockDemmux1" och ställ in "Output Pins" i egenskapsfönstret på: 5
- Välj "Counter1" -komponent och expandera "Max" i egenskapsfönstret och ställ in "Value" till: 4
- Välj "Counter1" -komponent och expandera "Min" i egenskapsfönstret och ställ in "Value" till: 0
- Välj "Counter2" -komponent och expandera "Max" i egenskapsfönstret och ställ in "Värde" till: 6
- Välj "Counter2" -komponent och expandera "Min" i egenskapsfönstret och ställ in "Värde" till: 0BUILDING THE MENU:
- Välj "Array1" -komponent (textmatris) och dubbelklicka på den. -I elementfönstret drar du 4X "Value" till vänster-på den vänstra sidan Välj "Item [1]" och i egenskapsfönstret anger du "Value" till: STÄLL IN TIMER-På vänster sida Välj "Objekt [2]" och i egenskapsfönstret ställ in "Värde" till: SET MINUTER-På vänster sida Välj "Objekt [3]" och i fastighetsfönstret ställ in "Värde" till: SET SECONDS-På vänster sida Välj "Item [4]" och i egenskapsfönstret ställ in "Value" till: SET LIGHTNESSStäng fönstret Elements. SETTING THE VALUES FOR LIGHTNESS:
-
Välj "Array2" -komponent (Analog Array) och dubbelklicka på den. -I elementfönstret drar du 6X "Value" till vänster-på den vänstra sidan Välj "Item [0]" och i egenskapsfönstret anger du "Value" till: 1
-På vänster sida väljer du "Artikel [1]" och i egenskapsfönstret ställer du in "Värde" på: 0,9
-På vänster sida väljer du "Artikel [2]" och i egenskapsfönstret ställer du in "Värde" på: 0,8 -Vänster väljer du "Objekt [3]" och i egenskapsfönstret ställer du in "Värde" på: 0,7 -På vänster Välj "Artikel [4]" och i fastighetsfönstret ställ in "Värde" till: 0,6-På vänster sida välj "Objekt [5]" och i fastighetsfönstret ställ in "Värde" till: 0,55
Steg 6: I Visuino Connect -komponenter




- Anslut "M5 Stack Stick C" stift A (M5) till "Button2" stift [In]
- Anslut "M5 Stack Stick C" stift [B] till "Button1" stift [In]
- Anslut "Button2" pin [Out] till "RepeatButton1" pin [In]
- Anslut "RepeatButton1" pin [Out] till "ClockDemmux1" pin [In]
- Anslut "Button1" pin [Out] till "Counter1" pin [In]
- Anslut "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" pin [Out] till "DecodeDateTime1" pin [In]
- Anslut "DecodeDateTime1" pin [Hour] till "FormattedText1"> "TextElement1" pin [In]
- Anslut "DecodeDateTime1" pin [Minute] till "FormattedText1"> "TextElement2" pin [In]
- Anslut "DecodeDateTime1" pin [Second] till "FormattedText1"> "TextElement3" pin [In]
- Anslut "FormattedText1" pin [Out] till "M5 Stack Stick C" kort> "Display ST7735"> "Text Field1" pin [In]
- Anslut "Counter1" pin [Out] till "ClockDemmux1" pin [Select] och till "Array1" pin [Index]
- Anslut "Counter2" pin [Out] till "Array2" pin [Index]
- Anslut "Array1" pin [Out] till "M5 Stack Stick C" kort> "Display ST7735"> "Text Field2" pin [In]
- Anslut "Array2" -stift [Out] till "M5 Stack Stick C" -kortet> "Display ST7735"> pin [Brightness]
- Anslut "ClockDemmux1" stift [1] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Ställ in timme" pin [Clock]
- Anslut "ClockDemmux1" stift [2] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Set Minute1" pin [Clock]
- Anslut "ClockDemmux1" stift [3] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Set Second1" pin [Clock]
- Anslut "ClockDemmux1" pin [4] till "Counter2" pin [In]
Steg 7: Generera, kompilera och ladda upp Arduino -koden

I Visuino klickar du längst ned på fliken "Bygg", se till att rätt port är vald, klicka sedan på "Kompilera/bygga och ladda upp" -knappen.
Steg 8: Spela
Om du driver M5Sticks -modulen bör displayen börja visa tiden. Du kan ändra tid och ljusstyrka med knapparna "B" för att visa menyn och växla mellan (Ställ in timmar, Ställ in minuter, Ställ in sekunder, Ställ in ljusstyrka) och använd knappen "M5" för att ställa in den.
Grattis! Du har slutfört ditt M5Sticks -projekt med Visuino. Vidare bifogas Visuino -projektet, som jag skapade för denna Instructable, du kan ladda ner det här. Du kan ladda ner och öppna den i Visuino:
Rekommenderad:
DIY Hur man gör en snygg klocka - StickC - Lätt att göra: 8 steg

DIY Hur man gör en läcker Watch - StickC - Lätt att göra: I den här guiden kommer vi att lära sig att programmera ESP32 M5Stack StickC med Arduino IDE och Visuino att Visa en tid på LCD-skärmen och även ställa in tiden med StickC knappar
Hur man gör analog klocka och digital klocka med LED -remsa med Arduino: 3 steg

Hur man gör analog klocka och digital klocka med LED -remsa med Arduino: Idag kommer vi att göra en analog klocka & Digital klocka med Led Strip och MAX7219 Dot -modul med Arduino. Den kommer att korrigera tiden med den lokala tidszonen. Den analoga klockan kan använda en längre LED -remsa, så den kan hängas på väggen för att bli en konstverk
Arduino DHT22 sensor- och jordfuktprojekt med meny: 4 steg

Arduino DHT22 Sensor and Soil Moisture Project With Menu: Hello guys Idag presenterar jag mitt andra projekt om instruktioner. Detta projekt presenterar blandningen av mitt första projekt där jag använde Soil Moisture sensor och DHT22 sensor som används för att mäta temperatur och luftfuktighet . Detta projekt är
Arduino Nano -klocka med adaptiv ljusstyrka med prototypkretskort från NextPCB.com: 11 steg

Arduino Nano -klocka med adaptiv ljusstyrka med prototyp -kretskort från NextPCB.com: Alla ville ha en klocka som visar tid och datum tillsammans Så i det här projektet visar jag dig hur du kan bygga en arduino -nanoklocka med adaptiv ljusstyrka med RTC och en design PCB från NextPCB
En meny i Arduino och hur man använder knapparna: 10 steg (med bilder)

En meny i Arduino och hur man använder knappar: I min Arduino 101 -handledning lär du dig hur du konfigurerar din miljö i Tinkercad. Jag använder Tinkercad eftersom det är en ganska kraftfull onlineplattform som gör att jag kan visa en rad färdigheter för studenter för att bygga kretsar. Känn dig fri att