März-Update: Erstelle Grafiken für ESPHome!

Viele Leute haben nach ESPHome gefragt — es ist ein System, mit dem du gängige Mikrocontroller in Smart-Home-Geräte verwandeln kannst. Wie immer bei Lopaka: Du fragst, wir liefern!

ESPHome-Plattform

Ich habe Unterstützung für die Standard-Display-Bibliothek hinzugefügt, inklusive Lambda-Code-Generierung, Bild- und Schriftartdeklarationen.

ESPHome hat seine eigene ein-Dateiige YAML-Konfiguration, die schwer zu verwalten sein kann. Jetzt kannst du zumindest schöne Grafiken für deine Projekte erstellen.

• einige beliebte Google Fonts hinzugefügt
• Wenn du gemalte Ebenen oder Icons hast, musst du Bilddateien manuell herunterladen und im esphome-Verzeichnis platzieren
• Prüfe die Code-Einstellungen für zusätzliche Optionen, die du vielleicht aktivieren möchtest

Benutzerdefinierte Hintergrundfarbe

Einige Nutzer berichteten, dass sie exotische Displays wie LCD oder E-Paper nutzen, und es ist hilfreich, das Design so nah wie möglich am echten Display in der Vorschau zu sehen. Deshalb haben wir eine Projekteinstellung für die Hintergrundfarbe hinzugefügt.

• Sie gilt projektweit für alle Screens
• sie beeinflusst die Code-Generierung nicht
• du musst möglicherweise manuell Code schreiben, um den Screen mit der gewünschten Farbe zu füllen

Freihand-Zeichenmodus

Ich habe das Gefühl, dass Lopaka nicht nur Code-Generierung ist — es kann auch ein Vektor-Pixel-Art-Editor sein! Im Freihand-Zeichenmodus sind alle Schriftarten, Farben und Zeichenwerkzeuge enthalten. Probier es aus!

Watchy — Open-Source-E-Paper-Uhr

Hast du je davon gehört? Es ist ein vollständig Open-Source-Wearable auf Basis des ESP32. https://watchy.sqfmi.com/

Das Beste ist, dass du mit Lopaka Grafiken dafür erstellen kannst! Wähle „AdafruitGFX Mono“, stelle die Auflösung auf 200x200px ein, und du bist startklar!! Hier ist das Beispiel: https://lopaka.app/gallery/6403/13327

Ein ESPHome-Display entwerfen, Schritt für Schritt

Hier ist der Workflow von einem leeren Projekt zu einem geflashten Gerät:

1. Erstelle ein Projekt, wähle ESPHome und stelle die Screen-Größe auf die Auflösung deines Displays ein.
2. Zeichne das Layout. Gib jeder Ebene einen klaren Namen, da Ebenennamen zu Kommentaren und Variablennamen in der Ausgabe werden.
3. Aktiviere in den Code-Einstellungen Schriftarten einbinden für Text, Bilder deklarieren für Icons und gemalte Grafiken und Variablen deklarieren, wenn der Screen Live-Sensordaten zeigt.
4. Schalte Wrapper-Funktion aus, wenn du in einen vorhandenen lambda:-Block einfügst, sodass nur die it.*-Draw-Aufrufe kopiert werden.
5. Kopiere den Code in dein YAML. Platziere die font:- und image:-Blöcke an der Wurzel der Datei, nicht innerhalb des Lambda.
6. Lade Bild-Assets aus Code-Einstellungen → Bilder herunter und platziere sie im images/-Ordner neben deinem YAML.

ESPHome lädt Schriftarten von Google Fonts, wenn es die Firmware baut, sodass keine Schriftdateien zu verwalten sind. Die ESPHome-Anleitung behandelt jeden Schritt im Detail, mit Fehlerbehebung für gängige YAML-Fehler. Ein vollständiges Beispiel findest du im ESP32 Smart Home Dashboard Tutorial.

Mehr zu E-Paper

E-Paper-Projekte wie Watchy können auch GxEPD2 nutzen, das E-Paper-Paletten mit Schwarz, Weiß, Grau, Rot und anderen Farben unterstützt. Lies, wie andere Maker E-Paper-UIs in WeatherPaper und Cineink entworfen haben.