in the item “kelder” I only want 2 automations. So now I want to make a new header “Bureau”, with maybe 2 or 3 items, and another header with 2 or 3 items. How do I do that ?
I use a popup-card.
- type: custom:button-card
entity: alarm_control_panel.blink_miccamsysten
name: Kamera
tap_action:
action: call-service
service: |
[[[ return variables.state === 'armed_away' ? 'alarm_control_panel.alarm_disarm' : 'alarm_control_panel.alarm_arm_away'; ]]]
service_data:
entity_id: alarm_control_panel.blink_miccamsysten
hold_action:
!include popup/popup_miccam1.yaml
template:
- base
- icon_camera
Code:
action: fire-dom-event
browser_mod:
command: popup
title: Kamera
style:
hui-grid-card:
$hui-entities-card$: |
#states {
padding-bottom: 0 !important;
}
$hui-history-graph-card$ : |
.content {
padding: 1.8em 2em 1.8em 2em !important;
}
$hui-glance-card$ : |
.entities.no-header {
padding-top: 0 !important;
}
$: |
button-card {
justify-self: center;
margin: 0.8em 0 2.5em 0;
width: 100%;
}
#root {
grid-gap: 0 !important;
}
hui-map-card {
height: 99.5% !important;
}
card:
type: grid
columns: 1
square: false
cards:
- type: picture-entity
entity: camera.blink_miccam1
show_name: false
show_state: false
- type: entities
show_header_toggle: false
entities:
- entity: script.camera_stream
name: Kamera auslösen
icon: mdi:cast
Maybe this help u a bit.
2 Likes
No One willing to help with this!?
How does your “icon_camera” template looks like?
Its only the camera icon:
icon_camera:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: -14%
- margin-top: 1%
custom_fields:
icon: >
<svg viewBox="0 0 24 24">
<path fill="#9da0a2" d="M6.03 12.03L8.03 15.5L5.5 18.68L2 12.62L6.03 12.03M17 18V15.29C17.88 14.9 18.5 14.03 18.5 13C18.5 12.43 18.3 11.9 17.97 11.5L19.94 10.35C20.95 9.76 21.3 8.47 20.71 7.46L19.33 5.06C18.74 4.05 17.45 3.7 16.44 4.28L8.31 9C7.36 9.53 7.03 10.75 7.58 11.71L9.08 14.31C9.63 15.26 10.86 15.59 11.81 15.04L13.69 13.96C13.94 14.55 14.41 15.03 15 15.29V18C15 19.1 15.9 20 17 20H22V18H17Z" />
</svg>
1 Like
Det här är ju sinnessjukt schysst. Men hur lyckas jag få in detta?
Är en nybörjare delxe 
Men om du orkar och har tid kan du gärna få berätta 
med vänlig hälsning
Steven
I want to round my thermostat temperature to 0.5 decimal. So my temp in HA matches the one on the Nest thermostat.
I found the formula: | float * 2 | round / 2
But how do I write it out in button_card_templates in this constant?
const temperature = entity.attributes.current_temperature;
I tried different things but nothing works.
Hi there,
I’m trying to implement custom_fields into some light cards.
But I’m struggling with a conditional custom_field, which should appear if motion in that room is detected.
It is working like in the following code, but the scaling is not working. So it is not useable on tablets or smartphones. Any ideas to find a more elegant solution? Thanks in advance
type: custom:button-card
entity: light.philips_led_strip_kuche
name: LED
template:
- light
- icon_hue
custom_fields:
automation:
card:
type: button
name: ' '
icon: mdi:lightbulb-auto-outline
entity: automation.kuche_aus
style: |
ha-card {
box-shadow: none;
}
motion: |
[[[ if (states["binary_sensor.bewegungsmelder_kuche"].state == 'off')
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 50px; height: 50px; color: grey;">
</ha-icon>`
]]]
styles:
custom_fields:
motion:
- filter: opacity(50%)
- overflow: unset
- position: absolute
- top: 15%
- right: 40%
automation:
- filter: opacity(100%)
- overflow: unset
- position: absolute
- left: 60%
- top: 58%
- right: 10%
card:
- overflow: unset
edit: == ‘off’ is just for debugging… when in productive mode it of course should be ‘on’
Hi all!! does anyone here has Xbox integration working with @Mattias_Persson templating?
ive got xbox integration and all games are available on media browser (can be started from there by the way) and all game covers etc… it would be something else if these games could be selected from frontend similarly as it is done by selecting tv source inputs or something like that…
Could you guide me because I do not realize why it only applies to the first line when all horizontal stacks are within a vertical one
I can’t find the use of putting $:| or : |
Thanks
action: fire-dom-event
browser_mod:
command: popup
title: Samsung 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.samsung_tv
name: Samsung TV
secondary_info: last-changed
#- entity: script.samsung_tv_energy_saving
- entity: input_select.source_samnsung_tv
- 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
- type: custom:button-card
icon: mdi:television
tap_action:
action: call-service
service: script.deco_samsung_on
template: icon_only
- type: custom:button-card
icon: mdi:television
tap_action:
action: call-service
service: script.tv_samsung_on
template: icon_only
- type: horizontal-stack
cards:
- type: custom:button-card
#icon: mdi:power-on
tap_action:
action: call-service
service: script.tv_samsung_on
template: icon_only
- type: custom:button-card
icon: mdi:menu-up
tap_action:
action: call-service
service: script.tv_samsung_off
template: icon_only
- type: custom:button-card
#icon: mdi:power-off
tap_action:
action: call-service
service: script.samsung_tv_source
template: icon_only
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:menu-left
tap_action:
action: call-service
service: script.tv_samsung_off
template: icon_only
- type: custom:button-card
icon: mdi:power-off
tap_action:
action: call-service
service: script.samsung_tv_source
template: icon_only
- type: custom:button-card
icon: mdi:menu-right
tap_action:
action: call-service
service: script.tv_samsung_on
template: icon_only
- type: horizontal-stack
cards:
- type: custom:button-card
#icon: mdi:power-off
tap_action:
action: call-service
service: script.tv_samsung_off
template: icon_only
- type: custom:button-card
icon: mdi:menu-down
tap_action:
action: call-service
service: script.samsung_tv_source
template: icon_only
- type: custom:button-card
icon: mdi:power-off
tap_action:
action: call-service
service: script.tv_samsung_off
template: icon_only
Goodevening, I got a question about this awesome UI setup. When I create a switch, like wake on lan:
- platform: wake_on_lan
name: wol_home_pc
host: !secret wake_on_lan_host
mac: !secret wake_on_lan_mac
Somehow, it creates a sensor with the name wol_home_pc and the entity switch.wol_imac_2. Am I missing something in the config/templating or why is this happening? I was expecting the switch to be switch.wol_home_pc instead of the imac one.
I have a problem setting up the main grid. Actually I have several grid areas of 2 columns each:
I am struggling on how to achieve a 3x2 (or more) area in the highlighted grid area. If I specify 2 columns it renders it as a 3 rows of 2 columns each. If I specify 3 columns, then it scales down the button cards as a 3x3 grid taking the space of a 2x2 one:
Can you post an example of a ui-lovelace.yaml having not square grids (3x2 or 4x2 etc.)?
Thanks
Has anyone created an animated Christmas tree icon for this dashboard? I can’t seem how to make one with lights turning on and off.
If I succeed, I’ll share it here
Thanks for the incredible dashboard Mattias!
Is the play/pause on media card working for you still? It seems to have stopped working for me, for Plex.
Entity state is playing:
And that tap action to play/pause is not working…
For Netflix it is working.
What could be wrong?
EDIT: updated to remove the mention of overlay because apparently it is only shown briefly after playing/pausing.
Hey @Mattias_Persson
Your lovelace theme is shown off on youtube today
Just warning you about all the new questions coming this way. 
3 Likes
Hi there all,
I’m new on the Lovelance so I just want to ask…
Is there some installation manual please ?
Thanks all
Denis
1 Like
The plex sensor is for recently added
Can you post a mockup image of what that would look like?
Try deleting all switch.wol_imac and restart
