I did!
Here’s a piece of my code:
- entity: light.main_bedroom_light_2
hold_action:
action: fire-dom-event
browser_mod:
command: popup
card:
cards:
- entities:
- entity: light.main_bedroom_light_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: light.main_bedroom_light_2
header: false
persist_features: true
type: "custom:light-slider-card"
show_header_toggle: false
style:
height: 100%
z-index: 0;
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: Bedroom Chandelier
icon: "bha:chandelier"
style:
left: 35%
top: 85%
"--iron-icon-height": 1.7vw
"--iron-icon-width": 1.7vw
"--paper-item-icon-active-color": "#FFC30B"
"--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
margin-left: "-1.5vw"
margin-top: "-1.5vw"
transform: scale(0.8)
width: 3vw
tap_action:
action: toggle
type: state-icon
2 Likes
Hi @riotmode Did you ever find out how to get that second view? (with the slider on the left and the color wheel on the right?)
Thanks
Thanks. I am having trouble making the custom:light-slider-card part work. Getting a “Custom elemenet doesn’t exist” error.
Can you please tell me more about where you have this and how you load it? Thanks
DNWY90
September 27, 2021, 12:23pm
440
In Sweet Home 3D i use warm lights, but in HA i get cold white lights on my floorplan. When i reload the page i see the warm lights on for a sec. Any idea what i can change?
Update: Allready found the problem, did everything right except i had forgotten to fill in the entity.
1 Like
Has anyone been able to successfully get the rain overlay to work?
Here is my code:
- action: none
entity: weather.weatherbit_spokane
hold_action:
action: none
image: /local/ui/floorplan/weather/rain.gif
state-image:
'rainy': /local/ui/floorplan/weather/rain.gif
state_filter:
'rainy': opacity(50%)
style:
left: 50%
mix-blend-mode: screen
top: 50%
width: 100%
opacity: 0%
tap_action:
action: none
type: image
It works when I remove opacity under style but then it’s on at all times even when the weather does not indicate “rainy”.
DNWY90
September 28, 2021, 5:57am
442
I have the same problem with my code:
- action: none
entity: weather.jagersdreef
hold_action:
action: none
image: /local/floorplan/floorplan_rain.gif
state_filter:
rainy: opacity(70%)
style:
mix-blend-mode: color-dodge
left: 54%
top: 33%
width: 33%
transform: rotate(90deg) scale(1.0,1.3)
opacity: 0
tap_action:
action: none
type: image
DNWY90
October 2, 2021, 8:55am
443
This seems to work for me:
- type: conditional
conditions:
- entity: sensor.buienradar_condition
state: rainy
elements:
- type: image
image: local/floorplan/floorplan_rain.gif
tap_action:
action: none
style:
top: 33%
left: 54%
width: 33%
transform: rotate(90deg) scale(1.0,1.3
mix-blend-mode: color-dodge
You said your red light allows for the light to be white, but do you just include “hue-rotate + opacity + mix-blend-mode=lighten” without saturation? how does your light differentiate between red (hue-rotate = 0, saturation = 100) and white (hue-rotate = 0, saturation = 0) if both have hue-rotate = 0?
Plex recently added
entity: sensor.plex_recently_added
title: Recently Added Tv
type: custom:upcoming-media-card
flag: false
box_shadows: false
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
upcoming-media-card ha-card{
background: none;
box-shadow: none !important;
}
upcoming-media-card ha-card div:nth-child(2) {
padding:0 !important;
}
.rece_poster{
width: 31% !important;
display: inline-block !important;
margin: 0% 0.2% !important;
}
.rece_svg_poster{
position: absolute !important;
bottom:-5%;
left:0;
width: 100% !important;
}
.rece_container_poster{
width:100% !important;
outline: none !important;
margin: 1% 1% !important;
overflow: hidden;
}
.rece_svg_poster > rect{
fill:none !important;
}
.card-header{
font-size: 1vw;
padding: 0;
}
But it doesn’t show just the poster like in this one?
Floorplan UI:
Hi there,
this project is awesome!!!
To create a 3D model of my home should be the easiest problem…
tiwo3d
November 24, 2021, 10:28am
448
First: Very nice Project.
- color_thresholds:
- color: '#4dd2ff'
value: 10
- color: '#ffa31a'
value: 15
- color: '#ff1a1a'
value: 20
entities:
- sensor.wohnzimmer_temperatur
- sensor.openweathermap_temperature
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-tablet/4
type: 'custom:mini-graph-card'
######################### Mini Weather card #########################
- backdrop: false
entity: weather.home
name: ' '
style: |
:host {
left: 11.4%;
top: 80.5%;
width: 17%;
height: 7% !important;
overflow: hidden;
height: 8.5vw;
background: none !important;
box-shadow: none !important;
font-size: 1vw !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
flex-flow: row-reverse !important;
padding: 0 !important;
}
.weather__info--add{
display : none !important;
}
.weather__info{
flex-grow: 1;
min-height: 0 !important;
height: 2.4vw;
margin-left: 0.6vw;
}
.weather__icon{
margin-right:0.5% !important;
margin-top: -3%;
width: 2vw !important;
height: 2vw !important;
flex: 0 0 2vw !important;
}
tap_action:
action: navigate
navigation_path: /lovelace-tablet/3
type: 'custom:simple-weather-card'
I hope somebody culd help.
genga91
November 25, 2021, 7:05pm
449
Could you please copy the definition of sunlight opacity sensor? Thanks
1 Like
FankiMonki
December 26, 2021, 1:30pm
450
Hi all, i have done my floorplan already and nowq i am struggling with colorsync (color stay the same) and browser_mod.popup(doesnt appear) Maybe someone able to look into my yaml and help?
decluttering_templates:
floorplan_light_colour:
element:
entity: '[[entity]]'
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: entities
entities:
- entity: '[[entity]]'
secondary_info: last-changed
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:light-entity-card
entity: '[[entity]]'
color_temp: true
color_wheel: true
full_width_sliders: true
smooth_color_wheel: true
persist_features: true
header: false
effects_list: false
brightness: false
white_value: false
color_picker: false
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:light-entity-card
entity: '[[entity]]'
color_wheel: true
color_picker: true
effects_list: true
full_width_sliders: true
smooth_color_wheel: true
persist_features: true
header: false
brightness: false
color_temp: false
white_value: false
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:slider-entity-row
entity: '[[entity]]'
color_temp: true
header: false
persist_features: true
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: '[[name]]'
icon: checkbox-blank-circle
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#CCCCCC'
'--paper-item-icon-color': '#CCCCCC'
align-items: center
background-color: '#CCCCCC'
border-radius: 100%
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.39)
display: flex
height: 2vw
justify-content: center
left: '[[left]]'
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: '[[top]]'
width: 2vw
tap_action:
action: toggle
type: state-icon
floorplan_media_player:
element:
entity: '[[entity]]'
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: '[[entity]]'
source: icon
artwork: none
hide:
power: true
icon: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: '[[group1]]'
name: '[[group1Name]]'
shortcuts:
columns: 4
buttons:
- icon: mdi:pine-tree
type: playlist
id: spotify:user:spotify:playlist:37i9dQZF1DX0Yxoavh5qJV
- icon: mdi:music-clef-treble
type: source
id: Classic FM
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: '[[name]]'
icon: mdi:speaker
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#2b2b2b'
'--paper-item-icon-color': '#2b2b2b'
align-items: center
background-color: '#CCCCCC'
border-radius: 100%
box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.39)
display: flex
height: 2.5vw
justify-content: center
left: '[[left]]'
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: '[[top]]'
width: 2.5vw
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[entity]]'
type: state-icon
views:
- title: Floorplan_V2
path: floorplan-v2
type: panel
badges: []
cards:
- type: custom:config-template-card
entities:
- light.stube_hue
- light.stube_leds
- light.kreisel
- light.ess_indi
- light.deckenspots
- light.buro_indi
- light.flower
card:
type: picture-elements
image: /local/floorplan/apescastle_h01.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: image
action: none
entity: sun.sun
state_image:
above_horizon: /local/floorplan/apescastle_h12.png
below_horizon: /local/floorplan/transparent
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: ${ states['sensor.sunlight_opacity'].state }
top: 50%
width: 100%
tap_action:
action: none
hold_action:
action: none
- type: image
entity: light.stube_hue
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.stube_hue'].attributes.hs_color ?
states['light.stube_hue'].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states['light.stube_hue'].state === 'on' ?
(states['light.stube_hue'].attributes.brightness / 255) : '0'}
state_image:
'on': /local/floorplan/stube_hue.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.stube_leds
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.stube_leds'].attributes.hs_color ?
states['light.stube_leds'].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states['light.stube_leds'].state === 'on' ?
(states['light.stube_leds'].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/floorplan/stube_leds.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.kreisel
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.kreisel'].attributes.hs_color ?
states['light.kreisel'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.kreisel'].state === 'on' ?
(states['light.kreisel'].attributes.brightness / 255) : '0'}
state_image:
'on': /local/floorplan/stube_kreisel.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.ess_indi
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.ess_indi'].attributes.hs_color ?
states['light.ess_indi'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.ess_indi'].state === 'on' ?
(states['light.ess_indi'].attributes.brightness / 255) : '0'}
state_image:
'on': /local/floorplan/ess_indi.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.deckenspots
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.deckenspots'].attributes.hs_color ?
states['light.deckenspots'].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states['light.deckenspots'].state === 'on' ?
(states['light.deckenspots'].attributes.brightness / 255) :
'0'}
state_image:
'on': /local/floorplan/ess_deckenspots.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.buro_indi
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.buro_indi'].attributes.hs_color ?
states['light.buro_indi'].attributes.hs_color[0] : 0) +
"deg)"}
opacity: >-
${states['light.buro_indi'].state === 'on' ?
(states['light.buro_indi'].attributes.brightness / 255) : '0'}
state_image:
'on': /local/floorplan/buro_indi.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: image
entity: light.flower
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" + (states['light.flower'].attributes.hs_color
? states['light.flower'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.flower'].state === 'on' ?
(states['light.flower'].attributes.brightness / 255) : '0'}
state_image:
'on': /local/floorplan/buro_flower.png
'off': /local/floorplan/apescastle_h01.png
tap_action:
action: none
- type: state-icon
entity: light.stube_leds
style:
left: 28%
top: 20%
tap_action:
action: toggle
- type: state-icon
entity: light.stube_hue
style:
left: 43%
top: 47%
tap_action:
action: toggle
- type: state-icon
entity: light.kreisel
style:
left: 34%
top: 34%
tap_action:
action: toggle
- type: state-icon
entity: light.ess_indi
style:
left: 60%
top: 16%
tap_action:
action: toggle
- type: state-icon
entity: light.deckenspots
style:
left: 65%
top: 27%
tap_action:
action: toggle
- type: state-icon
entity: light.buro_indi
style:
left: 53%
top: 81%
tap_action:
action: toggle
- type: state-icon
entity: light.flower
style:
left: 53%
top: 65%
tap_action:
action: toggle
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.stube_leds
- left: 28%
- top: 20%
- type: state-icon
- name: Stube LEDs
- type: custom:decluttering-card
template: floorplan_media_player
variables:
- entity: media_player.teufel
- left: 30%
- top: 28%
- type: state-icon
- name: Teufel
title: FLOORPLANv3
edit: Coloursync is working now but the browser pop-up still doesn’t appear.
CDRX2
December 26, 2021, 5:34pm
452
Hi,
First thing I’d recommend is to go read the browser-mod docs on Github. The syntax you’re using has evolved.
I did some digging myself when I recently started with home assistant.
It seems that the sunlight opacity sensor is derived from sun.sun and the Darksky weather integration as a combination of the position of the sun and the cloud coverage.
sensors:
## Calculates daylight brightness out of 100%
sunlight_pct:
entity_id:
- sun.sun
- sensor.dark_sky_cloud_coverage
value_template: >-
{%- set elevation = state_attr('sun.sun','elevation') | float %}
{%- set cloud_coverage = states('sensor.dark_sky_cloud_coverage') | float %}
{%- set cloud_factor = (1 - (0.75 * ( cloud_coverage / 100) ** 3 )) %}
{%- set min_elevation = -6 %}
{%- set max_elevation = 90 %}
{%- set adjusted_elevation = elevation - min_elevation %}
{%- set adjusted_elevation = [adjusted_elevation,0] | max %}
{%- set adjusted_elevation = [adjusted_elevation,max_elevation - min_elevation] | min %}
{%- set adjusted_elevation = adjusted_elevation / (max_elevation - min_elevation) %}
{%- set adjusted_elevation = adjusted_elevation %}
{%- set adjusted_elevation = adjusted_elevation * 100 %}
{%- set brightness = adjusted_elevation * cloud_factor %}
{{ brightness | round }}
unit_of_measurement: '%'
device_class: 'illuminance'
sunlight_opacity:
entity_id:
- sensor.sunlight_pct
value_template: >-
{%- set sunpct = states('sensor.sunlight_pct') | float %}
{%- set opacity = sunpct / 100 | float %}
{{ opacity }}
Unfortunately it seems that the Darksky services has been limited and will be terminated by the end of 2022.https://www.home-assistant.io/integrations/darksky/ I am still looking for a suitable replacement but haven’t found a cloud coverage yet.
FankiMonki
December 28, 2021, 12:49pm
454
thanks for the hint will give it a try
CDRX2
December 28, 2021, 4:12pm
455
I faced the same problem, ended up with Openweathermap, only had to create a free account.
Thanks for the tip. Strange enough I had overlooked this obvious option.
Openweathermap seems direct interchangeable. I will give it a try.
1 Like
2 Likes
