I dont think that’s a problem. But give it a go - shouldb’t take more than 5 minutes to test? 
As you’re not defining how you’re going to reuse it, we’re in a bit of a X-problem situation. But let us know how it goes.
And oh, if you run into any problems, I’ll recommend you to use our Discussion area on GitHub 
.
Thanks for producing this guide
Hello, I have been working time from time with this and now reached the point where I have done all the designing and rendering with sweet home 3d, prepared png files and SVG file preparation in Inkscape and finally started configuration.
I followed youtube video that was created several years ago.
I stumbled upon issue how to activate images based on state.
images are name with same names as the light entities.
if i have light.kitchen enitity then I also have kitchen.png file with rendered light for that area.
In svg I also set corresponding entity ID’s for the images under light_overlay layer.
as per video author uses this code to set style_set and activate elements
state_action:
action: call-service
service: floorplan.style_set
service_data:
element: "${entity.entity_id.replace('light.', 'light_overlay.')}"
style: |
>
if( entity.state !== "on" )
return "display: none;";
let hue = 0;
let sat = 0;
if( entity.attributes.hs_color )
{
hue = entity.attributes.hs_color[0];
sat = entity.attributes.hs_color[1];
}
if( sat < 10 )
{
return `
display: block;
filter:
brightness(calc( ${entity.attributes.brightness} / 255));`
}
return `
display: block;
filter:
sepia(100%)
hue-rotate(calc( ${hue}deg - 55deg ))
saturate(calc( ${sat}% * 2 ))
brightness(calc( ${entity.attributes.brightness} / 255));
`
as I understand my issue is that mine lights do not have neither hs_color neither other attributes. it has only state on or off.
I am very bad with coding if anyone would be so kind and help me alter the code so that it enables correct image if related entity has state on.
That bitborn video is the bane of my existence! 
Its old now and too advanced for most people. These are the videos you should watch https://www.youtube.com/playlist?list=PL5xKVw-BInX1phV-Tnjznwd2YG5mEOvWL
Look here for an example for simple on off lights. Floorplanner Home Example - Floorplan for Home Assistant
Hello,
I have downloaded the example files home.svg and home.css, created a dedicated view and pasted the yaml code via the configuration editor. After restarting HA and reloading the page, all I see is this big HA logo instead of the floorplan… Can anyone guide me further?
Look here for a similar issue I'm stuck at the beginning of home_simple. ERROR /local/floor plan/home simple/home simple.css?_= - #12 by leandroog
Type the path to you SVG into the address bar and see if you can see it. If so check the path in your yaml
Thanks! I had replaced /local/ with /config/www/ yesterday, and saw the improvement in that the error message changed to missing entities instead of missing file. However, now that i moved back to /local/, the floorplan showed up! I think it has to do with my NAS where I am running HA was restarted during the night. … and that solved the problem with my “/local/” not working.
Hi,
I’m trying to change the opacity based on brightness of a light. Can’t get it to work. What am I doing wrong?
- entities:
- element: Livingroom_Spots_On
entity: light.living_room_spots_2
state_action:
action: call-service
service: floorplan.style_set
service_data: |
>
var opacity = '${(entity.state === "on") ? (entity.attributes.brightness / 255) : '0'}';
return `opacity: ${opacity};`;
Firstly I would wrap the attribute in parseInt() before dividing by 255 and then you should probably round that result so you have an integer for the opacity
Im getting a error: 4/6/2024, 4:12:13 PM ERROR Unexpected token (1:117) (See console for more info)
Ok but if you don’t supply the yaml then we can’t help
The code in the first code-box is the function I try to use for setting opacity based on brightness of a light. Without this section, no error-message. Below the full yaml and css-code.
- entities:
- element: Livingroom_Spots_On
entity: light.living_room_spots_2
state_action:
action: call-service
service: floorplan.style_set
service_data: |
>
var opacity = '${(entity.state === "on") ? (entity.attributes.brightness / 255) : '0'}';
return `opacity: ${opacity};`;
Full YAML:
type: custom:floorplan-card
full_height: false
config:
console_log_level: info
log_level: info
image: /local/floorplan/40.svg
cache: true
stylesheet: /local/floorplan/40.css
startup_action:
- service: floorplan.class_set
service_data:
elements:
- ButtonAtticShow
- ButtonSensorsShow
class: layer-visible
- service: floorplan.class_set
service_data:
elements:
- Parking
- Attic
- Attic_Sensors
- Downstairs_Sensors
- ButtonAtticHide
- ButtonSensorsHide
class: layer-hidden
rules:
- element: ButtonAtticShow
tap_action:
- service: floorplan.class_set
service_data:
elements:
- ButtonAtticHide
- Attic
class: layer-visible
- service: floorplan.class_set
service_data:
elements:
- ButtonAtticShow
class: layer-hidden
- element: ButtonAtticHide
tap_action:
- service: floorplan.class_set
service_data:
elements:
- ButtonAtticShow
class: layer-visible
- service: floorplan.class_set
service_data:
elements:
- ButtonAtticHide
- Attic
class: layer-hidden
- element: ButtonSensorsShow
tap_action:
- service: floorplan.class_set
service_data:
elements:
- ButtonSensorsHide
- Attic_Sensors
- Downstairs_Sensors
class: layer-visible
- service: floorplan.class_set
service_data:
elements:
- ButtonSensorsShow
class: layer-hidden
- element: ButtonSensorsHide
tap_action:
- service: floorplan.class_set
service_data:
elements:
- ButtonSensorsShow
class: layer-visible
- service: floorplan.class_set
service_data:
elements:
- ButtonSensorsHide
- Attic_Sensors
- Downstairs_Sensors
class: layer-hidden
- element: Attic_Bedroom_Toucharea
tap_action:
action: navigate
navigation_path: '#bedroom'
- element: Attic_GuestBedroom_Toucharea
tap_action:
action: navigate
navigation_path: '#guestbedroom'
- element: Attic_Office_Toucharea
tap_action:
action: navigate
navigation_path: '#office'
- element: Attic_WC_Toucharea
tap_action:
action: navigate
navigation_path: '#wc'
- element: Attic_HallAttic_Toucharea
tap_action:
action: navigate
navigation_path: '#hallattic'
- element: LivingroomTemp_Toucharea
tap_action:
action: navigate
navigation_path: '#heating'
- element: LivingroomSpots_Toucharea
tap_action:
action: navigate
navigation_path: '#lights'
- element: LivingroomVarious_Toucharea
tap_action:
action: navigate
navigation_path: '#lights'
- element: Dining_Toucharea
tap_action:
action: navigate
navigation_path: '#lights'
- element: KitchenIsland_Toucharea
tap_action:
action: navigate
navigation_path: '#lights'
- element: KitchenSink_Toucharea
tap_action:
action: navigate
navigation_path: '#lights'
- element: Bathroom_Toucharea
tap_action:
action: navigate
navigation_path: '#bathroom'
- element: Hall_Toucharea
tap_action:
action: navigate
navigation_path: '#hall'
- entity: sensor.air_quality_temperature_measurement
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.bathroom_temp_hum_temperature_measurement
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.bathroom_temp_hum_relative_humidity_measurement
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + " %" : "unknown"}'
- entity: sensor.temp_and_humidity_temperature_measurement
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.motion_sensor_guest_bedroom_temperature
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.motion_sensor_hall_attic_temperature
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.motion_sensor_bathroom_attic_temperature
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entity: sensor.motion_sensor_office_temperature
state_action:
- service: floorplan.text_set
service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
- entities:
- entity: light.bathroom_spots
element: Bathroom_On
- entity: light.hallway
element: Hall_On
- entity: light.kitchen_spots_2
element: Kitchen_Spots_On
- entity: light.kitchen_zink_2
element: Kitchen_Sink_On
- entity: light.kitchen_island_2
element: Kitchen_Island_On
- entity: light.kitchen
element: Kitchen_On
- entity: light.dining
element: Dining_On
- entity: light.living_room_spots_2
element: Livingroom_Spots_On
- entity: light.living_room
element: Livingroom_Any_On
- entity: switch.bathroom_attic_lights
element: WC_On
- entity: light.office
element: Office_On
- entity: light.guest_bedroom_2
element: GuestBedroom_On
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.bedroom_contact
element: Hall_Attic_Off_Door_Open
- entity: light.bedroom
element: Hall_Attic_DoorOpen_Off_Bedroom_On
- entity: light.hall_attic_2
element: Hall_Attic_On
- entity: binary_sensor.bedroom_contact
element: Bedroom_DoorOpen
- entity: binary_sensor.bedroom_contact
element: Bedroom_DoorOpen_On_Hall_On
- entity: light.bedroom
element: Bedroom_DoorClosed_On
- entity: light.bedroom
element: Bedroom_DoorOpen_LightOn
- entity: light.hall_attic_2
element: Bedroom_DoorOpen_Off_Hall_On
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: light.hall_attic_2
element: Hall_Attic_Off
- entity: binary_sensor.bedroom_contact
element: Bedroom_DoorClosed
- entity: light.bedroom
element: Bedroom_DoorOpen_LightOff
- entity: light.hall_attic_2
element: Bedroom_DoorOpen_Off_Hall_Off
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "off") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: sensor.smoke_detector_livingroom_smoke_detector
element: Sensor_Livingroom_Frame_Detected
- entity: sensor.smoke_detector_livingroom_smoke_detector
element: Sensor_Livingroom_Fire_Detected
- entity: sensor.smoke_detector_hallway_smoke_detector
element: Sensor_Hall_Frame_Detected
- entity: sensor.smoke_detector_hallway_smoke_detector
element: Sensor_Hall_Fire_Detected
- entity: sensor.smoke_detector_bedroom_smoke_detector
element: Sensor_Bedroom_Frame_Detected
- entity: sensor.smoke_detector_bedroom_smoke_detector
element: Sensor_Bedroom_Fire_Detected
- entity: sensor.smoke_detector_guest_bedroom_smoke_detector
element: Sensor_GuestBedroom_Frame_Detected
- entity: sensor.smoke_detector_guest_bedroom_smoke_detector
element: Sensor_GuestBedroom_Fire_Detected
- entity: sensor.smoke_detector_hall_attic_smoke_detector
element: Sensor_HallAttic_Fire_Detected
- entity: sensor.smoke_detector_hall_attic_smoke_detector
element: Sensor_HallAttic_Frame_Detected
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "detected") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: sensor.smoke_detector_livingroom_smoke_detector
element: Sensor_Livingroom_Frame_Clear
- entity: sensor.smoke_detector_livingroom_smoke_detector
element: Sensor_Livingroom_Fire_Clear
- entity: sensor.smoke_detector_hallway_smoke_detector
element: Sensor_Hall_Frame_Clear
- entity: sensor.smoke_detector_hallway_smoke_detector
element: Sensor_Hall_Fire_Clear
- entity: sensor.smoke_detector_bedroom_smoke_detector
element: Sensor_Bedroom_Frame_Clear
- entity: sensor.smoke_detector_bedroom_smoke_detector
element: Sensor_Bedroom_Fire_Clear
- entity: sensor.smoke_detector_guest_bedroom_smoke_detector
element: Sensor_GuestBedroom_Frame_Clear
- entity: sensor.smoke_detector_guest_bedroom_smoke_detector
element: Sensor_GuestBedroom_Fire_Clear
- entity: sensor.smoke_detector_hall_attic_smoke_detector
element: Sensor_HallAttic_Fire_Clear
- entity: sensor.smoke_detector_hall_attic_smoke_detector
element: Sensor_HallAttic_Frame_Clear
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "clear") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: sensor.smoke_detector_livingroom_smoke_detector
element: Sensor_Livingroom_Fire_Error
- entity: sensor.smoke_detector_hallway_smoke_detector
element: Sensor_Hall_Fire_Error
- entity: sensor.smoke_detector_bedroom_smoke_detector
element: Sensor_Bedroom_Fire_Error
- entity: sensor.smoke_detector_guest_bedroom_smoke_detector
element: Sensor_GuestBedroom_Fire_Error
- entity: sensor.smoke_detector_hall_attic_smoke_detector
element: Sensor_HallAttic_Fire_Error
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "undefined") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: lock.main_door
element: Sensor_Hall_Main_Door_Lock_Unlocked
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "unlocked") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: lock.main_door
element: Sensor_Hall_Main_Door_Lock_Locked
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "locked") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: lock.main_door
element: Sensor_Hall_Main_Door_Lock_Error
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "undefined") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.balcony_door_contact
element: Sensor_Livingroom_Balconydoor_Closed
- entity: binary_sensor.main_door_contact
element: Sensor_Hall_Main_Door_Closed
- entity: binary_sensor.escape_shaft_contact
element: GuestBedroomEscapeClosed
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "off") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.balcony_door_contact
element: Sensor_Livingroom_Balconydoor_Open
- entity: binary_sensor.main_door_contact
element: Sensor_Hall_Main_Door_Open
- entity: binary_sensor.escape_shaft_contact
element: GuestBedroomEscapeOpen
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.motion_sensor_bathroom_motion_2
element: Sensor_Bathroom_Motion_Detected
- entity: binary_sensor.camera1_cell_motion_detection
element: Sensor_Livingroom_Camera_Detected
- entity: binary_sensor.motion_sensor_bedroom_motion_2
element: Sensor_Bedroom_Motion_Detected
- entity: binary_sensor.motion_sensor_guest_bedroom_motion_3
element: Sensor_GuestBedroom_Motion_Detected
- entity: binary_sensor.motion_sensor_hall_attic_motion_2
element: Sensor_HallAttic_Motion_Detected
- entity: binary_sensor.motion_sensor_office_motion_2
element: Sensor_Office_Motion_Detected
- entity: binary_sensor.motion_sensor_bathroom_attic_motion_2
element: Sensor_WC_Motion_Detected
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.motion_sensor_bathroom_motion_2
element: Sensor_Bathroom_Motion_Error
- entity: binary_sensor.camera1_cell_motion_detection
element: Sensor_Livingroom_Camera_Error
- entity: binary_sensor.motion_sensor_bedroom_motion_2
element: Sensor_Bedroom_Motion_Error
- entity: binary_sensor.motion_sensor_guest_bedroom_motion_3
element: Sensor_GuestBedroom_Motion_Error
- entity: binary_sensor.motion_sensor_hall_attic_motion_2
element: Sensor_HallAttic_Motion_Error
- entity: binary_sensor.motion_sensor_office_motion_2
element: Sensor_Office_Motion_Error
- entity: binary_sensor.motion_sensor_bathroom_attic_motion_2
element: Sensor_WC_Motion_Error
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "undefined") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: switch.motion_sensor_bathroom_motion
element: Sensor_Bathroom_Motion_On
- entity: switch.camera1_privacy
element: Sensor_Livingroom_Camera_Off
- entity: switch.motion_sensor_bedroom_motion
element: Sensor_Bedroom_Motion_On
- entity: switch.motion_sensor_guest_bedroom_motion
element: Sensor_GuestBedroom_Motion_On
- entity: switch.motion_sensor_hall_attic_motion
element: Sensor_HallAttic_Motion_On
- entity: switch.motion_sensor_office_motion
element: Sensor_Office_Motion_On
- entity: switch.motion_sensor_bathroom_attic_motion
element: Sensor_WC_Motion_On
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: switch.motion_sensor_bathroom_motion
element: Sensor_Bathroom_Motion_Off
- entity: switch.camera1_privacy
element: Sensor_Livingroom_Camera_On
- entity: switch.motion_sensor_bedroom_motion
element: Sensor_Bedroom_Motion_Off
- entity: switch.motion_sensor_guest_bedroom_motion
element: Sensor_GuestBedroom_Motion_Off
- entity: switch.motion_sensor_hall_attic_motion
element: Sensor_HallAttic_Motion_Off
- entity: switch.motion_sensor_office_motion
element: Sensor_Office_Motion_Off
- entity: switch.motion_sensor_bathroom_attic_motion
element: Sensor_WC_Motion_Off
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "off") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.water_leak_sensor_water
element: Sensor_Kitchen_Waterleak_Detected
- entity: binary_sensor.water_leak_sensor_water_2
element: Sensor_Bathroom_Waterleak_Detected
- entity: binary_sensor.waterleak_hw_tank_water
element: Sensor_WC_Waterleak_Detected
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.water_leak_sensor_water
element: Sensor_Kitchen_Waterleak_Clear
- entity: binary_sensor.water_leak_sensor_water_2
element: Sensor_Bathroom_Waterleak_Clear
- entity: binary_sensor.waterleak_hw_tank_water
element: Sensor_WC_Waterleak_Clear
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "off") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: binary_sensor.water_leak_sensor_water
element: Sensor_Kitchen_Waterleak_Error
- entity: binary_sensor.water_leak_sensor_water_2
element: Sensor_Bathroom_Waterleak_Error
- entity: binary_sensor.waterleak_hw_tank_water
element: Sensor_WC_Waterleak_Error
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "unavailable") ? "layer-visible" : "layer-hidden"}'
- entities:
- entity: sun.sun
element: Outside_Night
- entity: sun.sun
element: Livingroom_Night
- entity: sun.sun
element: Attic_Night
state_action:
service: floorplan.class_set
service_data: >-
${(entity.state === "below_horizon") ? "layer-visible" :
"layer-hidden"}
- entities:
- entity: sun.sun
element: Outside_Day
- entity: sun.sun
element: Livingroom_Day
- entity: sun.sun
element: Attic_Day
state_action:
service: floorplan.class_set
service_data: >-
${(entity.state === "above_horizon") ? "layer-visible" :
"layer-hidden"}
- entities:
- entity: switch.bathroom_fan
element: BathroomFan
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "spinning" : "layer-hidden"}'
- entities:
- light.hallway
- light.living_room_spots_2
state_action:
- action: call-service
service: floorplan.style_set
service_data: |
>
var elements = [
`${entity.entity_id}`,
`${entity.entity_id}.gradient_color_0`,
];
var color = 'rgb(0, 0, 0)';
var opacity = 0;
if (entity.state === 'on') {
if (entity.attributes.color_temp) {
var rgb = util.color.miredToRGB(entity.attributes.color_temp);
color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
opacity = '(entity.attributes.brightness / 255)';
}
else if (entity.attributes.rgb_color) {
var rgb = entity.attributes.rgb_color;
color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
opacity = '(entity.attributes.brightness / 255)';
}
}
var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;
return {
elements: elements,
style: style,
};
- entities:
- element: Livingroom_Spots_On
entity: light.living_room_spots_2
state_action:
action: call-service
service: floorplan.style_set
service_data: |
>
var opacity = '${(entity.state === "on") ? (entity.attributes.brightness / 255) : '0'}';
return `opacity: ${opacity};`;
CSS:
/* Layers */
.layer-visible {
display: inline !important;
}
.layer-hidden {
display: none !important;
}
/* Spinning fan */
.spinning {
display: inline !important;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center;
transform-box: fill-box;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
You haven’t made any changes based on the first response I gave you. Also the 0 is wrapped in single quotes when it needs to be in double “
Hi,
I have tried your suggestion. The double quote fixed the error-message, but it is still not changing the opacity based on brightness of lamp.
- entities:
- element: Livingroom_Spots_On
entity: light.living_room_spots_2
state_action:
action: call-service
service: floorplan.style_set
service_data: |
>
var opacity = '${(entity.state === "on") ? (parseInt(entity.attributes.brightness) / 255) : "0"}';
return `opacity: ${opacity};`;
I doesn’t look like the “var opacity” is sent to “return opacity”.
Trying to hardcode a number in return line, i.e. “return opacity: 0.5;;” works.
Trying to hardcode 0.5 in the if does not work, i.e. " var opacity = ‘${(entity.state === “on”) ? “0.5” : “0”}’;"
Try it like this
state_action:
service: floorplan.style_set
service_data:
style: |
opacity: ${(entity.state === "on") ? Math.round(parseInt(entity.attributes.brightness)/255): "0"}
Edit: if you keep it the way you currently have it then use something like this to show what the values of everything are as it executes.
console.log('brightness', entity.attributes.brightness);
Hi,
I’ve tried to “install” the example files, but they do not work. Can somebody please help me to find the error in one of my steps?
type: custom:floorplan-card
title: test
views:
- title: Floorplan
path: floorplan
badges: []
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:floorplan-card
full_height: true
config:
image: /local/floorplan/examples/home/home.svg
stylesheet: /local/floorplan/examples/home/home.css
log_level: info
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entity: light.garage
element: light.garage
state_action:
action: call-service
service: floorplan.image_set
service_data: >-
/local/floorplan/examples/home/light_${entity.state}.svg
tap_action: toggle
- entity: light.garage
element: light.garage.button
state_action:
action: call-service
service: floorplan.class_set
service_data: button-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- entity: light.garage
element: light.garage.text
state_action:
action: call-service
service: floorplan.text_set
service_data: ${entity.state}
tap_action: false
- entity: switch.living_area_fan
tap_action: false
state_action:
action: call-service
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "spinning" : ""}'
- entity: switch.living_area_fan
element: switch.living_area_fan.button
state_action:
action: call-service
service: floorplan.class_set
service_data: button-${entity.state}
hold_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: switch.living_area_fan
- entity: switch.living_area_fan
element: switch.living_area_fan.text
state_action:
action: call-service
service: floorplan.text_set
service_data: ${entity.state}
tap_action: false
- entity: camera.zagreb_ban_jelacic_square
state_action:
action: call-service
service: floorplan.image_set
service_data:
image: ${entity.attributes.entity_picture}
image_refresh_interval: 10
- entities:
- binary_sensor.main_bedroom
- binary_sensor.living_area
state_action:
action: call-service
service: floorplan.style_set
service_data:
style: >
fill: ${ entity.state === "on" ? "#F9D27C" :
"#7CB1F9" };
transition: ${ entity.state === "off" ? "fill 5s
ease" : "" };
But the dashboard is still empty:
What can I do?
Regards,
Jogi
Please take a look at my YouTube videos:
Also, try and check the JS console, and if you see any issues. You can also set our debug option in ha-floorplan itself.
If you still facing any issues, create a Discussion topic on GitHub .
Here’s another example:
Also, follow OzGav’s suggestion: Simplify to the bare minimum.
Start by simplifying. Remove the vertical and horizontal stack.
Try and access the image by putting the image address in your browser address bar after YOUR_HA_IP:8223
Do you mean like this?https://.ui.nabu.casa:8223/local/floorplan/examples/home/home.svg
That didn’t work…
Remove all the things you don’t need in the YAML code.
Also, it’s not a good ideá to share the link to your Home Assistant instance.
Also, OzGaz asks you to check if files below “local” or “www” are actually resolveable. You can upload whatever to that folder in your Home Assistant solution, to confirm if it’s possible to access the files. If you cannot open the svg path, it’s not related to ha-floorplan: It’s related to your Home Assistant setup.
You need to play around with the “www” and “local” subpath of your home assistant instance, and see what works for you. The www folder in the root of your Home Assistant solution are normally solved as “/local” in the http web-address. But it depends on what kind of solution you’re using.
Here where it’s using “hacsfiles” for the weather-card I’m using, you’ll normally use “local” or “www” for files stored in the “www” folder.
Here’s the content of my home assistant root (output stripped down)
➜ homeassistant ls -alht
total 828M
drwxr-xr-x 62 <myusername> <myusername> 12K Aug 15 14:41 ..
-rw-r--r-- 1 root root 1.8M Aug 15 14:40 home-assistant.log
...
-rw-r--r-- 1 root root 21K Aug 14 14:32 automations.yaml
drwxr-xr-x 12 <myusername> <myusername> 4.0K Aug 14 14:27 www
...
➜ homeassistant pwd
/home/<myusername>/homeassistant
Notice that I have a folder called “www”, but should be resolved as “local”, like: http://10.0.0.x/local/<whatever_file>