Dashboard med Home Assistant – Smarta hem

By Claes

Dashboard med Home Assistant

Under våren 2019 skrev jag ett inlägg om hur jag skapade mig en dashboard med Home Assistant

Jag skapade mig en dashboard med Home Assistant som är installerad på en Raspberry Pi 3.  För själva panelen använder jag mig av en äldre iPad.
Nu kan jag presentera alla enheter som finns på Homey och dessutom använda smarta funktioner som finns till Home Assistant.
Det inlägget kan ni hitta här: Dashboard för mitt smarta hem

Har under hösten och vintern lekt lite mer med Home Assistant och min Dashboard har förändrats. Dels på grund av att jag själv ville föra in lite mer funktioner samt att Dashboarden används av andra i familjen för att styra belysningen i deras rum. Jag tycker det är enklare att klicka på Home Assistant symbolen på iPad alt iPhone, välja rum och dimra, stänga av eller sätta på belysning än att göra det med Athom Homey.

Uppdatering 2020-10-28
Har nu uppdaterat min Dashboard och monterat en Ipad på väggen i köket för att visa status på mina enheter.
Uppdatering 2021-01-31
Uppdaterat min Dashboard med animerade ikoner

Vad använder jag:

– Athom Homey
– Raspberry Pi 4
– Home Assistant
– En äldre iPad air

För att Homey ska kunna kommunicera med Home Assistant använder jag mig av följande appar:
–  MQTT Client: https://apps.athom.com/app/nl.scanno.mqtt
–  MQTT Hub: https://apps.athom.com/app/nl.hdg.mqtt
–  Broker. Jag har valt att använda Mosquitto broker i Home Assistant.

Integrationer i Home Assistant:
HACS
browser_mod

Frontend:
Google Light Theme
Google Dark Theme
card-tools
slider-entity-row
card-mod
Weather Card

Sätta upp kommunikation mellan Athom Homey och Home Assistant

För att få kommunikationen mellan Athom Homey och Home Assistant att fungera så gjorde jag så här:
Installerade MQTT Client och MQTT Hub i min Athom Homey.
Installerade Mosquitto broker i Home Assistant som finns som finns i Add-on Store

MQTT clienten i Athom Homey
IP adressen pekar mot min Home Assistant och därefter valde jag ett användarnamn och lösenord.

Home Assistant Configuration.yaml
Öppnade Configuration.yaml och la till följande:


mqtt:
  discovery: true
  discovery_prefix: homeassistant
  broker: 192.168.1.20
  username: !secret mqtt_usr
  password: !secret mqtt_pwd
  birth_message:
    topic: 'hass/status'
    payload: 'online'
  will_message:
    topic: 'hass/status'

Här använder jag samma användarnamn och lösenord som jag skrev in i MQTT Client.

MQTT Hub
Öppnade MQTT hub och klickad på knappen Broadcast som finns i Konfigurera app.

Därefter började all enheter som jag har i min Athom Homey att dyka upp i Home Assistant och byggandet av min Dashboard startade.

Några exempel på hur mina sidor ser ut med både mörkt och ljust tema.

 

 



Automationer i Home Assistant

Majoriteten av alla min automationer sker med min Athom Homey men nu har det smygit sig in några i Home Assistant

Automatisk ändring från Ljust till Mörkt tema

I Athom Homey har jag en virtuell enhet som heter Mörkt inne. Den ändrar status beroende på ljusnivån inomhus. Med hjälp av denna kan jag nu ändra tema på min Dashboard. Ljust inne = ljust tema. Mörkt inne = mörkt tema.

Funktion för att ändra bild på kort

En annan funktion som jag har är att jag ändrar kortet på huset på min Dashboard när det blir mörkt ute. Denna funktion triggas av en virtuell enhet i Athom Homey. Skapade denna funktion för att se symbolerna för fasad och trädgårdsbelysningen på ett bättre sätt.

Funktion för att automatiskt visa bilden för kameror

När sensorerna i trädgården indikerar rörelse så ändrar jag sida, från Hem till Kamera. Efter 1 minut växlar jag tillbaka till Hem-sidan
För att få till denna funktion använder jag mig av integrationen browser-mod

Funktion för att göra skärmen svart på Ipad som är monterad i köket

Har det inte varit rörelse i köket på 5 minuter så gör jag skärmen svart på Ipad som är monterad i köket. Vid rörelse slår jag på skärmen.
För att få till denna funktion använder jag mig av integrationen browser-mod. Detta är egentligen inte en skärmsläckare och skärmen stängs inte av utan den blir svart.

Funktion för att växla tillbaka till hemläge

Hemskärmen vill jag alltid ha som default läge. Har märkt att om någon trycker för att komma till vyn för t ex temperatur eller kamera så växlar man inte tillbaka till hem läget. För att alltid visa hem läget skapade jag en timer på 30 sekunder. Timern startar när vyn ändras från hem och när timern har räknat ner byter jag läge till hem. Den här funktionen använder integrationen browser-mod och timer funktionen i Home assistant.

Kort jag använder i Home Assistamt

Villkorligt kort:

Visar status på virtuella enheter från min Athom Homey. Ikonerna är synliga när dom är aktiva.
Bakgrunden är ett kort på min Athom Homey.

Väderkort med egen bakgrund

Bildelement i Home Assistant som visar status på temperatursensorer och smartplugs
Bakgrunden är ett ölglas
Temperatur sensorn är en Aqara och smartplug är Philips Hue.
Jag använder dessa när jag brygger öl och kan då reglera temperatur i skåpet under jäsprocessen.

ikonerna visar olika färg beroende på status. Om kylen slås på blir ikonen blå.

Exempel på hur jag får Filter att visa olika färger beroende på status.


elements:
  - entity: sensor.temperature_60
    prefix: 'Skåp '
    style:
      color: white
      font-size: 100%
      left: 20%
      top: 49%
    type: state-label
  - entity: switch.on_off_plug_in_unit_33
    icon: 'mdi:radiator'
    style:
      '--paper-item-icon-color': 'rgb(79, 34, 2)'
      '--paper-item-icon-active-color': red
      color: null
      left: 38%
      top: 49%
    type: state-icon
image: local/images/Öl2.PNG
Animerade Ikoner

För att få lite mer liv och rörelse på min dashboard valde jag att lägga till en rad med ikoner som jag gjorde rörliga.

Alla dessa är gjorda med Button Card: https://github.com/custom-cards/button-card
Fläkt som symboliserar hastighet på mitt FTX aggregat. Ikonen snurrar fortare ifall ventilation hög är aktiverad.
Brevlådan ändrar ikon vid aktivering. Ikonen blir gul och svajar fram och tillbaka.
Termometern visar utetemperatur och ikonen ändrar färg beroende på temperatur.

För att få ikonen att snurra gjorde jag så här:


type: 'custom:button-card'
entity: switch.ventilation_aktiverad
name: Ventilation
icon: 'mdi:fan'
color: blue
style: |

  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
   ha-icon {
    animation: {% if is_state('switch.ventilation_hog_aktiverad', 'on') %} spin 1s linear infinite {% endif %};
  }
  ha-icon {
    animation: {% if is_state('switch.ventilation_hog_aktiverad', 'off') %} spin 5s linear infinite {% endif %};
  }

Här hittar ni mer information om vad jag använder i mitt system:

Smarta Hem
Produkter
Mina Athom Homey flows
Dashboard

About Claes