En startsida för huset som hela familjen förstår

Varför en egen

Home Assistant har ett system för paneler där man drar in färdiga kort. Det räcker långt. Men med hundratals lampor, sensorer och automationer blev vår panel en lång lista som bara jag förstod. Resten av familjen öppnade Apple Home i stället.

Målet: en startsida som svarar på det man faktiskt undrar när man tittar, i den ordning man undrar det. Är det varmt? Vad kostar elen nu? Lyser det någonstans? Är bilen laddad?

Två försök

Första versionen byggdes i början av oktober med populära tilläggskort från HACS, Home Assistants community-butik: knappkort, grafer, layoutkort och ett tillägg som gömmer menyerna. Det blev flera vyer med flikar. Det fungerade, men varje kort hade sin egen stil och sina egna begränsningar.

Andra versionen kom en vecka senare. I stället för att pussla ihop färdiga kort bad jag Claude skriva ett enda eget kort från grunden, som ett webbkomponent i vanlig JavaScript. Det har inga beroenden utom typsnitten. I dag är det runt 4 000 rader, och jag har inte skrivit någon av dem själv.

Vad startvyn visar

Allt utgår från en enda vy. Överst hälsar den på den som är inloggad, med profilbild, och visar vädret. Under det:

Del	Vad den visar
Snabbknappar	Klimat, lampor och elpris, ett tryck bort
Rum	Rummen grupperade i flikar, till exempel gemensamma ytor och sovrum, med lampor och klimat per rum
Bilar	Laddning och vad laddningen kostat denna månad
Musik	Högtalarna i huset, grupperade som de brukar användas
Varför?	Klartextloggen från värmestyrningen: vad som hände och varför

Varje del öppnar en detaljpanel: klimat, energi, belysning, hushåll, media och system. Systempanelen har extra flikar som bara syns för administratörer: servrarna, containrarna och backuperna. Barnen ser alltså inte serverhallen, men jag kan kolla att nattens backup gick bra från samma skärm.

Tre tekniska knep

Konfigurationen är en fil, inte klick. Panelen ligger i så kallat YAML-läge. Det betyder att den inte går att ändra i Home Assistants grafiska redigerare, bara i filen. Det låter som en nackdel, men det gör att AI:n och jag alltid ändrar på samma ställe, och att varje version kan sparas undan.

Ingen cache. Webbläsare sparar JavaScript-filer, så en ändring syns ofta inte förrän man tömt cachen. En liten laddarfil med två rader löser det: den hämtar kortet med en tidsstämpel i adressen varje gång.

// Laddar korten utan webbläsarcache, så ändringar syns direkt.
import(`/local/hem/hem-cards.js?v=${Date.now()}`);

Standardvärden i koden. Rum, högtalare och snabbknappar ligger som en konfiguration överst i filen. Vill jag flytta ett rum mellan flikar räcker det att be om det, utan att leta i 4 000 rader.

Så byggde jag det med AI

Startvyn har byggts i ett femtiotal steg under tre veckor, och varje steg har en egen säkerhetskopia. Ett typiskt steg låter så här:

1. Jag tar en skärmdump och säger vad som stör: “rubrikerna får inte plats på telefonen”, eller “varmvattnet borde visa när det blir varmt igen”.
2. Claude läser kortets kod och de sensorer som berörs, tar en säkerhetskopia och ändrar.
3. Jag laddar om sidan på telefonen och svarar om det blev rätt.

Det är det närmaste jag kommit att ha en egen utvecklare. Jag beskriver vad jag vill se, AI:n skriver koden och jag bedömer resultatet.

Ska du göra likadant?

Börja med de färdiga korten. Det är där du lär dig vad du faktiskt vill se, och de flesta stannar där med goda skäl. Gå till ett eget kort först när du vet exakt vad startsidan ska svara på, och när du har ett sätt att backa varje ändring.

En sak gäller oavsett väg: bygg startsidan för den i familjen som bryr sig minst. Klarar den personen att se om det är varmt och tända lampan i köket, har du lyckats.

Jag vill göra en startsida i Home Assistant som hela familjen förstår. Hjälp mig planera den innan vi bygger något.

Om oss:
- Vilka som ska använda den: [t.ex. två vuxna och två barn]
- Var den visas: [mobil / surfplatta på väggen / dator]
- Det vi oftast vill veta eller göra: [t.ex. temperatur, elpris, tända lampor, musik]
- Det jag har i Home Assistant idag: [kort lista eller "vet inte, hjälp mig ta reda på det"]

Gör så här:
1. Intervjua mig om vad startsidan ska svara på, i den ordning vi undrar det.
2. Föreslå en skiss av startvyn i text: vad som syns överst, vad som ligger ett tryck bort.
3. Bygg den först med färdiga kort från Home Assistant och HACS, och förklara vilka som behövs.
4. Lägg panelen i YAML-läge så att varje ändring kan sparas och backas.

Fråga innan du föreslår egna JavaScript-kort. Börja enkelt.