i think i have the found the issue, apperantly i hadden’t put the - /hacsfiles/lovelace-card-mod/card-mod.js in the config.yaml.
no error anymore about the config template card, only the big slider card and the entity row, for the lights.
first trying to figure out the overlay part…
is quiet complicated how everything is connected, but loving the challange 
thank you for the quick response and assistance
Hi, i’m trying to learn and do a floor plan in home assistant. I started with a simple image of my apartment with all the lights off and another of a room with the light on, both same size. but I have encountered two problems
I have managed to make the brightness change in the image when I change it in the light but with each click the screen does like a quick flash.
The other problem is with the color, the code works well but the color of the image change with the right color only for some room objects and others show other different colors, very strange…
This is the code:
type: custom:config-template-card
entities:
- light.tira_de_luz
card:
type: picture-elements
image: /local/home3d/casadenoche.png
elements:
- action: none
type: image
entity: light.tira_de_luz
hold_action:
action: none
tap_action:
action: none
image: /local/home3d/casadormitorioencendido.png
style:
filter: >-
${ "hue-rotate(" + (states['light.tira_de_luz'].attributes.hs_color ?
states['light.tira_de_luz'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.tira_de_luz'].state === 'on' ?
(states['light.tira_de_luz'].attributes.brightness / 255) : '0'}
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
- entity: light.tira_de_luz
type: custom:button-card
tap_action:
action: more-info
style:
left: 72.5%
top: 54.5%
Maybe I should start with something simpler but I like everything I see and I try to do it, lol
I had problems with the colors until I rendered the colored lights images as red lights and adapted the code a bit. Check my HA repo for image examples and the code.
i’ll do that, thank you. Any clue for the screen flash problem? thanks in advance
Not really, to be honest. Does it happen on every device/browser combination you use?
yes, i tried on a laptop and a tablet. The 95% of the times al the screem flash for a second when i made a change in the brightness
That’s new to me, to be honest… You might want to check the code inspector in your browser, perhaps there’s some errors there or clues as to why those flashes are happening.
I just discover that the flash is because reloads the full dashboard every time I change the brightness setting. Do not know why…
Fixed with card_mod instead of Config Template Card Card
type: picture-elements
image: /local/CasaHA/casadenoche.png
elements:
- type: image
image: /local/CasaHA/casadormitorioencendido.png
entity: light.tira_de_luz
tap_action:
action: none
hold_action:
action: none
style:
mix-blend-mode: lighten
transform: none
width: 100%
height: 100%
top: 0
left: 0
card_mod:
style: |
:host {
opacity: {{ (state_attr(config.entity, 'brightness') / 255) if is_state(config.entity, 'on') else 0.0 }};
filter: {{ 'hue-rotate(' + ((state_attr(config.entity, 'hs_color')[0] - 45)|string if state_attr(config.entity, 'hs_color') else '0') + 'deg)' }};
}
- entity: light.tira_de_luz
type: custom:button-card
tap_action:
action: more-info
style:
left: 72.5%
top: 54.5%
Interesting approach! I’ll be interested in a feedback regarding performance once you’ve done all your lights!
Thnx you for the tip with the posters.
Would you share your code for emby and the sonarr and radarr part, cant get it right with the two collums
Sorry don’t have the code for it any more - have ended up going through about 3 dashboards since then 
i understand i stept in it a bit to late, i’am also keep changing my dashboard 
Got a question regarding cleaning or more regarding arrays.
So in Lukes code the cleaning is based on this input_text helper.
What do annoys me is that if I select one or more rooms in the app, it does not recognizes it.
e.g.:
state_image:
kitchen: /local/robot/kitchen_cleaning.png
So I decided to create a sensor based on the cleaning segments of the vacuum. So I get the rooms itself. Everything works so far but!
The cleaning segments are an array. e.g.:
state_image:
'[10]': /local/robot/kitchen_cleaning.png
So one room its pretty fine like this no 10. But if I select more than one room it look like this
[10, 5, 9, etc…]
So how can I show the image of a selected room if the no e.g. 10 is just a part of the whole array?
After a few mistakes on my side i had to restore a back up and started almost again at the beginning.
I have it almost sorted but i have no idea where to look.
For the color to represent the correct color light i need to render those lights with a red hue and white? do i do this in gimp for example or in sweet home where i made the png files?
in my weather pael it gives me a error on the apexcharts but i have those in place and working for example in the sidebar, what could this be?
view_layout:
grid-area: main
elements:
- current: true
details: true
entity: weather.forecast_thuis
forecast: true
number_of_forecasts: 5
name: Haarlem
card_mod:
style: |
:host {
left: 50%;
top: 30%;
width: 90%;
overflow: hidden;
height: 60%;
background: none !important;
box-shadow: none !important;
}
.current {
margin-bottom: 7vw;
}
.variations {
margin-bottom: 4vw;
}
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
border-radius: 1vw;
font-size: 1.2vw !important;
}
.forecast{
padding: 0 2.5%;
width: 95%;
}
.forecast .day:first-child{
border-left: 0.1em solid #d9d9d9;
}
.forecast .day:last-child{
border-right: 0.1em solid #d9d9d9;
}
type: 'custom:weather-card'
- type: 'custom:weather-chart-card'
entity: weather.buienradar
show_main: false
show_current_condition: true
show_attributes: false
show_time: false
show_day: false
show_date: false
show_humidity: true
show_pressure: true
show_wind_direction: true
show_wind_speed: true
show_sun: true
forecast:
precipitation_type: rainfall
labels_font_size: '11'
style: style2
show_wind_forecast: true
condition_icons: true
round_temp: false
type: daily
units:
pressure: ''
speed: ''
card_mod:
style: |
:host {
left: 50%;
top: 75%;
width: 90%;
height: 40%;
}
ha-card {
/*background: none !important;
height: 100%;
left: 50%;
top: 75%;
width: 90%;
height: 40%;*/
}
- type: 'custom:apexcharts-card'
experimental:
color_threshold: true
graph_span: 14d
span:
start: day
offset: -7d
now:
show: true
label: 'Huidig'
color: '#ff1a1a'
yaxis:
- id: temp
show: true
apex_config:
forceNiceScale: true
tickAmount: 5
decimalsInFloat: 0
- id: rain
show: true
opposite: true
apex_config:
forceNiceScale: true
tickAmount: 5
decimalsInFloat: 0
apex_config:
dataLabels:
enabled: false
chart:
width: '100%'
height: '100%'
legend:
position: top
show: false
grid:
show: false
padding:
left: 5
right: 20
plotOptions:
bar:
columnWidth: '50%'
xaxis:
axisBorder:
show: false
axisTicks:
show: false
tooltip:
enabled: false
series:
- entity: weather.buienradar
type: area
color_threshold:
- value: -80
color: '#03a8f4'
opacity: 0.65
- value: 0
color: '#ffa31a'
opacity: 0.65
color: '#ffa31a'
opacity: 0.65
name: 'Temperatuur'
unit: °C
attribute: temperature
stroke_width: 0
yaxis_id: temp
fill_raw: last
show:
legend_value: false
group_by:
func: avg
duration: 1h
start_with_last: false
extend_to: false
- entity: weather.buienradar
type: area
# color: '#ffa31a'
opacity: 0.65
color_threshold:
- value: -80
color: '#03a8f4'
opacity: 0.65
- value: 0
color: '#ffa31a'
opacity: 0.65
stroke_width: 0
yaxis_id: temp
name: 'Température'
unit: °C
extend_to: now
group_by:
func: raw
start_with_last: false
fill_raw: last
show:
legend_value: false
data_generator: |
return entity.attributes.forecast.flatMap((entry) => {
let noon = new Date(entry.datetime).setHours(16, 0, 0, 0);
let midnight = new Date(entry.datetime).setHours(4, 0, 0, 0);
return [[new Date(midnight).getTime(), entry.templow], [new Date(noon).getTime(), entry.temperature]];
});
- entity: sensor.openweathermap_rain
type: column
yaxis_id: rain
name: 'Précipitations'
unit: mm
color: '#0b0385'
# fill_raw: last
opacity: 0.65
show:
legend_value: false
group_by:
func: sum
duration: 1d
# - entity: sensor.openweathermap_snow
# type: column
# yaxis_id: rain
# name: 'Neige'
# unit: mm
# color: '#0cffdb'
# fill_raw: last
# show:
# legend_value: false
# group_by:
# func: sum
# duration: 1d
- entity: weather.buienradar
type: column
yaxis_id: rain
color: '#0b0385'
name: 'Précipitations'
unit: mm
# fill_raw: last
opacity: 0.65
show:
legend_value: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).setHours(24, 0, 0, 0), entry.precipitation];
});
card_mod:
style: |
:host {
left: 50%;
top: 75%;
width: 90%;
height: 40%;
}
ha-card {
background: none !important;
height: 100%;
}
.wrapper.with-header {
height: 100%;
}
.apexcharts-tooltip {
border: none !important;
border-radius: 0.2vw !important;
}
.apexcharts-tooltip-title {
border: none !important;
padding-bottom: none;
margin-bottom: none;
}
.apexcharts-xaxis-annotations > rect {
display: none;
}
image: /local/Huis/Klaar/plattegrond.png
card_mod:
style: |
ha-card {
background: rgba(42, 46, 48, 1);
}
type: picture-elements
within my media tab i have a lot of free space at the bottom , anybody an idea how i can fix it? is it correct when there is no media playing there is a empty space?
Ok, so in order of appearance:
thnx for the quick reply.
only to figure out the layout a bit,seems i"am missing dataSo does anyone have a good starting template? As in commented alot of the things that gives the errors so at least it can run without crashing?
If I understand you correctly, you are looking for a template that works right away, but you won’t find it.
Every template (Lukes or that of CDRX2) has addons, integrations (HACS) that must be installed in advance in order to be able to display it smoothly. Furthermore, you have to exchange all listed entities for your own entities and create listed scripts, automations, template_sensors etc. If an entity, script, automation or even a template_sensor is listed that you don’t have, you will also get an error message.
In short:
