DIY, wie man eine cool aussehende Uhr macht – StickC – Einfach zu tun: 8 Schritte

2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-13 06:56

In diesem Tutorial lernen wir, wie man ESP32 M5Stack StickC mit Arduino IDE und Visuino programmiert, um eine Zeit auf dem LCD anzuzeigen und die Zeit auch mit den StickC-Tasten einzustellen.

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 Komponenten hinzufügen

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 "Textfeld" von rechts 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 "aclWhite" 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 Eigenschaftsfenstern X:10 und Y:20 einstellen hier soll die Uhrzeit auf dem LCD angezeigt werden -Größe:3 einstellen (das ist die Schriftgröße der Uhrzeit)Elementfenster schließen

10. Komponente "Datum/Uhrzeit decodieren (aufteilen)" hinzufügen
11. Komponente "Formatierter Text" hinzufügen

Schritt 4: In Visuino Set-Komponenten

1. Wählen Sie die Komponente "FormattedTxt1" 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 das Board "M5 Stack Stick C" aus und wählen Sie im Fenster "Eigenschaften" "Module" > "Real Time Alarm Clock (RTC)" > "Elements"
4. Klicke auf den blauen Button mit 3 Punkten und ziehe im Elements-Dialog "Set Hour", "Set Minute" und "Set Second" auf die linke Seite
5. Wählen Sie links das Element "Set Hour1" und setzen Sie im Fenster "Eigenschaften" "Add Value" auf "True" und "Value" auf "1"
6. Wählen Sie links das Element "Minute1 setzen" und setzen Sie im Fenster "Eigenschaften" "Wert hinzufügen" auf "Wahr" und "Wert" auf "1"
7. Wählen Sie links das Element "Second1 setzen" und setzen Sie im Fenster "Eigenschaften" "Wert hinzufügen" auf "Wahr" und "Wert" auf "1"

Erläuterung:

"Wert" bedeutet, wie viel wir mit jedem Klick auf eine Schaltfläche zur bestehenden Zeit hinzufügen möchten (entweder Stunden, Minuten oder Sekunden). "Wert hinzufügen" bedeutet, dass wir den Wert zur bestehenden Zeit hinzufügen möchten

Schritt 5: In Visuino Connect-Komponenten

1. Verbinden Sie "M5 Stack Stick C"> Real Time Alarm Clock (RTC)> Pin [Out] mit dem Komponenten-Pin "DecodeDateTime1" [In]
2. Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Stunde] mit dem "FormattedText1"-Komponenten-Pin "TextElement1" [In]
3. Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Minute] mit dem "FormattedText1"-Komponenten-Pin "TextElement2" [In]
4. Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Second] mit dem "FormattedText1"-Komponenten-Pin "TextElement3" [In]
5. Verbinden Sie den "FormattedText1"-Komponenten-Pin [Out] mit dem "M5 Stack Stick C"-Board "Display ST7735"> "Text Field1"-Pin [In]
6. Verbinden Sie „M5 Stack Stick C“> Tasten „A(M5)“mit „M5 Stack Stick C“> Echtzeitwecker (RTC) > „Set Hour1“Pin [Clock]
7. Verbinden Sie "M5 Stack Stick C" > Tasten "B" mit "M5 Stack Stick C" > Real Time Alarm Clock (RTC) > "Set Minute1" Pin [Clock]

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

1. 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 7: Spielen

Wenn Sie das M5Sticks-Modul mit Strom versorgen, sollte das Display die Uhrzeit anzeigen. Sie können die Uhrzeit mit den Tasten "M5" für Stunden und "B" für Minuten ändern

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:

Schritt 8: Im nächsten Tutorial

Im nächsten Tutorial zeige ich dir, wie du eine cool aussehende Uhr herstellst, bei der du die Zeit (Stunden, Minuten und Sekunden) mit den StickC-Tasten einstellen und ein einfaches Menü erstellen kannst! Bleiben Sie dran und sehen Sie sich meine anderen Tutorials hier an.