Ceas M5StickC Cool Look cu meniu și control al luminozității: 8 pași

2025 Autor: John Day | [email protected]. Modificat ultima dată: 2025-01-13 06:58

În acest tutorial vom învăța cum să programăm ESP32 M5Stack StickC cu Arduino IDE și Visuino pentru a afișa o oră pe ecranul LCD și, de asemenea, să setăm ora și luminozitatea folosind meniul și butoanele StickC.

Urmăriți un videoclip demonstrativ.

Pasul 1: De ce veți avea nevoie

M5StickC ESP32: îl puteți obține aici

Programul Visuino: Descărcați Visuino

Notă: Consultați acest tutorial aici despre cum să instalați placa StickC ESP32

Pasul 2: Porniți Visuino și selectați tipul de placă M5 Stack Stick C

Porniți Visuino așa cum se arată în prima imagine Faceți clic pe butonul „Instrumente” de pe componenta Arduino (Imaginea 1) în Visuino Când apare dialogul, selectați „M5 Stack Stick C” așa cum se arată în Imaginea 2

Pasul 3: În Visuino setați placa StickC

1. Faceți clic pe placa „M5 Stack Stick C” pentru a o selecta
2. În fereastra „Proprietăți” selectați „Module” și faceți clic pe „+” pentru a extinde,
3. Selectați „Afișați ST7735” și faceți clic pe „+” pentru ao extinde,
4. Setați „Orientare” la „goRight”
5. Setați „Culoare fundal” la „ClBlack”
6. Selectați „Elemente” și faceți clic pe butonul albastru cu 3 puncte …
7. Se va afișa fereastra de dialog Elements
8. În dialogul Elements, trageți 2X „Câmp text” din partea dreaptă spre stânga
9. Faceți clic pe „Câmpul de text1” din partea stângă pentru a-l selecta, apoi în „Fereastra de proprietăți” faceți clic pe „Culoare” și setați-l la „aclOrange” și faceți clic pe „Culoare de umplere” și setați-l la „aclBlack” (Dvs. se poate juca cu culorile dacă doriți) -de asemenea, în ferestrele de proprietăți setate X: 10 și Y: 20 aici doriți să afișați ora pe dimensiunea setului LCD: 3 (aceasta este dimensiunea fontului timpului)
10. Faceți clic pe „Câmpul de text2” din partea stângă pentru al selecta, apoi în „Fereastra de proprietăți” faceți clic pe „Culoare” și setați-l la „aclAqua” și faceți clic pe „Culoare de umplere” și setați-l la „aclBlack”

(Puteți juca cu culorile dacă doriți) - setați „Valoarea inițială” la: Setați ORA

-de asemenea, în ferestrele de proprietăți setate X: 10 și Y: 2 aici doriți să afișați meniul pe ecranul LCD -dimensiunea setului: 1 (aceasta este dimensiunea fontului din meniu)

Închideți fereastra elementelor

1. Faceți clic pe placa „M5 Stack Stick C” pentru a o selecta
2. În fereastra „Proprietăți” selectați „Module” și faceți clic pe „+” pentru a extinde,
3. Selectați „Afișați ceasul cu alarmă în timp real (RTC)” și faceți clic pe „+” pentru ao extinde,
4. Selectați „Elemente” și faceți clic pe butonul albastru cu 3 puncte …
5. În fereastra de dialog Elements, trageți „Set Hour” din partea dreaptă spre stânga și în fereastra de proprietăți setați „Add Value” la: True și „Value” la: 1
6. În dialogul Elements, trageți „Set Minute” din partea dreaptă spre stânga și în fereastra de proprietăți setați „Add Value” la: True și „Value” la: 1
7. În fereastra de dialog Elements, trageți „Set Second” din partea dreaptă spre stânga și în fereastra de proprietăți setați „Add Value” la: True și „Value” la: 1

Închideți fereastra elementelor

Pasul 4: În Visuino Adăugați componente

1. Adăugați 2x componenta „Buton de debounce”
2. Adăugați componenta „Buton de repetare automată”
3. Adăugați componenta „Text Array”
4. Adăugați componenta „Analog Array”
5. Adăugați 2x componentă „Contor”
6. Adăugați componenta „Clock Demux (Multiple Output channel Switch)”
7. Adăugați componenta „Decodează (Split) Data / Ora”
8. Adăugați componenta „FormattedText1”

Pasul 5: În setarea componentelor Visuino

1. Selectați componenta „FormattedText1” și sub fereastra „Proprietăți” setați „Text” la:% 0:% 1:% 2
2. Faceți dublu clic pe componenta „FormattedText1” și în dialogul Elements glisați 3x „Element text” la stânga
3. Selectați „TextElement1” în partea stângă și în fereastra de proprietăți setați „Completare caracter” la: 0 și „Lungime” la: 2
4. Selectați „TextElement2” în partea stângă și în fereastra de proprietăți setați „Completare caracter” la: 0 și „Lungime” la: 2
5. Selectați „TextElement3” în partea stângă și în fereastra de proprietăți setați „Fill Character” la: 0 și „Length” la: 2
6. Selectați componenta „ClockDemmux1” și în fereastra de proprietăți setați „Output Pins” la: 5
7. Selectați componenta „Contor1” și în fereastra de proprietăți extindeți „Max” și setați „Valoare” la: 4
8. Selectați componenta „Contor1” și în fereastra de proprietăți extindeți „Min” și setați „Valoare” la: 0
9. Selectați componenta „Contor2” și în fereastra de proprietăți extindeți „Max” și setați „Valoare” la: 6
10. Selectați componenta „Contor2” și în fereastra de proprietăți extindeți „Min” și setați „Valoare” la: 0CONSTRUIREA MENIULUI:
11. Selectați componenta „Array1” (Text Array) și faceți dublu clic pe ea.-În fereastra elementelor trageți 4X „Value” în partea stângă-În partea stângă Selectați „Item [1]” și în fereastra de proprietăți setați „Value” la: SET ORE-În partea stângă Selectați „Element [2]” și în fereastra de proprietăți setați „Valoare” la: SET MINUTE-În partea stângă Selectați „Element [3]” și în fereastra de proprietăți setați „Valoare” la: SET SECUNDE-În partea stângă Selectați „Element [4]” și în fereastra de proprietăți setați „Valoare” la: SET BRIGHTNESS Închideți fereastra Elements. SETAREA VALORILOR PENTRU BRIGHTNESS:

12. Selectați componenta „Array2” (matrice analogică) și faceți dublu clic pe ea.-În fereastra elementelor trageți 6X „Value” în partea stângă-În partea stângă Selectați „Item [0]” și în fereastra de proprietăți setați „Value” la: 1

    -În partea stângă Selectați „Element [1]” și în fereastra de proprietăți setați „Valoare” la: 0,9

    -În partea stângă Selectați „Element [2]” și în fereastra de proprietăți setați „Valoare” la: 0,8 -În partea stângă Selectați „Element [3]” și în fereastra de proprietăți setați „Valoare” la: 0,7-Activat în partea stângă Selectați „Element [4]” și în fereastra de proprietăți setați „Valoare” la: 0,6-În partea stângă Selectați „Element [5]” și în fereastra de proprietăți setați „Valoare” la: 0,55

Pasul 6: În componentele Visuino Connect

1. Conectați pinul "M5 Stack Stick C" A (M5) la pinul "Button2" [In]
2. Conectați pinul "M5 Stack Stick C" [B] la pinul "Button1" [In]
3. Conectați pinul "Button2" [Out] la pinul "RepeatButton1" [In]
4. Conectați pinul "RepeatButton1" [Out] la pinul "ClockDemmux1" [In]
5. Conectați pinul "Button1" [Out] la pinul "Counter1" [In]
6. Conectați pinul „M5 Stack Stick C”> „Ceas cu alarmă în timp real (RTC)” [Out] la pinul „DecodeDateTime1” [In]
7. Conectați pinul "DecodeDateTime1" [Ora] la "FormattedText1"> pinul "TextElement1" [În]
8. Conectați pinul "DecodeDateTime1" [Minut] la "FormattedText1"> pinul "TextElement2" [În]
9. Conectați pinul "DecodeDateTime1" [Second] la "FormattedText1"> pinul "TextElement3" [In]
10. Conectați pinul „FormattedText1” [Out] la placa „M5 Stack Stick C”> „Afișați ST7735”> pinul „Field Field1” [In]
11. Conectați pinul "Counter1" [Out] la pinul "ClockDemmux1" [Selectați] și la pinul "Array1" [Index]
12. Conectați pinul „Counter2” [Out] la pinul „Array2” [Index]
13. Conectați pinul "Array1" [Out] la placa "M5 Stack Stick C"> "Afișați ST7735"> PIN "Text Field2" [In]
14. Conectați pinul "Array2" [Out] la placa "M5 Stack Stick C"> "Display ST7735"> pin [Luminozitate]
15. Conectați pinul "ClockDemmux1" [1] la placa "M5 Stack Stick C"> "Ceas cu alarmă în timp real (RTC)"> Pinul "Set Hour1" [Ceas]
16. Conectați pinul "ClockDemmux1" [2] la placa "M5 Stack Stick C"> "Ceas cu alarmă în timp real (RTC)"> Pinul "Set Minute1" [Ceas]
17. Conectați pinul "ClockDemmux1" [3] la placa "M5 Stack Stick C"> "Ceas cu alarmă în timp real (RTC)"> Pinul "Set Second1" [Ceas]
18. Conectați pinul "ClockDemmux1" [4] la pinul "Counter2" [In]

Pasul 7: Generați, compilați și încărcați codul Arduino

În Visuino, în partea de jos faceți clic pe fila „Construiți”, asigurați-vă că este selectat portul corect, apoi faceți clic pe butonul „Compilați / Construiți și încărcați”.

Pasul 8: Joacă

Dacă porniți modulul M5Sticks, afișajul ar trebui să înceapă să arate ora. Puteți schimba timpul și luminozitatea folosind butoanele „B” pentru a afișa meniul și comutarea între (Setați orele, setați minutele, setați secunde, setați luminozitatea) și utilizați butonul „M5” pentru setarea acestuia.

Felicitări! V-ați finalizat proiectul M5Sticks cu Visuino. De asemenea, este atașat proiectul Visuino, pe care l-am creat pentru acest Instructable, îl puteți descărca de aici. Puteți să o descărcați și să o deschideți în Visuino: