Hello,
I got this error: “ERROR Unterminated template (23:52)”.
Anyone have any idea what this means and how I solve it?
You are going to have to supply way more info. Where do you see this error? What are you trying to do? Is anything working?
Sounds like a browser issue rather than floorplan. Can you use the browser dev tools and check if the style is getting applied.
1 Like
Thank you for your replay OzGav, I’ve kind of solved it. It was an error at the if statement level, basically I was passing numerical values as string using the " " rather than a plain number.
I want to reuse the floorplan multiple times (as a sort template)
is that gonna work, or will I get trouble with the id’s. if used on the same page?
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 
.
1 Like
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
2 Likes
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
1 Like
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);