Do you use Sweet home 3d?
Make the render at time 00:00. So you get just the light.
Yeah I do. Will do that now!
EDIT: Rendered that using the red light source in the same place as my white light source.
You have to change only the light color. I know there are a lot of lights in sweet home which could not change color. But it looks like yours can and keep me updated if the render is done ( and with time 00:00 it renders even faster because everything else is black ).
Thats wired. Maybe because you use the hole image. I dont know. Maybe it will be better to use just the area that is affected by the light source. Here a e.g. image of one of my rooms in red and kinda white
Not the hole house just one room. You have to adjust this with top, left and width to be accordingly over the exact area.
White:
Red:
EDIT ok this is a bad example. For better understanding take a look at these images in white and red:
This is what you have to look for:
EDIT: Do you got your base images right? It seems like your lights are on?
Day time image should be at a “summer” day at a quite late time, so that the lights should be visible ( for my instance it is the 8th of may at 18:30 )
The night time image is at the same day at time 20:15.
On both images no lights on!
All light images should be at time 00:00.
EDIT EDIT: and do yourself a favorite: Save the camera position inside sweet home to get the same image viewing angle all the time.
My two cents here: I actually have only two hue bulbs in my setup, the rest is all LED strips with Zigbee compatible controllers. What do you guys use?
I have my base images which are all rendered at 13:30 on a summers day. I like the bright vibe. With my lights I’ve got them set to 65% brightness so it shows on the image.
Where does it state a day/night image? The only thing I can see in code is this -
My light images are only the area of light, not the whole image. For example this is what they look like -
Main lights around the house are all hue bulbs. I have a few WLED custom strips on a few ESP32s but they’re more accent lighting
Hue bulbs in different variations, hue lightstrips / grandient and hue lamps wich are all based on lightstrips.
Like I said with hue lightstrips your code does not work correctly. Don’t have any zigbee light to test. All hue lights are connected via hue bridge (HomeKit devices) to HA.
At the beginning of each “floor dashboard” you should have the night/day image as a base image (for night as a base image and day image overlay as day/night change).
- title: Controll Lights
icon: "mdi:lightbulb-group-outline"
panel: true
path: lightcontrol
cards:
################### PICTURE ELEMENT CARD #####################
- type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
card_mod:
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
######################### DAY BASE FLOORPLAN OVERLAY #########################
- type: "custom:config-template-card"
entities:
- sun.sun
element:
type: image
action: none
entity: sun.sun
hold_action:
action: none
image: /local/transparent.png
state_image:
above_horizon: /local/ui/floorplan/floorplan_day.png
below_horizon: /local/transparent.png
tap_action:
action: none
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: "${ states['sensor.sunlight_opacity'].state }"
top: 50%
width: 100%
It looks like you room images (home_afternoon_livingroomlamp_on.png and bedroom…png) are grayscale images? I guess this is what causes this issue.
- floorplan_night.png as a base image rendered at night time lights off
- floorplan_day.png as an overlay (day night change) rendered at day time lights off
- each lightsource separatly, lightsource white and red also separatly rendered at time 00:00 to show only the light itself. So only the environment that’s affected by the lightsource should be visible everything else should be black.
And use the same “cutout” for every light in one room. Your desklight image should have the same dimension as your bedroomlights_on.png. Do not cut it like you did already. The bedrromlights image should be the whole room with the desk. See my marking above.
Very weird! The code should take the lightstrips reported rgb attribute and transpose it to CSS… Besides, the hue light strips are also Zigbee, to my knowledge
Yes, hue lights are zigbee. But in my case not directly embeded to HA via zha or z2m.
To show you what I mean is this. my config red light and yours. Its the hue floor gradient stand.
Red light with my code:
The same red light with your code:
Thank you for this. Just redoing my images now so hopefully using your code & having the correct images it’ll work!
Much better!
The home_night is too dark and the home_day too bright in my opinion but its ok. Give it a try!
Working on the brightness/darkness. Just want to get the coloured lights working as they should then will fix that. It is way too dark haha.
So using this code
- type: custom:config-template-card
entities:
- light.desk
element:
type: image
image: /local/ui/floorplan/lights/rez/home_night_desklights_on_white.png
entity: light.desk
tap_action:
action: none
hold_action:
action: none
style:
opacity: >-
${ ( states["light.desk"].attributes.brightness ?
states["light.desk"].attributes.brightness / 255 : 0) -
(states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1]/255 : 0)}
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
transform: none
- type: custom:config-template-card
entities:
- light.desk
element:
type: image
image: /local/ui/floorplan/lights/rez/home_night_desklights_on_red.png
entity: light.desk
tap_action:
action: none
hold_action:
action: none
style:
filter: >-
${ "hue-rotate(" + (states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1] : 255)+ "%)" }
opacity: >-
${ (states["light.desk"].attributes.brightness ?
states["light.desk"].attributes.brightness / 100 : 0) *
(states["light.desk"].attributes.hs_color ?
states["light.desk"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
transform: none
And this top code -
Whenever I turn on the entity light.desk, no overlay image shows. Not the white or red one
On another note, it is still showing my night image, does this change at a certain time of the day to my day image?
The day image changes at sun rise. “above_horizon”.
For testing lights in night time change the image home_day_lights_off.png from above_horizon to below_horizon. U will see your night image.
If I understand you correctly, the light if you switch it on it does not show up? This is maybe because of your day image is too bright or the light amount of your desklamp is too low. You have to play a bit around.
Ahh gotcha, I’m guessing I can configure when sun rise is etc. Will look into that as it’s currently night and bright here so would like my dash to reflect that.
Here is what is mean. When I turn on my light.desk entity, in person they are white and full brightness. In the dashboard they are white and full brightness but the overlay image doesn’t show they are on.
Oh, you have to edit the tab_action. In my case there was none
For e.g.
tap_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: [your_light]