M5StickC hűvös megjelenésű óra menüvel és fényerő -szabályozóval: 8 lépés

2025 Szerző: John Day | [email protected]. Utoljára módosítva: 2025-01-23 14:47

Ebben az oktatóanyagban megtanuljuk, hogyan kell az ESP32 M5Stack StickC programozását Arduino IDE és Visuino programozással úgy beállítani, hogy megjelenítsen egy időt az LCD -n, valamint beállíthatja az időt és a fényerőt a menü és a StickC gombok segítségével.

Nézzen meg egy bemutató videót.

1. lépés: Amire szüksége lesz

M5StickC ESP32: itt szerezheti be

Visuino program: Töltse le a Visuino programot

Megjegyzés: Nézze meg ezt az oktatóanyagot a StickC ESP32 kártya telepítéséről

2. lépés: Indítsa el a Visuino programot, és válassza ki az M5 Stack Stick C kártya típusát

A Visuino elindítása az első képen látható módon Kattintson a Visuino Arduino komponensén található „Eszközök” gombra (1. kép).

3. lépés: A Visuino programban állítsa be a StickC táblát

1. Kattintson az "M5 Stack Stick C" táblára annak kiválasztásához
2. A "Tulajdonságok" ablakban válassza a "Modulok" lehetőséget, majd kattintson a "+" gombra a kibontáshoz,
3. Válassza a "Display ST7735" lehetőséget, majd kattintson a "+" gombra a kibontáshoz,
4. Állítsa az "Orientation" értéket "goRight" értékre
5. Állítsa a "Háttérszín" értéket "ClBlack" értékre
6. Válassza ki az "Elemek" elemet, majd kattintson a kék gombra, 3 ponttal…
7. Elemek párbeszédablak jelenik meg
8. Az Elemek párbeszédablakban húzza kétszer a "Szövegmezőt" jobbról balra
9. Kattintson a bal oldali "Szövegmező1" elemre a kiválasztásához, majd a "Tulajdonságok" ablakban kattintson a "Szín" -re, és állítsa "aclOrange" -ra, majd kattintson a "Kitöltés színe" -re, és állítsa "aclBlack" -re (Ön játszhat a színekkel, ha akar) -az X: 10 és Y: 20 tulajdonságok ablakokban is itt szeretné megjeleníteni az időt az LCD -kijelzőn: 3 (ez az idő betűmérete)
10. Kattintson a bal oldali "Szövegmező2" elemre a kiválasztásához, majd a "Tulajdonságok" ablakban kattintson a "Szín" -re, és állítsa "aclAqua" -ra, majd kattintson a "Kitöltés színe" -re, és állítsa "aclBlack" -re

(Játszhat a színekkel, ha szeretné) -beállítja a "Kezdeti érték" értéket: Állítsa be az ÓRA beállítást

-az X: 10 és Y: 2 tulajdonságok ablakokban is itt szeretné megjeleníteni a menüt az LCD -n -készlet mérete: 1 (ez a menü betűmérete)

Zárja be az elemek ablakát

1. Kattintson az "M5 Stack Stick C" táblára annak kiválasztásához
2. A "Tulajdonságok" ablakban válassza a "Modulok" lehetőséget, majd kattintson a "+" gombra a kibontáshoz,
3. Válassza a "Valós idejű ébresztőóra (RTC) megjelenítése" lehetőséget, majd kattintson a "+" gombra a kibontáshoz,
4. Válassza ki az "Elemek" elemet, majd kattintson a kék gombra, 3 ponttal…
5. Az Elemek párbeszédpanelen húzza az "Óra beállítása" elemet jobb oldalról balra, a tulajdonságok ablakban pedig állítsa az "Add Value" értéket: True értékre és "Value" értéket erre: 1
6. Az Elemek párbeszédpanelen húzza a "Perc beállítása" elemet jobb oldalról balra, a tulajdonságok ablakban pedig az "Add Value" értéket állítsa True értékre és az "Value" értéket erre: 1
7. Az Elemek párbeszédpanelen húzza a "Második beállítást" jobb oldalról balra, és a tulajdonságok ablakban állítsa az "Add Value" értéket: True értékre és "Value" értéket erre: 1

Zárja be az elemek ablakát

4. lépés: A Visuino -ban összetevők hozzáadása

1. Adjon hozzá 2x "Debounce Button" összetevőt
2. Adja hozzá az "Automatikus ismétlés gomb" összetevőt
3. Adja hozzá a "Text Array" összetevőt
4. Adja hozzá az "Analog Array" összetevőt
5. Adjon hozzá 2x "számláló" komponenst
6. Adjon hozzá "Clock Demux (több kimeneti csatorna kapcsoló)" összetevőt
7. Adja hozzá a "Decode (Split) Date/Time" összetevőt
8. Adja hozzá a "FormattedText1" összetevőt

5. lépés: A Visuino készlet összetevőiben

1. Válassza ki a "FormattedText1" összetevőt, és a "Tulajdonságok" ablakban állítsa a "Szöveg" értéket:%0:%1:%2
2. Kattintson duplán a "FormattedText1" összetevőre, és az Elemek párbeszédpanelen húzza 3x a "Szövegelem" elemet balra
3. Válassza a "TextElement1" lehetőséget a bal oldalon, és a tulajdonságok ablakban állítsa a "Fill Character" értéket: 0 -ra, és a "Length" értéket: 2 -re
4. Válassza a "TextElement2" lehetőséget a bal oldalon, és a tulajdonságok ablakban állítsa a "Fill Character" értéket: 0 -ra, és a "Length" értéket: 2 -re
5. Válassza a "TextElement3" lehetőséget a bal oldalon, és a tulajdonságok ablakban állítsa a "Fill Character" értéket: 0 -ra, és a "Length" értéket: 2 -re
6. Válassza ki a "ClockDemmux1" összetevőt, és a tulajdonságok ablakban állítsa az "Output Pins" értéket a következőre: 5
7. Válassza ki a "Counter1" összetevőt, és a tulajdonságok ablakban bontsa ki a "Max" értéket, és állítsa az "Value" értéket: 4
8. Válassza ki a "Counter1" összetevőt, és a tulajdonságok ablakban bontsa ki a "Min" értéket, és állítsa az "Value" értéket: 0 értékre
9. Válassza ki a "Counter2" összetevőt, és a tulajdonságok ablakban bontsa ki a "Max" értéket, és állítsa az "Value" értéket: 6
10. Válassza ki a "Counter2" összetevőt, és a tulajdonságok ablakban bontsa ki a "Min" értéket, és állítsa az "Value" értéket: 0 A MENÜ ÉPÍTÉSE:
11. Válassza ki az "Array1" összetevőt (Text Array), és kattintson duplán rá. Címzett: SET HOURS-A bal oldalon Válassza az "Item [2]" elemet, és a tulajdonságok ablakban az "Value" értéket állítsa: SET MINUTES-A bal oldalon Válassza ki az "Item [3]" elemet, majd a tulajdonságok ablakban "Value" to: SET SECONDS-A bal oldalon Válassza az "Item [4]" elemet, és a tulajdonságok ablakban állítsa be az "Value" értéket: SET BRIGHTNESSZárja be az Elemek ablakot.

12. Válassza ki az "Array2" összetevőt (analóg tömb), és kattintson rá duplán. hogy: 1

    -A bal oldalon válassza az "Item [1]" elemet, és a tulajdonságok ablakban állítsa az "Value" értéket: 0.9

    -A bal oldalon válassza az "Elem [2]" lehetőséget, és a tulajdonságok ablakban állítsa az "Érték" értéket: 0,8 -A bal oldalon válassza az "Elem [3]" elemet, és a tulajdonságok ablakban állítsa be az "Érték" értékét: 0,7 -Be a bal oldalon Válassza az "Elem [4]" elemet, és a tulajdonságok ablakban állítsa az "Érték" értéket a következőre: 0.6-A bal oldalon válassza az "Elem [5]" lehetőséget, és a tulajdonságok ablakban állítsa be az "Érték" értékét: 0.55

6. lépés: A Visuino Connect komponensekben

1. Csatlakoztassa az "M5 Stack Stick C" A tűt (M5) a "Button2" tűhöz [In]
2. Csatlakoztassa az "M5 Stack Stick C" tűt [B] a "Button1" tűhöz [In]
3. Csatlakoztassa a "Button2" tűt [Out] a "RepeatButton1" érintkezőhöz [In]
4. Csatlakoztassa a "RepeatButton1" tűt [Kimenet] a "ClockDemmux1" érintkezőhöz [In]
5. Csatlakoztassa a "Button1" tűt [Out] a "Counter1" pin [In]
6. Csatlakoztassa az "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" tűt [Out] a "DecodeDateTime1" érintkezőhöz [In]
7. Csatlakoztassa a "DecodeDateTime1" tűt [Óra] a "FormattedText1"> "TextElement1" érintkezőhöz [In]
8. Csatlakoztassa a "DecodeDateTime1" tűt [perc] a "FormattedText1"> "TextElement2" érintkezőhöz [In]
9. Csatlakoztassa a "DecodeDateTime1" pin [Second] gombot a "FormattedText1"> "TextElement3" pin [In]
10. Csatlakoztassa a "FormattedText1" tűt [Out] az "M5 Stack Stick C" táblához> "Display ST7735"> "Text Field1" pin [In]
11. Csatlakoztassa a "Counter1" pin [Out] -ot a "ClockDemmux1" pin [Select] és az "Array1" pin [Index] -hez
12. Csatlakoztassa a "Counter2" tűt [Out] az "Array2" tűhöz [Index]
13. Csatlakoztassa az "Array1" tűt [Out] az "M5 Stack Stick C" kártyához> "Display ST7735"> "Text Field2" pin [In]
14. Csatlakoztassa az "Array2" tűt [kimenet] az "M5 Stack Stick C" kártyához> "Display ST7735"> tűt [Fényerő]
15. Csatlakoztassa a "ClockDemmux1" tűt [1] az "M5 Stack Stick C" kártyához> "Valós idejű ébresztőóra (RTC)"> "Set Hour1" pin [Clock]
16. Csatlakoztassa a "ClockDemmux1" érintkezőt [2] az "M5 Stack Stick C" kártyához> "Valós idejű ébresztőóra (RTC)"> "Állítsa be a perc 1" tűt [Óra]
17. Csatlakoztassa a "ClockDemmux1" érintkezőt [3] az "M5 Stack Stick C" kártyához> "Valós idejű ébresztőóra (RTC)"> "Második beállítás1" érintkező [Óra]
18. Csatlakoztassa a "ClockDemmux1" tűt [4] a "Counter2" tűhöz [In]

7. lépés: Az Arduino kód létrehozása, fordítása és feltöltése

A Visuino alkalmazásban kattintson alul a "Build" fülre, győződjön meg arról, hogy a megfelelő port van kiválasztva, majd kattintson a "Compile/Build and Upload" gombra.

8. lépés: Játssz

Ha bekapcsolja az M5Sticks modult, a kijelzőn el kell kezdenie mutatni az időt. Módosíthatja az időt és a fényerőt a "B" gombok segítségével, hogy megjelenítse a menüt, és váltson (Óra beállítása, Percek beállítása, Másodpercek beállítása, Fényerő beállítása), és használja az "M5" gombot.

Gratulálunk! Befejezte az M5Sticks projektjét Visuino -val. Szintén mellékelve van a Visuino projekt, amelyet ehhez az Instructable -hez hoztam létre, innen letöltheti. Letöltheti és megnyithatja a Visuino -ból: