Hi everyone,
I’ve successfully got this dashboard configured except it can’t get the lights to pop up the browser_mod.popup. I can toggle the light on and off but when I press and hold, nothing happens. Any ideas? I’m going crazy.
- entity: light.living_room_chandelier_local
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.living_room_chandelier_local
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
color_picker: false
effects_list: false
entity: light.living_room_chandelier_local
full_width_sliders: true
header: false
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
- brightness: false
color_temp: false
entity: light.living_room_chandelier_local
full_width_sliders: true
header: false
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: true
entity: light.living_room_chandelier_local
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: 2
layout: horizontal
max_width:
- 60%
- 40%
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: Cabinet
icon: 'mdi:lamp'
style:
'--iron-icon-height': 1.7vw
'--iron-icon-width': 1.7vw
'--paper-item-icon-active-color': '#000000'
'--paper-item-icon-color': darkgrey
align-items: center
background-color: '#FFFFFF'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 3vw
justify-content: center
left: 72.5%
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: 54.5%
transform: scale(1.2)
width: 3vw
tap_action:
action: toggle
type: state-icon
bertkuh
February 22, 2021, 8:15pm
315
can someone give me hint what went wrong in the overlay?
I just changed the entity to my media player.
thanks
ginko64
February 23, 2021, 9:11am
316
Same problem here! (and I do not use Browser_mod)
Thanks
I’m at the point where I will literally pay someone to help me get the light popup window when I hold on a state icon
I cannot figure it out for the life of me.
- entity: light.guest_closet_2
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.guest_closet_2
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
color_picker: false
effects_list: false
entity: light.guest_closet_2
full_width_sliders: true
header: false
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
- brightness: false
color_temp: false
entity: light.guest_closet_2
full_width_sliders: true
header: false
persist_features: true
show_slider_percent: false
smooth_color_wheel: true
type: 'custom:light-entity-card'
style: |
ha-card {
box-shadow: none !important;
}
column_height: 1
layout: vertical
type: 'custom:layout-card'
- entities:
- color_temp: true
entity: light.guest_closet_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: 2
layout: horizontal
max_width:
- 60%
- 40%
type: 'custom:layout-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
- dashboard
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Cabinet
icon: 'mdi:lamp'
style:
'--iron-icon-height': 1.7vw
'--iron-icon-width': 1.7vw
'--paper-item-icon-active-color': '#000000'
'--paper-item-icon-color': darkgrey
align-items: center
background-color: '#FFFFFF'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 3vw
justify-content: center
left: 72.5%
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: 54.5%
transform: scale(1.2)
width: 3vw
tap_action:
action: toggle
type: state-icon
CDRX2
February 23, 2021, 6:44pm
318
Do any other popups via browser-mod work?
didi767
February 28, 2021, 9:42pm
319
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
Thanks,
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?
