DIY Hur man visar tid på M5StickC ESP32 med Visuino - enkelt att göra: 9 steg

2025 Författare: John Day | [email protected]. Senast ändrad: 2025-01-13 06:58

I denna handledning lär vi oss hur man programmerar ESP32 M5Stack StickC med Arduino IDE och Visuino för att visa tiden på LCD -skärmen.

Steg 1: Vad du behöver

1. M5StickC ESP32: du kan få det här
2. 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å knappen "Verktyg" 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: Lägg till och ställ in komponenter i Visuino

1. Klicka på "M5 Stack Stick C" -kortet för att välja det
2. I fönstret "Egenskaper", välj "Moduler" och klicka på "+" för att expandera, välj "Visa ST7735" och klicka på "+" för att expandera det
3. Ställ in Orientation på "goRight" <detta betyder hur tiden kommer att orienteras på LCD -skärmen
4. Välj "Element" och klicka på den blå knappen med tre prickar …
5. Elements -dialogrutan visas
6. Dra "Textfält" från höger till vänster i dialogrutan Elements

Klicka på "Textfält1" på vänster sida för att markera det, klicka sedan på "Egenskapsfönstret" på färgen och ställ in den på "aclOrange"

-och även i egenskaper windows ställer in X: 10 och Y: 20 det är här du vill visa tiden på LCD -skärmen

-set storlek: 3 detta är tidens teckenstorlek

-Du kan ställa in textstorlek och färg om du vill

Stäng elementfönstret

Valfritt:

Klicka på "M5 Stack Stick C" -kortet för att välja det

I fönstret "Egenskaper" välj "Moduler" och klicka på "+" för att expandera, välj "Display ST7735" och klicka på "+" för att expandera det och du kommer att se "Bakgrundsfärg" detta är standardfärgen på skärmen, ändra den till din favoritfärg, du kan också ställa in skärmens ljusstyrka, standard är 1 (max) du kan ställa in den till 0,5 eller något annat värde för att göra den mer svag

6. Lägg till komponenten "Avkodning (delning) Datum/tid" 7. Lägg till komponenten "Formaterad text"

Steg 4: I Visuino Set Components

1. Välj "FormattedTxt1" -komponenten och under "Egenskaper" -fönstret ställ in "Text" till:%0:%1:%2
2. Dubbelklicka på "FormattedText1" -komponenten och dra i dialogrutan Elements 3x "Textelement" till vänster

Steg 5: I Visuino Connect -komponenter

• Anslut "M5 Stack Stick C"> Real Time Alarm Clock (RTC)> Pin [Out] till "DecodeDateTime1" komponentstift [In]
• Anslut komponentstiftet "DecodeDateTime1" [Hour] till "FormattedText1" component "TextElement1" pin [In]
• Anslut komponentstiftet "DecodeDateTime1" [Minute] till "FormattedText1" komponent "TextElement2" pin [In]
• Anslut "DecodeDateTime1" komponentstift [Second] till "FormattedText1" komponent "TextElement3" pin [In]
• Anslut "FormattedText1" komponentstift [Out] till "M5 Stack Stick C" -kortet "Display ST7735"> "Text Field1" pin [In]

Steg 6: 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 7: Spela

Om du driver M5Sticks -modulen bör displayen börja visa tiden.

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:

Steg 8: Extra: Enkelt trick

Du kan använda den aktuella tiden som fanns på din dator när du kompilerade koden i Arduino.

För att göra det, släpp bara en "Compile Date/Time" -komponent och anslut den till "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" pin [Set]

Du kan ladda ner projektfilen med det här tricket här.

Steg 9: I nästa handledning.

I nästa handledning kommer jag att visa dig hur du gör en cool tittande klocka där du kan ställa in tiden med StickC -knapparna! Håll utkik och kolla in mina andra handledning här.