Hi,
Where within button_card_template.yaml did you add your code?
It’s not working on my side… 
Hi,
Anyone embedded sprite map into UI for speed control?
Great job, I’m really enjoying using this template as a base to build my own one.
I just have 2 problems left, if anyone can help me:
- I can display the time and date, but it doesn’t refresh “in live” but only when I trigger something (for example, switching on a light)
- I have the popup working but it won’t work on the Android phone (HA companion or directly on the website)
Do you have any idea how to solve these problems? thanks 
EDIT: As for point 1) it needs to have time and date sensors declared in ui-lovelace.yaml for it work:
################### config-template-card #####################
######################### IMPORTANT! #########################
# To use the styling templates for individual lights, I have used
# Config Template Card. Config template card passes the entities it
# uses into the card. Make sure you change these entities below to
# your own and include any light entities you use above.
# To understand why, check: https://github.com/iantrich/config-template-card
- type: 'custom:config-template-card'
entities:
- sensor.time
- sensor.date_string
Hi, I’ve been playing with animations… I don’t think that good quality full screen gif is the way forward.
Tried with clouds overlay, but the file is rather large.
If anyone wants to try some clouds…
https://www.dropbox.com/s/p080zlygq29lf92/clouds.gif?dl=0
HI!
Anyone know how to adjust the height on mobile but just for an specific tile/card?
I am using a 6x4 card (wider 6 / higher 4) on desktop version for floorplan, but on mobile it gets ugly:
The wider 6 (on desktop) scales down to 3 correctly (on mobile), but higher 4 doesn’t scale down to 2.
Here is my code:
type: custom:homekit-card
useBrightness: false
useTemperature: true
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
mansonry: true
style: |
:host {
--tile-background: rgba(25, 22, 48, 0.7)!important;
--tile-on-background: rgba(25, 22, 48, 0.7)!important;
--tile-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-on-name-text-color: rgba(255, 255, 255, 1)!important;
--tile-state-text-color: var(--disabled-text-color)!important;
--tile-on-state-text-color: var(--paper-item-icon-active-color)!important;
--tile-state-changed-text-color: rgb(255, 255, 255)!important;
--tile-unavailable-state-text-color: rgba(0, 0, 0, 1)!important;
--tile-value-text-color: var(--primary-text-color)!important;
--tile-icon-color: var(--disabled-text-color)!important;
--tile-on-icon-color: var(--paper-item-icon-active-color)!important;
--tile-border-radius: 12px!important;
--tile-width: 100px!important;
--tile-height: 100px!important;
--tile-width-mobile: 100px!important;
--tile-height-mobile: 100px!important;
--tile-icon-size: 30px!important;
--tile-padding-top: 0!important;
--tile-image-radius: 0!important;
--tile-border-radius: 12px!important;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
--slider-track-color: rgba(255, 255, 255, 1)!important;
}
.button {
box-shadow: 0px 0px 7px 3px var(--disabled-text-color)!important;
font-weight: 700!important;
font-size: 14px!important;
}
.button.on {
box-shadow: 0px 0px 7px 3px rgba(255, 255, 255, 0.9)!important;
font-weight: 700!important;
font-size: 14px!important;
}
rows:
- row: 1
columns:
- column 1: null
tileOnRow: 6
entities:
- title: Planta
entities:
- card: picture-elements
wider: true
widerSize: 6
higher: true
higherSize: 4
noPadding: true
cardOptions:
image: /local/floorplan/floorplan_t10a263_todas_as_luzes_off.png
elements:
- type: state-badge
entity: sensor.umidade_media_banheiro_social
style:
top: 32%
left: 40%
Thanks in advance if someone could help me.
The mini bar is showing up so the data is there
Use a different theme, the slate theme that came with the package will show the text. Average of the temperature sensors
Hi there. Did you ever get this sorted?
I have a similar problem but mine flashes the original colour and then the correct colour a couple of times and then stays on the original colour…
Hi,
I have the bulk of the floorplan and sidebar working but I am facing some issues. My sidebar is massive and the floorplan is tiny and im not able to figure out why. I have the code:
panel: true
but still the same problem. I have attached a photo and my code to this post. Any help would be much appreciated!
> cards:
> - elements:
> - entity: sensor.time
> hold_action:
> action: none
> style:
> color: rgba(255, 255, 255, 0.7)
> font-size: 5.41vw
> font-weight: 200
> left: 2.7%
> letter-spacing: '-0.05vw'
> max-width: 1px
> top: 10%
> tap_action:
> action: none
> type: state-label
> - entity: sensor.date
> hold_action:
> action: none
> style:
> color: rgba(255, 255, 255, 0.3)
> font-size: 1.3vw
> font-weight: 300
> left: 18.1%
> letter-spacing: '-0.05vw'
> text-align: left
> top: 17%
> width: 30%
> tap_action:
> action: none
> type: state-label
> - action: none
> image: /local/ui/sidebar/upstairs_on.png
> style:
> border-radius: 5vw
> box-shadow: 0px 0.2vw 0.8vw 0px rgba(0,0,0,0.1)
> left: 50%
> top: 26%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/0
> type: image
> - action: none
> image: /local/ui/sidebar/downstairs_off.png
> style:
> left: 50%
> top: 35%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/1
> type: image
> - action: none
> image: /local/ui/sidebar/outdoor_off.png
> style:
> left: 50%
> top: 44%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/2
> type: image
> - action: none
> image: /local/ui/sidebar/solar_inverter_off.png
> style:
> left: 50%
> top: 53%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/3
> type: image
> - action: none
> image: /local/ui/sidebar/all_off.png
> style:
> left: 50%
> top: 62%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/4
> type: image
> - action: none
> image: /local/ui/sidebar/server_off.png
> style:
> left: 50%
> top: 71%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/5
> type: image
> - action: none
> image: /local/ui/sidebar/music_off.png
> style:
> left: 50%
> top: 80%
> width: 80%
> tap_action:
> action: navigate
> navigation_path: /lovelace/6
> type: image
> image: /local/ui/sidebar/sidebarBG2.png
> style:
> height: 100%
> left: 0%
> top: 50%
> width: 20%
> type: picture-elements
> - elements:
> - entity: switch.s24
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/Final_Upstairs_living_left_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: switch.s20_2
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/Final_Upstairs_living_right_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: switch.s19_3
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/final_top_floor_lift_lights_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: switch.s19_1
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_top_stair_lights_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: light.s22
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/Final_Upstairs_living_main_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: switch.s28_1
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_kitchenette_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: switch.s26
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_papa_walk_in_robe_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: light.s25
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_parents_bedroom_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: light.saksham_room_lights
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_saksham_bedroom_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: light.smarth_room_lights
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_smarth_bedroom_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: switch.shreya_room_lights
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': /local/images/3d_floorplan/top_floor/Final_shreya_bedroom_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> type: image
> - entity: light.lifx_d0_73_d5_3c_10_f2
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/Final_smarth_bedroom_floor_lamp_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: light.lifx_d0_73_d5_3b_f9_1b
> hold_action: none
> state_image:
> 'off': /local/images/3d_floorplan/top_floor/transparent.png
> 'on': >-
> /local/images/3d_floorplan/top_floor/Final_smarth_bedroom_brown_floor_lamp_on.png
> style:
> left: 50%
> top: 50%
> width: 100%
> tap_action: none
> type: image
> - entity: switch.s24
> style:
> left: 45%
> top: 35%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.s20_2
> style:
> left: 45%
> top: 52%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.s19_3
> style:
> left: 35%
> top: 49%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.s19_1
> style:
> left: 22%
> top: 45%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.s22
> style:
> left: 49%
> top: 43%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.s28_1
> style:
> left: 51%
> top: 55%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.s26
> style:
> left: 60%
> top: 22%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.s25
> style:
> left: 70%
> top: 22%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.saksham_room_lights
> style:
> left: 30%
> top: 22%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.smarth_room_lights
> style:
> left: 75%
> top: 65%
> tap_action:
> action: toggle
> type: state-icon
> - entity: switch.shreya_room_lights
> style:
> left: 30%
> top: 65%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.lifx_d0_73_d5_3c_10_f2
> style:
> left: 79%
> top: 60%
> tap_action:
> action: toggle
> type: state-icon
> - entity: light.lifx_d0_73_d5_3b_f9_1b
> style:
> left: 71%
> top: 72%
> tap_action:
> action: toggle
> type: state-icon
> image: /local/images/3d_floorplan/top_floor/final_upstairs_dark.png
> style:
> height: 100%
> left: 50%
> top: 50%
> width: 100%
> panel: true
> type: picture-elements
> column_width:
> - 20.2%
> - 79.8%
> layout: horizontal
> panel: true
> type: custom:layout-card
> layout_type: horizontalHey, sidebar should be before Cards.
title: Home
sidebar:
title: null
width:
mobile: 0
tablet: 25
desktop: 25
breakpoints:
mobile: 600
tablet: 1300
date: true
dateFormat: dddd, DD MMMM
digitalClock: true
twelveHourVersion: false
hideHassSidebar: false
hideTopMenu: false
showTopMenuOnMobile: true
template: >
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
{% if "1" in states('sensor.next_rubbish_collection') %} <li>Put the Rubbish
bin out</li> {% endif %}
{% if "1" in states('sensor.next_recycling_collection') %} <li>Put the
Recycling out</li> {% endif %}
{% if "Today" in states('sensor.garden_waste') %} <li>Today the Garden Waste
goes out</li> {% endif %}
sidebarMenu:
- action: navigate
navigation_path: /kitchen-dev/home-grid
name: Home
icon: mdi:home
active: true
- action: navigate
navigation_path: /kitchen-dev/lights-grid
name: Lights
icon: mdi:lightbulb-group
- action: navigate
navigation_path: /kitchen-dev/appliances-grid
name: Appliances
icon: mdi:robot-vacuum
- action: navigate
navigation_path: /kitchen-dev/weather-grid
name: Weather
icon: mdi:weather-sunny
- action: navigate
navigation_path: /kitchen-dev/security-grid
name: Security
icon: mdi:shield-home-outline
- action: navigate
navigation_path: /kitchen-dev/plan
name: Plan
icon: mdi:floor-plan
- action: navigate
navigation_path: /kitchen-dev/media2
name: Media2
icon: mdi:music
- action: navigate
navigation_path: /kitchen-dev/system
name: System
icon: mdi:music
- action: navigate
navigation_path: /kitchen-dev/plants
name: Plants
icon: mdi:sprout-outline
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: custom:simple-weather-card
entity: weather.climacell_daily
name: ' '
primary_info:
- wind_bearing
- humidity
secondary_info:
- precipitation
- precipitation_probability
- type: grid
cards:
- type: custom:mushroom-person-card
entity: person.brent_mccabe
use_entity_picture: true
layout: vertical
- type: custom:mushroom-person-card
entity: person.claudia_mccabe
use_entity_picture: true
layout: vertical
- type: state-label
entity: proximity.home_claudia
style:
top: 55%
left: 30%
pointer-events: none
transform: initial
line-height: 1.1em
font-size: 20px
padding: 0.2px
'--paper-item-icon-color': white
font-weight: 300
align-self: middle
justify-self: left
- type: state-label
entity: proximity.home_brent
style:
top: 55%
left: 30%
pointer-events: none
transform: initial
line-height: 1.1em
font-size: 20px
padding: 0.2px
'--paper-item-icon-color': white
font-weight: 300
align-self: middle
justify-self: left
columns: 2
square: true
views:
- title: Home
path: home
icon: mdi:home
1 Like
The same problem. If you have resolved this problem? Thanks!
Hi, i have the same problem. If you have resolved this problem? thanks!
Hey, is the floorplan-alcove.png is just cut out of that area and the rest is clear?
No. Funny, I haven’t looked at this for several months because it wasn’t displaying at all on Google Hub, but now it is (cast works properly), I’ll have another look at some kind of floorplan.
No, all pictures are complete without cutting. Because I see that all the pictures in the author’s document are complete.
Thanks for reply. I still try to find the reason. I checked all the comments, and it’s incredible that only we have this problem
when you created the floor plan using sweethome3D, did you place the lights above the roof line? The light could bleed outside of the intended space, that’s what happened to me.
I created a seperate png for every light/room to get around it. hasd to for the lack of knowledge so stuck with this method
In the past I experienced all the problems listed here, in the end I found out that in order to obtain a good result I had to render (in SweetHome3d) 2 images for each (coloured) light.
For each actual light I created two light objects in SH3D, in the same position, one white and one red, and I rendered two pictures, one with the white light on, one with the red light one, plus one with all the lights off (at night time).
Before using the two rendered images in HA I cleaned them up leaving only the different pixels compared to the “base” night image, I used GIMP’s filter “Optimise (Difference)” to obtain this automatically (plus some manual cleanup), saving them as a PNG with alpha channel. Without this “trick”, when you perform the hue-rotate you also change the color of areas that are not actually affected by the turned-on light but that are still present in the rendered image of that light (ie. all the parts of the house that are not completely black even during the night).
This is the code I use in HA for each light (light.go_uno in this case):
- type: custom:config-template-card
entities:
- light.go_uno
element:
type: image
image: /local/casa/rotated7/Casa3D_rotated7_light_go_uno_MASK.png
entity: light.go_uno
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.go_uno"].attributes.brightness ?
states["light.go_uno"].attributes.brightness / 255 : 0) -
(states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
- type: custom:config-template-card
entities:
- light.go_uno
element:
type: image
image: /local/casa/rotated7/Casa3D_rotated7_red_go_uno_MASK.png
entity: light.go_uno
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.go_uno"].attributes.brightness ?
states["light.go_uno"].attributes.brightness / 255 : 0) *
(states["light.go_uno"].attributes.hs_color ?
states["light.go_uno"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
1 Like
how did you format your yaml? Here’s what I made after reading your instructions.
- type: custom:config-template-card
entities:
- light.kitchen1
element:
type: image
image: /local/ui/floorplan/lights/kitchen_counter_white0.png
entity: light.kitchen1
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.kitchen1"].attributes.brightness ?
states["light.kitchen1"].attributes.brightness / 255 : 0) -
(states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
- type: custom:config-template-card
entities:
- light.kitchen1
element:
type: image
image: /local/ui/floorplan/lights/kitchen_counter_red0.png
entity: light.kitchen1
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.kitchen1"].attributes.brightness ?
states["light.kitchen1"].attributes.brightness / 255 : 0) *
(states["light.kitchen1"].attributes.hs_color ?
states["light.kitchen1"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
top: 0%
left: 0%
transform: none
Then here is what I had prior to following your instructions –
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
admin_settings:
hide_header: true
hide_sidebar: true
kiosk: true
views:
- title: Home
icon: mdi:floor-plan
panel: true
badges: []
cards:
- type: custom:config-template-card
entities:
- light.kitchen1
card:
type: picture-elements
image: /local/ui/floorplan/main-night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
- action: none
entity: light.kitchen1
hold_action:
action: none
image: /local/ui/floorplan/lights/lounge3-red.png
style:
filter: >-
${ "hue-rotate(" + (states['light.kitchen1'].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.kitchen1'].state === 'on' ?
(states['light.kitchen1'].attributes.brightness / 255) : '0'}
top: 50%
width: 100%
tap_action:
action: none
type: image
This is exactly like my working yaml (just be careful to align all the indentations properly)… does it work for you as well?
Just for completeness, this is the top of the full yaml file:
views:
- title: Casa 3D
path: casa3d
panel: true
badges: []
cards:
- type: picture-elements
image: /local/casa/rotated7/Casa3D_rotated7_night.png
elements:
- type: custom:config-template-card
[...]
(the “base image” is the house rendered at night with all the lights turned off)
Did you figure this one out? Adding the contents in the referenced location results in other errors here