M5StickC Snygg klocka med meny och ljusstyrka: 8 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:36

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

1. Klicka på "M5 Stack Stick C" -kortet för att välja det
2. I fönstret "Egenskaper" väljer du "Moduler" och klickar på "+" för att expandera,
3. Välj "Display ST7735" och klicka på "+" för att expandera den,
4. Ställ in "Orientering" på "goRight"
5. Ställ in "Bakgrundsfärg" på "ClBlack"
6. Välj "Element" och klicka på den blå knappen med tre prickar …
7. Elements -dialogrutan visas
8. I dialogrutan Elements drar du 2X "Textfält" från höger sida till vänster
9. 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)
10. 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

1. Klicka på "M5 Stack Stick C" -kortet för att välja det
2. I fönstret "Egenskaper" väljer du "Moduler" och klickar på "+" för att expandera,
3. Välj "Visa realtids väckarklocka (RTC)" och klicka på "+" för att expandera den,
4. Välj "Element" och klicka på den blå knappen med tre prickar …
5. 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
6. 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
7. 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

1. Lägg till 2x "Debounce Button" -komponent
2. Lägg till "Auto Repeat Button" -komponenten
3. Lägg till "Text Array" -komponent
4. Lägg till komponenten "Analog Array"
5. Lägg till 2x "Counter" -komponent
6. Lägg till komponenten "Clock Demux (Multiple Output channel Switch)"
7. Lägg till "Decode (Split) Date/Time" -komponent
8. Lägg till komponenten "FormattedText1"

Steg 5: I Visuino Set Components

1. Välj "FormattedText1" -komponenten och under "Egenskaper" -fönstret ställ in "Text" på:%0:%1:%2
2. Dubbelklicka på "FormattedText1" -komponenten och dra i dialogrutan Elements 3x "Textelement" till vänster
3. Välj "TextElement1" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
4. Välj "TextElement2" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
5. Välj "TextElement3" på vänster sida och i egenskapsfönstret ställ in "Fill Character" till: 0 och "Length" till: 2
6. Välj komponenten "ClockDemmux1" och ställ in "Output Pins" i egenskapsfönstret på: 5
7. Välj "Counter1" -komponent och expandera "Max" i egenskapsfönstret och ställ in "Value" till: 4
8. Välj "Counter1" -komponent och expandera "Min" i egenskapsfönstret och ställ in "Value" till: 0
9. Välj "Counter2" -komponent och expandera "Max" i egenskapsfönstret och ställ in "Värde" till: 6
10. Välj "Counter2" -komponent och expandera "Min" i egenskapsfönstret och ställ in "Värde" till: 0BUILDING THE MENU:
11. 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:

12. 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

1. Anslut "M5 Stack Stick C" stift A (M5) till "Button2" stift [In]
2. Anslut "M5 Stack Stick C" stift [B] till "Button1" stift [In]
3. Anslut "Button2" pin [Out] till "RepeatButton1" pin [In]
4. Anslut "RepeatButton1" pin [Out] till "ClockDemmux1" pin [In]
5. Anslut "Button1" pin [Out] till "Counter1" pin [In]
6. Anslut "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" pin [Out] till "DecodeDateTime1" pin [In]
7. Anslut "DecodeDateTime1" pin [Hour] till "FormattedText1"> "TextElement1" pin [In]
8. Anslut "DecodeDateTime1" pin [Minute] till "FormattedText1"> "TextElement2" pin [In]
9. Anslut "DecodeDateTime1" pin [Second] till "FormattedText1"> "TextElement3" pin [In]
10. Anslut "FormattedText1" pin [Out] till "M5 Stack Stick C" kort> "Display ST7735"> "Text Field1" pin [In]
11. Anslut "Counter1" pin [Out] till "ClockDemmux1" pin [Select] och till "Array1" pin [Index]
12. Anslut "Counter2" pin [Out] till "Array2" pin [Index]
13. Anslut "Array1" pin [Out] till "M5 Stack Stick C" kort> "Display ST7735"> "Text Field2" pin [In]
14. Anslut "Array2" -stift [Out] till "M5 Stack Stick C" -kortet> "Display ST7735"> pin [Brightness]
15. Anslut "ClockDemmux1" stift [1] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Ställ in timme" pin [Clock]
16. Anslut "ClockDemmux1" stift [2] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Set Minute1" pin [Clock]
17. Anslut "ClockDemmux1" stift [3] till "M5 Stack Stick C" kort> "Real Time Alarm Clock (RTC)"> "Set Second1" pin [Clock]
18. 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: