DIY So zeigen Sie die Zeit auf dem M5StickC ESP32 mit Visuino an - Einfach zu tun: 9 Schritte

2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-23 12:52

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

Schritt 1: Was Sie brauchen

1. M5StickC ESP32: hier erhältlich
2. 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 und festlegen

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 auf "+", um es zu erweitern, wählen Sie "Display ST7735" und klicken Sie auf "+", um es zu erweitern
3. Setzen Sie die Ausrichtung auf "goRight" < dies bedeutet, wie die Uhrzeit auf dem LCD ausgerichtet wird
4. Wählen Sie "Elemente" und klicken Sie auf die blaue Schaltfläche mit 3 Punkten…
5. Der Elements-Dialog wird angezeigt
6. Ziehen Sie im Elements-Dialog "Textfeld" von rechts nach links

Klicken Sie auf das "Textfeld1" auf der linken Seite, um es auszuwählen, klicken Sie dann im "Eigenschaftenfenster" auf die Farbe und stellen Sie es auf "aclOrange" ein

-auch in den Eigenschaftenfenstern X:10 und Y:20 einstellen. Hier möchten Sie die Zeit auf dem LCD anzeigen

-Set size:3 Dies ist die Schriftgröße der Zeit

-Sie können die Textgröße und -farbe einstellen, wenn Sie möchten

Schließen Sie das Elementfenster

Optional:

Klicken Sie auf das Board "M5 Stack Stick C", um es auszuwählen

Wählen Sie im Fenster "Eigenschaften" "Module" und klicken Sie auf "+", um es zu erweitern. Wählen Sie "Display ST7735" und klicken Sie auf "+", um es zu erweitern. Sie sehen "Hintergrundfarbe", dies ist die Standardfarbe der Anzeige, ändern Sie sie in Ihre Lieblingsfarbe, Sie können auch die Displayhelligkeit einstellen, die Standardeinstellung ist 1 (max). Sie können sie auf 0,5 oder einen anderen Wert einstellen, um sie dunkler zu machen

6. Komponente "Datum/Uhrzeit dekodieren (aufteilen)" hinzufügen 7. 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

Schritt 5: In Visuino Connect-Komponenten

• Verbinden Sie "M5 Stack Stick C"> Real Time Alarm Clock (RTC)> Pin [Out] mit dem Komponenten-Pin "DecodeDateTime1" [In]
• Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Stunde] mit dem "FormattedText1"-Komponenten-Pin "TextElement1" [In]
• Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Minute] mit dem "FormattedText1"-Komponenten-Pin "TextElement2" [In]
• Verbinden Sie den Komponenten-Pin "DecodeDateTime1" [Second] mit dem "FormattedText1"-Komponenten-Pin "TextElement3" [In]
• Verbinden Sie den "FormattedText1"-Komponenten-Pin [Out] mit dem "M5 Stack Stick C"-Board "Display ST7735"> "Text Field1"-Pin [In]

Schritt 6: 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 7: Spielen

Wenn Sie das M5Sticks-Modul mit Strom versorgen, sollte das Display die Uhrzeit anzeigen.

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: Extra: Einfacher Trick

Sie können die aktuelle Uhrzeit auf Ihrem Computer verwenden, als Sie den Code in Arduino kompiliert haben.

Legen Sie dazu einfach eine Komponente "Compile Date/Time" ab und verbinden Sie sie mit dem Pin "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" [Set]

Sie können die Projektdatei mit diesem Trick hier herunterladen.

Schritt 9: Im nächsten Tutorial

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