Modern Dashboard Lite Part 2
Let's go step by step again.
Line 5: I used a conditional card with a boolean again. Mainly this section is divided into 2 sections.
Spotify and TV
To activate one of the 2 sections I used booleans.
For Spotify "input_boolean.modern_dashboard_spotify" and for TV "input_boolean.modern_dashboard_tv"(Line 889) has been used.
Line 5. is where we see the "dog icon" This is the first icon seen when page is loaded. It needs 2 conditions first spotify should not be running and spotify boolean should be turned on.
"input_boolean.modern_dashboard_simple_version_spotify_update_status" controls the status of spotify through an automation. If spotify is playing something this boolean turns on. If nothing is playing it turns off. The automation is easy to create:
alias: Modern Dashboard Simple Version - Spotify Update Status
description: ""
trigger:
- platform: template
id: "on"
value_template: "{{ is_state('media_player.spotify_berkan_sezer', 'playing') }}"
- platform: template
value_template: >-
{{ is_state('media_player.spotify_berkan_sezer', 'idle') or
is_state('media_player.spotify_berkan_sezer', 'unavaliable') or
is_state('media_player.spotify_berkan_sezer', 'standby') or
is_state('media_player.spotify_berkan_sezer', 'paused') }}
id: "off"
condition: []
action:
- choose:
- conditions:
- condition: trigger
id: "on"
sequence:
- service: input_boolean.turn_on
data: {}
target:
entity_id: >-
input_boolean.modern_dashboard_simple_version_spotify_update_status
- conditions:
- condition: trigger
id: "off"
sequence:
- service: input_boolean.turn_off
data: {}
target:
entity_id: >-
input_boolean.modern_dashboard_simple_version_spotify_update_status
default: []
mode: singleSo "input_boolean.modern_dashboard_simple_version_spotify_update_status" was the first condition we used. Second condition was "input_boolean.modern_dashboard_spotify". Remember I used 2 booleans in this section, one for tv and one for spotify. So if the spotify is on tv should be off. This is achieved by another automation.
alias: Modern Dashboard - Booleans - Vitrin
description: ""
trigger:
- platform: state
entity_id:
- input_boolean.modern_dashboard_spotify
to: "on"
id: Spotify
- platform: state
entity_id:
- input_boolean.modern_dashboard_tv
to: "on"
id: TV
condition: []
action:
- choose:
- conditions:
- condition: trigger
id: Spotify
sequence:
- service: input_boolean.turn_off
data: {}
target:
entity_id:
- input_boolean.modern_dashboard_tv
- conditions:
- condition: trigger
id: TV
sequence:
- service: input_boolean.turn_off
data: {}
target:
entity_id:
- input_boolean.modern_dashboard_spotify
mode: singleSuper simple. With this method you can have multiple sections in one area. When we click spotify button the tv section will be turned off and only Spotify section will be shown.
Okay now Spotify section in itself has 3 main parts.
- The animated dog icon :
- The media player when spotify is playing something :
- Room cards which is affected by motion :
You can display room cards here by simply clicking the dog icon. Line 19 is the place where we achieve this. A boolean again is being used here named "input_boolean.modern_dashboard_vitrin_motion_gif"
Line 26 consists the pictures of the rooms. Let's examine the template here :
{% if is_state('input_boolean.modern_dashboard_vitrin_motion_gif',
'on') and is_state('sensor.recent_motion1', 'Soyunma Odası Sensor
Motion') %}
/local/png/md-lite/art/giysi.jpgOkay here is two conditions for a room card to appear on the screen.
- 'input_boolean.modern_dashboard_vitrin_motion_gif' should be on.
- "sensor.recent_motion1" should point Soyunma Odası Sensor Motion
Let's explain the second one briefly. I have hue motion sensors in my house. So I created a template sensor to know which room has the last motion detected status.
To create this sensor first group your motion sensors(can be different brands) from the UI(helpers section) and then just enter the above line into sensor.yaml
- platform: template
sensors:
recent_motion1:
friendly_name: 'Recent Motion'
value_template: >-
{% set x = expand('binary_sensor.hue_motion_sensors')
| selectattr('state', 'eq', 'on')
| sort(reverse=true, attribute='last_changed')
| list %}
{% if (x | count > 0) and (((as_timestamp(now()) - as_timestamp(x[0].last_changed)) | int) < 1) %}
{% if (area_name(x[0].entity_id) != None) %}
{{ area_name(x[0].entity_id) }}
{% else %}
{{ x[0].name }}
{% endif %}
{% else %}
{{ states('sensor.recent_motion1') }}
{% endif %}Okay after refreshing template entites on developers tools
a new sensor will appear as "sensor.recent_motion1". This new sensor will tell you which room has the last motion detected.
When you check from developers tools - states. The new sensor will show the name of the sensor where last motion is detected.
Son in my case it is "Ofis Sensor Motion" which is the name of my office Hue sensor.
This how you create a room presence sensor.
So let's go back to the code.
Line 31
{% elif is_state('input_boolean.modern_dashboard_vitrin_motion_gif',
'on') and is_state('sensor.recent_motion1', 'Ofis Sensör Motion') %}
/local/png/md-lite/art/ofis.JPGThis will turn on office picture if the last motion is being detected at there. The outcome should be like this.
So as long as "input_boolean.modern_dashboard_vitrin_motion_gif" is on you can see motion detected room pictures and it will be dynamic meaning it will always refresh.
Clicking on the picture will toggle "input_boolean.modern_dashboard_vitrin_motion_gif" and will turn it off so the dog icon will re appear again.
Line 81 is the play icon.
This icon has one simple function. It plays music on the last motion detected room meaning the room you are in. Of course this will be useful if you are alone in the house. If there are other people last motion detected room will consistently change. But even in that case you can use media players in this card to start or stop music.
So Play button has 2 conditions to appear in the page.
- "input_boolean.modern_dashboard_simple_version_spotify_update_status" should be off meaning spotify should not be playing anything.
- "input_boolean.modern_dashboard_spotify" Spotify page should be on meaning tv section must be off.
Line 92 is where an input button is being used for playing the music. When you press the the play icon the button will activate an automation.
Room Presence Spotify Automation
You can find the automation above and change it to your like. After that the play button will be able to play the music on the room where motion is last detected.
Line 113. Now we have the media player card here. 2 Conditions
- Spotify should be playing
- Spotify boolean should be on
input_boolean.modern_dashboard_simple_version_spotify_update_status is being explained in the upper parts of this manual. So it is easy to implement.
Line 208 is the place for progress bar. Because the mushroom media player has no progress a mini media player is being used here.
Line 251 it is the place where Spotify card displays. It is being activated with "input_boolean.modern_dashboard_spotify_card" and this booleans is activated through a single click to playlist icon.
Line 284 is where css magic happens starts.
Line 300. I placed a code here to deactivate all the ambilight features behind the cards when alarm is on "arming" or "armed" status.
So normally the card will show like this :
But when alarm is activated :
Other sections will transform a secret blurred image behind the room cards to visualize the experience.
For example :
{% elif is_state('input_boolean.modern_dashboard_vitrin_motion_gif', 'on') and is_state('sensor.recent_motion1', 'Ofis Sensör Motion') %}
background: url('/local/png/md-lite/art/ofis.JPG') center no-repeat;
animation: Gradient 12s linear infinite;
box-shadow: none;
filter: blur(70px) saturate(200%);
border: none !important;
background-size: 80% 80%;
position: absolute;With this code on Line 302, if the last motion detected room is Office the pictures should look like this
but if you change blur(70px) value on line 306 to blur(0px) then you will see the background like this :
So this is the trick here. A blurred image created from the main image will make the ambilight effect when blurred.
Line 416 is the place where menu under the image will start.
You can swipe between the menus. Main menu will open spotify and the other one is the sub menu of spotify including the media players. The playlist here(line 550) opens the spotify card below.
Other lines include the media players at my home. Single tap will start spotcast and double tap will stop the media player from playing whatever it is playing.
Line 878 is where the TV section starts.
There is no need to explain every single code here because a manual on this allready exist.
Please check my "Live TV with remote controller for Home Assistant" project at
A manual is detaiily explaining the codes used in this section.
line 1022 is the place where a sub menu and menu will be displayed just like in Line 416.
on Line 1329 I place firemote remote to control the tv. You can access the remote by swiping from right to left
Line 1372 is the end line css for all card display.
Line 1388 will place a background to the card if the android tv is on.
