Hi @Mattias_Persson. How do you get the youtube token to be seen in the media card?
okay, later this day i will have a look at it.
1 Like
Hi! Quick question : where do you truncate the text into one line so it display “long tex…”?
I would rather have it on two lines…
Thanks in advance!
Thanks for your reply. I thought that would help too, but the space stays the same. (Or is it even a little bit bigger?) The grid-template-rows is updated to 3.
Hi @Mattias_Persson ,
Is it possible to create a icon and a button with up/stop/down for roller shutters and curtains?
Now it only support to push on it and use a pop-up or so.
Your help would mee much appreciated.
@Quinnod34 cool icons! Did you perhaps also have a cool icon for a sunshade?
Or anybody else, looking for a cool animated sunscreen icon for this dashboard 
Having loads of fun building out my own dashboard.
However, I feel like I’m missing something obvious as nothing shows in the Sidebar. Can anyone help me get pointed the right way as everything I’ve tried so far seems to get me nowhere? Thanks in advance.
Paste your ui-lovelace.yaml as a start.
Will answer my own question here incase anyone else is has the same problem.
Needed to add square: false to every grid-area.
#################################################
# #
# VARDAGSRUM #
# #
#################################################
- type: grid
square: false
title: Vardagsrum
view_layout:
grid-area: vardagsrum
columns: 2
cards:
Hello Guys. I need some help with the config. I just copy the copy of hass-config/popup/footer/updater.yaml
Error Msg : ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'if (entity) { let links = new RegExp('<a href="([^"]+)"', "g"), installed = entity
And Also the Icon is very big, how to fix it?
entity: light.bed_light
icon: mdi:air-conditioner
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Uppdateringar
style:
.: |
:host .content {
width: 100%;
}
hui-grid-card:
$: |
button-card:nth-child(2),
button-card:nth-child(4) {
margin: 0.6em 0 2.1em 0.8em;
}
button-card:nth-child(6) {
margin: 0.6em 0 0.5em 0.8em;
}
#root {
grid-gap: 0 !important;
padding: var(--card-content-padding);
width: max-content;
}
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: sensor.hass_version_installed
template: updater_hass
- type: custom:button-card
entity: sensor.hass_version_installed
triggers_update:
- sensor.hass_version_latest
- sensor.hass_version_latest_beta
name: Uppdatera HASS
icon: mdi:update
styles:
card:
- width: max-content
- filter: |
[[[
return `[[[
if (entity) {
return entity.state === states['sensor.hass_version_latest'].state ||
entity.state === states['sensor.hass_version_latest_beta'].state
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: |
[[[
return `[[[
return entity
? 'flex'
: 'none';
]]]`
]]]
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Startar watchtower...'
});
hass.callService('switch', 'turn_on', {
entity_id: 'switch.docker_watchtower'
});
]]]`
]]]
template: icon_name
- type: custom:button-card
entity: sensor.hacs
template: updater_hacs
- type: custom:button-card
entity: sensor.hacs
name: Öppna HACS
icon: mdi:open-in-new
styles:
card:
- width: max-content
- filter: |
[[[
return `[[[
if (entity) {
return entity.state === '0'
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: |
[[[
return `[[[
return entity && entity.state !== 'unknown'
? 'flex'
: 'none';
]]]`
]]]
template: |
[[[
return window.navigator.userAgent.match(/iPhone/i)
? 'hacs_navigate_ios'
: 'hacs_iframe';
]]]
- type: custom:button-card
entity: sensor.template_updates
template: updater_other
- type: custom:button-card
entity: sensor.template_updates
name: Kontrollera
icon: mdi:reload
styles:
card:
- width: max-content
- filter: opacity(30%)
- display: |
[[[
return `[[[
return entity
? 'flex'
: 'none';
]]]`
]]]
tap_action:
toast: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Söker efter uppdateringar...',
duration: 3000
});
]]]`
]]]
action: call-service
service: homeassistant.update_entity
service_data:
entity_id:
- sensor.gosund_monitors_esphome_version
- sensor.gosund_ac_esphome_version
- sensor.gosund_fan_esphome_version
- sensor.esphome_version_latest
- sensor.playactor_version_installed
- sensor.playactor_version_latest
- sensor.kemper_version
- sensor.udm_unifios
- update.nas_dsm_update
template: icon_name
I just easy to test the config with a simple button card. I can’t figure it out. please help.
Trying to get it fit and working on my Google Hub.
For some reason the touch input is lagging for the swipe animation en cuts out some of the buttons.
Anybody here that did get it to work though?
Hey, can you share that AC icon with me? I really like it!
Hi,
can someone help me, if there is a solution to change the language or can somebody give me a translated version for german or english?
Big Thanks
The dashboard is made by Matias, his native langauge is Swedish, so he used Swedish words here and there because thats convenient for him. Just use a translator if you want to know what the word means.
Oh dear, thats clear. But i have seen many here in the thread using german or english. and the question is, can i change it by any settings or have i to set all the words by manual into an other language.
Thanks
No, it’s manually written code. You can just copy and paste a file content into a translator, maybe that works for you, but no, there is no “feature” to translate anything in the config files… Atleast, not that I’m aware of.
Hi @Mattias_Persson How can I make the popup adapt to the number of icons I have? I can’t change the width of the window. Thank you very much
This is my code
action: fire-dom-event
browser_mod:
command: popup
title: Samsung Tv
style:
hui-vertical-stack-card:
$: |
#root {
padding-top: 1em;
}
hui-horizontal-stack-card {
padding: 0em 2em 1em 1em;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:logout-variant
tap_action:
action: call-service
service: script.samsung_tv_source
template: icon_only
1 Like
Try this:
action: fire-dom-event
browser_mod:
command: popup
title: Living Room TV
style:
hui-vertical-stack-card:
$: |
hui-horizontal-stack-card {
padding: 0em 2em 2.3em 2em;
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
}
card:
type: vertical-stack
cards:
- type: entities
state_color: true
show_header_toggle: false
card_mod:
class: content
entities:
- entity: media_player.lg_webos_smart_tv
name: LG Smart TV
secondary_info: last-changed
# - entity: automation.tv_on_lights
- entity: select.hdmi_lg
#################################################
# #
# TOP ROW BUTTONS #
# #
#################################################
- type: horizontal-stack
cards:
#################################################
# MENU BUTTON #
#################################################
- type: custom:button-card
entity: media_player.lg_webos_smart_tv
icon: mdi:menu
tap_action:
action: call-service
service: script.lg_tv_menu
template: icon_only
1 Like
Look in the “/config/popup/footer/nas.yaml” and play around with the width there.