home-assistant
home-assistant copied to clipboard
Home Assistant lovelace layout and config
Home Assistant setup
Layout designed mobile-first, fully optimized for all screen sizes.
-
Home Assistant setup
- Hardware
- Themes
-
Implementations
- Alexa devices control
- Netgear Orbi integration
- Soundbar control
- Lo-fi beats
-
Lovelace layout
-
Dashboard
- State row
- Graph row
- Lights card
- Switch rows
- Now Playing card
- Controls view
-
Info view
- Graph rows
- Network stats
-
Tile view
- Graph row
- Info card
-
Remote control view
- Spotify player
- Voice assistant players
-
Plex/TV view
- Graph rows
- Plex/TV cards
-
Custom plugins used
- Integrations
- Lovelace
- Notes
- Special thanks
-
Dashboard
Hardware
Home Assistant Container install on Raspberry Pi 4 with PostgreSQL database.
Full setup here.
Themes
For themes, head over to the themes folder.
Skip to lovelace layout
Implementations
These are some of my custom implementations using Home Assistant:
Alexa devices control
With custom component Alexa Media Player
, Home Assistant is able to control any thing that you're able to speak to Alexa.
Expand
This requires the use of input_boolean
helpers to control the state of the entity.
E.g. to control a smart plug...
# configuration.yaml
switch:
platform: template
switches:
6a_plug:
value_template: "{{ is_state('input_boolean.6a_plug_state', 'on') }}"
turn_on:
- service: input_boolean.turn_on
entity_id: input_boolean.16a_plug_state
- service: media_player.play_media
entity_id: media_player.new_room_echo
data:
media_content_id: 'turn on 6a plug'
media_content_type: custom
turn_off:
- service: input_boolean.turn_off
entity_id: input_boolean.6a_plug_state
- service: media_player.play_media
entity_id: media_player.new_room_echo
data:
media_content_id: 'turn off 6a plug'
media_content_type: custom
Netgear Orbi integration
With custom firmware and bash scripts, statistics from router like current internet usage or monthly usage can be integrated into Home Assistant.
Expand
Requires Voxel's firmware and entware
to be installed.
Get current WAN usage
Using netdata
:
# ssh [email protected]
opkg install netdata
Add to Home Assistant with the Netdata integration.
Using vnstat
to get total daily/monthly usage
# Install on router
opkg install vnstat
vnstat --create -i eth0
reboot
# configuration.yaml
# Daily usage
sensor:
- platform: command_line
name: Router daily WAN usage
command: "/bin/bash /config/scripts/orbi_router.sh wan_daily"
# Script in ./bash_scripts/orbi_router.sh
scan_interval: 120
value_template: "{{ value_json.id }}"
json_attributes:
- rx
- tx
- platform: template
sensors:
wan_daily_usage_up:
friendly_name: WAN daily usage (upload)
unit_of_measurement: 'MB'
icon_template: mdi:arrow-down
value_template: >-
{% if state_attr('sensor.router_daily_wan_usage','tx') != None %}
{{ (state_attr('sensor.router_daily_wan_usage','tx')|float/1000)|round }}
{% else %} NaN {% endif %}
wan_daily_usage_down:
friendly_name: WAN daily usage (download)
unit_of_measurement: 'MB'
icon_template: mdi:arrow-up
value_template: >-
{% if state_attr('sensor.router_daily_wan_usage','rx') != None %}
{{ (state_attr('sensor.router_daily_wan_usage','rx')|float/1000)|round }}
{% else %} NaN {% endif %}
# configuration.yaml
# Monthly internet usage
sensor:
- platform: command_line
name: Router monthly WAN usage
command: "/bin/bash /config/scripts/orbi_router.sh wan_monthly"
scan_interval: 00:30:00
value_template: "{{ value_json.index }}"
json_attributes:
- upload
- download
- platform: template
sensors:
wan_monthly_usage_up:
friendly_name: WAN monthly usage (upload)
unit_of_measurement: GB
icon_template: mdi:upload
value_template: >-
{% if state_attr('sensor.router_monthly_wan_usage','upload') != None %}
{{ (state_attr('sensor.router_monthly_wan_usage','upload')|float/976563)|round(1) }}
{% else %} NaN {% endif %}
wan_monthly_usage_down:
friendly_name: WAN monthly usage (download)
unit_of_measurement: GB
icon_template: mdi:download
value_template: >-
{% if state_attr('sensor.router_monthly_wan_usage','download') != None %}
{{ (state_attr('sensor.router_monthly_wan_usage','download')|float/976563)|round(1) }}
Soundbar control
Controls the volume of ALSA - 3.5mm port on the Raspberry Pi.
Expand
This involves a input_number
helper, an automation and a series of shell commands.
Requires alsamixer
to be installed.
# configuration.yaml
input_number:
pi_volume:
min: 0
max: 100
step: 5
automation:
- alias: Set soundbar volume
trigger:
- platform: state
entity_id: input_number.pi_volume
action:
- service_template: shell_command.pi_volume_{{ trigger.to_state.state | int }
shell_command:
pi_volume_0: echo amixer_0 | netcat localhost 7900
pi_volume_5: echo amixer_5 | netcat localhost 7900
# Truncated. Full in ./config
Similar to above, the script calls the command amixer
to increase or decrease the volume...
hass_socket_script.sh
:
#!/bin/bash
if [[ $MESSAGE == 'amixer_0' ]]; then amixer -q cset numid=1 -- -10239; fi
if [[ $MESSAGE == 'amixer_5' ]]; then amixer -q cset numid=1 -- -7399; fi
# Truncated. Full in ./bash_scripts/hass_socket_script.sh
Lo-fi beats
Plays Lo-fi beats live stream from YouTube.
Requires screen
, mpv
and youtube-dl
/youtube-dlc
to be installed.
Expand
# configuration.yaml
switch:
platform: command_line
switches:
lofi_beats:
command_on: echo "lofi_on" | nc localhost 7900
command_off: echo "lofi_off" | nc localhost 7900
socat
runs in the background (systemd unit file) and listens for commands.
Once a switch is turned on, this script is called that starts the playback...
hass_socket_script.sh
:
#!/bin/bash
read MESSAGE
if [[ $MESSAGE == 'lofi_on' ]]; then
screen -S lofi -dm /usr/bin/mpv --no-video $(/path/to/youtube-dlc -g -f 95 5qap5aO4i9A); fi
if [[ $MESSAGE == 'lofi_off' ]]; then screen -S lofi -X quit; fi
# Truncated. Full in ./bash_scripts/hass_socket_script.sh
Lovelace layout
Dashboard
State row
- People presence
- ASUS laptop
- Front gate camera
- Mesh router satellite/reboot
Graph row
- Bedroom temperature
- Bedroom humidity
Lights card
- Desk light
- ... Color temp card
- TV lamp
- ... RGB card
- Soundbar volume
Custom implementation that controls alsa volume, using input_boolean
, shell_command
and an automation.
Switch rows
- Adaptive Lighting
- Lofi beats/2/music radio
- Adaptive Lighting Sleep mode
- Bedroom AC/swing
- Bulb
Now Playing card
- Automatically lists all active media players

Controls view
- Front gate camera
- Bedroom AC HVAC
- Controls
Info view
Graph rows
- Internet download speed
- Internet upload speed
Custom sensors that fetch data from self-hosted Speedtest-tracker API.
Network stats
- Router card
- Router live traffic in/out
- Total router traffic in/out (today)
Custom implementations that fetch data from Netdata and vnstat
.
An iframe
from Netdata is used for the live traffic graph.
Tile view
Graph row
- Orbi Satellite uptime
- Server network traffic in/out
- Total server traffic in/out (daily)
A combined card that graphs server network usage within the last half hour.
Info card
- LAN clients card
Using the Netgear integration, this card shows all network-connected devices.
Dynamically sorted such that the last-updated device is always on top.
Remote control view
Spotify player
- Spotify media player
- Playlist shortcuts
- Soundbar source
- Google Home source
- Amazon Echo sources
Self-hosted Spotify Connect using librespot
Expand
# Pull Docker image
docker pull agneev/librespot-alsa
#
docker run --network host -d /dev/snd:/dev/snd agneev/librespot-alsa
# Customize config file:
nano /opt/spocon/config.toml
Voice assistant players
- Alexa media players
- Google Home media players
Custom integrations used for Alexa and Google Home.

Plex/TV view
Graph rows
- Plex currently watching
This figure is obtained using the Plex integration.
Plex/TV cards
- Plex media players
- TV media player
Custom plugins used
Integrations
Lovelace
-
auto-entities
by thomasloven -
button-card
by RomRider -
card-mod
by thomasloven -
custom-header
by maykar -
layout-card
by thomasloven -
lovelace-swipe-navigation
by maykar -
mini-graph-card
by kalkih -
mini-media-player
by kalkih -
rgb-light-card
by bokub -
simple-thermostat
by nervetattoo -
slider-entity-row
by thomasloven -
template-entity-row
by thomasloven -
uptime-card
by dylandoamaral