I didn’t had those set.
But even that doesn’t help. It might be that i have the UDM-SE, not the UDM-Pro. Could be it works differently.
hey, could u tell me, how do you get the description, like wifi name HahaHaha, bluetooth connections or battery percentage under the icon. maybe could u provide an example code. thanks
That could be the case, I can see some people posting issue with the SE API online, and this script is only tested on the UDM Pro
after fixing the permissions is curl working
did you undo calling the .py file with the script, it should work as written.
hopefully you manage to solve the issue.
I can’t tell you how @Clatus did it, I would say its a template sensor for the wifi name or the ssid sensor from the HA App, and he removed show_state: false from the glance card. remember to update the template in the style so the icon changes color
I just recreated it using mushroom template cards.
first you need to replace the glance card that is under the history-graph card with a horizontal-stack.
then add in your mushroom cards, I have 2 device_trackers one from my DMP and one from my HA app.
- type: history-graph
card_mod:
style: |
ha-card > div {
padding: 0 2em 1em 1.6em !important;
}
entities:
- entity: person.mason
- type: horizontal-stack
card_mod:
style: |
ha-card > div {
padding: 1em 1.5em 0.2em 1em !important;
box-sizing: content-box;
}
cards:
- type: custom:mushroom-template-card
primary: Router
secondary: '{{state_attr(config.entity,''essid'')}}'
icon: mdi:wifi
entity: device_tracker.masons_iphone_dmp
layout: vertical
icon_color: '{{ is_state(config.entity, ''home'') | iif(''#3182b7'', ''#3c3f3f'') }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Position
secondary: '{{states(config.entity) | title }}'
icon: cil:iphone-modern
entity: device_tracker.masons_iphone_app
layout: vertical
icon_color: '{{ is_state(config.entity, ''home'') | iif(''#3182b7'', ''#3c3f3f'') }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
2 Likes
Thanks for helping anyway! Really appreciated.
I guess it just might be that it is the SE model. I’ll try digging into it sometime.
Do you, or someone else who reads this, know how the Media card is setup? With the conditional cards.
If i read correctly on the github, if I pay something, the recently added card should change to the device that is currently playing and show an image backdrop (if available).
But for me it is only showing three Plex recently added card.
I’m not sure what I need to change. I changed/added media_players where needed.
the best I can do is share mine in the hope that that helps you modify it as needed.
conditional_media is vary dependent on what media you have and how each one functions.
however it is just a template so you can use developer-tools/template to debug it
---
unique_id: conditional_media
name: conditional_media
state: >
{% set recently_added = 'Last added' %}
{% set paused_timeout_minutes = 15 %}
{% set media_players = [
states.media_player.plex_prologue_mason,
states.media_player.spotify,
states.media_player.living_room_tv,
states.media_player.plex_plex_for_lg_lg_oled65cxpta ] %}
{% macro media(state) %}
{% set state = media_players | selectattr('state','eq',state) | list %}
{% set last_changed = recently_added if state | length == 0 else state | map(attribute='last_changed') | list | max %}
{{ state | selectattr('last_changed','eq', last_changed) | map(attribute='name') | list | join }}
{% endmacro %}
{% set on = media_players | selectattr('state','eq','on')| list %}
{% set timeout_playing = False if on | length == 0 else
(as_timestamp(now()) - as_timestamp(on | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% set playing = media_players | selectattr('state','eq','playing') | list %}
{% set timeout_playing = False if playing | length == 0 else
(as_timestamp(now()) - as_timestamp(playing | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% set paused = media_players | selectattr('state','eq','paused') | list %}
{% set timeout_paused = False if paused | length == 0 else
(as_timestamp(now()) - as_timestamp(paused | map(attribute='last_changed') | list | max)) < paused_timeout_minutes * 60 %}
{% if playing %}
{{ media('playing') if timeout_playing else media('paused') if timeout_paused else media('playing') }}
{% elif on %}
{{ media('on')}}
{% elif paused %}
{{ media('paused') if timeout_paused else recently_added }}
{% else %}
{{ recently_added }}
{% endif %}
options: >
{% set recently_added = ['Last added'] %}
{% set media_players = [
states.media_player.living_room_tv,
states.media_player.plex_prologue_mason,
states.media_player.spotify,
states.media_player.plex_plex_for_lg_lg_oled65cxpta ] %}
{{ recently_added + media_players | map(attribute='name') | list }}
select_option:
service: select.select_option
target:
entity_id: select.conditional_media
data:
option: >
{{ option }}
That looks like exactly what i did, changed the media players there.
So what about your media section in ui-lovelace.yml?
This part:
- entity: select.conditional_media
state: Sovrum
card:
type: custom:button-card
entity: media_player.sovrum
triggers_update: sensor.youtube_watching
template:
- conditional_media
- icon_apple_tv
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify
card:
type: custom:button-card
entity: media_player.spotify
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: Kök
card:
type: custom:button-card
entity: media_player.kok
template:
- conditional_media
- icon_nest_mini
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: select.conditional_media
state_not: Living Room TV
- entity: select.conditional_media
state_not: Mason's Prologue
- entity: select.conditional_media
state_not: Spotify
- entity: select.conditional_media
state_not: Plex - Living Room TV
card:
type: custom:button-card
entity: sensor.plex_recently_added
tap_action:
action: none
template:
- conditional_media
- icon_plex
- type: conditional
conditions:
- entity: select.conditional_media
state: Living Room TV
card:
type: custom:button-card
entity: media_player.living_room_tv
template:
- conditional_media
- icon_apple_tv
- type: conditional
conditions:
- entity: select.conditional_media
state: Mason's Prologue
card:
type: custom:button-card
entity: media_player.plex_prologue_iphone
template:
- conditional_media
- icon_book
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify
card:
type: custom:button-card
entity: media_player.spotify
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: Plex - Living Room TV
card:
type: custom:button-card
entity: media_player.plex_plex_for_lg_lg_oled65cxpta
template:
- conditional_media
- icon_plex
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.template_living_room_tv_source_plex
template:
- base
- loader
- icon_plex_alt
- no_state
name: Plex
tap_action:
action: call-service
service: script.living_room_tv_open
service_data:
source: Plex
- type: custom:button-card
entity: binary_sensor.template_living_room_tv_source_youtube
template:
- base
- loader
- icon_youtube
- no_state
name: YouTube
tap_action:
action: call-service
service: script.living_room_tv_open
service_data:
source: YouTube
- type: custom:button-card
entity: binary_sensor.template_living_room_tv_source_netflix
template:
- base
- loader
- icon_netflix
- no_state
name: Netflix
tap_action:
action: call-service
service: script.living_room_tv_open
service_data:
source: Netflix
- type: custom:button-card
entity: binary_sensor.template_living_room_tv_source_funimation
template:
- base
- loader
- icon_funimation
- no_state
name: Funimation
tap_action:
action: call-service
service: script.living_room_tv_open
service_data:
source: Funimation
Are those state/state_not mentioned anywhere else?
For the love of God, i can’t get it to work.
I’m trying with only 2 media players.
A plex and a spotify.
But the main card keeps showing the Recently Added in plex info 
Edit
I found what i did wrong.
I thought the state/state_not were just something made up, but they are not. They are the states that the select_conditional give, or rather, the names of the media player.
I found out through the developer States section.
Got it working now!
Thanks for your tips and hints @masoncrawford1994
Lets get clicking then 
thanks alot for that. thats what i was looking for!
What one did you go for? mushroom or glance?
Hi André, now it works but it doesn’t show the percent from the brightness in the button. how can I fix this?
homekit_light:
template:
- base
- circle
- loader
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
card_mod:
style:
#popup header
.:
content:
type: custom:light-popup-card
entity: >
[[[ return variables.entity_id; ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: '#d8d9e1'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: '#d5b08d'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 326
- action: call-service
service: light.turn_on
color: '#ce944b'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 500
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
service: browser_mod.popup
data:
title: >
[[[ return entity === undefined || entity.attributes.friendly_name; ]]]
card:
type: custom:light-entity-card
entity: >
[[[ return variables.entity_id; ]]]
brightness: true
color_temp: true
white_value: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
I can’t test as I don’t have light-popup-card, but I can think of 2 ways to fix this,
- use the light template not the circle template.
homekit_light:
template:
- base
- light
- loader
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
card_mod:
style:
#popup header
.:
content:
type: custom:light-popup-card
entity: >
[[[ return variables.entity_id; ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: '#d8d9e1'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: '#d5b08d'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 326
- action: call-service
service: light.turn_on
color: '#ce944b'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 500
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
service: browser_mod.popup
data:
title: >
[[[ return entity === undefined || entity.attributes.friendly_name; ]]]
card:
type: custom:light-entity-card
entity: >
[[[ return variables.entity_id; ]]]
brightness: true
color_temp: true
white_value: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
- add the circle_input variable to your new template, I would recommend trying 1 first.
homekit_light:
template:
- base
- circle
- loader
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
card_mod:
style:
#popup header
.:
content:
type: custom:light-popup-card
entity: >
[[[ return variables.entity_id; ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: '#d8d9e1'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: '#d5b08d'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 326
- action: call-service
service: light.turn_on
color: '#ce944b'
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
color_temp: 500
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
service: browser_mod.popup
data:
title: >
[[[ return entity === undefined || entity.attributes.friendly_name; ]]]
card:
type: custom:light-entity-card
entity: >
[[[ return variables.entity_id; ]]]
brightness: true
color_temp: true
white_value: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
2 Likes
using the light template works. thank you very much…
1 Like
The time at home in the circle is not displayed
homeassistant:2022.10.5
Starting with this dashboard, definitely a great project 
I have noticed that when a I tap an icon a “broken image icon” appears during the transition, any idea what could be happening? This happen in any device (PC, phone, tablet…). I attach a gif.
Thank you in advance!
@JavierM I have never seen that, and I have no idea why it would be happening. try the following
- Confirm that you have all the HACS integrations installed correctly
- Look at your logs and see if there are any errors
- Right click and inspect the button and see if you can catch what the image is pointing to
@weaverprojects I don’t understand what you are asking so I can’t help. show me what you have tried so far and I can see what I can do to help.
1 Like
add /www/loader.svg
1 Like