M5StickC Cool aussehende Uhr mit Menü und Helligkeitssteuerung - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

In diesem Tutorial lernen wir, wie man ESP32 M5Stack StickC mit Arduino IDE und Visuino programmiert, um eine Uhrzeit auf dem LCD anzuzeigen und auch die Uhrzeit und die Helligkeit über das Menü und die StickC-Tasten einzustellen.

Sehen Sie sich ein Demonstrationsvideo an.

Schritt 1: Was Sie brauchen

M5StickC ESP32: hier erhältlich

Visuino-Programm: Visuino herunterladen

Hinweis: Sehen Sie sich dieses Tutorial hier an, um die StickC ESP32-Karte zu installieren

Schritt 2: Starten Sie Visuino und wählen Sie den Kartentyp M5 Stack Stick C aus

Starten Sie Visuino wie im ersten Bild gezeigt Klicken Sie auf die Schaltfläche "Tools" auf der Arduino-Komponente (Bild 1) in Visuino Wenn der Dialog erscheint, wählen Sie "M5 Stack Stick C" wie in Bild 2 gezeigt

Schritt 3: In Visuino das StickC Board einstellen

1. Klicken Sie auf das Board "M5 Stack Stick C", um es auszuwählen
2. Wählen Sie im Fenster "Eigenschaften" "Module" und klicken Sie zum Erweitern auf "+".
3. Wählen Sie "Display ST7735" und klicken Sie auf "+", um es zu erweitern.
4. Setzen Sie "Ausrichtung" auf "goRight"
5. Setzen Sie "Hintergrundfarbe" auf "ClBlack"
6. Wählen Sie "Elemente" und klicken Sie auf die blaue Schaltfläche mit 3 Punkten…
7. Der Elements-Dialog wird angezeigt
8. Ziehen Sie im Elements-Dialog 2X "Textfeld" von der rechten Seite nach links
9. Klicken Sie auf das "Textfeld1" auf der linken Seite, um es auszuwählen, dann klicken Sie im "Eigenschaftenfenster" auf "Farbe" und stellen Sie es auf "aclOrange" ein und klicken Sie auf "Füllfarbe" und stellen Sie es auf "aclBlack" ein (Sie kann mit den Farben spielen, wenn Sie möchten) -auch in den Eigenschaftenfenstern setzen Sie X:10 und Y:20 hier möchten Sie die Uhrzeit auf dem LCD anzeigen-Größe:3 einstellen (dies ist die Schriftgröße der Uhrzeit)
10. Klicken Sie auf das "Textfeld2" auf der linken Seite, um es auszuwählen, klicken Sie dann im "Eigenschaftenfenster" auf "Farbe" und stellen Sie es auf "aclAqua" ein und klicken Sie auf "Füllfarbe" und stellen Sie es auf "aclBlack" ein

(Sie können mit den Farben spielen, wenn Sie möchten) -Setzen Sie "Initial Value" auf: Set HOUR

- auch im Eigenschaftsfenster X:10 und Y:2 einstellen hier soll das Menü auf dem LCD angezeigt werden -Größe:1 einstellen (das ist die Schriftgröße des Menüs)

Schließen Sie das Elementfenster

1. Klicken Sie auf das Board "M5 Stack Stick C", um es auszuwählen
2. Wählen Sie im Fenster "Eigenschaften" "Module" und klicken Sie zum Erweitern auf "+".
3. Wählen Sie "Display Real Time Alarm Clock (RTC)" und klicken Sie auf "+", um es zu erweitern.
4. Wählen Sie "Elemente" und klicken Sie auf die blaue Schaltfläche mit 3 Punkten…
5. Ziehen Sie im Elements-Dialog "Set Hour" von der rechten Seite nach links - und im Eigenschaftsfenster setzen Sie "Add Value" auf: True und "Value" auf: 1
6. Ziehen Sie im Elements-Dialog "Set Minute" von der rechten Seite nach links - und im Eigenschaftenfenster setzen Sie "Add Value" auf: True und "Value" auf: 1
7. Ziehen Sie im Elements-Dialog "Set Second" von der rechten Seite nach links - und im Eigenschaftsfenster setzen Sie "Add Value" auf: True und "Value" auf: 1

Schließen Sie das Elementfenster

Schritt 4: In Visuino Komponenten hinzufügen

1. 2x Komponente "Entprellungstaste" hinzufügen
2. Komponente "Auto Repeat Button" hinzufügen
3. Komponente "Text Array" hinzufügen
4. Komponente "Analog Array" hinzufügen
5. 2x "Zähler"-Komponente hinzufügen
6. Komponente "Clock Demux (Multiple Output Channel Switch)" hinzufügen
7. Komponente "Decode (Split) Date/Time" hinzufügen
8. Komponente "FormattedText1" hinzufügen

Schritt 5: In Visuino Set-Komponenten

1. Wählen Sie die Komponente "FormattedText1" und setzen Sie im Fenster "Eigenschaften" "Text" auf: %0:%1:%2
2. Doppelklicken Sie auf die Komponente "FormattedText1" und ziehen Sie im Dialog Elemente 3x "Text Element" nach links
3. Wählen Sie auf der linken Seite "TextElement1" und setzen Sie im Eigenschaftsfenster "Fill Character" auf: 0 und "Length" auf: 2
4. Wählen Sie auf der linken Seite "TextElement2" aus und stellen Sie im Eigenschaftsfenster "Fill Character" auf: 0 und "Length" auf: 2
5. Wählen Sie auf der linken Seite "TextElement3" und setzen Sie im Eigenschaftsfenster "Fill Character" auf: 0 und "Length" auf: 2
6. Wählen Sie die Komponente "ClockDemmux1" und stellen Sie im Eigenschaftenfenster "Output Pins" auf: 5
7. Wählen Sie die Komponente "Zähler1" aus und erweitern Sie im Eigenschaftenfenster "Max" und setzen Sie "Wert" auf: 4
8. Wählen Sie die Komponente "Zähler1" aus und erweitern Sie im Eigenschaftsfenster "Min" und setzen Sie "Wert" auf: 0
9. Wählen Sie die Komponente "Counter2" aus und erweitern Sie im Eigenschaftenfenster "Max" und setzen Sie "Value" auf: 6
10. Wählen Sie die Komponente "Zähler2" und erweitern Sie im Eigenschaftenfenster "Min" und setzen Sie "Wert" auf: 0AUFBAU DES MENÜS:
11. Wählen Sie die Komponente "Array1" (Text Array) und doppelklicken Sie darauf.-Im Elementefenster 4X "Wert" nach links ziehen-Auf der linken Seite "Element[1]" auswählen und im Eigenschaftenfenster "Wert" einstellen zu: STUNDEN EINSTELLEN - Auf der linken Seite "Item[2]" auswählen und im Eigenschaftenfenster "Wert" einstellen auf: SET MINUTES - Auf der linken Seite "Item[3]" auswählen und im Eigenschaftenfenster "Wert" einstellen zu: SECONDS SETZEN-Auf der linken Seite Wählen Sie "Item[4]" und im Eigenschaftsfenster "Value" auf: SET BRIGHTNESSSchließen Sie das Elements-Fenster. EINSTELLEN DER WERTE FÜR DIE HELLIGKEIT:

12. Wählen Sie die Komponente "Array2" (Analog Array) und doppelklicken Sie darauf.-Im Elementfenster 6X "Wert" nach links ziehen-Auf der linken Seite "Item[0]" auswählen und im Eigenschaftenfenster "Wert" einstellen bis 1

    -Auf der linken Seite "Item[1]" auswählen und im Eigenschaftenfenster "Value" auf 0.9. setzen

    -Auf der linken Seite "Item[2]" auswählen und im Eigenschaftsfenster "Wert" auf: 0,8 setzen -Auf der linken Seite "Item[3]" auswählen und im Eigenschaftsfenster "Wert" auf: 0.7-On auf der linken Seite "Item[4]" auswählen und im Eigenschaftsfenster "Wert" auf: 0.6 setzen - Auf der linken Seite "Item[5]" auswählen und im Eigenschaftsfenster "Wert" auf: 0.55. einstellen

Schritt 6: In Visuino Connect-Komponenten

1. Verbinden Sie den "M5 Stack Stick C" Pin A (M5) mit dem "Button2" Pin [In]
2. Verbinden Sie den "M5 Stack Stick C" Pin [B] mit dem "Button1" Pin [In]
3. Verbinden Sie den "Button2"-Pin [Out] mit dem "RepeatButton1"-Pin [In]
4. Verbinden Sie den "RepeatButton1"-Pin [Out] mit dem "ClockDemmux1"-Pin [In]
5. Verbinden Sie den "Button1"-Pin [Out] mit dem "Counter1"-Pin [In]
6. Verbinden Sie "M5 Stack Stick C" > "Real Time Alarm Clock (RTC)" Pin [Out] mit "DecodeDateTime1" Pin [In]
7. Verbinden Sie den Pin "DecodeDateTime1" [Stunde] mit dem Pin "FormattedText1"> "TextElement1" [In]
8. Verbinden Sie den Pin "DecodeDateTime1" [Minute] mit dem Pin "FormattedText1"> "TextElement2" [In]
9. Verbinden Sie den Pin "DecodeDateTime1" [Second] mit dem Pin "FormattedText1"> "TextElement3" [In]
10. Verbinden Sie den Pin "FormattedText1" [Out] mit der Platine "M5 Stack Stick C" > "Display ST7735" > Pin "Text Field1" [In]
11. Verbinden Sie den Pin "Counter1" [Out] mit dem Pin "ClockDemmux1" [Select] und dem Pin "Array1" [Index]
12. Verbinden Sie den Pin "Counter2" [Out] mit dem Pin "Array2" [Index]
13. Verbinden Sie "Array1" Pin [Out] mit "M5 Stack Stick C" Board > "Display ST7735" > "Text Field2" Pin [In]
14. Verbinden Sie "Array2" Pin [Out] mit "M5 Stack Stick C" Board > "Display ST7735" > Pin [Helligkeit]
15. Verbinden Sie den "ClockDemmux1"-Pin [1] mit dem "M5 Stack Stick C"-Board > "Real Time Alarm Clock (RTC)" > "Set Hour1"-Pin [Clock]
16. Verbinden Sie den "ClockDemmux1"-Pin [2] mit der "M5 Stack Stick C"-Platine > "Real Time Alarm Clock (RTC)" > "Set Minute1"-Pin [Clock]
17. Verbinden Sie den „ClockDemmux1“-Pin [3] mit der „M5 Stack Stick C“-Platine > „Real Time Alarm Clock (RTC)“> „Set Second1“-Pin [Clock]
18. Verbinden Sie den "ClockDemmux1"-Pin[4] mit dem "Counter2"-Pin [In]

Schritt 7: Generieren, Kompilieren und Hochladen des Arduino-Codes

Klicken Sie in Visuino unten auf die Registerkarte "Build", stellen Sie sicher, dass der richtige Port ausgewählt ist, und klicken Sie dann auf die Schaltfläche "Compile/Build and Upload".

Schritt 8: Spielen

Wenn Sie das M5Sticks-Modul mit Strom versorgen, sollte das Display die Uhrzeit anzeigen. Mit den Tasten „B“können Sie Uhrzeit und Helligkeit ändern, um das Menü anzuzeigen und zwischen (Stunden einstellen, Minuten einstellen, Sekunden einstellen, Helligkeit einstellen) umzuschalten und mit Taste „M5“einstellen.

Herzliche Glückwünsche! Sie haben Ihr M5Sticks-Projekt mit Visuino abgeschlossen. Ebenfalls beigefügt ist das Visuino-Projekt, das ich für dieses Instructable erstellt habe, Sie können es hier herunterladen. Sie können es in Visuino herunterladen und öffnen: