Mijn Volvo V60 Geïntegreerd in Mijn Slimme Huis
Volvo V60 Dashboard in Home Assistant
Huisautomatisering gaat tegenwoordig veel verder dan alleen het bedienen van lichten en thermostaten. Het draait om het integreren van elk aspect van je leven in een naadloze, verbonden ervaring. En wat is er nou een betere manier om deze technologische evolutie te omarmen dan door je auto te integreren in je slimme huissysteem? In dit artikel verkennen we hoe ik mijn Volvo V60 heb opgenomen in een door Home Assistant aangedreven slim huisdashboard, waardoor mijn dagelijkse interactie met mijn voertuig transformeert.
Het Hart van het Systeem: Volvo On Call Integratie
Centraal in deze integratie staat het Volvo On Call-systeem. Deze verbonden auto-oplossing biedt niet alleen essentiële informatie zoals de locatie van de auto en het brandstofniveau, maar stelt mij ook in staat om verschillende autofuncties op afstand te bedienen. Wanneer geïntegreerd met Home Assistant, een populair open-source huisautomatiseringsplatform, ontsluit het een nieuw rijk van mogelijkheden. Ik ga er vanuit dat je deze integratie al hebt geïnstalleerd in Home Assistant.
Het Aanpassen van het Lovelace Dashboard voor Mijn Volvo V60
De Lovelace gebruikersinterface van Home Assistant is een speeltuin voor maatwerk. Voor mijn Volvo V60 heb ik een dashboard ontworpen dat niet alleen realtime gegevens biedt, maar ook een vleugje elegantie en functionaliteit toevoegt. Zo heb ik dat gedaan:
Stijlvolle Titelkaart: Een aangepaste titelkaart toont met trots de naam 'Volvo V60', tegen een strakke en moderne achtergrond.
Interactieve Autodiagram: Stel je een bovenaanzicht van je Volvo V60 voor, met interactieve iconen die de status van deuren, banden en meer aangeven. Elk element reageert in real-time en verandert van kleur om hun huidige staat weer te geven.
Controle binnen Handbereik: Moet ik mijn auto starten of de verwarming op afstand activeren? Het dashboard bevat aangepaste knoppen voor deze functies, waardoor het makkelijker dan ooit is om mijn auto vanuit het comfort van mijn huis te bedienen.
Data Visualisatie en Monitoring
Het dashboard gaat niet alleen over controle; het gaat ook over het nauwlettend in de gaten houden van de gezondheid en status van mijn voertuig. Aangepaste kaarten tonen waardevolle gegevens zoals brandstofverbruik, gemiddelde snelheid en totale actieradius. Het is niet alleen informatief; het is ook een visueel genot.
Naadloze Integratie en Gebruikerservaring
Wat deze opstelling onderscheidt, is de naadloze integratie en de gebruiksvriendelijke ervaring die het biedt. Of je nu een tech-enthousiasteling bent of gewoon iemand die het gemak waardeert, dit dashboard is ontworpen om aan jouw behoeften te voldoen, waarbij de grenzen tussen auto- en huisautomatisering vervagen.
Entiteiten Uitgelicht
In mijn Volvo V60-dashboard zijn diverse entiteiten geïntegreerd die elk een unieke functie vervullen. Hier is een blik op enkele sleutelentiteiten:
binary_sensor.pl497n_...: Deze binaire sensoren houden toezicht op verschillende statussen van mijn auto, zoals of deuren open of dicht zijn, of vloeistoffen bijgevuld moeten worden, en meer.
lock.pl497n_door_lock: Deze entiteit vertegenwoordigt de vergrendelingsstatus van mijn auto. Het maakt het mogelijk om vanuit mijn dashboard mijn auto te vergrendelen of te ontgrendelen.
switch.pl497n_engine: Met deze schakelaar kan ik de motor van mijn Volvo V60 op afstand starten of stoppen, wat vooral handig is tijdens koude ochtenden.
sensor.pl497n_...: Deze sensoren bieden belangrijke gegevens zoals brandstofverbruik, kilometerstand, en reismeters.
Deze entiteiten zijn niet alleen nuttig voor het monitoren van de staat van mijn auto, maar bieden ook interactieve controle via het dashboard.
Lovelace Kaarten in Detail
Mijn dashboard maakt gebruik van diverse Lovelace-kaarten die elk bijdragen aan de functionaliteit en esthetiek:
Custom Mushroom Title Card: Deze kaart wordt gebruikt om de titel van het dashboard stijlvol weer te geven.
Picture Elements Card: Een essentiële kaart die een afbeelding van de Volvo V60 combineert met interactieve elementen om verschillende delen van de auto te monitoren en te besturen.
Custom Mushroom Lock Card en Entity Card: Deze kaarten bieden een visuele en interactieve interface om specifieke functies zoals de autodeurvergrendeling en de motor aan te sturen.
Grid Card: Gebruikt voor het netjes rangschikken van bedieningselementen zoals knoppen.
Custom Stack-in-Card en Layout-Card: Deze kaarten stellen me in staat om complexe layouts en gestapelde kaarten te creëren voor gedetailleerde informatiepresentatie.
Mushroom Template Card: Voor het dynamisch weergeven van gegevens van sensoren met aangepaste conditionele opmaak.
Installatie via HACS
Voor het installeren van enkele van deze aangepaste Lovelace-kaarten via HACS, volg deze stappen:
Open HACS in Home Assistant: Ga naar HACS in de zijbalk van je Home Assistant-interface.
Zoek naar Custom Cards: In de HACS-interface, zoek naar de specifieke kaarten zoals 'Mushroom' of 'Layout-Card'.
Installeren: Wanneer je de gewenste kaart hebt gevonden, klik je op 'Installeren' om deze aan Home Assistant toe te voegen.
Configuratie: Na installatie, configureer je de kaarten in je Lovelace-dashboard door de relevante YAML-configuratie toe te voegen.
Het gebruik van HACS maakt de installatie van deze aangepaste componenten eenvoudig en houdt ze up-to-date, waardoor ik altijd toegang heb tot de nieuwste functies en verbeteringen voor mijn Volvo V60-dashboard.
Volvo V60 Dashboard Code
Waarschijnlijk wil je vooral dit graag zien, de code van mijn Volvo V60 dashboard.
### Volvo On Call Dashboard View
#
# Author: Theo van der Sluijs
# Contact: info@itheo.tech
#
# Description:
# This Home Assistant dashboard integrates with the Volvo On Call service, providing a detailed and interactive view of a Volvo V60.
# It includes various sensors and controls related to the car, displayed in an intuitive and user-friendly manner.
- title: Volvo # Title of the dashboard tab
path: volvo # URL path for the dashboard
icon: mdi:car # Icon for the dashboard tab
theme: Graphite # Theme applied to this dashboard
type: custom:masonry-layout # Layout type for arranging cards
badges: [] # List of badges to display on the dashboard (empty in this case)
cards:
- type: vertical-stack # Organizes cards in a vertical stack
cards:
- type: custom:mushroom-title-card # A custom card for displaying a title
title: Volvo V60 # Title displayed on the card
style: | # Custom CSS styling for the title card
h1.title {
display: flex;
align-items: center;
text-align: center;
font-size: 2.8vh;
}
h1.title::before,
h1.title::after {
content: '';
flex: 1;
border-bottom: 1px solid #fff;
}
h1.title:not(:empty)::before {
margin-right: 1em;
}
h1.title:not(:empty)::after {
margin-left: 1em;
}
ha-card {
background: none!important;
border:none
}
- type: picture-elements # Card that positions elements over an image
elements:
# Various state icons and labels for different parts of the car like tailgate, hood, doors, tires, etc.
- type: state-icon
entity: binary_sensor.pl497n_tailgate
style: # Custom styles for positioning and coloring the icon
top: 93%
left: 50%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_tailgate
style:
top: 97%
left: 50%
- type: state-icon
entity: binary_sensor.pl497n_hood
style:
top: 4%
left: 50%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
# Additional state-icons and state-labels for various car components
- type: state-label
entity: binary_sensor.pl497n_hood
style:
top: 8%
left: 50%
color: white
- type: state-icon
entity: lock.pl497n_door_lock
style:
transform: scale(2.2)
top: 47%
left: 46%
- type: state-label
entity: lock.pl497n_door_lock
style:
top: 59%
left: 50%
color: black
- type: state-icon
entity: binary_sensor.pl497n_front_right_door
icon: mdi:car-door
style:
top: 45%
left: 85%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
icon_color: red
- type: state-label
icon: mdi:car-tire-alert
entity: binary_sensor.pl497n_front_right_door
style:
top: 50%
left: 85%
- type: state-icon
icon: mdi:car-door
entity: binary_sensor.pl497n_front_left_door
style:
top: 45%
left: 15%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_front_left_door
style:
top: 50%
left: 15%
- type: state-icon
entity: binary_sensor.pl497n_rear_right_door
icon: mdi:car-door
style:
top: 60%
left: 85%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
icon_color: red
- type: state-label
entity: binary_sensor.pl497n_rear_right_door
style:
top: 65%
left: 85%
- type: state-icon
icon: mdi:car-door
entity: binary_sensor.pl497n_rear_left_door
style:
top: 60%
left: 15%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_rear_left_door
style:
top: 65%
left: 15%
- type: state-icon
icon: mdi:car-tire-alert
entity: binary_sensor.pl497n_front_left_tire
style:
top: 25%
left: 75%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_front_left_tire
style:
top: 30%
left: 75%
- type: state-icon
icon: mdi:car-tire-alert
entity: binary_sensor.pl497n_front_right_tire
style:
top: 25%
left: 25%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_front_right_tire
style:
top: 30%
left: 25%
- type: state-icon
icon: mdi:car-tire-alert
entity: binary_sensor.pl497n_rear_left_tire
style:
top: 75%
left: 75%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_rear_left_tire
style:
top: 80%
left: 75%
- type: state-icon
icon: mdi:car-tire-alert
entity: binary_sensor.pl497n_rear_right_tire
style:
top: 75%
left: 25%
'--paper-item-icon-color': rgb(104, 191, 57)
'--paper-item-icon-active-color': rgb(104, 191, 57)
- type: state-label
entity: binary_sensor.pl497n_rear_right_tire
style:
top: 80%
left: 25%
image: /local/images/volvo_topview_v1.png # Image of the Volvo V60 used as the background
- type: grid # Grid layout for organizing multiple cards
square: false
columns: 3 # Number of columns in the grid
cards:
- type: custom:mushroom-lock-card
entity: lock.pl497n_door_lock
layout: vertical
secondary_info: none
primary_info: name
icon_type: none
name: Lock # Card for controlling the car lock
# Additional cards for engine start and pre-heating
- type: custom:mushroom-entity-card
entity: switch.pl497n_engine
tap_action:
action: none
layout: vertical
primary_info: name
secondary_info: none
double_tap_action:
action: none
name: Start
- type: custom:mushroom-entity-card
entity: switch.pl497n_heater
tap_action:
action: none
double_tap_action:
action: none
primary_info: name
secondary_info: none
layout: vertical
name: Pre-Heat
# Another vertical stack for more detailed information
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Algemene info # Title for general information about the car
style: | # Custom CSS for the title card
h1.title {
display: flex;
align-items: center;
text-align: center;
font-size: 2.8vh;
}
h1.title::before,
h1.title::after {
content: '';
flex: 1;
border-bottom: 1px solid #fff;
}
h1.title:not(:empty)::before {
margin-right: 1em;
}
h1.title:not(:empty)::after {
margin-left: 1em;
}
ha-card {
background: none!important;
border:none
}
- type: custom:stack-in-card # Combines multiple cards into one card
cards:
# Nested stack-in-card and layout cards for organizing information and images
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 160px auto
margin: '-4px -4px -8px -4px'
cards:
- type: picture
image: /local/images/volvo_topview_smal.png
- type: custom:stack-in-card
cards:
# Mushroom entity cards for displaying specific car metrics like fuel consumption, average speed, etc.
- type: custom:mushroom-entity-card
entity: sensor.pl497n_fuel_consumption
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Gemiddeld verbruik
card_mod:
style: |
ha-card {
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.pl497n_average_speed
icon: mdi:car-cruise-control
icon_color: blue
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Gemiddelde snelheid
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -15px;
}
- type: custom:mushroom-template-card
entity: sensor.pl497n_range
primary: Tank
secondary: '{{states(''sensor.pl497n_fuel_amount'')}} L'
icon: mdi:ruler
badge_icon: null
icon_color: >
{% set c = states('sensor.pl497n_fuel_amount')
|int(0) %} {{ 'yellow' if 20 > c > 0 else 'green'
}}
tap_action:
action: none
hold_action:
action: none
name: Tank vulling
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
- type: custom:mushroom-template-card
entity: sensor.pl497n_range
primary: Bereik
secondary: '{{states(''sensor.pl497n_range'')}} km'
icon: mdi:ruler
badge_icon: null
icon_color: >
{% set c = states('sensor.pl497n_range') |int(0)
%} {{ 'red' if 250 > c > 0 else 'green' }}
tap_action:
action: none
hold_action:
action: none
name: Tank vulling
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
card_mod:
style: |
ha-card {
height: 245px;
}
- type: picture-elements # Card with elements positioned over a picture
elements:
- type: state-icon
entity: sensor.pl497n_odometer # Odometer reading
style:
top: 90%
left: 10%
- type: state-label
entity: sensor.pl497n_odometer
style:
top: 90%
left: 80%
image: /local/images/Volvo-V60.png
view_layout:
column: 2
# Additional stack for miscellaneous information
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Overige info # Title for additional information
style: | # Custom CSS for the title card
h1.title {
display: flex;
align-items: center;
text-align: center;
font-size: 2.8vh;
}
h1.title::before,
h1.title::after {
content: '';
flex: 1;
border-bottom: 1px solid #fff;
}
h1.title:not(:empty)::before {
margin-right: 1em;
}
h1.title:not(:empty)::after {
margin-left: 1em;
}
ha-card {
background: none!important;
border:none
}
- type: entities # Entities card for displaying various sensors and binary sensors
entities:
- entity: binary_sensor.pl497n_brake_fluid
name: Rem vloeistof
icon: mdi:car-brake-fluid-level
- entity: binary_sensor.pl497n_washer_fluid
name: Ruitenspoei vloeistof
icon: mdi:wiper-wash
- entity: binary_sensor.pl497n_service
name: Service benodigd
icon: mdi:account-wrench
- entity: binary_sensor.pl497n_bulbs
name: Lampen
icon: mdi:car-light-high
- entity: binary_sensor.pl497n_engine
name: Motor
icon: mdi:engine
- entity: binary_sensor.pl497n_windows
name: Ramen
- entity: sensor.pl497n_last_trip
name: Laatste reis
- entity: sensor.pl497n_trip_meter_1
name: Reis meter 1
- entity: sensor.pl497n_trip_meter_2
name: Reis meter 2
view_layout:
column: 3 # Layout configuration for arranging the cards within 3 columns
# [End of the Volvo On Call dashboard configuration]
Conclusie: Rijden naar de Toekomst van Huisautomatisering
Mijn Volvo V60 integreren in mijn slimme huissysteem is meer dan een handige truc; het gaat om het omarmen van de toekomst van connectiviteit en gemak.