M5StickC Orologio dall'aspetto accattivante con menu e controllo della luminosità: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

In questo tutorial impareremo come programmare ESP32 M5Stack StickC con Arduino IDE e Visuino per visualizzare un'ora sull'LCD e anche impostare l'ora e la luminosità utilizzando il menu e i pulsanti StickC.

Guarda un video dimostrativo.

Passaggio 1: cosa ti servirà

M5StickC ESP32: puoi ottenerlo qui

Programma Visuino: Scarica Visuino

Nota: controlla questo tutorial qui su come installare la scheda StickC ESP32

Passaggio 2: avviare Visuino e selezionare il tipo di scheda M5 Stack Stick C

Avvia Visuino come mostrato nella prima immagine Fare clic sul pulsante "Strumenti" sul componente Arduino (Immagine 1) in Visuino Quando viene visualizzata la finestra di dialogo, selezionare "M5 Stack Stick C" come mostrato in Figura 2

Passaggio 3: in Visuino impostare la scheda StickC

1. Fare clic sulla scheda "M5 Stack Stick C" per selezionarla
2. Nella finestra "Proprietà" selezionare "Moduli" e fare clic su "+" per espandere,
3. Seleziona "Display ST7735" e fai clic su "+" per espanderlo,
4. Imposta "Orientamento" su "goRight"
5. Imposta "Colore di sfondo" su "ClBlack"
6. Seleziona "Elementi" e fai clic sul pulsante blu con 3 punti…
7. Apparirà la finestra di dialogo Elementi
8. Nella finestra di dialogo Elementi trascina 2X "Campo di testo" dal lato destro a sinistra
9. Fare clic su "Text Field1" sul lato sinistro per selezionarlo, quindi nella "finestra Proprietà" fare clic su "Color" e impostarlo su "aclOrange" e fare clic su "Fill Color" e impostarlo su "aclBlack" (si può giocare con i colori se lo si desidera) -anche nelle finestre delle proprietà impostare X:10 e Y:20 qui è dove si desidera visualizzare l'ora sull'LCD-impostare la dimensione:3 (questa è la dimensione del carattere dell'ora)
10. Fare clic su "Text Field2" sul lato sinistro per selezionarlo, quindi nella "finestra Proprietà" fare clic su "Color" e impostarlo su "aclAqua" e fare clic su "Fill Color" e impostarlo su "aclBlack"

(Puoi giocare con i colori se vuoi) -imposta "Valore iniziale" su: Imposta ORA

-anche nelle finestre delle proprietà impostare X:10 e Y:2 qui è dove si desidera visualizzare il menu sull'LCD -impostare size:1 (questa è la dimensione del carattere del menu)

Chiudi la finestra degli elementi

1. Fare clic sulla scheda "M5 Stack Stick C" per selezionarla
2. Nella finestra "Proprietà" selezionare "Moduli" e fare clic su "+" per espandere,
3. Seleziona "Visualizza sveglia in tempo reale (RTC)" e fai clic su "+" per espanderlo,
4. Seleziona "Elementi" e fai clic sul pulsante blu con 3 punti…
5. Nella finestra di dialogo degli elementi trascina "Imposta ora" da destra a sinistra e nella finestra delle proprietà imposta "Aggiungi valore" su: Vero e "Valore" su: 1
6. Nella finestra di dialogo elementi trascina "Imposta minuto" dal lato destro a sinistra e nella finestra delle proprietà imposta "Aggiungi valore" a: Vero e "Valore" a: 1
7. Nella finestra di dialogo degli elementi trascina "Imposta secondo" dal lato destro a sinistra e nella finestra delle proprietà imposta "Aggiungi valore" su: Vero e "Valore" su: 1

Chiudi la finestra degli elementi

Passaggio 4: in Visuino aggiungi componenti

1. Aggiungi 2x "pulsante antirimbalzo" componente
2. Aggiungi il componente "Pulsante di ripetizione automatica"
3. Aggiungi il componente "Text Array"
4. Aggiungi il componente "Array analogico"
5. Aggiungi 2x componente "Contatore"
6. Aggiungi il componente "Clock Demux (Multiple Output channel switch)"
7. Aggiungi il componente "Decode(Split) Date/Time"
8. Aggiungi il componente "FormattedText1"

Passaggio 5: nei componenti del set Visuino

1. Seleziona il componente "FormattedText1" e nella finestra "Proprietà" imposta "Testo" su: %0:%1:%2
2. Fare doppio clic sul componente "FormattedText1" e nella finestra di dialogo Elementi trascinare 3x "Elemento di testo" a sinistra
3. Seleziona "TextElement1" sul lato sinistro e nella finestra delle proprietà imposta "Fill Character" su: 0 e "Length" su: 2
4. Seleziona "TextElement2" sul lato sinistro e nella finestra delle proprietà imposta "Fill Character" su: 0 e "Length" su: 2
5. Seleziona "TextElement3" sul lato sinistro e nella finestra delle proprietà imposta "Fill Character" su: 0 e "Length" su: 2
6. Selezionare il componente "ClockDemmux1" e nella finestra delle proprietà impostare "Pin di uscita" su: 5
7. Selezionare il componente "Contatore1" e nella finestra delle proprietà espandere "Max" e impostare "Valore" su: 4
8. Selezionare il componente "Contatore1" e nella finestra delle proprietà espandere "Min" e impostare "Valore" su: 0
9. Selezionare il componente "Contatore2" e nella finestra delle proprietà espandere "Max" e impostare "Valore" su: 6
10. Selezionare il componente "Contatore2" e nella finestra delle proprietà espandere "Min" e impostare "Valore" su: 0COSTRUIRE IL MENU:
11. Seleziona il componente "Array1" (Text Array) e fai doppio clic su di esso.-Nella finestra degli elementi trascina 4X "Value" sul lato sinistro-Sul lato sinistro seleziona "Item[1]" e nella finestra delle proprietà imposta "Value" a: IMPOSTA ORE-A sinistra selezionare "Elemento[2]" e nella finestra delle proprietà impostare "Valore" su: IMPOSTA MINUTI-A sinistra selezionare "Elemento[3]" e nella finestra delle proprietà impostare "Valore" a: IMPOSTA SECONDI-Sul lato sinistro selezionare "Elemento[4]" e nella finestra delle proprietà impostare "Valore" su: IMPOSTA LUMINOSITÀChiudere la finestra Elementi. IMPOSTAZIONE DEI VALORI DI LUMINOSITÀ:

12. Selezionare il componente "Array2" (Analog Array) e fare doppio clic su di esso.-Nella finestra degli elementi trascinare 6X "Value" sul lato sinistro-Sul lato sinistro selezionare "Item[0]" e nella finestra delle proprietà impostare "Value" a: 1

    -Sul lato sinistro selezionare "Articolo[1]" e nella finestra delle proprietà impostare "Valore" su: 0.9

    -Sul lato sinistro selezionare "Articolo[2]" e nella finestra delle proprietà impostare "Valore" su: 0.8 -Sul lato sinistro selezionare "Articolo[3]" e nella finestra delle proprietà impostare "Valore" su: 0.7-On sul lato sinistro Selezionare "Articolo[4]" e nella finestra delle proprietà impostare "Valore" su: 0.6-Sul lato sinistro selezionare "Articolo[5]" e nella finestra delle proprietà impostare "Valore" su: 0,55

Passaggio 6: nei componenti di Visuino Connect

1. Collegare il pin A (M5) di "M5 Stack Stick C" al pin "Button2" [In]
2. Collegare il pin [B] di "M5 Stack Stick C" al pin "Button1" [In]
3. Collegare il pin "Button2" [Out] al pin "RepeatButton1" [In]
4. Collegare il pin "RepeatButton1" [Out] al pin "ClockDemmux1" [In]
5. Collegare il pin "Button1" [Out] al pin "Counter1" [In]
6. Collegare "M5 Stack Stick C" > pin "Real Time Alarm Clock (RTC)" [Out] al pin "DecodeDateTime1" [In]
7. Collega il pin "DecodeDateTime1"[Hour] al pin "FormattedText1">"TextElement1"[In]
8. Collega il pin "DecodeDateTime1"[Minute] al pin "FormattedText1">"TextElement2"[In]
9. Collega il pin "DecodeDateTime1"[Second] al pin "FormattedText1">"TextElement3"[In]
10. Collegare il pin "FormattedText1" [Out] alla scheda "M5 Stack Stick C" > "Display ST7735" > pin "Text Field1" [In]
11. Collegare il pin "Counter1"[Out] al pin "ClockDemmux1"[Select] e al pin "Array1"[Index]
12. Collegare il pin "Counter2"[Out] al pin "Array2"[Index]
13. Collegare il pin "Array1" [Out] alla scheda "M5 Stack Stick C" > "Display ST7735" > pin "Text Field2" [In]
14. Collegare il pin "Array2" [Out] alla scheda "M5 Stack Stick C" > "Display ST7735" > pin [Luminosità]
15. Collegare il pin "ClockDemmux1"[1] alla scheda "M5 Stack Stick C" > "Sveglia in tempo reale (RTC)" > pin "Set Hour1" [Clock]
16. Collegare il pin "ClockDemmux1"[2] alla scheda "M5 Stack Stick C" > "Sveglia in tempo reale (RTC)" > pin "Set Minute1" [Clock]
17. Collegare il pin "ClockDemmux1"[3] alla scheda "M5 Stack Stick C" > "Sveglia in tempo reale (RTC)" > pin "Set Second1" [Clock]
18. Collegare il pin "ClockDemmux1"[4] al pin "Counter2" [In]

Passaggio 7: genera, compila e carica il codice Arduino

In Visuino, in basso, fai clic sulla scheda "Build", assicurati che sia selezionata la porta corretta, quindi fai clic sul pulsante "Compila/Crea e carica".

Passaggio 8: gioca

Se si alimenta il modulo M5Sticks, il display dovrebbe iniziare a mostrare l'ora. È possibile modificare l'ora e la luminosità utilizzando i pulsanti "B" per visualizzare il Menu e passare da (Imposta ore, Imposta minuti, Imposta secondi, Imposta luminosità) e utilizzare il pulsante "M5" per impostarlo.

Congratulazioni! Hai completato il tuo progetto M5Sticks con Visuino. In allegato anche il progetto Visuino, che ho realizzato per questo Instructable, potete scaricarlo qui. Puoi scaricarlo e aprirlo in Visuino: