Home Assistant hass

Del 2 – Skapa ett snyggt gränssnitt i Home Assistant med Lovelace UI

Vi kommer nu fortsätta serien om Home Assistant. I det här inlägget kommer vi fokusera på funktioner i Lovelace UI, och inte själva designen av Home Assistant som helhet. Vi kommer skriva mer detaljerad information om Lovelace UI löpande här allt eftersom vi skapar nya konfigurationer . Så för alla som följt första delen av vår guide ska komma vidare och se styrkan i Home Assistant så publicerar vi lite tidigare än tänkt.

2023-02-26 – Vi har nu skapat en helt uppdaterad serie guider för Home assistant 2023. I serien kommer du hitta allt som behövs för att bygga en tillförlitlig och snygg installation med Home Assistant 2023 – Guide För Nybörjare Med Fokus På Home Assistant Och Homey

Vi kommer gruppera Philips Hue belysning och visa olika sätt att styra och presentera den i Lovalace UI med Home Assistant. Vi kommer i inlägget fokusera på att visa de olika komponenter som finns som standard i Lovelace UI och hur dessa används. Vi har inte hunnit med alla ännu, men vi kommer försöka komplettera med de som saknas om efterfrågan finns.

I Youtubeklippet nedan spelade vi in hur hur funktionellt gränssnittet är, allt detta du ser där kan du återskapa med efter att ha följt tipsen i den här guiden. Har du inte någon installation av Home Assistant så ar vi skrivit en guide här ”Del 1 – Kom igång med Home Assistant”, där visar vi även hur det går att göra en installation virtuellt på Windows 10 (om du har rätt version).

Layouten kommer vi återkomma till senare, tanken här är att visa hur enkelt du får en levande dashboard med Lovelace UI.

Här visar vi allt vi lagt till i den här guiden till Home Assistant via Lovelace UI. Vi så att vi stavat Automatiserar.se fel i gränssnittet med tyvärr.

Undrar du vad Lovelace UI är? (Extern länk till Hass hemsida

Meny

Hur skapar du kort med Lovelace UI?

Vi börjar med att gå igenom komponenterna i Lovelace UI, detta för att vi själva behöver förstå vilket sätt som är bra att bygga på. Vi har ännu inte börjat skriva om filformatet YAML, detta är medvetet för att inte skrämma bort alla som funderar på att börja med Hass. Vi kommer därför så långt det går i detta inlägg göra inställningar som inte kräver någon programmering eller konfiguration av filerna med ändelsen (det blev en del yaml ändå).

Vi har tyvärr problem med WordPress skinnet för tillfället, tycker du det är svårt att se innehållet på bilderna, zooma in i webbläsaren tills du får en helskärm så ser du all text tydligare. Vi håller på att kolla om det finns något bättre sätt att presentera bilderna. trycker du ner knappen ”CTRL” på tangentbordet och scrollar på datormusen så kommer du zooma i webbläsaren.

Gränssnittet nedan är det som du får när du Installerat Hass enligt del 1 i vår serie om Home Assistant och lagt till Philips Hue. Utan att ha gjort någon förändring i gränssnittet så fungerar det men det blir mycket enklare och snyggare när vi väl ändrat.

Installationen klar

Att aktivera Lovelace UI gör att du själv får ta ansvar för gränssnittet, vilket är ett måste om du inte vill fortsätta med gränssnittet ovan. Genom gå längst upp till höger i gränssnittet i Hass och välja konfigurera gränssnittet så kommer du mötas av följande varning.

Börja med att aktivera Lovelace UI
När du besöker den startsida i Home Assistant så går du längst upp till höger och där väljer du att aktivera LoveLace UI, du kommer då mötas av följande varning. Det är bara att trycka ”Take Control”

Första dashboarden med Lovelace UI

Bilden nedan tog ca 2 minuter att få till, Den gjordes bara för att visa vad mycket som går att göra från gränssnittet utan att fortfarande ha skrivit en rad kod. Vi valde även att göra tre vyer, den på bilden ovan finns ännu kvar även i den nedre konfigurationen, detta i fliken / vyn ”HEMMA”. Genom att behålla alla enheter i rummet hemma så kan man gå mellan vyerna och leta enhet för enhet.

Vy med LoveLace i Hass.io
2 minuters arbete med att skapa ett relativt snyggt gränssnitt med all belysning från Philips Hue, detta i kombination med temperaturer och ljus från rörelsesensorn från Hue.

Tips när arbetar med Lovelace UI

När du lagt en del jobb i gränssnittet, gå då längst upp till höger på de tre punkterna och välj ”Raw Config Editor”, då kommer du se hela YAML filen som innehåller allt jobb du lagt ner i gränssnittet. Ta för vana att kopiera ut all text där och spara i en textfil. Skulle du göra något fel i gränssnittet eller att något slutar fungerar, då kan du kopiera innehållet i din textfil och sedan klistra tillbaka i ”Raw Config Editor” och spara. När detta är gjort så kommer du tillbaka till det gränssnitt du hade senast. Du kan även göra en snapshot av hela din installation, men återställer du det så kan du tappa data som loggats.

Lovelace UI Raw config editor
Markera här all text (tryck någonstans på texten i rutan och sedan CTRL+A) då har du all text markerad. Sedan trycker Du CTRL+C så har du det i urklippet på enheten. Förutsatt att du sitter på en Windows dator och gör detta.

Genomgång av Lovelace Ui korten

Vi kommer här gå igenom kort för kort och förklara (så gott vi kan). Vi länkar även till Hass hemsida under respektive rubrik, så skulle det inte fungera utifrån den informationen vi skriver så kanske något uppdaterats. Ser du något som går att göra bättre eller är fel, säg till så uppdaterar vi!

När du längst upp till höger väljer ”Configure UI” så kommer du få möjlighet att redigera nästan allt på skärmen. Genom att trycka på den orangea knappen.

skapa ett lovelace UI kort
Knapp för att skapa kort.

När du tryckt på knappen möts du av en mängd alternativ, vi fick själv fundera en stund på vad vi verkligen behövde… Tyvärr misslyckades vi med att komma på hur den perfekta designen skulle se ut direkt. Därför valde vi att lägga till funktion för funktion, detta gjorde att vi kunde se och testa hur varje kort betedde sig i gränssnittet. Vi kan rekommendera det här tillvägagångssättet, det gav bra input på vad som var möjligt och vart en sensor / lampa gjorde sig bäst. När du scrollar ner i inlägget så kommer vi beskriva kort för kort och hur det ser ut för oss. Alla dessa inställningar är det du ser i Youtube filmen i toppen av inlägget. kollar du kort för kort så kan du följa hur vårt gränssnitt sakta växer fram kort för kort.

Alla funktioner som går att återfinna i Lovelace UI
Vi kommer nu gå igenom del för del och förklara vad som går att göra i kortet och hur det fungerar.

Lovelace UI – Entity Button

Med Entity Button card kan du göra ett kort som utför en uppgift när den trycks ner. Vi valde att göra en knapp av rörelsesensorn. Ikonen på bilen nedan kommer bli gul när en rörelse registreras i från Philips Hue Motion sensor. När vi sedan trycker på kortet har vi valt att det ska bli ”more-info” och hold action inte ska göra något alls.

  • Entity: Välj där den sensor du vill att något ska hända mot.
  • Name: Namnet du vill se under kortet.
  • Icon Height: Hur stor du vill att ikonen ska bli på skärmen.
LoveLace Entity Button Card
När du skapar ett Entity Button card i Lovelace Ui är det inte alltid alla funktioner under ”Tap action eller ”hold action finns”

Som du ser på bilden nedan så har vi nu en stor ikon som blir gul när en rörelse registreras. Trycker vi på kortet där det står Hue Motion så får vi fram en graf över sensorns registreringar. Vi kommer nyttja detta kortet en hel del framöver för att visa statusar på ett smart sätt. Där kan du även styra grupper av enheter. Vi kommer troligen samla belysning i samma rum i liknande kort för att sedan kunna släcka eller tända all belysning med en enda knapp.

LoveLace Entity Button Card

Lovelace UI – Glance kort

Med ett glance kort grupperar man flera sensorer till ett översiktskort, vilket i kombination med funktionen ”entity-filter” gör att du kan presentera endast sensorer som uppfyller ett vissa kriterier. I vår konfiguration av kortet så väljer vi att ta in all funktionalitet från Philips Hue:s rörelsesensor, dvs ljus, temperatur och rörelse.

Vi väljer att namnsätta det till status Gården, därigenom bockar vi även ur ”Show Name” till respektive sensor, vi nöjer oss med att via bilden och värdet summera gården. Nu sitter vår Hue inne, men för att undvika förvirring så döper vi inte om rummet ”Gården” utan den får behålla namnet ”Gården”

Lovelace UI Glance Card
Lovelace UI  Glance Card
Nu har vi en summering av gården på ”Glance card” längst ner, när en rörelse detekteras så visas ikonen med Gult med.

Lovelace UI – Markdown Card Configuration

Med Markdown kortet så kan du skriva text med formatering på ett kort, Resultatet du ser i ”Exempel text Översatt” är resultatet som kommer synas i rummet ”Gården” sedan. Vill du veta vilken text som går att skriva så kan du kolla den här sidan: commonmark.org

Lovelace UI Markdown Card

LoveLace UI – Conditional Card

Med Conditional Card kan du välja att lyfta fram och presentera information när ett viss status är uppfylld. Här krävs det dock att du skriver YAML kod. Vi kommer göra ett exempel och presentera hur det ser ut. Men det kan vara idé att själv vänta med detta tills du känner dig mer trygg med att skriva kod.

Lovelace UI – Horizontal Stack Card

Genom att välja Horizental-stack kan du få flera enheter att grupperas sida vid sida. För att lyckas med detta behöver du tyvärr skriva Yaml kod, vi kommer inte gå in i detalj på detta kort, utan information om hur du hittar alla ”cards” och sedan väljer kommer längre ner i inlägget.

# Koden nedan är det som placerar vår belysning sida vid sida. 
type: horizontal-stack
title: Belysning sida vid sida
cards:
  - type: light
    entity: light.bron
  - type: light
    entity: light.hobby_rum
Horizontal Stack Card
Vi väljer här att ta två Philips Hue lampor och sedan placera dessa sida vid sida.

Med hjälp av att horisontal vy kan enheter snygg placeras i bredd i det antal som behövs. Vi kommer uppdatera med mer info i framtiden när vi skrivit om YAML och hur det fungerar.

Lovelace UI - Horizontal Stack Card

Lovelace UI – Vertical Stack

På samma vis som med horisontal gruppering så finns det vertikal gruppering av kort, dessa går dessutom att kombinera. Vi kommer därför visa ett exempel där vi grupperar ihop ”Hue Motion” samt ”Belysning sida vid sida”. Med hjälp av YAML koden nedan så får vi nu ”Hue Motion” att höra till samma gruppering som ”belysning sida vid sida”.

Lovelace UI - Vertical stack
# Koden för att visa sida vid sida samtidigt som dessa två lampor grupperats med Hue Motion
type: vertical-stack
cards:
  - type: entity-button
    entity: binary_sensor.hue_motion_sensor_1_motion
    name: Hue Motion
    icon_height: 100px
  - type: horizontal-stack
    title: Belysning sida vid sida
    cards:
      - type: light
        entity: light.bron
      - type: light
        entity: light.hobby_rum

Lovelace UI – Light Card

Kortet Light är nog ett av de lättare korten att börja med, genom att välja i drop down menyn under ”Entity” så får du upp en lista med alla enheter som är av typen Ligth. Du kan även här välja rummen och då styra all belysning i det rummet.

LoveLace UI - Light
Vi valde lampan light.hue_white_candle_trappen och döpte den till ”Trappen”.

Resultatet är precis som kortet ovan visar (till höger). Den första vyn vi visade nästan längst upp i inlägget är en massa av den typen.

Lovelace UI – Picture Entity Card

För att visa en bild istället för en lysknapp eller strömbrytare kan du använda dig av Picture Entity Card. Vilket med rätt bilder ger en effektfull styrning av belysningen. Vi valde en bild från bloggen eftersom sökvägen måste vara med HTTPS och att vi dessutom inte hunnit med att ladda upp några lokala bilder.

Vi valde en bild från automatiserar.se som test
Vi valde här att toggla belysningen och sedan att välja belysning i hobby rummet (light.hobby_rum från Philips Hye bryggan). Den döper vi till Smart Belysning.
Lovelace picture card
När vi trycker på kortet ”Smart Belysning” så blir kortet grått när lampan är släckt, och sedan den blå färgen när den är tänd igen.

Lovelace UI – Sensor card

Sensor kortet är nog det kort vi kommer att använda en hel del framöver, så fort vi fått igång alla Xiaomi aqara sensorer (länk till vårt test) via Conbee stickan. Vi kan där presentera grafer från temperatursensorer på ett snyggt och enkelt sätt ( vi kommer även köra Grafana för mer avancerade grafer ). Nedan har vi valt att läsa temperaturen från en ”philips Hue motion sensor”, vi väljer sedan att visa en detalj på graferna på 1 samt att visa de senaste 7 dagarna i grafen. Bilden till höger visar det resultat du kommer få i gränssnittet.

Lovelace Sensor card med Hue motionsensor
Snyggt och enkelt kan du nu se historisk information på din temperatursensor genom att välja ”Graph Type” som ”line”, vi valde även att visa de senaste 7 dagarna, vilket är 168 timmar. Vi kommer i framtiden behöva se hur pass mycket arbete det är att presentera liknande historik på flera kort.

Lovelace UI – Entities

Enheter är det vanligaste kortet och det som även funnits med sedan tidigare. Den grupperar ihop andra enheter i samma kort, lite som grupp kortet gör. Du väljer en titel på kortet och sedan adderar du ”Entities” i drop down menyn, där bläddrar du efter enheter du vill gruppera i samma rum.

Lovelace UI Entities
Vi väljer här att gruppera Hobby rum och Hue color bron i samma grupp. Detta gör nu att reglaget styr all belysning på detta kortet, även om dessa är placerade i olika rum i Philips Hue.

Lovelace UI – Gauges

Med mätare (Gauges) skapar du en visuell mätare som presenterar ett värde både som text och som en mätare. Det ger en visuellt häftig effekt och har du data som frekvent rör på sig så kan där färgkoda en överblick, vi valde att göra en gul, grön, röd mätare.

Vi väljer här att ta fram temperaturen från ”sensor.hue_motion_sensor_1_temperature” och sedan namnsätta den ”Hobby rum”. vi väljer även att aktivera ”Define Severity”. Vilket gör att du kan sätta färg på mätaren utifrån nivåer, vi valde att allt under 15 ska bli orange, allt mellan 15 – 22 grönt, och allt över 22 grader ska presenteras som rött.

Lovelace Gauges kort
Snygga mätare som i realtid uppdateras när ny data tas emot.

Lovelace UI – Map

Med karta i Lovelace kan du placera ut geografiska koordinater på kartan, där kan du presentera vart en telefon befinner sig eller vart något med gps koordinater finns. Eftersom vi ännu inte har några enheter som presenterar GEO koordinater så väljer vi att bara länka in kartan genom att välja ”map” och sedan vad kartan ska visa.

Lovelace UI - Map

Lovelace UI – Picture

Med bildkortet kan du skapa en snygg dashboard och sedan göra snabblänkar till webbsidor eller liknande.

Lovelace UI - Picture
Vi valde att länka en bild från bloggen och sedan göra att vid enkelklick öppnas länken till https://www.automatiserar.se. Det är även möjligt att anropa en service eller navigera (förutom URL som vi valde).

Lovelace UI – Picture Glance

Med picture glance kan du samla händelser i ett rum på ett mycket snyggt sätt och sedan se status för respektive enhet. Vi väljer här att det ska gälla för ”light.hobby_rum”, men trycker vi på kortet så har vi sagt att ”none” är den action som skall tas. vi väljer detta eftersom vi endast är ute efter att få status ikonerna i rummet. Bilden som visas är från en https url på bloggen. Av någon anledning visas den inte i ”Image path” när vi tog upp kortet på nytt igen för att korrigera en lampa.

Lovelace Pucture glance
Snyggt och smidigt sätt att presentera all status från ett rum.

Lovelace UI – Entity Filter Card

Med Entity Filter kortet kan du välja att endast lyfta fram sensorer om en viss status är aktiv. Vi kommer detta mycket frekvent när vi designar den dashboard vi kommer nyttja på en info skärm.

När en status uppnås så visas sensorn / enheten. När enheten är i ett läge som vi valt att filtrera bort, dvs ”state_filter” inte är ”on”, då döljs sensorn. Längre ner i inlägget finns koden att kopiera om du vill testa motsvarande på en egen sensor. Det du behöver ändra är entity: *** DIN SENSOR *** och om den sensorn eller lampa du väljer har status ”on”.

LoveLace UI Entity Filter Card GUI Settings
Koden för att presentera / dölja vår motion sensor är följande.
LoveLace UI Entity Filter Card GUi
Den röda rutan är vårt Entity Filter Card, där kommer vår rörelsesensor presenteras om rörelse detekteras.
LoveLace UI Entity Filter Card GUI ON
När rörelsen registrerats så presenteras min Philips Hue motion sensor med mitt manuella namn ”Rörelse Hobbyrummet”

Koden för att presentera vår Philis Hue Motion sensor , är nedan. Vi kommer i Del 3 börja förklara hur koden fungerar och vad man ska tänka på, så är du inte riktigt säker på YAML och hur den skrivs så avvakta tills del 3 är publicerad, där kommer vi försöka fokusera på just att skriva YAML och hur automationer och liknande fungerar.

# Yaml koden
type: entity-filter
entities:
  - entity: binary_sensor.hue_motion_sensor_1_motion
    name: Rörelse Hobbyrummet
state_filter:
  - 'on'

Film för att summera allt.

Har du följt guiden så bör du ha skapat något liknande det vi har på filmen här:

  • Entity Filter Card finns ej med i filmen.

Vad mer borde vi ha med på sidan?

Nu när vi skrivit om en del av korten, vad mer borde vi ha med om LoveLace UI? skriv gärna en kommentar eller gå in i vår Facebook grupp och skriv vad som saknas.

Hjälpa Automatiserar.se

Är du intresserad av att se vad som händer mellan våra inlägg så kan du följa oss på vårt Instagram (länk till vårt Instragram konto), där försöker vi dela vad som händer och är på gång. Är du intresserad av att diskutera eller få tips från andra så kan du gå med i vår Facebook grupp (länk till facebook gruppen) som riktar sig till alla som tycker det är roligt med smarta hem och automation. Följ och gilla gärna vår sida på facebook med (länk till automatiserar på facebook). Vi har även en Patreon sida (extern länk) för dom som vill supporta oss löpande, eller swisha en slant till en kaffe på 0705470065 medan vi skriver på nästa inlägg.

Vi försöker tipsa hur du själv kommer igång och automatiserar. Vi kör sidan helt på fritiden och är helt oberoende och gör detta för att det är roligt, vill du hjälpa Automatisear.se, dela, gilla och följer sidan så får vi motivation att göra ännu mer 🙂

// Markus

4 reaktioner på ”Del 2 – Skapa ett snyggt gränssnitt i Home Assistant med Lovelace UI”

  1. Mycket bra guider. Bra för de av oss får kämpa sig fram lite med HA. Skulle gärna se en guide som berör hur man kan få notiser till sin telefon på ett smidigt sätt.

    1. Ja, där är en del att sätta sig in i men det verkar vara oändliga möjligheter med både notiser och actions för iOS.

    2. En trevlig översiktlig guide. Tror dock att det vore bättre att börja med ett konkret exempel. Beskriva lovelace, en korttyp och sen ett görbart exempel med det. Förlorar fotfästet lite annars.

Lämna en kommentar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *