How do i turn off the looping at the effect. Going crazy !!
Pls help!
Hey, love the theme. I’ve jumped right in trying to customize it for myself. So far its going ok for how new to this I am. 
Was wondering if anyone could help me get the climate to do more than just cool? I have a nest that does cool, heat and heat_cool. I basically just want it to be blue and say cool when cooling or red and say heat when heating and have the title “deactivate” and say idle when its not doing those things. I assume currently to get it to go from white to grey it has to be outright off which will never be my case.
Would something like this work for the state:
- type: custom:button-card
entity: climate.hallway_thermostat
name: Nest
double_tap_action: !include popup/sovrum_klimat.yaml
template:
- base
- icon_climate
- circle
variables:
circle_input: >
[[[
if (entity) {
return entity.state === 'cool'
? Math.round(entity.attributes.temperature).toString()
: Math.round(entity.attributes.current_temperature).toString();
}
if (entity) {
return entity.state === 'heat'
? Math.round(entity.attributes.temperature).toString()
: Math.round(entity.attributes.current_temperature).toString();
}
]]]
circle_input_unit: "°C"
been out of the space for some time, but im back and happy to help
I do not change the tile of the cards on slide but that has been done, see this link.
if you do not provide code for me to look at I can’t help you more
the section at the bottom of the side bar is done like this
you should have the 1st 3 lines in your code, under where the sidebar is set up, add what I have
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_uptime
template: up_time
then you will need to add the up_time template
in button card template folder
add a file named up_time.yaml
up_time:
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin-top: -100px
- border-width: 0
state:
- font-size: 1vw
- font-family: SF Mono, Roboto
- opacity: 0.65
- padding: 0.55vw 1.2vw 0.5vw 1.2vw
hi I think iv already cover this in an older post A different take on designing a Lovelace UI - #3687 by masoncrawford1994
hay welcome to the project, I think you should look at this project by @Laffer,
he has an example of heating, I have also done heating but for me it was a lot of small changes all over the place.
for example adding ‘heat_cool’, ‘heat’ to the stat on in /button_card_templates/base.yaml
base:
template:
- settings
- tilt
- extra_styles
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'heat_cool', 'heat', 'fan_only', 'playing', 'unlocked'].indexOf(!entity || entity.state) !== -1; ]]]
1 Like
Thanks! I think that has put me on the right track. Can change the icon to red and show Heat. I can’t quite wrap my head around having it show like its off when its just idle though. Ill have to keep playing.
Hello. can you give a example or what command should I input to use chatgpt to modify the code?
@ zs2766 This is really amazing, can you share the complete dynamic icon code of the air conditioner?
hi agin @Laffer
After this update:
Home Assistant 2023.7.3
Supervisor 2023.07.1
Operating System 10.3
Frontend-version: 20230705.1 - latest
I cant use light in my phone. Only on the bigger screens i can see “x” on the lights to close the popup.
How do i fix this
Its working now.
I hade the first code.
I did a change “”>${inner_text}/3" and now its working 
Thnx!
Hello, i have problem with click sound:
When I click on the button. kiosk browser gives me a sound playback error
“Failed to load sound: wrong URL or unsupported format?”
I transferred the sound files to www folder an edit settings for tablet
Hi! So first thanks @Mattias_Persson for this greet dashboard idea for everyone in this topic. So that everyone can give ther ideas to improve it even more… So Thats why i post this video of mine edited dashboard from you.
i hope you guys have any extra tips/tricks to improve the dashboards we make together
just a short link for 2 days (I wil get a full link)
Its a beta so things dont look like what they should look like
8 Likes
Which media / spotify popup is that? Could you share your code?
1 Like
If you’re using the code for the light that I’ve modified, then there is no close button.
You simply have to click or tap outside of the popup to close it.
If you want a close button you could add a title with a space - or the text you’d like, like this:
light:
template:
- base
- circle
- loader
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: '%'
light_entity: '[[[ return entity.entity_id ]]]'
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
#- service: browser_mod.close_popup
- service: browser_mod.popup
data:
sequence:
## Title with close button
title: ' '
style: >
--popup-background-color: transparent;
content:
type: custom:more-info-card
entity: '[[[ return variables.light_entity; ]]]'
card_mod:
style:
more-info-card:
$ha-card:
.: |
state-card-content {
display: none !important;
}
$: |
.card-header {
display: none !important;
}
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.controls {
margin-bottom: 0 !important;
}
The following part of the code is the key here:
- service: browser_mod.popup
data:
sequence:
## Title with close button
title: ' '
1 Like
KING!
Its working now <3
Here is my template code (Still wanna get every popup in my popup folder, but still working on it)
Media_player_living:
variables:
media_on: >
[[[ return !entity || ['on', 'playing', 'paused', 'idle'].indexOf(entity.state) !== -1; ]]]
media_off: >
[[[ return !entity || ['off', 'standby', 'unknown', 'unavailable'].indexOf(entity.state) !== -1; ]]]
volume_control: '[[[ return entity.entity_id; ]]]'
player: '[[[ return entity.entity_id; ]]]'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: >
--popup-background-color: transparent;
--popup-max-width: 2000px;
card_mod:
style:
.: |
ha-header-bar {
display: none !important;
}
:host {
--mdc-theme-surface: rgba(0,0,0,0);
}
@media screen and (max-width: 2000px) {
ha-header-bar {
display: none !important;
}
}
content:
type: custom:mod-card
card_mod:
style:
layout-card:
$grid-layout$:
hui-vertical-stack-card:
$: |
ha-card {
animation: border 1s forwards;
}
$hui-horizontal-stack-card:
$: |
#root {
height: 0% !important;
justify-content: center !important;
margin-top: 2.2em !important;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 500px 500px
grid-template-rows: 1fr
grid-column-gap: 15px
grid-template-areas: |
"media none"
"Actions boobs"
mediaquery:
#phone
"(max-width: 1250px)":
grid-template-areas: |
"media"
"none"
cards:
- type: vertical-stack
view_layout:
grid-area: media
cards:
- type: conditional
conditions:
- entity: media_player.hk_citation_one_d20393
state_not: 'off'
card:
type: custom:mini-media-player
volume_stateless: true
tap_action:
action: none
info: scrol
name: Woonkamer
group: false
volume_step: '2'
entity: media_player.hk_citation_one_d20393
sound_mode: full
artwork: full-cover
toggle_power: false
source: icon
hide:
name: true
source: true
next: true
prev: true
play_pause: true
volume: true
power: true
style: |
.flex {
display: block;
{% if not is_state('media_player.hk_citation_one_d20393','off') %}
filter: drop-shadow(0px 2px 2px rgba(0,0,0,1));
{% else %}
{% endif %}
}
ha-card.--has-artwork .cover{
opacity: 0.9;
}
.entity__info__media {
opacity: 1 !important;
padding-right: 16px;
overflow: hidden;
height: 4.4em;
height: 90%;
}
ha-card > div.mmp-player > div.mmp-player__core.flex >
div.entity__icon {
{% if not is_state('media_player.hk_citation_one_d20393','off') %}
display: none;
{% endif %}
} ha-card > div.mmp-player > div.mmp-player__core.flex { }
mmp-media-controls {
{% if not is_state('media_player.hk_citation_one_d20393','off') %}
filter: drop-shadow(0px 2px 2px rgba(0,0,0,1));
flex-wrap: wrap-reverse !important;
{% endif %}
} mmp-powerstrip {
} ha-card > div.mmp-player {
padding: 25px !important;
{% if not is_state('media_player.hk_citation_one_d20393','off') %}
{% else %}
#display: none !important;
{% endif %}
} ha-card > div.mmp-player {
{% if is_state_attr('media_player.hk_citation_one_d20393','media_content_id', 'Bluetooth') %}
position: relative;
height: 20vh;
{% else %}
position: absolute;
align-self: flex-start;
height: 100%;
{% endif %}
background: radial-gradient(circle, rgba(255,255,255,0) 10%, rgba(0,0,0,0.6) 90%) !important;
font-size: 0.9em !important;
} ha-card > div.mmp-player > div.mmp-player__adds {
position: absolute;
bottom: 25px;
padding: 0px 16px 0px 0px;
} div.flex.mmp-media-controls__media {
margin-bottom: -5px !important;
}
- type: vertical-stack
cards:
- type: custom:spotify-card
spotify_entity: media_player.spotify_jacobien_cristian
playlist_type:
grid_covers_per_row: '4'
limit: 40
country_code: NL
display_style: grid
default_device: Speaker Woonkamer
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
aspect-ratio: 2/2 !important; /* card - square */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
padding: 0% !important;
}
.grid{
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
gap: 0,5% !important;
}
.btn {
top: 50% !important; /* center buttons */
}
.grid-item{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image img{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid-item:hover{
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image.playing{
border-radius: var(--button-card-border-radius) !important;
}
#header{
display:none !important;
}
#footer{
display:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
#content{
border: 0px !important;
background-color: transparent !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
icon: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'custom:nvidia-m' : 'mdi:power'; ]]]
tap_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_inputs_to_shield' :
'media_player.turn_off'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
template: icon_button
- type: custom:button-card
icon: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'custom:nvidia-m' : 'mdi:skip-previous'; ]]]
tap_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_inputs_to_shield' :
'media_player.media_previous_track'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
template: icon_button
- type: custom:button-card
icon: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'bha:apple-tv' : 'mdi:play-pause'; ]]]
tap_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_inputs_to_apple_tv' :
'media_player.media_play_pause'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
double_tap_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_inputs_to_apple_tv' :
'media_player.media_stop'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
hold_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_inputs_to_apple_tv' :
'media_player.media_stop'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
template: icon_button
- type: custom:button-card
icon: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'custom:sonos' : 'mdi:skip-next'; ]]]
tap_action:
action: call-service
service: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'script.living_room_set_input_to_sonos' :
'media_player.media_next_track'; ]]]
service_data:
entity_id: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'none' : variables.player; ]]]
template: icon_button
- type: custom:button-card
icon: >-
[[[ return entity.entity_id === 'media_player.denon_receiver' ?
'custom:sonos' : 'mdi:volume-off'; ]]]
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.mute
template: icon_button
- type: horizontal-stack
cards:
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.hk_citation_one_d20393
full_row: true
step: 5
grow: true
max: 100
style: |
ha-card {
margin-top: -40px;
}```Very nice thanks! Do you also have the code for the icons? Will take some work to get it running for my setup
Would love to get peoples guidance on how to make a button “light up” while a script is running.
I have a sprinkler/irrigation system. Right now, I have to press one button to start the watering and a different button to stop it mid-cycle. Each button successfully calls a service. Right now, pressing the ‘Run’ button works fine, but it doesn’t stay lit-up while any zone is watering. I would like to fix that. Anyone have any suggestions on how? Once I get that figured out, I am going to combine the two buttons so a long-tap performs the stop. For reference, here is my ui-lovelace-tablet.yaml code for the two buttons, and they both currently work as expected.:
- type: grid
title: Sprinklers
view_layout:
grid-area: outside
columns: 2
cards:
- type: custom:button-card
name: Run
tap_action:
action: call-service
service: bhyve.start_program
service_data:
entity_id: switch.outside_mysprinklers_main_program_program
target: {}
template:
- base
- icon_sprinkler
- type: custom:button-card
name: Stop
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.sprinkler_stop_scrpt
target:
entity_id: script.sprinkler_stop_scrpt
template:
- light
- icon_sprinkler
Thank You!
I think that could be done by using an input boolean to trigger and stop your script instead. Probably you need to make an automation to trigger the script from the input boolean. I’m not too experienced with that, but maybe it gives you an idea