Nobody have an idea?
I dont know if I got this flicker issue thing. Everytime a light is changing state, it seems to reload the whole site. In addition also the clock does not update until a light state changes or I reload the site again. (only the one panel on the other it works just fine)
I dont know what to do. CTC inside etc. what I see here what solves this issue to some, I dont know if I did it correct. because everything works and this reload thing happens only on the controll rooms tab. the other ones work well.
Hello,
I’ve been trying to implement a floorplan in past weeks and I got a problem that I didn’t figure out how to resolve. The issue is that, when the images and not displayed fully above the base image but they are cropped (see the left side of the house in print screen). The missing piece has the same width as the sidebar. This happens when I use mix-blend-mode: lighten. If I remove it, the problem disappears but obviously I can’t remove it because then the effect is messed up.
I’m not really sure how this happens, I think the blending takes into account the color of the sidebar but I’m not sure. Please find below a print screen and the relevant parts of the code. Any input is greatly appreciated.
Cheers!
kiosk_mode:
non_admin_settings:
kiosk: true
ignore_entity_settings: true
sidebar:
width:
tablet: 20
desktop: 20
mobile: 20
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
icon: mdi:lightbulb
cardStyle: |
:host {
width: 99%;
background-color:#FFF;
}
title: null
digitalClock: true
digitalClockWithSeconds: true
date: true
sidebarMenu:
- name: Home
icon: mdi:home
navigation_path: /dashboard-hometablet
action: navigate
- name: Test
icon: mdi:network
navigation_path: /dashboard-hometablet/test
action: navigate
views:
- type: panel
title: test
path: test
subview: true
badges: []
action: none
cards:
- type: picture-elements
image: local/images/floorplan/midnight_off.png
card-mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: image
entity: sun.sun
state_image:
above_horizon: local/images/floorplan/daytime_off.png
below_horizon: local/images/floorplan/transparent.png
style:
top: 50%
left: 50%
width: 100%
height: 100%
mix-blend-mode: lighten
tap_action:
action: none
hold_action:
action: none
- type: custom:config-template-card
entities:
- light.hallway_light
element:
tap_action:
action: none
type: image
entity: light.hallway_light
image: local/images/floorplan/transparent.png
state_image:
'on': local/images/floorplan/hallway_on8.png
style:
top: 50%
left: 50%
width: 100%
height: 100%
filter: |-
${ "sepia(100%) hue-rotate(calc(" +
(states['light.hallway_light'].attributes.hs_color ?
states['light.hallway_light'].attributes.hs_color[0] : 0)
+ "deg - 55deg)) saturate(calc(" +
(states['light.hallway_light'].attributes.hs_color ?
states['light.hallway_light'].attributes.hs_color[1] :
100)+"% *2))"}
opacity: >-
${states['light.hallway_light'].state === 'on' ?
(states['light.hallway_light'].attributes.brightness / 255) :
'0'}
mix-blend-mode: lighten
tap_action:
action: none
Can somebody help me out with typo?
Is this correct?
- title: Clean Up
icon: "mdi:robot-vacuum"
panel: true
cards:
- type: picture-elements
image: /local/ui/floorplan/floorplan_night_cu.png
card_mod:
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
- type: "custom:config-template-card"
entities:
- sun.sun
element:
action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/ui/floorplan/floorplan_day_cu.png
below_horizon: /local/transparent.png
tap_action:
action: none
type: image
style:
height: 100%
left: 50%
mix-blend-mode: lighten
top: 50%
width: 100%
Hi All, for my case when I was creating the alpha channels in gimp, I can see that something is causing the overall lighting to dim in my case when more than one switch is on, is there any fix for this? i.e., 2 simple ceiling lights, I would expect 2 to be brighter than one with more coverage. I noticed the coverage got larger but the first one dims.
When imported into picture elements I notice the same behavior. I have used 50% opacity for all alpha channels.
For people who are unexperienced and managed to implement this dashboard - can you share how did you get it done? What resources did you find useful? I visited every link, every video but I still don’t have a picture in my head on how to make it work 
It would be amazing if there was some tool that would allow to do it in a less complex way.
I’m afraid I will have to disappoint you here, but there is no very easy way to implement this dashboard. There are many different parts involved. But, for a start, a few steps:
- Start off experimenting with HA in standard mode. Add some custom cards from HACS, start using card-mod. You need to have some understanding of how HA works and how to write yaml code before tackling this project
- Create a 3d model of your house or apartment using the 3d program of your choosing (Sweethome 3D is a popular choice)
- Create all the renders (day/night/each light individually)
- Create a new dashboard in yaml mode on your HA
- Identify the integrations and custom cards you need/want to have
- Start copying in code. Comment out almost all of it and then start to work on it step by step (sidebar and a simple view of your house first). Keep adding to it as you go along
- Don’t be afraid to ask for help and search this forum, there’s lots of knowledge here and chances are often someone has encountered something similar at some point
- Be patient. It took me two years to build my entire dashboard (not just the lights part, mind you) and I did start from scratch
I honestly don’t know if Luke has updated his repo with the latest changes and updates, but you can check mine (see my signature). There’s now instructions, but it is my current working dashboard.
Hope this helps.
1 Like
Yes indeed, bit of a tricky one.
Apologies have been a bit dormant on here lately, buying a new house so will change the whole setup for that. I’ll definitely update everything in the next few months when I do!
Thank you, I started the process but there are a few points that I don’t get. I have made my apartment in sweethome 3d but now I’m stuck and don’t know how many renders do I have to do? Some guides say each different combination of lights. I would like to achieve Hue and Opacity sync like the author with the CSS template. Do I later have to cut out each part of the apartment where the light is? If I render full floorplan with only one light on, how will it overlay only the part of the image.
Just some clarification on rendering would be super helpful.
Also, which files should I actually copy from his repository? There are so many but which actually are required?
With regard to the renders, I did the following:
- One render “day” per floor
- One render “night” per floor (more like dusk in the sweethome3d render settings)
- One render for each light (just the one light on, all others off)
If you feel like cutting your light images afterward, it is possible. I’ve not done it, since the combinations are too complex.
The basic principle in HA is then: base image is the night image. On top of that is the day image with the blending code according to the sun entity. And then come the lights, all blended in according to state (on/off), brightness and hue (for the lamps that have those attributes).
You can check my repo, my images are on there (www/ui/floorplan). They say an image is worth a thousand words 
1 Like
Saved me, thanks a lot !
Hi,
Where do I find the code to the sidebar?
Hi, i’m facing to a problem with the mini graph at the bottom.
It looks like this 
and nothing is displayed in. I didn’t change the code except to put my temperature information like this :
######################### TEMPERATURE MINI GRAPH (INSIDE vs OUTSIDE) #########################
- color_thresholds:
- color: '#4dd2ff'
value: 10
- color: '#ffa31a'
value: 15
- color: '#ff1a1a'
value: 20
entities:
- sensor.temperature
- sensor.humidite
icon: 'mdi:home-thermometer-outline'
show:
icon: true
legend: false
name: false
style: |
:host {
left: 11.6%;
top: 92.9%;
width: 23.5%;
overflow: hidden;
height: 15%;
background: none !important;
box-shadow: none !important;
}
.header {
font-size: 1vw;
position: absolute !important;
width: 5% !important;
padding: 0 !important;
right: 20% !important;
top: 15% !important;
}
ha-card {
background: none !important;
padding: 0 !important;
}
.icon > ha-icon {
width:1.8vw !important;
height:1.8vw !important;
}
.state__time{
font-size:0.9vw !important;
margin-top: 0.2vw;
font-weight: 300 !important;
opacity: 0.4 !important;
}
.states {
font-size: 0.5vw !important;
padding: 1vw 0vw 0vw 0vw !important;
margin: auto !important;
width: 68%;
}
tap_action:
action: navigate
navigation_path: /lovelace/4
type: 'custom:mini-graph-card'
I’m using a xiaomi fan which have temperature and humidity info that i can see in the dashboard
Any idea?
Thanks in advance !
You have to put style inside card_mod:
######################### TEMPERATURE MINI GRAPH (INSIDE vs OUTSIDE) #########################
- color_thresholds:
- color: '#4dd2ff'
value: 10
- color: '#ffa31a'
value: 15
- color: '#ff1a1a'
value: 20
entities:
- sensor.temperature
- sensor.humidite
icon: 'mdi:home-thermometer-outline'
show:
icon: true
legend: false
name: false
card_mod:
style: |
:host {
left: 11.6%;
top: 92.9%;
width: 23.5%;
overflow: hidden;
height: 15%;
background: none !important;
box-shadow: none !important;
}
.header {
font-size: 1vw;
position: absolute !important;
width: 5% !important;
padding: 0 !important;
right: 20% !important;
top: 15% !important;
}
ha-card {
background: none !important;
padding: 0 !important;
}
.icon > ha-icon {
width:1.8vw !important;
height:1.8vw !important;
}
.state__time{
font-size:0.9vw !important;
margin-top: 0.2vw;
font-weight: 300 !important;
opacity: 0.4 !important;
}
.states {
font-size: 0.5vw !important;
padding: 1vw 0vw 0vw 0vw !important;
margin: auto !important;
width: 68%;
}
tap_action:
action: navigate
navigation_path: /lovelace/4
type: 'custom:mini-graph-card'
2 Likes
One thing, do I need to change image sizes to fit the ipad (because of now its not fullscreen) or can I use a code for that.
I do not mean fullscreen browser. Even there its not full screen there is a gap on the bottom.
It’s actually not the size of the images you need to look at, but the aspect ratio. If your Ipad has an aspect ratio of 16:9 and your images are 16:10 you’ll have a black border at the bottom. And don’t forget to take into account your sidebar if you have one. So if your sidevar is 20% of the width of a 16:10 screen, your image needs to be 12.8:10 to fit properly. It takes some figuring out…
1 Like
Thank you. So there is no way to change the aspect ratio by code?
Well, changing the aspect ratio can go one of three ways:
- Fit the image to the aspect ratio, resulting in a stretched image, or
- Crop the image to the aspect ratio, resulting in the loss of some of the image, or
- Scale the image to fit the aspect ratio, resulting in the empty black background you see.
To choose which of the above you want through code is most likely doable with CSS, although I’m not expert enough to provide you with a solution. However you look at it, it will be one of the three scenarios above.
Maybe ask in the card-mod thread how you can fit an image to your screen.
1 Like
Just here to say thank you I love this tool
1 Like
Hi! It seems that since the last update, its being put in recovery mode: I get this:
2024-02-09 19:13:26.144 ERROR (MainThread) [homeassistant.bootstrap] Failed to parse configuration.yaml: Secrets is not a dictionary. Activating recovery mode
Im using the config shared from @lukevink