Hi,
i spend ours to set up my floorplan, know i have some problems to set up the opacity of my icons. First i drew my plan with Sweethome 3D and took a picture with all lights off. Then i made the same with all lights on and cut off my rooms to have “Icons” for each room with lights on.
In my next step i import the Room Icons to my floorplan svg and named the icons same as my entities.
To turn on/off my lights everthing works fine, but the states of my icons dont switch with the state of my entities.
For testing i only use this configuration at my floorplan.yaml file
> name: Demo Floorplan
> image: /local/custom_ui/floorplan/floorplan.svg
> stylesheet: /local/custom_ui/floorplan/floorplan.css
>
> # These options are optional
> # warnings: # enable warnings (to find out why things might ot be working correctly)
> # pan_zoom: # enable experimental panning / zooming
> # hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
> # date_format: DD-MMM-YYYY # Date format to use in hover-over text
>
> last_motion_entity: sensor.template_last_motion
> last_motion_class: last-motion
>
> groups:
>
> - name: Sensors
> entities:
> - sensor.dht_sensor_temperature
> #text_template: '${entity.state ? entity.state : "unknown"}'
> # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
> text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
> class_template: '
> var temp = parseFloat(entity.state.replace("°", ""));
> if (temp < 10)
> return "temp-low";
> else if (temp < 30)
> return "temp-medium";
> else
> return "temp-high";
> '
>
> - name: Lights
> entities:
> - switch.steckdose_1
> - switch.steckdose_2
> - switch.steckdose_3
> - switch.steckdose_4
> - group.living_room_lights
> states:
> - state: 'on'
> class: 'light-on'
> - state: 'off'
> class: 'light-off'
> action:
> domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
> service: toggle
in my floorplan.css file i have following setup
> /* Light */
>
> .light-off {
> fill: #C3B7F4 !important;
> fill-opacity: 0 !important;
> }
>
> .light-on {
> fill: #F8D2B9 !important;
> fill-opacity: 1 !important;
> }
i really like this feature so i would be great if someone could show me the point im doing wrong.
Thank u!!!
and thank u to petar Kozul for the fantastic work!!!