If it’s just on/off light you could use the base template instead of light
Hi, friend. Making the changes you put for this month I find this error that I can’t recognize.
Secret apexcharts_tibber not defined
Search all files and can’t find apexcharts_tibber
What to refer to?
Thanks
Forgiveness. I looked elsewhere and couldn’t find it. Thank you very much for continuing to share your changes.
Hello. The card is personalized and therefore the appearance is different. The image in my case was inside the card with a margin and the blur appears above. For that I touch some attributes but I can’t make the blur have rounded edges at the bottom. @Mattias_Persson , can you think of something I can play?
Thank you very much
custom_fields:
blur:
- z-index: 1
- left: -3px
- top: 15px
- width: 100%
- position: absolute
- border-radius: 25px
- background-color: rgba(0, 0, 0, 0.2)
- backdrop-filter: blur(0.4em)
- -webkit-backdrop-filter: blur(0.4em)
overlayx:
- left: 0%
- width: 100%
- position: absolute
- background-color: rgba(255, 255, 255, 0.8)
media_image:
- top: -1%
- left: -1%
- width: 103%
- height: 101%
- position: absolute
- border-radius: calc(var(--custom-button-card-border-radius) / 2)
- background-size: cover
- background-image: >
[[[
return entity && variables.entity_picture
? `url(${entity.attributes.entity_picture})`
: 'none';
]]]
thanks @Mattias_Persson, no wonder i couldnt find where they got added.
love the work you have done so far keep it up.
1 Like
@Mattias_Persson, can I ask for help on this question of mine?
I would like to have this sensor changing the icon color according to its percentage…
0% remains green and 5% to 100% red.
I already had it working, but it was dependent on a sensor in its “on” state. But I didn’t want to be dependent on that sensor because I don’t have it anymore.
- type: custom:button-card
entity: sensor.gas_sensor_tuyasns_gas
name: '% Gás'
tap_action:
!include lovelace_ui/another_ui_tablet/popup/segurança_gas_smoke.yaml
template:
- base
- icon_gas_1
- loader
icon_gas_1:
styles:
custom_fields:
icon:
- width: 92%
- margin-left: -14%
- margin-top: -1%
custom_fields:
icon: >
[[[
const style = `
<style>
.on {
animation: on 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
.off {
animation: off 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
`;
const path = `
<path fill="#2fae81" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
<path fill="#67c7a5" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
<path fill="#a1ecd1" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
<path fill="#a1ecd1" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
<path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
<path fill="#263238" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
`;
if (variables.state === 'on' && variables.timeout < 2000) {
return `
<svg viewBox="0 0 14 14"> ${style}
<path fill="#ea3836" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
<path fill="#fa584e" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
<path fill="#ea3836" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
<path fill="#ea3836" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
<path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
<path fill="#ea3836" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
</svg>
`;
}
if (variables.state === 'on' && variables.timeout > 2000) {
return `
<svg viewBox="0 0 14 14"> ${style}
<path fill="#ea3836" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
<path fill="#fa584e" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
<path fill="#ea3836" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
<path fill="#ea3836" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
<path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
<path fill="#ea3836" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
</svg>
`;
}
if (variables.state === 'off' && variables.timeout < 2000) {
return `
<svg viewBox="0 0 14 14"> ${style}
<path fill="#2fae81" d="M1.57142849 6.14285713h10.85714302v1.14285716H1.57142849z"/>
<path fill="#67c7a5" d="M9.00000003 11.28571435H4.99999997c-1.25714288 0-2.28571432-1.02857144-2.28571432-2.28571432V5.28571426C2.71428565 2.91428566 4.62857139.99999991 7 .99999991c2.3714286 0 4.28571435 1.91428574 4.28571435 4.28571435v3.71428577c0 1.25714288-1.02857144 2.28571432-2.28571432 2.28571432z"/>
<path fill="#a1ecd1" d="m 9.0444711,5.4206731 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.2343749,-0.5290179 1.2343749,-1.234375 0,-0.7053571 -0.5290177,-1.234375 -1.2343749,-1.234375 z"/>"
<path fill="#a1ecd1" d="m 4.9471153,5.4459135 c -0.7053572,0 -1.234375,0.5290179 -1.234375,1.234375 0,0.7053571 0.5290178,1.234375 1.234375,1.234375 0.7053572,0 1.234375,-0.5290179 1.234375,-1.234375 0,-0.7053571 -0.5290178,-1.234375 -1.234375,-1.234375 z" />
<path fill="#607d8b" d="M7 9.00000003c-1.14285716 0-2.00000003.85714287-2.00000003 2.00000003 0 1.14285716.85714287 2.00000003 2.00000003 2.00000003 1.14285716 0 2.00000003-.85714287 2.00000003-2.00000003 0-1.14285716-.85714287-2.00000003-2.00000003-2.00000003z"/>
<path fill="#263238" d="M7 9.57142861c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 9.57142861 7 9.57142861zm0 2.28571432c-.17142857 0-.28571429.11428572-.28571429.28571429s.11428572.28571429.28571429.28571429.28571429-.11428572.28571429-.28571429S7.17142857 11.85714293 7 11.85714293zm-1.22857145-1.5714286c-.08571428.14285715-.02857143.31428572.11428572.40000001.14285714.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857143-.31428571-.11428571-.4-.17142857-.05714286-.31428572-.02857143-.4.11428571zm1.9714286 1.14285717c-.08571428.14285714-.02857142.31428571.11428572.4.14285715.08571429.31428572.02857143.4-.11428572.0857143-.14285714.02857144-.31428571-.11428571-.4-.14285714-.05714286-.31428572-.02857143-.4.11428571zm-1.9714286.28571428c.08571429.14285715.25714286.17142858.4.11428572.14285715-.08571429.17142858-.25714286.11428572-.4-.05714285-.14285715-.25714286-.17142858-.4-.11428572-.17142858.08571429-.2.25714286-.11428572.4zm1.9714286-1.14285716c.0857143.14285715.25714287.17142858.40000001.11428572.14285714-.08571429.17142857-.25714286.11428572-.4-.11428572-.14285715-.25714286-.17142858-.40000001-.11428572-.14285714.08571429-.2.25714286-.11428572.4z"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 14 14"> ${style}
${path}
</svg>
`;
}
]]]
Thank you
if (parseFloat(entity.state) >= 0 && parseFloat(entity.state) < 5) {
green svg
} else {
red svg
}
1 Like
overlayx etc are the old config, you have to add the new changes
1 Like
Replace entire theme. recharge it.
Add extra_styles.
Change base,
base_media, media, and conditional_media. Now I find that which looks like a rectangle. An object that looks like blur and the text that escapes the outline. What could I check?
The other thing that gives me an error is entity.attributes.data; For example spotify does not contain data. Where does this data come from? Thanks
conditional_media:
aspect_ratio: 1000/996
template:
- base
#- media_youtube
- icon_play_pause
variables:
i: >
[[[
let data = entity.attributes.data;
if (entity && data) {
return Math.floor(Math.random() * (data.length - 1)) + 1;
}
]]]
Any way how to include Time and date to Iphone or any phone ios
[[[
if (entity) {
let attr = [];
for (let [k, value] of Object.entries(entity.attributes))
window.navigator.userAgent.match(/iPhone/i)
? k !== 'time' && k !== 'date' && value !== false && (attr += `<p>${k === 'greet' ? `<span class="iphone">${value}</span>` : `${value}`}</p>`)
: value !== false && (attr += `<p>${value}</p>`);
return attr;
}
]]]
@Mattias_Persson, thank you very much for this beautiful dashboard. Your instructions are clear and I’ve spent the better part of 2 months trying to cobble something together. I went from knowing nothing to knowing just a bit less than nothing! I’ve even made some pretty cool (I think) SVG animated icons!
I am having trouble with a scenario I’d like to implement for our ceiling fans (Lutron Caseta). I piggybacked off your light-popup-card idea and tried to apply it to our fans, effectively providing me the option of choose a fan speed.
I’ve created a new fan template (below) and utilized the browser_mod popup command (tap_action) to display custom button cards (attached image), each card representing a fan setting. What I have been trying to do is change the background colour of the selected fan setting. It does work when I close and reopen the popup, but the popup is not dynamically updating. E.g. click low, the button background colour should update immediately.
When I click on a setting, then close the popup and open it again, the associated button has it’s background colour changed. No other actions will update this background colour except if I was to click the off button. Changing the fan state actually causes updates to the button backgrounds. This leads me to believe that I need to monitor the percentage attribute some how, or have it trigger updates, but I have no idea how to do that!
I don’t expect you to fix this for me, but I am hoping you can point me in the right direction so I can research further. I think the root of my issue is that percentage attribute doesn’t cause event changes and I need it to - but I don’t know how.
I thank you for any guidance you can provide.
fan:
template:
- base
- circle
variables:
circle_input: |
[[[ return entity === undefined || entity.attributes.percentage; ]]]
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: >
[[[ return entity === undefined || entity.attributes.friendly_name;
]]]
card:
type: vertical-stack
entity_id: |
[[[ return variables.entity_id; ]]]
cards:
- type: custom:button-card
entity: |
[[[ return variables.entity_id; ]]]
name: High
show_label: true
tap_action:
action: call-service
service: fan.set_percentage
service_data:
entity_id: |
[[[ return variables.entity_id; ]]]
percentage: 100
show_icon: false
show_state: false
styles:
card:
- border-radius: 8%
background-color: |
[[[
if(variables.circle_input == 100) return 'var(--button-card-light-color)';
]]]
name:
- justify-self: center
#.
#.
#.....additional fan settings
#.
#.
- type: custom:button-card
entity: |
[[[ return variables.entity_id; ]]]
name: 'Off'
tap_action:
action: call-service
service: fan.turn_off
service_data:
entity_id: |
[[[ return variables.entity_id; ]]]
show_icon: false
show_state: false
styles:
card:
- border-radius: 8%
name:
- justify-self: center
@Mattias_Persson; there seems to be a layout-margin added recently. I’m not sure where it comes from. It might be after I updated and got the new UI.
This seems to come from ‘grid-layout’, but I’m not sure:
“#view>hui-view>grid-layout$#root>hui-vertical-stack-card”
This is added:
–layout-margin: 4px 4px 0px 4px;
Creating a border that is barely noticeable, but it’s enough for a scroll bar to appear.
Indeed! I tried triggers_update: all and nothing came of it. I even tried hardcoding an entity_id.
1 Like
i update the button card Template.
Now my button with the humidity looks strange.
How do I get the full scope of the button again?
Hey @mattias_Persson
Using your dash for a good few weeks now, thanks a lot, really like the style!!
But I can’t for the love of god figure why the pop-up function is not working… When I click and hold nothing happens… Is there something I could check or need to do myself once I installed your dash before this action works?
I’ve installed the Popups like you show in the GitHub
“Long press a button to show settings and information pertaining to the entity, using browser_mod. Light popups are automatically created using the light button-card template with light-popup-card and light-entity-card”
Does it need any additional config to get it working somehow?
Thanks anyway,
Tim