Snuf1
March 3, 2021, 8:36pm
320
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.
tinwetari
March 6, 2021, 9:31pm
321
hey there! did this ever happen? I have the same issue, unable to do a similar style
Brux1988
March 7, 2021, 9:51am
322
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
jme24
March 15, 2021, 11:36am
323
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?
CDRX2
March 15, 2021, 8:41pm
325
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:
1 Like
antohh93
March 16, 2021, 5:59am
326
Hi, how can I fix the size?
This is exactly what I was looking for! Thank you!
@CDRX2 Could you post your configuration for that exact chart? I am also using Openweathermap.
CDRX2
March 16, 2021, 5:57pm
329
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;
}
1 Like
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
CDRX2
March 16, 2021, 8:20pm
331
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.
1 Like
@CDRX2 That makes total sense! Thank you! Got it solved. I appreciate your help!
antohh93
March 16, 2021, 9:13pm
333
Hi, can you help me with my problem? I have dimensions larger than my screen, how can I fix this?
CDRX2
March 17, 2021, 6:48am
334
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.
antohh93
March 17, 2021, 7:24am
335
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?
CDRX2
March 17, 2021, 8:17am
336
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.
Snuf1
March 23, 2021, 11:10am
337
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.
lucaamo
April 10, 2021, 7:20am
338
I added some more information about weather an temperature inside and outside home and nice animation with wind arrow which turns base on wind direction and rain drops which increase base on rain quantity.
6 Likes
littlemike
April 20, 2021, 7:12pm
339
Okay, so please forgive my noobishness. I’m still a relative novice to HA and my CSS skills date back to when XHTML 1.0 became a standard.
I’ve been going through this line by line (and learning a lot, so thank you for this!) So far I’ve managed to get a floorplan going (I’m doing this in a separate dashboard vs a ui-lovelace file). On the floorplan, I was able to get the png’s to swap out when I turn lights on and off. So far so good. Having a bit of trouble with the transparent pngs, but I think that’s a matter of the size of the png and properly positioning it via CSS. I did get the individual light icons working, so yay for that.
Anyway, the next part of the code is where I’m running into trouble. I added the sidebar and it displays over my floorplan, cutting off the left-hand side. I don’t know if that’s because my floorplan is 1920x1080 or if maybe I need to add an additional card to separate it out or something. That’s where I’m stuck right now. So I guess the question is, how do I either a) push my floorplan to the right so it’s not being covered by the sidebar or b) resize it slightly/scale it down so it’s not covered. Though honestly, I’d prefer being able to push it to the right. My house is long and narrow, so “landscape” format for the floorplan.
