Günstige Touchdisplays für Home Assistant waren bisher oft ein Thema für Bastler: flashen, YAML schreiben, Konfiguration pflegen und hoffen, dass am Ende alles sauber läuft. Tessera ändert genau das und macht aus preiswerten ESP32-Displays lokale Bedienpanels, die du im Browser per Drag-and-drop gestaltest und direkt an das Display sendest.
Das Spannende daran: Die Lösung läuft lokal, ohne Cloud, ohne Abo und ohne dass wir für das Layout eine einzige Zeile YAML schreiben müssen. Gerade im Vergleich zu fertigen Wanddisplays wie dem Shelly Wall Display oder dem Sonoff NSPanel Pro ist das ein richtig spannender Ansatz für Home Assistant.
Was ist Tessera?
Tessera ist ein ESPHome Screen Manager für Home Assistant. Unter der Haube steckt also ESPHome, als Nutzer arbeitest du aber hauptsächlich mit einer grafischen Oberfläche: Display einmal per USB einrichten, anschließend Seiten und Kacheln im Browser zusammenziehen und per WLAN auf das Display übertragen.
Entwickelt wird Tessera von Max Gramser als unabhängiges Open-Source-Projekt. Besonders wichtig: Es gibt kein Tessera-Benutzerkonto, keine Tessera-Cloud und keine laufenden Abo-Kosten. Alles läuft lokal in deinem eigenen Home-Assistant-System.
Wenn du Tessera erst einmal ausprobieren möchtest, brauchst du nicht einmal Hardware. Die Editor-Demo läuft direkt im Browser und vermittelt sehr gut, wie sich Seiten, Kacheln und Entitäten später anfühlen: Tessera Editor-Demo im Browser.
Die Tessera App findest du hier: Tessera App.
Mein Testdisplay: 4 Zoll ESP32-Touchdisplay
Im Video verwende ich ein quadratisches 4-Zoll-Display von Guition mit ESP32-S3. Das Format ist damit sehr nah an bekannten Wanddisplays: Das Sonoff NSPanel Pro liegt bei 3,95 Zoll, das Shelly Wall Display bei 4 Zoll. Der große Unterschied: Bei Tessera entscheidest du selbst, was auf dem Display angezeigt wird.
Das Display wird über USB-C mit Strom versorgt. Für die Ersteinrichtung ist wichtig, dass du ein echtes Datenkabel verwendest und kein reines Ladekabel. Nach der Einrichtung brauchst du USB nur noch zur Stromversorgung, denn Layout-Änderungen werden anschließend drahtlos per WLAN übertragen.
Das 4-Zoll-Modell ist aber nur ein Beispiel. Tessera unterstützt weitere ESP32-Displays in unterschiedlichen Größen. Wer also lieber ein kleineres Display oder ein größeres Panel nutzen möchte, sollte prüfen, welche Modelle aktuell vom Projekt unterstützt werden.
So ist Tessera aufgebaut
Tessera besteht im Prinzip aus zwei Komponenten:
- Firmware auf dem Display: Sie bringt das ESP32-Display in dein Netzwerk und verbindet es mit Home Assistant.
- Tessera Screen Manager in Home Assistant: Darüber erstellst du Layouts, Seiten, Kacheln, Meldungen und Einstellungen für dein Display.
Die Einrichtung folgt dabei einem sehr klaren Ablauf. Auf der Tessera-Seite beantwortest du zunächst drei Fragen:
- Welches Display verwendest du?
- Wie läuft dein Home Assistant, zum Beispiel Home Assistant OS oder Docker?
- Wo ist das Display per USB angeschlossen: am Home-Assistant-Rechner oder an deinem Computer?
Danach erstellt Tessera eine passende Checkliste für die Einrichtung.
Tessera Screen Manager installieren
Der erste Schritt ist die Installation des Screen Managers in Home Assistant. Der Ablauf ist angenehm einfach:
- Auf der Tessera-Seite den passenden Guide auswählen.
- Über Add to Home Assistant das Repository hinzufügen.
- In Home Assistant nach Tessera suchen.
- Den Tessera Screen Manager installieren.
- Optional aktivieren, dass der Screen Manager beim Systemstart automatisch startet.
- Optional aktivieren, dass Tessera in der Seitenleiste angezeigt wird.
Damit ist die Home-Assistant-Seite vorbereitet. Bei mir gab es beim ersten Start allerdings einen Portkonflikt. Dazu gleich mehr im Abschnitt zu den Stolpersteinen.
Display flashen und mit Home Assistant verbinden
Im nächsten Schritt kommt das Display dazu. Du verbindest es per USB mit deinem Home-Assistant-Rechner oder mit dem Computer, an dem du gerade arbeitest. Wichtig ist hier noch einmal: Es muss ein Datenkabel sein.
Danach gehst du im Screen Manager durch den Assistenten:
- Assistenten im Tessera Screen Manager starten.
- Das passende Board beziehungsweise Display auswählen.
- Dem Display einen Namen geben, zum Beispiel Büro.
- Installation starten.
- Warten, bis Tessera die Firmware baut und auf das Display spielt.
Das Erstellen und Flashen der Firmware kann einen Moment dauern. Danach verbindet sich das Display mit deinem WLAN. Tessera nutzt dafür die WLAN-Daten aus der ESPHome secrets.yaml, sofern sie in deiner Umgebung bereits hinterlegt sind.
Anschließend taucht das Display im Screen Manager auf. Zusätzlich wird es in Home Assistant als ESPHome-Gerät erkannt. Unter Einstellungen > Geräte & Dienste bestätigst du das neue Gerät, danach stehen dir die zugehörigen Entitäten in Home Assistant zur Verfügung.
Typische Stolpersteine bei der Einrichtung
Auch wenn die Einrichtung insgesamt sehr einfach ist, gibt es ein paar Punkte, über die man stolpern kann.
Portkonflikt beim Start des Tessera Screen Managers
Bei mir startete die Tessera App zunächst nicht, weil ein Port bereits belegt war. In meinem Fall nutzte die SwitchBot MQTT App genau diesen Port. Tessera verwendet den Port unter anderem, um Kamerabilder oder Albumcover an das Display zu übertragen.
Die Lösung ist einfach:
- In der Tessera App die Konfiguration öffnen.
- Zum Bereich Netzwerk wechseln.
- Einen anderen freien Port eintragen, zum Beispiel 8198.
- Speichern und Tessera neu starten.
Wichtig: Solche Konflikte siehst du nicht unbedingt im normalen Terminal von Home Assistant, weil Add-ons in eigenen Containern laufen. Schau stattdessen in das Supervisor-Protokoll unter Einstellungen > System > Protokolle.
Display taucht beim Flashen im Browser nicht auf
Wenn dein Display in der Auswahlliste des Browsers nicht erscheint und du dort nur Einträge wie Bluetooth oder Debug-Konsole siehst, liegt es sehr oft am Kabel. Nutze ein echtes Datenkabel und stecke es möglichst direkt am Rechner ein, nicht über einen USB-Hub.
Falls das nicht hilft, kannst du beim Einstecken die Boot-Taste auf der Rückseite des Displays gedrückt halten. Außerdem wichtig: Wenn du das Flashen über den Browser machst, muss die Verbindung zu Home Assistant über HTTPS laufen, zum Beispiel über Nabu Casa.
Der Tessera Screen Manager: Layouts per Drag-and-drop bauen
Das Herzstück von Tessera ist der Screen Manager. Hier baust du die Oberfläche für dein Display direkt im Browser. Der Editor ist zweigeteilt: Oben siehst du die Seiten deines Displays, unten die verfügbaren Entitäten aus Home Assistant.
Du kannst Entitäten auf unterschiedliche Weise finden:
- über die Suche nach dem Namen,
- über Geräte,
- über Bereiche,
- über Kategorien,
- oder durch Scrollen in der Entitätenliste.
Eine neue Kachel ziehst du einfach von unten auf die gewünschte Seite. Danach kannst du die Größe anpassen, Optionen setzen oder die Kachel wieder löschen. Genau das macht Tessera so stark: Es fühlt sich nicht nach klassischer ESPHome-Konfiguration an, sondern wie ein visueller Dashboard-Editor.
Beispiel: Media Player als eigene Seite
Als erstes Beispiel habe ich eine Seite für einen Media Player erstellt. Der Ablauf ist simpel:
- In der Entitätenliste die Kategorie Medien auswählen.
- Den gewünschten Media Player suchen, zum Beispiel aus Music Assistant.
- Die Entität per Drag-and-drop auf die Display-Seite ziehen.
- Die Kachel auf die gewünschte Größe ziehen.
- Optionen für die Steuerung auswählen, zum Beispiel Lautstärke und Stumm.
- Über Speichern und Senden das Layout an das Display übertragen.
Nach dem Senden verschwindet der Hinweis auf ungespeicherte Änderungen und das Layout landet per WLAN auf dem Display. Änderungen gehen dabei sehr schnell, sodass man direkt ausprobieren und nachjustieren kann.
Bildschirmeinstellungen und Plugins
Neben dem Layout gibt es im Screen Manager weitere Bereiche. In den Bildschirmeinstellungen kannst du unter anderem Werte anpassen, die das Verhalten des Displays betreffen:
- Spalten und Zeilen,
- Helligkeit,
- Bildschirmschoner,
- Nachtmodus,
- Zeiten für Standby und Anzeigeverhalten.
Zusätzlich gibt es einen Plugin-Bereich. Den habe ich im Video noch nicht im Detail getestet, aber er zeigt, dass Tessera mehr ist als nur eine einfache Home-Assistant-Integration. Das Projekt ist darauf ausgelegt, erweitert zu werden.
Seiten benennen, Symbole vergeben und Navigation nutzen
Jede Seite kann eigene Einstellungen bekommen. Du kannst zum Beispiel den Titel ändern, ein Symbol vergeben und festlegen, wie die Navigation aussehen soll. Das ist vor allem praktisch, wenn du mehrere Seiten nutzt und per Wischgeste zwischen ihnen wechselst.
Wenn du von unten nach oben wischst, kann Tessera eine Seitennavigation anzeigen. Mit passenden Symbolen wirkt das deutlich übersichtlicher als mit generischen Platzhaltern. Für eine Musikseite bietet sich zum Beispiel ein Musik-Symbol an, für einen 3D-Drucker ein Drucker-Symbol.
Weitere Seiten erstellen: Beispiel 3D-Drucker
Eine zweite Seite lässt sich entweder komplett neu erstellen oder aus einer bestehenden Seite duplizieren. Das Duplizieren ist besonders praktisch, wenn mehrere Seiten ähnlich aufgebaut sein sollen.
Im Video habe ich als Beispiel eine Seite für einen Bambu-Lab-3D-Drucker erstellt:
- Neue Seite hinzufügen.
- Name vergeben, zum Beispiel Bambulab.
- Passendes Symbol auswählen.
- Entitäten des Druckers suchen.
- Sensoren und Werte per Drag-and-drop auf die Seite ziehen.
- Layout anpassen und an das Display senden.
Ein kleiner Hinweis aus der Praxis: Wenn du vorher nach einer bestimmten Kategorie gefiltert hast, zum Beispiel Medien, werden andere Entitäten nicht angezeigt. Dann musst du den Filter wieder auf Alle stellen.
Layouts exportieren und importieren
Wenn du mehrere Tessera-Displays einsetzen möchtest, musst du nicht jedes Layout komplett neu bauen. Über das Kontextmenü kannst du ein Layout exportieren und später wieder importieren.
Das ist praktisch, wenn du ein bestehendes Display als Vorlage nutzen möchtest. Du kannst zum Beispiel ein Layout mit Media Player, 3D-Drucker-Seite und Kameraseite sichern und anschließend auf ein weiteres Display übertragen.
Das Display in Home Assistant: 39 Entitäten für Automationen
Was mich besonders überrascht hat: Das Display bringt in Home Assistant ganze 39 Entitäten mit. Damit kannst du nicht nur Inhalte anzeigen, sondern das Display selbst in Automationen einbinden und steuern.
Beispiele für verfügbare Funktionen:
- Display schlafen legen oder aufwecken,
- Helligkeit für Tag, Nacht und Standby getrennt einstellen,
- Zeit bis zum Standby festlegen,
- Beginn und Ende des Nachtmodus definieren,
- Dark Mode steuern,
- Bildschirmdrehung ändern,
- Wischen zwischen Seiten aktivieren,
- automatische Rückkehr zu Seite 1 einstellen.
Gerade die Bildschirmdrehung ist in der Praxis sehr hilfreich. Wenn das USB-Kabel lieber links statt unten herausgeführt werden soll, drehst du das Display einfach entsprechend.
Da diese Funktionen als normale Home-Assistant-Entitäten vorhanden sind, lassen sie sich auch in Automationen nutzen. Ein Bewegungsmelder kann zum Beispiel das Display aufwecken, wenn jemand den Raum betritt. Oder das Display im Schlafzimmer schaltet automatisch in den Nachtmodus, wenn du ins Bett gehst.
Praxisbeispiel: Vollbildmeldungen auf dem Tessera-Display
Eine der stärksten Funktionen sind für mich die Tessera-Meldungen. Damit kann jedes Display Vollbildmeldungen anzeigen, ausgelöst durch Automationen in Home Assistant.
Die Meldung legt sich über die bestehende Anzeige, weckt das Display auf und kann auf Wunsch sogar die Hintergrundbeleuchtung blinken lassen. So erkennt man die Meldung auch aus dem Augenwinkel.
Für eine Meldung kannst du unter anderem festlegen:
- Titel,
- Untertitel,
- Symbol,
- Farbe,
- Tastentext,
- Anzeigedauer.
Auslösen kannst du diese Meldungen aus jeder Home-Assistant-Automation. Mögliche Beispiele:
- Jemand klingelt an der Tür.
- Die Waschmaschine ist fertig.
- Ein Fenster ist offen und es beginnt zu regnen.
- Ein Sensor meldet einen wichtigen Zustand.
Besonders praktisch: Ein Ereignis kann eine Meldung an alle Displays gleichzeitig schicken. Auf dem 4-Zoll-Display kann die Karte sogar ein Kamerabild der Haustür anzeigen. Zusätzlich kann die Taste auf der Meldung eine eigene Aktion ausführen.
Mein Beispiel: Wenn jemand klingelt und ich im Büro sitze, erscheint die Meldung auf dem Display. Ich tippe auf Komme und an der Tür wird eine Durchsage ausgegeben, dass ich gleich da bin. Gerade beim Paketboten kann das den entscheidenden Unterschied machen.
Beispiel YAML Code
alias: 'Tessera: Klingel auf Display Büro, Komme per Reolink Talk'
description: >-
Klingel löst Vollbild-Meldung mit Kamerabild auf Display Büro aus. Tipp auf
"Komme" spielt über Reolink Talk "Einen Moment, bin gleich an der Tür" ab.
triggers:
- trigger: state
entity_id: binary_sensor.klingel_besucher
to: 'on'
actions:
- event: esp_screens_show_alert
event_data:
screen: display-buro
title: Es klingelt
subtitle: Haustür
icon: doorbell
color: orange
button_text: Komme
timeout: 60
flash: true
camera: camera.klingel_standardauflosung
- wait_for_trigger:
- trigger: event
event_type: esphome.screen_alert
event_data:
action: ok
timeout:
hours: 0
minutes: 1
seconds: 0
milliseconds: 0
continue_on_timeout: false
- action: script.sprachnachricht_bin_gleich_da
mode: single
Mehr als 4 Zoll: Tessera unterstützt weitere Displaygrößen
Das 4-Zoll-Display ist nur der Einstieg. Tessera unterstützt verschiedene Displaygrößen, von kleinen 2,8-Zoll-Displays bis hin zu größeren 10,1-Zoll-Panels.
Auf größeren ESP32-P4-Displays sind sogar Live-Kamerabilder aus Home Assistant möglich. Mit passendem Mikrofon und Lautsprecher kann außerdem Sprachsteuerung über Assist interessant werden. Das eröffnet noch einmal ganz andere Möglichkeiten für lokale Home-Assistant-Bedienpanels.
Fazit: Tessera macht günstige Home-Assistant-Displays endlich einfach
Tessera trifft für mich genau den Punkt, der bei DIY-Displays bisher oft gefehlt hat: günstige Hardware, lokale Anbindung, einfache Einrichtung und ein Editor, den man wirklich ohne YAML-Kenntnisse bedienen kann.
Natürlich bleibt es ein DIY-Ansatz und je nach Setup kann es Stolpersteine wie Kabelprobleme oder Portkonflikte geben. Aber wenn das Display einmal eingerichtet ist, macht das Erstellen eigener Seiten richtig Spaß. Für Home-Assistant-Nutzer, die ein flexibles Touchdisplay ohne Cloud und ohne Abo suchen, ist Tessera aktuell eines der spannendsten Projekte überhaupt.
Weitere Home Assistant Beiträge findest du hier!
