To give some extra inspiration, the following video was the final version. I incorporated LMS and made it so that the entire background of the dashboard was also tied so each player. Don’t mind the choppy animation. The tablet was a €180 cheap tablet. On faster tablets and PC it was butter smooth.
Unfortunately I don’t have the code anymore. But seeing how you have re-created my project, I’m confident you will get there 
!
Looks great!
That’s what I thought about as well with the changing background, did not have a lot of time yet to work on this as I’m more working on the backend currently. Still not 100% sure how to set it all up with snapcast and mopidy and spotify 
Can you show a snippet of your current interface that you use for multiroom audio control?
Hello everyone!
It took a long time to set everything up and it’s still a long way down the road but I think it’s time to share a bit of my project. As I had many help on these forums maybe it can help some one else.
Here are some screenshots of a wall mounted iPad Air, basic set up pages and a screensaver. Able to play Apple Music via AirPlay to Bose Soundtouch speakers. And yes; there is a disco mode 
Power readings with a wireless DSMR unit with a custom python script (so when HA is offline the power is still measured). An automatic ECO-mode when it detects the power-usage is above average.
The only thing missing is the floorplan; it’s because the iPad becomes pretty slow. so I made a python script for automatic lightning; depending on the time, light input (lux), tv on/off and persons in the house.
I can share more info when people are interested 
I’ve used the picture elements card to create a floor plan. It got quite busy with lots of elements so I created switches to turn on and off certain types of entity.
You can view the code at:
The sensors are created in the person.yaml file
person.yaml:
mike_battery:
friendly_name: "Battery"
unit_of_measurement: '%'
value_template: "{{states.device_tracker.life360_mike.attributes.battery }}"
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_mike', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_mike', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
mike_wifi:
friendly_name: "WiFi"
value_template: >-
{% if is_state_attr('device_tracker.life360_mike', 'wifi_on', true) %}
on
{% else %}
off
{% endif %}
and they are “called” in the UI in the section below.
Lovelace UI:
- entity: '${''sensor.'' + vars[0] +''_battery''}'
style:
'--paper-item-icon-color': >-
${'hsl(' + (states['sensor.' + vars[0] +'_battery'].state*1.1
)*((states['sensor.' + vars[0] +'_battery'].state/100)) +
',90%,40%)'}
left: '-1%'
top: '-1%'
transform: 'scale(1,1)'
type: state-icon
- entity: '${''sensor.'' + vars[0] +''_wifi''}'
style:
'--paper-item-icon-color': '#2b9af9'
left: 75%
top: '-1%'
transform: 'scale(1,1)'
type: state-icon
Hello all
In updateing my home as i go.
Need have some work to do on the floor plan to make it look nicer, and more radiator controllers are in the mail.
I recorded a quick example of my LMS dashboard. This is LMS with the material skin, which I embed using the iframe card. I then added my own buttons and elements to it using other cards and conditions. The volume buttons opens the volume sliders and the home button goes switches back to my main dashboard. On that dashboard I have a button card that goes to this LMS dashboard. Also added service calls to each volume slider that sync and unsync the speaker from the currently active one.
The reason I decided to ditch my previous project, is because it’s more practical to see a lot of content instead of volumes always on screen. I used the LMS view inside the vertical view on the left (on my previous project), which was basically showing the mobile version. I liked how clean and polished my project looked, but it’s more practical to see more information, tracks and playlists, so LMS in fullscreen.
With my own custom implementation, I can popup the volume sliders whenever I need it. So to me this was the best of both worlds.
This implementation is hard to explain and share unfortunately because I use a combination of automations, cards and conditions. Also it requires you to have LMS behind an https proxy in order to open it through iframe (you need https, while LMS is http normally).
Hello guys, Here i use the Life360 tracker.
Pardon the ignroance, but what is an LMS?
Logitech Media Server
Like tc23 said, and here is the integration: Logitech Squeezebox - Home Assistant (home-assistant.io)
I’ve started to use this platform a few weeks ago and it’s really great if you’'re looking for a powerful multiroom system. I wanted to try Snapcast with Mopidy. That was such a hassle just to read up and try and install everything. Then a user mentioned LMS, so I started to dig around and installed it on Windows as both client and server just to test it out. Liked it so much, that I got a standalone RPI4 for LMS Server (and simultanous client) and 3 seperate RPI’s for other rooms as clients. Rocking 4 speakers/rooms now and gonna get 2 more soon 
If you’re interested in this you should look up PiCoreplayer and Max2Play.
Removed all Google Cast streaming since then and haven’t looked back. I only use the Google Cast speakers now for voice commands and to play notifications/sounds.
Hi Mike,
I think I’m getting myself confused again.
Have I made a mistake by trying to use the tracker and battery sensors that get installed with the home assistant app instead of life360 ?
As the app created all the battery sensors I’m guessing them ones from the template won’t work even though I did put my correct tracker entity id into that section.
But that’s not my main problem, it’s very temperamental when it actually shows the card most times it displays fine and then other times I will get the red error box saying…
Custom element doesn’t exist: hui-picture-elements-card.
Have you seen that error before nothing much shows up on a search for it.
Thanks
So you could most likely use the app tracker to do this, but not as it’s written by hoffdad. You will need to alter some of the code to make the app trackers work.
For example: If you just try and change the device in the below code it won’t work because “wifi_on” is not an attribute of the tracker created by the app.
if is_state_attr('device_tracker.life360_mike', 'wifi_on', true) %}
As far as the “Custom element doesn’t exist: hui-picture-elements-card” error. I have seen this and it is usually caused by something in the UI code not being correct. Unfortunately it’s not something specific that I could just offer a fix for, you will need to troubleshoot.
Cool job , mind sharing the code ?
Also , how did you get with the lms pwd ? you embedded the login in the iframe ?
Thanks
Hello guys, Here i use the Life360 tracker.
Here is the code is use for it. Sorry for the Dutch translation.
Sensor: for the life360 information
- platform: template
sensors:
#Speed
harmtina_speed:
friendly_name: "Harmtina snelheid"
unit_of_measurement: "km/h"
value_template: "{{ states.device_tracker.life360_h10.attributes.speed | round(0) }}"
bart_speed:
friendly_name: "Bart snelheid"
unit_of_measurement: "km/h"
value_template: "{{ states.device_tracker.life360_bart.attributes.speed | round(0) }}"
#Battery
harmtina_battery:
friendly_name: "Harmtina mobiel batterij"
unit_of_measurement: "%"
value_template: "{{ states.device_tracker.life360_h10.attributes.battery | round(0) }}"
device_class: battery
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_h10', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_h10', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_h10', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_h10', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_h10', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
bart_battery:
friendly_name: "Bart mobiel batterij"
unit_of_measurement: "%"
value_template: "{{ states.device_tracker.life360_bart.attributes.battery | round(0) }}"
device_class: battery
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_bart', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_bart', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_bart', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_bart', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_bart', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
#Driving
harmtina_rijden:
friendly_name: "Harmtina rijden"
value_template: "{{ states.device_tracker.life360_h10.attributes.driving }}"
bart_rijden:
friendly_name: "Bart rijden"
value_template: "{{ states.device_tracker.life360_bart.attributes.driving }}"
#Motion
harmtina_beweging:
friendly_name: "Harmtina beweging"
value_template: "{{ states.device_tracker.life360_h10.attributes.moving }}"
icon_template: "{% if is_state('device_tracker.life360_h10.attributes', 'on') %} mdi:walk{% else %}mdi:walk{% endif %}"
bart_beweging:
friendly_name: "Bart beweging"
value_template: "{{ states.device_tracker.life360_bart.attributes.moving }}"
icon_template: "{% if is_state('device_tracker.life360_bart.attributes', 'on') %} mdi:walk{% else %}mdi:walk{% endif %}"
#Adress
harmtina_adress:
friendly_name: "Harmtina adres"
value_template: "{{ states.device_tracker.life360_h10.attributes.address }}"
bart_adress:
friendly_name: "Bart adres"
value_template: "{{ states.device_tracker.life360_bart.attributes.address }}"
#Sinds
harmtina_sinds:
friendly_name: "Harmtina sinds"
value_template: "{{ states.device_tracker.life360_h10.attributes.at_loc_since }}"
bart_sinds:
friendly_name: "Bart sinds"
value_template: "{{ states.device_tracker.life360_bart.attributes.at_loc_since }}"
#WiFi connected
harmtina_wifi:
friendly_name: "Harmtina wifi"
value_template: "{{ states.device_tracker.life360_h10.attributes.wifi_on }}"
icon_template: "{% if is_state('device_tracker.life360_h10.attributes', 'on') %} mdi:wifi{% else %}mdi:wifi-off{% endif %}"
bart_wifi:
friendly_name: "Bart wifi"
value_template: "{{ states.device_tracker.life360_bart.attributes.wifi_on }}"
icon_template: "{% if is_state('device_tracker.life360_bart.attributes', 'on') %} mdi:wifi{% else %}mdi:wifi-off{% endif %}"
Sensor: For the travel time is use Waze
- platform: waze_travel_time
origin: device_tracker.life360_bart
destination: zone.home
name: bart naar huis
region: 'EU'
Lovelace card
type: horizontal-stack
cards:
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: binary_sensor.workday_sensor
state: 'on'
elements:
- type: state-icon
entity: sensor.bart_naar_enexis
icon: 'mdi:office-building-marker-outline'
style:
top: 60%
right: '-1%'
'--paper-item-icon-color': white
transform: scale(0.75)
- type: state-label
entity: sensor.bart_naar_enexis
style:
top: 73%
right: '-1%'
weight: 50px
color: white
font-weight: 300
font-size: 10px
- type: conditional
conditions:
- entity: device_tracker.bart
state: not_home
elements:
- type: state-icon
entity: sensor.bart_naar_huis
icon: 'mdi:home-import-outline'
style:
top: 48%
right: '-1%'
'--paper-item-icon-color': white
transform: scale(0.8)
- type: state-label
entity: sensor.bart_naar_huis
style:
top: 60%
right: 0%
weight: 50px
color: white
font-weight: 300
font-size: 10px
- type: conditional
conditions:
- entity: device_tracker.galaxy_s9
state: home
elements:
- type: state-icon
entity: device_tracker.galaxy_s9
icon: 'mdi:bluetooth'
style:
top: 45%
right: '-10%'
'--paper-item-icon-color': white
- type: conditional
conditions:
- entity: device_tracker.galaxy_s9
state: home
elements:
- type: state-icon
entity: device_tracker.life360_bart
attribute: wifi_on
icon: 'mdi:wifi'
style:
top: 28%
right: '-10%'
- type: conditional
conditions:
- entity: sensor.bart_rijden
state: 'True'
elements:
- type: state-icon
entity: sensor.bart_speed
icon: 'mdi:car-side'
style:
top: 10%
left: 10%
- type: state-label
entity: sensor.bart_speed
style:
top: 10%
left: 10%
- type: state-label
entity: sensor.bart_battery
style:
top: 11%
right: '-2%'
- type: state-icon
entity: sensor.bart_battery
style:
top: 10%
right: '-10%'
- type: state-label
entity: device_tracker.life360_bart
style:
top: 150px
right: -99px
width: 200px
color: white
font-size: 16px
text-align: right
- type: state-label
entity: device_tracker.life360_bart
attribute: address
style:
bottom: '-15%'
right: '-10%'
weight: 200px
color: white
font-weight: 300
font-size: 10px
image: /local/bart.jpg
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: binary_sensor.workday_sensor
state: 'on'
elements:
- type: state-icon
entity: sensor.harmtina_naar_apotheek
icon: 'mdi:pharmacy'
style:
top: 60%
right: '-1%'
'--paper-item-icon-color': white
transform: scale(0.8)
- type: state-label
entity: sensor.harmtina_naar_apotheek
style:
top: 73%
right: '-1%'
weight: 50px
color: white
font-weight: 300
font-size: 10px
- type: conditional
conditions:
- entity: device_tracker.iphone_van_harmtina
state: not_home
elements:
- type: state-icon
entity: sensor.harmtina_naar_huis
icon: 'mdi:home-import-outline'
style:
top: 48%
right: '-1%'
'--paper-item-icon-color': white
transform: scale(0.8)
- type: state-label
entity: sensor.harmtina_naar_huis
style:
top: 60%
right: 0%
weight: 50px
color: white
font-weight: 300
font-size: 10px
- type: conditional
conditions:
- entity: device_tracker.iphone_van_harmtina
state: home
elements:
- type: state-icon
entity: device_tracker.iphone_van_harmtina
icon: 'mdi:bluetooth'
style:
top: 45%
right: '-10%'
'--paper-item-icon-color': white
- type: conditional
conditions:
- entity: device_tracker.iphone_van_harmtina
state: home
elements:
- type: state-icon
entity: device_tracker.life360_h10
attribute: wifi_on
icon: 'mdi:wifi'
style:
top: 28%
right: '-10%'
- type: conditional
conditions:
- entity: sensor.harmtina_rijden
state: 'True'
elements:
- type: state-icon
entity: sensor.harmtina_speed
icon: 'mdi:car-side'
style:
top: 10%
left: 10%
- type: state-label
entity: sensor.harmtina_speed
style:
top: 10%
left: 10%
- type: state-label
entity: sensor.harmtina_battery
style:
top: 11%
right: '-2%'
- type: state-icon
entity: sensor.harmtina_battery
style:
top: 10%
right: '-10%'
- type: state-label
entity: device_tracker.life360_h10
style:
top: 150px
right: -99px
width: 200px
color: white
font-size: 16px
text-align: right
- type: state-label
entity: device_tracker.life360_h10
attribute: address
style:
bottom: '-15%'
right: '-10%'
weight: 200px
color: white
font-weight: 300
font-size: 10px
image: /local/harmtinas.jpg
Can you show how to scale the iFrame in height.
Use aspect ratio. The iframe card is always full width, so changing aspect ratio will change the height.
aspect_ratio: 165% will increase height. So just try some percentages till you have the one you like
Perfekt, thanks
Please help me ).
Cannot understand "translate()" function.
There is a Picture elements card with:
According to this, a default "translate()" is (-50%,-50%).
My rotated icons a shifted. To prevent it, I have to explicitly deifine "translate(-50%,50%)":
type: picture-elements
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 18%
left: 10%
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 18%
left: 30%
transform: rotate(0.25turn)
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 18%
left: 50%
transform: 'translate(-50%,-50%) rotate(-0.25turn)'
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 18%
left: 70%
transform: 'translate(-50%,-50%) rotate(0.5turn)'
image: /local/images/blue.jpg
Why does rotation cause this shift?
And there is a question about using image inside Picture elements card.
There are two images of SAME size:
Please check this code:
- type: picture-elements
elements:
- type: image
image: /local/images/pink_mask.png
style:
top: 0%
left: 0%
image: /local/images/blue.jpg
Default translate() is (-50%,-50%)
Here a center of the 2nd image (pink) is located on the left top corner.
This is OK (expected behaviour).
Next:
- type: picture-elements
elements:
- type: image
image: /local/images/pink_mask.png
style:
top: 50%
left: 50%
image: /local/images/blue.jpg
Here a center of the 2nd image (pink) is located on the center of the card.
Also the 2nd image is scaled - WHY???
Next:
- type: picture-elements
elements:
- type: image
image: /local/images/pink_mask.png
style:
top: 0%
left: 0%
transform: 'translate(0,0)'
image: /local/images/blue.jpg
Here a left top corner of the 2nd image (pink) is located on the left top corner of the card.
This is OK (expected behaviour).
But in “Panel mode” it looks bad, WHY?
When I start resizing the browser’s window (from full screen to a smaller size), at some point pink & blue images become of one size (as required).
Update:
Seems this is a bug: