Ik huurde een illustrator in om mijn huis te tekenen. Nu is het mijn Home Assistant-dashboard.

De openhaard flikkert, de tuinverlichting gloeit en de airconditioning in de slaapkamer blaast zachtjes — niet alleen in mijn huis, maar ook in een handgetekende afbeelding ervan. Dit is mijn Home Assistant-dashboard, en voor het eerst is het een dashboard waar het hele gezin daadwerkelijk graag gebruik van maakt.

Het afgelopen jaar heb ik mijn woning geautomatiseerd met Home Assistant, het open-source platform voor smart homes. Ik heb geprobeerd zoveel mogelijk te automatiseren, zodat dingen gewoon werken zonder dat iemand ze hoeft aan te raken. Wanneer iedereen vertrekt, schakelen alle airconditioners uit. De tuinsproeier berekent zijn looptijd op basis van het weer: langer op hete dagen, en volledig overgeslagen als het regent.

Maar sommige zaken vereisen nog steeds een menselijke hand. De tuinverlichting is daar het beste voorbeeld van. Deze kan alleen worden bediend via een app, óf die van de fabrikant, óf die van Home Assistant. Ik maakte het zelf zelfs nog lastiger: een timer in Home Assistant schakelt de tuinverlichting na een tijdje automatisch uit. Wanneer de tijd bijna om is, beginnen de lampen te knipperen, zodat je de tijd hebt om de app te openen en de timer te verlengen terwijl ze nog aan staan. Het probleem? Niemand anders in het huishouden wilde de Home Assistant-app of het dashboard dat ik op dat moment had gebruiken.

Ik had een fysieke schakelaar kunnen installeren, maar dat zou het probleem met de timer niet oplossen. Bovendien zijn sommige apparaten simpelweg gemakkelijker via een app te bedienen. Probeer maar eens de sproeier te starten met de knop op de unit zelf, om vervolgens naar buiten te rennen voordat je kletsnat wordt.

Dus dacht ik: waarom maak ik geen dashboard dat zo cool is dat iedereen het wil gebruiken?

De zoektocht naar een stijl

Ik heb veel dashboards bekeken en raakte gefascineerd door het idee van een plattegrond: een interactieve kaart van het huis die de werkelijkheid weerspiegelt. De meeste voorbeelden die ik vond waren in 3D, gebouwd met Home Assistant custom cards of in externe modelleringssoftware. Daarnaast vond ik een artikel over een plattegrond in pixel-art.

De 3D-plannen spraken me niet echt aan. In de meeste gevallen was het model zelf een statisch beeld, waarbij alle interactieve elementen een laag met iconen waren die daar bovenop lagen. De pixel-art benadering was charmant, maar dat betekende dat ik alles zelf moest tekenen of library-sprites één voor één in een grafische editor moest plaatsen.

Een illustrator vinden

Het idee van pixel-art inspireerde me om op zoek te gaan naar een artiest, maar ik merkte al snel dat het vinden en boeken van een goede illustrator moeilijker is dan het lijkt. Kunstenaars specialiseren zich en hebben elk hun eigen stijl. Populaire artiesten zijn makkelijker te vinden, maar vaak maanden vooruit geboekt. Zelfs als ze beschikbaar zijn, kan het artwork enkele weken tot maanden duren. Bovendien is een dashboard een ongebruikelijke opdracht: de artiest moet begrijpen wat het technisch gezien is en wat er nodig is, in plaats van alleen een mooi plaatje te schilderen.

Gelukkig werd mij een geweldige environment artist aangeraden wiens portfolio vol stond met prachtig geïllustreerde ruimtes. Ik was weg van de stijl en na wat berichten waren we het eens over het einddoel. Het idee van pixel-art stierf een natuurlijke dood; ik had iemand gevonden wiens stijl me nog meer aansprak en die al wist hoe hij een kamer moest tekenen.

Om de start te vergemakkelijken, stelde ik een pakket samen voor de artiest:

• Een simpel architectonisch plan van het huis (ik heb zelf de meubels aangegeven).
• Foto's van de kamers als referentie voor wat er daadwerkelijk staat.
• Illustraties van internet als referentie voor stijl en kleur.
• Voorbeelden van andere dashboards, zodat de artiest zag waar het eindresultaat voor diende.
• Een korte technische specificatie: de eisen, welke bestanden en formaten ik nodig had, en een toelichting bij de bovenstaande bronnen.
• Kleurcodes van de verf van onze laatste renovatie. Dit was leuk om te hebben, maar niet essentieel, aangezien kleuren ook van foto's kunnen worden afgeleid.

Technische vereisten

Wat betreft het technische gedeelte van de briefing: ik vroeg om PNG's met transparantie (WebP voor animaties), een dag- en een nachtversie van elke verdieping, en elk apparaat op een eigen laag. Dit hield in: een stilstaand beeld voor de status "uit" en een korte loop van frames voor "aan" (acht frames waren voldoende), zowel in dag- als nachtverlichting.

Het belangrijkste was dat elk bestand geëxporteerd moest worden op één gedeeld canvas van dezelfde grootte, waarbij elk onderdeel exact op de plek zat waar het in het huis hoort, in plaats van dat het werd bijgesneden (cropped). Die ene regel bespaart dagen aan uitlijningswerk achteraf.

Voor de tuin ben ik uiteindelijk gekomen op drie versies: dag, nacht, en nacht met de lichten aan. Oorspronkelijk vroeg ik om de animaties als PNG sprite sheets, maar ik heb de frames uiteindelijk zelf omgezet naar geanimeerde WebP's. Het is daarom aan te raden om de artiest direct om WebP te vragen.

Het vinden van de artiest, het bepalen van de behoeften van het dashboard en het voorbereiden van de documentatie was waarschijnlijk het grootste deel van het werk. Dat is logisch, want het artwork is het project. Wanneer het dashboard een illustratie is, met statussen getoond als animaties en de gebruikersinterface beperkt is tot een paar iconen en sensorwaarden, blijft er weinig over om te ontwerpen of te programmeren.

Hoe het technisch werkt

Zodra de illustratie klaar was, was het tijd om deze in gebruik te nemen. Home Assistant maakt dit vrij eenvoudig: onder de motorkap is het één standaard kaart en een paar trucjes.

De gebruikte kaart is picture-elements. De illustratie dient als achtergrond (image:), en alles wat verandert — de apparaten en de statusuitlezingen — wordt daar bovenop geplaatst als elements:, elk op een eigen positie. Van de ondersteunde elementtypes heb ik voornamelijk image gebruikt voor de apparaten, icon en state-label voor de statusuitlezingen, en conditional om elementen te tonen of te verbergen op basis van de status.

Het eerste trucje: apparaten tot leven wekken Een image-element kan van afbeelding veranderen op basis van de status van het apparaat (state_image). Terwijl de airconditioning uit staat, wordt een stilstaand frame getoond; wanneer deze aan staat, verschijnt de geanimeerde WebP. De browser speelt de animatie simpelweg af, dus er is geen custom code voor nodig.

Voorbeeld van de configuratie:

type: picture-elements
image: /local/floorplan/ground/ground_day.webp
elements:
  - type: conditional
    conditions:
      - entity: input_boolean.dashboard_night
        state: 'on'
    elements:
      - type: image
        image: /local/floorplan/ground/ground_night.webp
  - type: conditional
    conditions:
      - entity: input_boolean.dashboard_night
        state: 'off'
    elements:
      - type: image
        entity: climate.main_room_ac
        image: /local/floorplan/ground/ac_living_off.webp
        state_image:
          cool: /local/floorplan/ground/ac_living_on.webp
          heat: /local/floorplan/ground/ac_living_on.webp
          heat_cool: /local/floorplan/ground/ac_living_on.webp
          auto: /local/floorplan/ground/ac_living_on.webp
          dry: /local/floorplan/ground/ac_living_on.webp
          fan_only: /local/floorplan/ground/ac_living_on.webp
        tap_action:
          action: more-info

Het tweede trucje: dag en nacht Ik heb een helper aangemaakt om te schakelen tussen de dag- en nachtmodus, en een automatisering die dit aanpast bij zonsondergang en zonsopkomst. De nachtillustratie wordt als een conditioneel element bovenop de dagillustratie geplaatst, en elk apparaat krijgt op dezelfde manier een dag- en nachtversie.

Het tikken op een interactief apparaat, zoals de airco, opent het eigen besturingsdialoog van Home Assistant (tap_action ingesteld op more-info). De enige uitzondering is de tuinirrigatie. Dit is een enkel icoon op het dashboard, maar erachter zitten verschillende onafhankelijke kleppen en timers. Omdat er geen standaard scherm is voor dit geheel, heb ik met Browser Mod (een custom integratie via HACS) een eigen pop-up dialoog gebouwd.

Voor de opslag van afbeeldingen heb ik besloten deze op de Home Assistant-box zelf te hosten. Hiervoor moet je de map /config/www aanmaken (indien deze nog niet bestaat) en Home Assistant herstarten. Bestanden in /config/www/floorplan/ground/aclivingoff.webp worden dan bereikbaar via /local/floorplan/ground/aclivingoff.webp.

Implementatie op de televisie

Ik wilde het dashboard vanaf het begin op de televisie hebben, dus het moest draaien in de browser van de TV. Ik las aanvankelijk dat de browser van LG's webOS geen WebP ondersteunde, wat de hele animatie-aanpak onmogelijk zou maken. Dit bleek niet waar te zijn; de claim kwam waarschijnlijk voort uit de ingebouwde fotoviewer van de TV, niet uit de browser.

Het echte probleem was dat webOS me niet toestaat om een webpagina als screensaver in te stellen of de browser standaard op een specifieke pagina te laten openen. Hierdoor was er altijd interactie met de afstandsbediening nodig, precies de wrijving die ik wilde vermijden. Uiteindelijk heb ik de software van de TV volledig omzeild. De Home Assistant-box staat naast de TV, dus ik installeerde de HAOS Kiosk Display add-on en sloot deze aan op een van de HDMI-ingangen. Nu is het dashboard gewoon een andere input op de TV, altijd open en altijd op de juiste pagina.

Eén scherm voor het hele huis

Op de TV wilde ik alles in één oogopslag zien: beide verdiepingen en de tuin op één scherm. Maar elke verdieping verdiende ook een eigen weergave. Daarom heb ik een aparte weergave gebouwd voor elke verdieping en de tuin, en een "Full" weergave die alles samenbrengt.

Dit is waar het gedeelde canvas uit de briefing zijn vruchten afwierp. Elke weergave is uitgesneden uit hetzelfde master-canvas. Om de volledige weergave te bouwen, worden alle verdiepingen teruggeplaatst op hun oorspronkelijke positie, waardoor ze als lagen in een beeldbewerkingsprogramma precies op elkaar aansluiten. Twee details maakten het af: de tuin bevindt zich onder het huis in plaats van erbovenop, en de eerste verdieping is iets boven de begane grond getild, waardoor het huis een "geëxplodeerd" effect heeft en je in beide niveaus kunt kijken.

Het lastigere deel was het hergebruiken van de verdiepingen. Ik wilde niet elk apparaat twee keer configureren (één keer voor de verdieping en één keer voor het volledige overzicht), maar de UI-editor van Home Assistant biedt geen mogelijkheid om elementen tussen kaarten te delen. Daarom ben ik overgestapt op YAML-modus. De configuratie staat nu in bestanden, en de elementen van elke verdieping staan in hun eigen bestand, die door zowel de individuele weergave als de volledige weergave worden geïmporteerd. Een kamer wordt één keer bewerkt en de wijziging is overal zichtbaar. Een bonus is dat het na één herstart alleen nog een refresh van de browser vereist. De prijs hiervoor is het verlies van de visuele editor.

Een laatste beperking: een picture-elements kaart kan geen andere kaarten bevatten. Daarom stapelt de volledige weergave de verdiepingskaarten op elkaar met vertical-stack en positioneert deze met card-mod (een populaire HACS-plugin waarmee kaarten via CSS gestyled kunnen worden).

Resultaat en gebruik

Toen de volledige weergave klaar was, de bestanden waren geüpload en de kiosk was ingesteld, was het tijd voor de test. Ik herinner me nog de enthousiasme van iedereen toen ze het voor het eerst zagen: de illustratie vergelijken met de echte kamers en apparaten aan- en uitzetten om te zien hoe het plaatje reageerde.

Tegenwoordig draait het dashboard een paar uur in de ochtend en in de avond. Omdat mijn TV via Home Assistant kan worden bediend, schakelt een schema de TV automatisch naar het dashboard tijdens deze uren, mits er niemand naar iets anders kijkt. Ik heb ook Kiosk Mode via HACS toegevoegd om het Home Assistant-menu op de TV te verwijderen voor een pure dashboard-ervaring.

De enige teleurstelling is dat de TV-afstandsbediening het dashboard niet via HDMI kan besturen; op de TV is het dus bedoeld om naar te kijken, niet om aan te raken. Paradoxaal genoeg werkte dit in mijn voordeel. Herinner je je hoe dit begon, met een gezin dat de Home Assistant-app niet wilde gebruiken? Zodra het dashboard op de TV verscheen, installeerden ze de app op hun telefoons of bookmarkten ze het dashboard op hun computers, zodat ze daadwerkelijk dingen konden bedienen. De individuele verdiepingsweergaven werken goed op een telefoon, terwijl de volledige weergave minimaal een laptopscherm vereist.

Voor nu ben ik tevreden met de situatie: het hele huis in één oogopslag op de TV, en de app voor wanneer ik iets wil aanpassen.

***

Dashboard-illustraties door Owen Yeconiel.