Hi @lukevink
It works great but I’m having a weird issue that whenever I’m turning off/on a light it seems like the whole view is refreshed which causing a flickering effect which is pretty unwanted 
Am I missing something? does anyone else have this issue?
Thanks,
Can anyone tell what goes wrong in this syntax. I tried a lot but I can’t figure it out. I expect it’s something simple but I don’t see it anymore.
type: 'custom:config-template-card'
entities:
- light.go
card:
type: picture-elements
image: /local/home/downstairs_go_white.png
elements:
- type: image
entity: light.go
tap_action: none
hold_action: none
action: none
image: /local/home/downstairs_go_white.png
style:
filter: >-
${ "hue-rotate(" + (states['light.go'].attributes.hs_color ?
states['light.go'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
top: 50%
width: 100%
I don’t have a syntax-error in the sense that I can’t store it but the second part of
${ "hue-rotate(" + (states['light.go'].attributes.hs_color ?
states['light.go'].attributes.hs_color[0] : 0) + "deg)"}
also after the ? doesn’t color the same as the first part where ‘hue-rotate’ and ‘light.go’ are blue and ‘states’ is white where in the second line everything is orange except ’ : 0) ’ + (white) and ’ “deg)” ’ (blue) so there must be some sort of syntax-error left.
hey there! did this ever happen? I have the same issue, unable to do a similar style
Hello everyone I have created my house plan with home sweet 3d I have added 3 entities in my plan but only the last one works that I put in order in lovelace.yaml how can I make them all work where I am wrong and as if it does not go wild l click event.
- title: Controllo Stanze
icon: 'mdi:floor-plan'
panel: true
badges: []
cards:
################### 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: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: "1st Floor"
card:
type: 'custom:config-template-card'
entities:
- switch.luce_soggiorno_1
- switch.luce_soggiorno_2
- switch.luce_corridoio_1
card:
################### Picture Elements Card #####################
type: 'picture-elements'
image: /local/ui/floorplan/punta_secca_primo_piano_luci_spente.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
######################### DAY BASE FLOORPLAN OVERLAY #########################
- entity: switch.luce_soggiorno_1
hold_action: none
state_image:
'off': /local/floorplan/transparent_square.png
'on': /local/floorplan/examples/puntasecca/soggiorno_1_on.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.luce_soggiorno_1
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: switch.luce_soggiorno_1
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: true
entity: switch.luce_soggiorno_1
header: false
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style: |
:host{
height: 100%;
z-index: 0;
}
ha-card {
box-shadow: none !important;
}
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: Stairs - Upstairs
icon: 'mdi:ceiling-light'
style:
'--iron-icon-height': 1.5vw
'--iron-icon-width': 1.5vw
'--paper-item-icon-active-color': '#000000'
'--paper-item-icon-color': darkgrey
align-items: center
background-color: 'rgba(255, 255, 255, 1)'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 2vw
justify-content: center
margin-left: '-1.5vw'
margin-top: '-1.5vw'
left: 50%
top: 52%
transform: 'scale(1.2)'
width: 2vw
tap_action:
action: toggle
type: state-icon
- entity: switch.luce_soggiorno_2
hold_action: none
state_image:
'off': /local/floorplan/transparent_square.png
'on': /local/floorplan/examples/puntasecca/soggiorno_1_on.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.luce_soggiorno_2
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: switch.luce_soggiorno_2
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: true
entity: switch.luce_soggiorno_2
header: false
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style: |
:host{
height: 100%;
z-index: 0;
}
ha-card {
box-shadow: none !important;
}
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: Stairs - Upstairs
icon: 'mdi:ceiling-light'
style:
'--iron-icon-height': 1.5vw
'--iron-icon-width': 1.5vw
'--paper-item-icon-active-color': '#000000'
'--paper-item-icon-color': darkgrey
align-items: center
background-color: 'rgba(255, 255, 255, 1)'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 2vw
justify-content: center
margin-left: '-1.5vw'
margin-top: '-1.5vw'
left: 50%
top: 45%
transform: 'scale(1.2)'
width: 2vw
tap_action:
action: toggle
type: state-icon
There are breaking changes in browser_mod 1.3 https://github.com/thomasloven/hass-browser_mod/releases/tag/1.3.0
Just try changing your hold_actions like this
entity: light.kitchen
hold_action:
action: fire-dom-event
browser_mod:
command: popup
card:
...
deviceID:
- this
card_mod:
...
title: Kitchen
Has anyone found something creative to put in this empty space if you are in the States and the rain graph isn’t applicable?
Depending on whether you have a weather entity that provides you with forecast data (I’ve gone with Openweathermap), you can then plot that data with ApexCharts card. Here’s what my take on the graph looks like:
This is exactly what I was looking for! Thank you!
Sure, here you go:
- type: 'custom:apexcharts-card'
graph_span: 7d12h
span:
start: day
offset: +12h
apex_config:
dataLabels:
enabled: false
chart:
height: 270%
legend:
position: 'top'
stroke:
colors: ['#ffa31a', '#03a8f4', 'none']
fill:
type: ['gradient', 'gradient', 'solid']
gradient:
type: 'vertical'
shade: 'dark'
inverseColors: true
opacityFrom: 0.8
opacityTo: 0.1
stops: [20, 100]
opacity: 0.85
plotOptions:
area:
fillTo: 'origin'
bar:
columnWidth: '150%'
series:
- entity: weather.openweathermap
type: area
curve: smooth
color: '#ffa31a'
name: 'Température'
extend_to_end: true
fill_raw: last
show:
legend_value: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.temperature];
});
- entity: weather.openweathermap
type: area
curve: smooth
name: 'Température min.'
extend_to_end: true
color: '#03a8f4'
fill_raw: last
show:
legend_value: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.templow];
});
- entity: weather.openweathermap
type: column
color: '#0b0385'
name: 'Précipitations'
fill_raw: last
show:
legend_value: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
card_mod:
style: |
:host {
left: 50%;
top: 72.5%;
width: 90% !important;
}
ha-card {
background: none !important;
}
Thank you! For some reason my open weather is different and doesn’t have templow but I’ll keep messing around and try to figure out how to get that to populate. It does have a daytime indicator that I could use in an if statement to show minimum if daytime is false but I don’t know how to do that within the ApexCharts type. Any ideas?
temperature: 46
humidity: 49
pressure: 1018
wind_bearing: 269
wind_speed: 2.15
attribution: Data provided by OpenWeatherMap
forecast:
- datetime: '2021-03-16T21:00:00+00:00'
precipitation: null
pressure: 1018
wind_speed: 1.4
wind_bearing: 282
condition: sunny
temperature: 47.1
- datetime: '2021-03-17T00:00:00+00:00'
precipitation: null
pressure: 1017
wind_speed: 0.44
wind_bearing: 358
condition: sunny
temperature: 48.4
- datetime: '2021-03-17T03:00:00+00:00'
precipitation: null
pressure: 1019
wind_speed: 0.98
wind_bearing: 139
condition: partlycloudy
temperature: 43.2
- datetime: '2021-03-17T06:00:00+00:00'
precipitation: null
pressure: 1020
wind_speed: 0.54
wind_bearing: 119
condition: partlycloudy
temperature: 40.6
- datetime: '2021-03-17T09:00:00+00:00'
precipitation: null
pressure: 1021
wind_speed: 1.25
wind_bearing: 49
condition: cloudy
temperature: 37.9
- datetime: '2021-03-17T12:00:00+00:00'
precipitation: null
pressure: 1021
wind_speed: 1.26
wind_bearing: 79
condition: cloudy
temperature: 35.1
- datetime: '2021-03-17T15:00:00+00:00'
precipitation: null
pressure: 1022
wind_speed: 1.31
wind_bearing: 69
condition: cloudy
temperature: 35.7
- datetime: '2021-03-17T18:00:00+00:00'
precipitation: null
pressure: 1020
wind_speed: 1.35
wind_bearing: 89
condition: partlycloudy
temperature: 46.4
- datetime: '2021-03-17T21:00:00+00:00'
precipitation: null
pressure: 1018
wind_speed: 1.19
wind_bearing: 171
condition: partlycloudy
temperature: 53.3
- datetime: '2021-03-18T00:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 0.73
wind_bearing: 186
condition: partlycloudy
temperature: 53.6
- datetime: '2021-03-18T03:00:00+00:00'
precipitation: null
pressure: 1017
wind_speed: 0.81
wind_bearing: 82
condition: cloudy
temperature: 45.9
- datetime: '2021-03-18T06:00:00+00:00'
precipitation: null
pressure: 1017
wind_speed: 1.4
wind_bearing: 76
condition: cloudy
temperature: 43.5
- datetime: '2021-03-18T09:00:00+00:00'
precipitation: null
pressure: 1017
wind_speed: 1.75
wind_bearing: 72
condition: partlycloudy
temperature: 40.5
- datetime: '2021-03-18T12:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 2.06
wind_bearing: 68
condition: cloudy
temperature: 39.3
- datetime: '2021-03-18T15:00:00+00:00'
precipitation: null
pressure: 1015
wind_speed: 2.34
wind_bearing: 71
condition: cloudy
temperature: 39.4
- datetime: '2021-03-18T18:00:00+00:00'
precipitation: null
pressure: 1013
wind_speed: 2.77
wind_bearing: 125
condition: cloudy
temperature: 51.5
- datetime: '2021-03-18T21:00:00+00:00'
precipitation: null
pressure: 1011
wind_speed: 5.41
wind_bearing: 206
condition: cloudy
temperature: 59.6
- datetime: '2021-03-19T00:00:00+00:00'
precipitation: null
pressure: 1009
wind_speed: 2.6
wind_bearing: 193
condition: cloudy
temperature: 57.1
- datetime: '2021-03-19T03:00:00+00:00'
precipitation: null
pressure: 1008
wind_speed: 2.7
wind_bearing: 101
condition: cloudy
temperature: 49.2
- datetime: '2021-03-19T06:00:00+00:00'
precipitation: null
pressure: 1008
wind_speed: 2.74
wind_bearing: 117
condition: rainy
temperature: 45.9
- datetime: '2021-03-19T09:00:00+00:00'
precipitation: null
pressure: 1010
wind_speed: 6.27
wind_bearing: 205
condition: rainy
temperature: 41.6
- datetime: '2021-03-19T12:00:00+00:00'
precipitation: null
pressure: 1013
wind_speed: 5.29
wind_bearing: 199
condition: rainy
temperature: 38.7
- datetime: '2021-03-19T15:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 3.76
wind_bearing: 185
condition: cloudy
temperature: 38.8
- datetime: '2021-03-19T18:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 5.01
wind_bearing: 218
condition: cloudy
temperature: 45.9
- datetime: '2021-03-19T21:00:00+00:00'
precipitation: null
pressure: 1014
wind_speed: 7.69
wind_bearing: 216
condition: rainy
temperature: 48.9
- datetime: '2021-03-20T00:00:00+00:00'
precipitation: null
pressure: 1013
wind_speed: 7.21
wind_bearing: 229
condition: rainy
temperature: 47.7
- datetime: '2021-03-20T03:00:00+00:00'
precipitation: null
pressure: 1015
wind_speed: 3.47
wind_bearing: 235
condition: partlycloudy
temperature: 41.1
- datetime: '2021-03-20T06:00:00+00:00'
precipitation: null
pressure: 1015
wind_speed: 2.26
wind_bearing: 188
condition: partlycloudy
temperature: 38.3
- datetime: '2021-03-20T09:00:00+00:00'
precipitation: null
pressure: 1015
wind_speed: 2.22
wind_bearing: 164
condition: partlycloudy
temperature: 35.8
- datetime: '2021-03-20T12:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 2.39
wind_bearing: 167
condition: cloudy
temperature: 35.4
- datetime: '2021-03-20T15:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 4.14
wind_bearing: 203
condition: snowy
temperature: 35.8
- datetime: '2021-03-20T18:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 4.36
wind_bearing: 210
condition: snowy
temperature: 40
- datetime: '2021-03-20T21:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 4.84
wind_bearing: 234
condition: rainy
temperature: 43.8
- datetime: '2021-03-21T00:00:00+00:00'
precipitation: null
pressure: 1016
wind_speed: 5.01
wind_bearing: 254
condition: rainy
temperature: 46.9
- datetime: '2021-03-21T03:00:00+00:00'
precipitation: null
pressure: 1018
wind_speed: 3.5
wind_bearing: 253
condition: cloudy
temperature: 40.5
- datetime: '2021-03-21T06:00:00+00:00'
precipitation: null
pressure: 1020
wind_speed: 2.7
wind_bearing: 210
condition: partlycloudy
temperature: 36.4
- datetime: '2021-03-21T09:00:00+00:00'
precipitation: null
pressure: 1021
wind_speed: 4.42
wind_bearing: 195
condition: partlycloudy
temperature: 33.9
- datetime: '2021-03-21T12:00:00+00:00'
precipitation: null
pressure: 1022
wind_speed: 4.05
wind_bearing: 183
condition: cloudy
temperature: 32.3
- datetime: '2021-03-21T15:00:00+00:00'
precipitation: null
pressure: 1023
wind_speed: 4.96
wind_bearing: 189
condition: cloudy
temperature: 32.2
- datetime: '2021-03-21T18:00:00+00:00'
precipitation: null
pressure: 1023
wind_speed: 5.2
wind_bearing: 204
condition: cloudy
temperature: 37.9
friendly_name: OpenWeatherMap
I think the reason why you don’t have a temp low is due to your configuration of the openweathermap integration. It seems yours is configured for hourly forecast, mine is configured for daily forecast which of course means a different config for apexcharts-card. If you search the forum thread, I think I remember someone who had an hourly config on there, but I’m not 100% certain.
Edit: I’m configured as onecall_daily, to be precise.
Hi, can you help me with my problem? I have dimensions larger than my screen, how can I fix this?
I’m not exactly sure what you mean. Basically, you should make sure your images have the correct aspect ratio for your screen. Since you’ll probably use different devices with different aspect ratios, it won’t look right on every one of them.
I have a problem on all devices. If you set kiosk_mode, on some screens it is smaller, and on others it is larger and you have to scroll. How can I customize it for each screen?
As I haven’t customized it for every screen myself, I can’t exactly tell you how. Maybe layout card could be of help, you should find it easily enough on this forum (sorry, I’m on the road, can’t provide you with the direct link right now).
What I’ve done is get the pictures in the aspect ratio fitting most screens (tablets and computers) and I will do a mobile adaptation at some point.
No help so I had to solve it myself.
The correct syntax is:
${ "hue-rotate(" + (states['light.sfeerlamp'].attributes.hs_color ?
states['light.sfeerlamp'].attributes.hs_color[0]:0) + 'deg'}
Now everything works fine.
I only have created a new problem by using the swipe-card in combination with the config-template-card. Parts of my floorplan turn into all shades of gray.
