Die Ulanzi Pixel Clock TC001 ist für ca. 50€ zu erwerben und besitzt eine 8x32 RGB-Pixelmatrix. Verbaut ist in ihr ein ESP32 Mikrokontroller, der wahlweise mit ESPHome oder mit einer Custom-Firmware geflasht werden kann. Somit kann die Pixel Clock als universeller Notifier für Homeassistant eingesetzt werden. Neben der Möglichkeit animierte GIFs und statische Icons anzuzeigen, besitzt die Pixel Clock eine Reihe weiterer verbauter Sensoren für Helligkeit, Luftfeuchte und Temperatur und kann darüber hinaus auch (furchtbar klingende) RTTTL Sounds abspielen. Ein fest verbauter Akku mit 4400mAh erlaubt den kurzzeitigen Betrieb ohne Stromversorgung.

Custom Firmware: AWTRIX Light

Obwohl für die Pixel Clock eine ausführliche Anleitung zur Verwendung mit ESPHome existiert, habe ich mich für die Verwendung mit der Custom Firmware AWTRIX Light entschieden.

Die Firmware ist quelloffen und unterstützt Homeassistant Discovery, das eine unkomplizierte Integration mittels MQTT ermöglicht. Vorrausetzung ist, dass ein MQTT-Broker betrieben wird - bspw. mittels des Homeassistant Add-On Mosquitto Broker.

Firmware flashen

AWTRIX Light kann sehr einfach mittels ESP Web Tools direkt aus dem Chrome/Edge Browser auf das Gerät geflasht werden. Dazu muss die Pixel Clock lediglich mittels USB-C Kabel mit einem Rechner verbunden werden und der zugehörige Online Flasher im Browser aufgerufen werden. Nach einem erfolgreichen Flashen wechselt die Pixel Clock in den AP-Modus und spannt ein WiFi mit dem Namen AWTRIX LIGHT auf, das mit dem Passwort 12345678 verbunden werden kann. Nachdem die Verbindungsdaten zum heimischen WiFi hinterlegt wurden, startet die Pixel Clock neu und ist fortan im eigenen Netzwerk erreichbar. Die vergebene IP wird praktischerweise auf dem Display dargestellt.

Ersteinrichtung

Ruft man nun das Webinterface der Pixel Clock im Browser auf erscheint eine Oberfläche zur Konfiguration:

Die Menupunkte und ihre Einstellungsmöglichkeiten im Detail:

Menüpunkt Einstellungsmöglichkeiten
WiFi Setup Hier können bei Bedarf neue WiFi Credentials hinterlegt werden.
Network Netzwerkeinstellungen, wie DNS Server oder Vergabe einer statischen IP.
MQTT Hier müssen die MQTT-Broker Einstellungen hinterlegt und Homeassistant Discovery aktiviert werden. Auch kann hier der Prefix für MQTT festgelegt werden, über den die Pixel Clock angesprochen werden kann.
Time NTP Server zur zeitsynchronisation und Zeitzoneneinstellungen.
Icons Hierüber können Icons und animierte Gifs auf das lokale Dateisystem des ESP32 geladen werden, die in den dargstellten Nachrichten angezeigt werden können.
General Hier kann festgelegt werden, ob Text nur in Großbuchstaben (Uppercase) dargestellt werden soll.
Files Öffnet ein weiteres Browserfenster zur einfachen Verwaltung von Icons, RTTTL-Melodien, Alarmen oder der globalen Konfigurationsdatei von AWTRIX Light.
Update Erlaubt das Flashen von Firmware Updates direkt aus dem Webbrowser.

Sind alle Einstellungen getätigt und die MQTT-Konfigurationswerte korrekt eingegeben worden, erkennt Homeassistant automatisch alle Sensoren und Funktionen der Pixel Clock:

Bedienung

Im Gegensatz zur Standardfirmware von Ulanzi ermöglicht AWTRIX Light die Standardfunktionen, bspw. welche Infos dargestellt werden sollen, wie lange eine Info sichtbar sein soll oder wie schnell die Transition beim Bildschirmwechsel erfolgen soll, direkt über die 3 Buttons auf der Oberseite der Pixel Clock einzustellen. Dazu muss der mittlere Knopf 2 Sekunden gedrückt werden. Anschließend kann mit dem linken und rechten Button navigiert werden. Möchte man ein Untermenüpunkt aktivieren erfolgt dies über einen einfachen Klick auf den mittleren Button. Möchte man zurück ins Menü kehren erfolgt dies wieder durch ein zweisekündiges Gedrückthalten des mittleren Buttons.

Icons herunterladen

Icons können von der Konkurrenz von LaMetric genutzt und heruntergeladen werden. Neben vielen existierenden Icons und Gifs können auf der Herstellerseite auch eigene Icons generiert werden.

Hat man ein passendes Icon gefunden, muss lediglich die ID des Icons im Webinterface von AWTRIX Light im Menüpunkt Icons eingegeben werden. Es kann ein Preview generiert und die Datei direkt ins Dateisystem heruntergeladen werden. Die Icons liegen im Ordner /ICONS/und haben standardmäßig das Namensschema $ID.jpg oder $ID.gif. Die Dateinamen können direkt im Webinterface mit einem Rechtsklick und der Funktion Rename/Move in sprechende Namen umbenannt werden:

RTTTL Soundfiles speichern

Ring Tone Text Transfer Language, kurz RTTTL, Soundfiles können im Ordner /MELODIES/ im txt-Format abgelegt werden. Ein kleiner Fundus an RTTTL-Soundfiles kann hier entdeckt und verwendet werden. Möchte man beispielsweise die Titelmelodie der TV Serie Die Simpsons erklingen lassen, legt man die Datei /MELODIES/simpsons.txt an und fügt dort den folgenden Inhalt ein:

The Simpsons:d=4,o=5,b=160:c.6,e6,f#6,8a6,g.6,e6,c6,8a,8f#,8f#,8f#,2g,8p,8p,8f#,8f#,8f#,8g,a#.,8c6,8c6,8c6,c6

Nutzen als Notifier in Homeassistant

Über MQTT können nun Notifications direkt aus Homeassistant an die Pixel Clock gesendet werden. Entscheidend ist hierfür das vom Benutzer vergebene MQTT Präfix, welches in der Ersteinrichtung gewählt wurde. Ich habe an dieser Stelle den Präfix pixelclock gewählt. Möchte man grundsätzlich erst einmal testen wie Notifications auf der Clock aussehen, kann dies sehr einfach in den Developer Tools von Homeassistant erfolgen. Dazu den Menüpunkt Services auswählen und dann den Service mqtt.publish:

Es stehen grundsätzlich zwei Arten der Notification mit diversen Payload-Parametern zur Verfügung:

  1. Notification: Eine Textnachricht, ggf. mit Icon, die für eine definierbare Dauer dargestellt wird. Es besteht auch die Möglichkeit eine Notification solange darzustellen, bis sie durch einen Klick auf den mittleren Button entfernt wird.
  2. Custom Page: Standardmäßig wechselt die Pixel Clock durch ein definierte Liste an Infobildschirmen. Ist das Ende der Liste erreicht, beginnt sie von vorne. Diese Liste kann mit einer (oder mehreren) Custom Page erweitert werden.

Fall 1: Notification

Fiktiver Fall: Ein Rauchmelder in der Wohnung meldet einen Brand. Hierzu habe ich das Feuer-Icon mit der LaMetric-ID 24873 über das Webinterface von AWTRIX Light heruntergeladen und anschließend in feuer.gif umbenannt. Um nun dieses Icon und den Text Feuer! auf dem Display anzuzeigen wird der folgende Service Call gesendet:

service: mqtt.publish
data:
  qos: 2
  retain: false
  payload: >-
    {  
      "icon": "fire",  
      "text": "Feuer!",
      "hold": true
    }
  topic: pixelclock/notify

Der Parameter hold bewirkt dabei, dass die Darstellung erst beendet wird wenn sie durch einen Klick auf den mittleren Button bestätigt wird.

Fall 2: Custom Page

Fiktiver Fall: Der Wert eines Sensors in Homeassistant soll kontinuierlich auf der Pixel Clock angezeigt werden. Ändert sich der Wert, soll auch die Info auf der Pixelclock aktuell sein. Als Beispiel dient ein REST-Sensor für ein deutsches Bilderbrett, das im Homeassistant Forum zu finden ist. Verwendet wird das Icon mit der LaMetric ID 26807, das anschließend unter dem Dateinamen pr0.jpg gespeichert wurde. Der Sensor hat den Namen sensor.pr0. Zu beachten ist, dass jede Custom Page einen eindeutigen Namen erhält. In diesem Fall ist es pr0. Die Automation in Homeassistant sieht wie folgt aus:

alias: notify_pixelclock_pr0
trigger:
  - platform: state
    entity_id: sensor.pr0
action:
  - service: mqtt.publish
    data:
      qos: 2
      retain: true
      payload: >-
        { 
            "text": "{{ states.sensor.pr0.state }}", 
            "icon": "pr0", 
        }
      topic: pixelclock/custom/pr0

Custom Pages sollten ggf. mit dem parameter retain: true gesendet werden. Der MQTT-Broker speichert somit das letzte gesendete mqtt.publish Kommando und stellt dieses bei einem Neustart der Pixel Clock wieder zur Verfügung. Nähere Erläuterungen zum Thema Retained Messages sind im Folgepost zur Pixelclock Pixelclock: Custom App Collection zu finden.

Möchte man die Custom Page wieder entfernen, erfolgt dies über das erneute adressieren des App-Topics, jedoch mit einer leeren Payload:

- service: mqtt.publish
  data:
    qos: 2
    topic: pixelclock/custom/pr0

Sounds Wiedergeben

Generell kann jeder Art von Notification auch eine Soundwiedergabe zugewiesen werden, wovon man nur abraten kann. Im folgenden wird die Wiedergabe von Sound am Beispiel eines gestellten Timer erläutert. Verwendet wird exemplarisch die bereits erwähnte simpsons.txt RTTTL-File:

service: mqtt.publish
data:
  qos: 2
  retain: false
  payload: >-
    {  
      "hours": 0,  
      "minutes": 0,  
      "seconds": 3,  
      "sound": "simpsons"  
    }
  topic: pixelclock/timer

Der Timer ist nach 3 Sekunden abgelaufen und spielt anschließend die Melodie so lange, bis der mittlere Button auf der Clock gedrückt wird.

Automation: Spotify Media Player

Die Pixel Clock eignet sich hervorragend Informationen zum aktuell wiedergegebenen Interpreten und Song darzustellen. Genutzt wird in diesem Beispiel die Spotify Integration. Analog wird erneut ein passendes Icon gesucht und als spotify.gif oder spotify.jpg auf der Clock gespeichert.

Als Trigger wird der State des Spotify Media Player verwendet. Erfolgt eine aktive Wiedergabe wechselt dessen State auf playing und stellt zusätzlich die Attribute media_artist (Interpret) und media-title (Songname) bereit. Wird die Wiedergabe pausiert wechselt der State zu idle und die Attribute stehen nicht länger zur Verfügung, daher muss dieser Fall als Ausnahme über eine Condition ausgeschlossen werden.

Da die dargestellte Textinformation unter Umständen sehr lang ausfallen, macht es Sinn einen höheren Wert für die duration (Anzeigedauer) zu wählen. Auch ist in diesem Fall die Option pushIcon mit dem Wert 2 gesetzt. Dies bewirkt, dass das Icon mit dem Scrollen des Textes mitfährt und anschließend beim nächsten Durchlauf erneut erscheint.

- alias: notify_pixelclock_spotify
  trigger:
    - platform: state
      entity_id: media_player.spotify
  condition:
    not:
      - condition: state
        entity_id: media_player.spotify
        state: "idle"
  action:
    - service: mqtt.publish
      data:
        qos: 2
        retain: false
        payload: >-
          { 
            "text": " {{ state_attr('media_player.spotify', 'media_artist') }} - {{ state_attr('media_player.spotify', 'media_title') }}", 
            "icon": "spotify", 
            "duration": 10,
            "pushIcon": 2 
          }
        topic: pixelclock/notify

Wetteranzeige

Die Pixelclock lässt sich hervorragend als Wetteranzeiger nutzen. Voraussetzung ist eine eingerichtete Weather Integration bspw. OpenWeatherMap. Die Weather Integration hat, ungeachtet des gewählten Wetterdatenproviders, ein festes Condition Mapping:

State Erläuterung
clear-night Klare Nacht ohne Wolken
cloudy Bewölkt
fog Nebel
hail Hagel
lightning Gewitter
lightning-rainy Gewitter mit Regen
partlycloudy Teilweise bewölkt
pouring Starkregen
rainy Regen
snowy Schneefall
snowy-rainy Schneeregen
sunny Sonnig
windy Windig
windy-variant Windig mit Wolken
exceptional Keine exakt zuordbare Wetterkondition

Damit eine eindeutige Zuordnung der dargestellten Icons zu der aktuellen Wetterlage möglich ist, sollte für jeden State ein passendes Icon auf die Pixel Clock geladen werden, dass genau den Namen des States trägt, bspw. fog.jpg oder lightning-rainy.gif.

Anschließend kann unter Hilfenahme von Templates eine Automation für eine Custom Page zur Anzeige des Wetters erstellt werden:

- alias: notify_pixelclock_weather
  trigger:
    - platform: state
      entity_id: weather.openweathermap
  action:
    - service: mqtt.publish
      data:
        qos: 2
        retain: true
        payload: >-
          {
            "text": "{{ states.weather.openweathermap.attributes.temperature | round(0) }} {{ states.weather.openweathermap.attributes.temperature_unit }}",
            "icon": "{{ states('weather.openweathermap') }}"
          }
        topic: pixelclock/custom/weather

Die Temperaturwerte werden ganzzahlig gerundet und die Temperatureinheit, bspw. °C, an den Wert angehangen.

Ressources

AWTRIX Light Firmware Github Releases
AWTRIX Light Doku blueforcer.github.io
LaMetric Icon Gallery lametric.com
Weather Condition Mapping developers.homeassistant.com