Hi Luke,
Thanks - and yes. I did read it, but for some reason I must have messed up the configuration when I was trying, because it wasn’t working. But I gave it a shot again and took your ui-lovelace.yaml file as an example. Finally it worked… a lot of card errors and stuff, but now I at least know it works when both the web-editor and the “old-school” way.
Thanks!
I create a Repo next days an share it.
Thanks - much appreciated!
Ha , i don’t know how to bring it to github;-)
Try it for the last 60min without luck.
Sorry
Any updates on this?? Have been thinking about taking a stab at that myself.
Dear @lukevink thanks a lot for your reply and for your help, it is really appreciated!
I created a zip package containing a few file, please download it using this link: https://share.toradex.com/4dfb3dawugq1mdx
In the zip package, you will find, in the Panel Files folder the following files:
I replaced one of the light (light.finestra) with a pure white light source, to see if the issue was related to the export. This also does not work properly and the two files in the package are also shown this weird error:
The folder “UI Pictures” contains the original pictures, I only placed the living room ones, as the other rooms are not even configured for hue filter right now.
Thanks a lot for your help, I wish you a nice evening!
Diego
Hmm, for some reason I can’t get it to load the slider in the popup.
I download all my integrations through hacs, but this one I needed to take from your library.
So I’ve tried adding this into the ui-lovelace.yaml file:
resources:
- type: js
url: /local/js/light-slider-card-lajv.js
… no luck, so I tried this:
lovelace:
mode: storage
resources:
[ {'url':'/hacsfiles/color-lite-card.js?v=0.348', 'type':'js'},
{'url':'/hacsfiles/light-slider-card-lajv.js', 'type':'js'} ]
# Add yaml dashboards
dashboards:
lovelace-yaml:
mode: yaml
title: YAML-OLDSCHOOL
icon: mdi:script
show_in_sidebar: true
filename: ui-lovelace.yaml
No luck either…
What have I done wrong (already tried with a clean browser)?
“Dark Sky” is going out of service, any replacement suggestion?
Great work! It’s amazing!
Following your example I am very happy with my result and I attach it here to share with everyone:
I am still trying to change the color of the temperature icon based on the sensor value, but I am failing at every attempt.
If any of you guys was able to do it, I would appreciate sharing the snippet 
same here… 
Mark
Hi,
I got your config more or less working, but got some strange issues, maybe you can give me an idea what I’m doing wrong here?
I’m not at developer so probably my stupid mistake but any help is very appreciated to get it working, thanks!
Short video to make the above a little more clear I hope 
https://dmertens.stackstorage.com/s/ujdeR00KjDgArMt
Supervisor: Version | 220
HassOS: Version: | HassOS 3.13
HA: Version | 0.109.3
Thanks!
Kind regards,
Danny
Hi very strange problem, if I want to use a state icon and/or state label then nothing happens, in my previous floorplan, entity card you can see the updates but not on the version I build from your example, so probable something related to this?
Any idea what I do wrong here?
Using everywhere the same code
- entity: binary_sensor.window_door_sensor
style:
left: 60%
top: 35%
'--iron-icon-height': 50px
'--iron-icon-width': 50px
'--paper-item-icon-active-color': red
tap_action:
action: none
type: state-icon
A short video that makes things more clear I hope?
https://dmertens.stackstorage.com/s/YT9cPfv5axFm1sa
Thanks!
Update: State updates work fine, just forgot to add the other entities to the template card 
Hey so this sounds like it has something to do with groups or the way you are controlling the lights?
I had this issue with light groups - theres a delay for all the lights to update. So when you tap a group off, its fine, but when you tap it back on it doesnt work nicely. Are the lights single lights or a group of lights?
Hey all! Sorry have been a bit busy lately and not on the community. I havent updated to 0.109.3 yet, let me do that and get back to you and all the issues seen here, perhaps some of them are related to 109.
Hi,
Thanks for your reply, to be honest the lights seem to work fine, is the window, motion, door, media… state icons, and state labels that don’t update.
The strange thing is even as I turn on the lights (light icon on the dashboard, or transparent image) then they sometimes update so looks like a background update, refresh issue or something like that?
Thanks for looking in to it, and yes I try to keep updated so now on version 0.109.6
Thanks!
Update: State updates work fine, just forgot to add the other entities to the template card
I’m trying to use browser_mode.popup with ‘custom:thermostat-popup-card’ from @DBuit but I’m stuck with configuration. The Popup window is to small and I need to scroll to see the whole thermostat popup-card:
Code for this thermostate state icon in my floorplan is:
- entity: sensor.heating_icon
hold_action:
# action: more-info
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: climate.heating
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards: null
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: false
entity: climate.heating
header: false
persist_features: false
type: 'custom:thermostat-popup-card'
show_header_toggle: false
style:
height: 100%
z-index: 0;
type: entities
column_num: 1
layout: horizontal
max_width:
- 100%
type: 'custom:layout-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Tado heating
# icon: 'mdi:spotlight-beam'
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#fae12f'
'--paper-item-icon-color': '#525252'
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0, 0, 0, 0.39)'
display: flex
height: 3vw
justify-content: center
left: 56.3%
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: 30.5%
transform: scale(0.7)
width: 3vw
tap_action:
action: none
type: state-icon
more or less this is the same configuration that @lukevink is using for his lightbulbs and setting the brightness and color.
Hey Luke, thanks for this great card(s). right now I’m building my own based on yours, but when I click on a light in the floorplan, the whole interface refreshes, If i watch your video, it’s not the case. Can you help me out where to search/configure?
thanks!
I think the problem might be in the styles part here:
3vw means make the height 3% of the width of the screen, which is probably pretty short! removing that style and see if that helps - or change 3vw to something like 500px.
Unfortunately not, this part is under styling of the state-icon, not the custom-thermostat-popup-card. If I increase this height to 500px or for example 30vw only this label-icon height gets bigger and ugly 
One more thing, how can I change style for homekit-panel-card. I have tried like is stated in documentation:
- type: "custom:homekit-card"
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px; -> this part
--tile-height: 100px; -> this part
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
to change tile height but without any success. The problem is that on my Tablet in Fully Kiosk browser and in Kiosk mode when I enter all lights section I can’t see all the cards and I can’t scroll down…Maybe smaller homekit tile will do the trick but I can’t resize them - please see pictures:
Lovelace on my laptop:
Lovelace on my tablet:
