Has anyone had any success creating a lock or garage door button similar to the light buttons that shows the state of the door?
Im thinking lock icon for locked and unlocked icon when unlocked with a simple tap toggle.
So far I am not having any luck.
Anyone willing to share their working code?
I have been using config-template-card and picture-elements as described in this post for quite a long time, and everything worked properly.
However, since I upgraded to HA 2021.9, every time a sensor changes and it triggers a redraw of an entity listed in the config-template-card list, the whole card is re-rendered from scratch, resulting in a slow and annoying flickering of the whole image.
Has anybody experienced anything similar? Any possible fix or workaround?
Yes I am getting the same thing just in the last few days, My fault for upgrading HA I guess
Haven’t had a chance to look into it yet, but I’ll let you know if I find anything. If anyone else has a solution that would also be Swell!
can someone help me to get the
"Button-Card Template “color_light” missing,
solved please.
as i understand it correct. the templates are in the “button_card_templates.yaml” and the lovelace.yaml can’t find it, correct ?
my config.yaml looks like this:
button_card_templates: !include button_card_templates.yaml
title: RiotMode
views:
but still the missing error !? Thanks
EDIT:
Sorry, found the solution, thanks Elise!
BUT - How can i get this view ?
for me its this view
Hi, I already addressed this as an issue since HA 2021.9.x. But no success so far. See home-assistant/frontend#9988 or Dashboard not loading - Problems with Picture-Elements · Issue #9968 · home-assistant/frontend (github.com).
I hope you add you comment also to the issues so it will not be closed without solving.
I use simply 2 pictures. One with a garage door and one without a garage door and having the garage door light on.
Cool thanks.
The Hue filter is not working for me. The brightness works fine, but if I change my lamp colour it doesn’t reflect on the floorplan. Tried both code, this is the one with saturation. Any clue?
type: custom:config-template-card
entities:
- light.bedroom
card:
type: picture-elements
image: /local/Floorplan/home.png
elements:
- type: image
entity: light.bedroom
image: /local/Floorplan/bedroom2.png
style:
filter: >-
${ "hue-rotate(" + (states['light.bedroom'].attributes.hs_color ?
states['light.bedroom'].attributes.hs_color[0] : 0) + "deg) saturate("
+ (states['light.bedroom'].attributes.hs_color ?
states['light.bedroom'].attributes.hs_color[1] : 100)+ "%)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.bedroom'].state === 'on' ?
(states['light.bedroom'].attributes.brightness / 255) : '0'}
top: 50%
width: 100%
tap_action:
action: none
Cutting and pasting the hue code worked for me.
One additional thing I needed to do was to render the hue lighting overlay with a red light instead of white. In the picture below the left render doesn’t work. The right render works well.
The hue-rotate function at 0 is red so it think this is the right thing to do… Think 
CSS hue-rotate() Function
So I have to change all my pngs to be red because I don’t think there is a value for white.
EDIT: changed my png worked. Thank you.
Here is what my garage door looks like when closed and opened:
Here is my code:
- type: state-icon
entity: cover.garage_opener
style:
"--iron-icon-height": 1.7vw
"--iron-icon-width": 1.7vw
"--paper-item-icon-active-color": "#FFC30B"
"--paper-item-icon-color": darkgrey
align-items: center
background-color: "#FFFFFF"
border-radius: 100%
box-shadow: "0px 0px 28px 0px rgba(0,0,0,0.39)"
display: flex
height: 3vw
justify-content: center
left: 35%
margin-left: "-1.5vw"
margin-top: "-1.5vw"
top: 15%
transform: scale(0.8)
width: 3vw
tap_action:
action: toggle
- type: state-icon
entity: light.living_room_cubbies
icon: "mdi:ceiling-light"
style:
"--iron-icon-height": 1.7vw
"--iron-icon-width": 1.7vw
"--paper-item-icon-active-color": "#FFC30B"
"--paper-item-icon-color": darkgrey
align-items: center
background-color: "#FFFFFF"
border-radius: 100%
box-shadow: "0px 0px 28px 0px rgba(0,0,0,0.39)"
display: flex
height: 3vw
justify-content: center
left: 43%
margin-left: "-1.5vw"
margin-top: "-1.5vw"
top: 77%
transform: scale(0.8)
width: 3vw
tap_action:
action: toggle
Does this render (the red one) allow for the light to be white?
Thanks, that’s awesome. I love this community so much.
Still picking up yaml and all it’s intricacies.
Yes the red render does allow for the light to be white.
Any success with these issues? I’m still experiencing them as well.
I’ve been using red lights for rendering and hue-rotate + opacity + mix-blend-mode=lighten to get the proper color in HA, it does work quite nicely, however if I turn down the saturation (ie. make the light white/whitish) all the colors (of furnitures, etc.) tend to disappear and I got a grey/greyish picture (that is different both from reality and also from what SweetHome 3D would render with a white light).
Does this happen to you, too?
For me if I used anything other than red lights, the colors were washed out. For colored lights (hue-rotate + opacity + mix-blend-mode=lighten), I render with a red light source in SweerHome 3D. For other lights (opacity + mix-blend-mode=lighten), I render with a halogen light source in SweetHome 3D. This seems to work really well. When you read the documentation on the hue-rotate function, red is at 0 degrees so it seems to make scene.
Most of the time, I use my colored lights as white rights (ie. low saturation), so I ended up rendering each light first with a red light source and then with a white light source and then taking into account the saturation in the filter/opacity templates… a bit complex, maybe, but it seems to produce the expected result.
Hi @kaylasiemon , did you ever get the popup working? I seem to be having the same issue as you were having. Cheers