ha-floorplan: [BUG]
Describe the bug Floorplan preview in card configuration not working properly. Everytime you edit a line, or even just press enter for a new blank line, another floorplan svg is added on the right in the preview until you cannot see what is going on.
It was working and I am pretty new to Home Assistant, I removed all other HACS packages but still have the problem. My Yaml is generated from a python script because of the many duplicates.
To Reproduce Steps to reproduce the behavior:
- Go to code editor of floorplan card
- place cursor at the end of yaml code
- press enter
- for each press, another svg picture gets addded
Expected behavior Only one floorplan svg is show and mimics the code
Screenshots
Desktop (please complete the following information): Windows with latest Chrome
Share configuration Please share: YAML: `type: custom:floorplan-card full_height: true config: image: /local/floorplan/Floorplan.svg stylesheet: /local/floorplan/home.css log_level: info console_log_level: info defaults: hover_action: hover-info hold_action: more-info rules:
- entity: light.kuche_plug
element: light.kuche_plug
tap_action: toggle
double_tap: more.info
state_action:
- service: floorplan.class_set
service_data:
element: glow.kuche_plug
class: '${(entity.state === "on") ? "light-on" : "light-off"}'
- entity: light.wohnzimmer_1
element: light.wohnzimmer_1
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.wohnzimmer_1
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.wohnzimmer_1
persist_features: true
consolidate_entities: true
- entity: light.wohnzimmer_2
element: light.wohnzimmer_2
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.wohnzimmer_2
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.wohnzimmer_2
persist_features: true
consolidate_entities: true
- entity: light.wohnzimmer_3
element: light.wohnzimmer_3
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.wohnzimmer_3
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.wohnzimmer_3
persist_features: true
consolidate_entities: true
- entity: light.wohnzimmer_panels
element: light.wohnzimmer_panels
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.wohnzimmer_panels
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.wohnzimmer_panels
persist_features: true
consolidate_entities: true
- entity: light.diele_panel
element: light.diele_panel
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.diele_panel
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.diele_panel
persist_features: true
consolidate_entities: true
- entity: light.flur_panel
element: light.flur_panel
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.flur_panel
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.flur_panel
persist_features: true
consolidate_entities: true
- entity: light.hobbyraum_panel
element: light.hobbyraum_panel
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.hobbyraum_panel
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.hobbyraum_panel
persist_features: true
consolidate_entities: true
- entity: light.schlafzimmer_enrave
element: light.schlafzimmer_enrave
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.schlafzimmer_enrave
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.schlafzimmer_enrave
persist_features: true
consolidate_entities: true
- entity: light.bad_xamento
element: light.bad_xamento
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.bad_xamento
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.bad_xamento
persist_features: true
consolidate_entities: true
- entity: light.wc_xamento
element: light.wc_xamento
state_action:
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
opacity: ${ entity.state === 'on' ? (entity.attributes.brightness
/ 255) : '0' }
- service: floorplan.style_set
service_data:
element: glow.${entity.entity_id.substring(6)}
style: >-
fill: ${(entity.attributes.color_mode === ("xy" || !"color_temp")
) ? "rgb(" + entity.attributes.rgb_color + ")" : "rgb(" +
util.color.kelvinToRGB(entity.attributes.color_temp_kelvin) + ")"}
tap_action: toggle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: light.wc_xamento
content:
type: horizontal-stack
cards:
- type: custom:light-entity-card
entity: light.wc_xamento
persist_features: true
consolidate_entities: true
- element: area.makergear
state_action:
- service: floorplan.text_set
service_data:
element: debug_text
text: "test"
- service: floorplan.style_set
service_data:
element: slider.makergear
style: >
> var start_time = new Date(states['sensor.octoprint_start_time_makergear'].state);
var end_time = new Date(states['sensor.octoprint_estimated_finish_time_makergear'].state);
var percentage = (Date.now() - start_time) / (end_time - start_time);
return `transform-origin: right center; transform-box:fill-box;
transform: scaleX(${percentage})`;
- service: floorplan.style_set
service_data:
element: printer.makergear
style: >-
fill: ${(states['sensor.octoprint_current_state_makergear'].state === "Operational") ? "rgb(200,0,0)" : "rgb(0,0,100)"}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: makergear
content:
type: vertical-stack
cards:
- type: entity
entity: sensor.octoprint_estimated_finish_time_makergear
- type: picture-glance
entities:
- entity: sensor.octoprint_current_state_makergear
show_state: true
- entity: sensor.octoprint_job_percentage_makergear
show_state: true
- entity: sensor.octoprint_estimated_finish_time_makergear
show_state: true
- entity: sensor.octoprint_actual_tool0_temp_makergear
show_state: true
- entity: sensor.octoprint_actual_bed_temp_makergear
show_state: true
camera_image: camera.octoprint_camera_makergear
- element: area.prusa_black
state_action:
- service: floorplan.text_set
service_data:
element: debug_text
text: "test"
- service: floorplan.style_set
service_data:
element: slider.prusa_black
style: >
> var start_time = new Date(states['sensor.octoprint_start_time_prusa_black'].state);
var end_time = new Date(states['sensor.octoprint_estimated_finish_time_prusa_black'].state);
var percentage = (Date.now() - start_time) / (end_time - start_time);
return `transform-origin: right center; transform-box:fill-box;
transform: scaleX(${percentage})`;
- service: floorplan.style_set
service_data:
element: printer.prusa_black
style: >-
fill: ${(states['sensor.octoprint_current_state_prusa_black'].state === "Operational") ? "rgb(200,0,0)" : "rgb(0,0,100)"}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: prusa_black
content:
type: vertical-stack
cards:
- type: entity
entity: sensor.octoprint_estimated_finish_time_prusa_black
- type: picture-glance
entities:
- entity: sensor.octoprint_current_state_prusa_black
show_state: true
- entity: sensor.octoprint_job_percentage_prusa_black
show_state: true
- entity: sensor.octoprint_estimated_finish_time_prusa_black
show_state: true
- entity: sensor.octoprint_actual_tool0_temp_prusa_black
show_state: true
- entity: sensor.octoprint_actual_bed_temp_prusa_black
show_state: true
camera_image: camera.octoprint_camera_prusa_black
- element: area.prusa_orange
state_action:
- service: floorplan.text_set
service_data:
element: debug_text
text: "test"
- service: floorplan.style_set
service_data:
element: slider.prusa_orange
style: >
> var start_time = new Date(states['sensor.octoprint_start_time_prusa_orange'].state);
var end_time = new Date(states['sensor.octoprint_estimated_finish_time_prusa_orange'].state);
var percentage = (Date.now() - start_time) / (end_time - start_time);
return `transform-origin: right center; transform-box:fill-box;
transform: scaleX(${percentage})`;
- service: floorplan.style_set
service_data:
element: printer.prusa_orange
style: >-
fill: ${(states['sensor.octoprint_current_state_prusa_orange'].state === "Operational") ? "rgb(200,0,0)" : "rgb(0,0,100)"}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: prusa_orange
content:
type: vertical-stack
cards:
- type: entity
entity: sensor.octoprint_estimated_finish_time_prusa_orange
- type: picture-glance
entities:
- entity: sensor.octoprint_current_state_prusa_orange
show_state: true
- entity: sensor.octoprint_job_percentage_prusa_orange
show_state: true
- entity: sensor.octoprint_estimated_finish_time_prusa_orange
show_state: true
- entity: sensor.octoprint_actual_tool0_temp_prusa_orange
show_state: true
- entity: sensor.octoprint_actual_bed_temp_prusa_orange
show_state: true
camera_image: camera.octoprint_camera_prusa_orange
`
CSS-> default home.css- SVG-file
Additional context As mentioned above, it was working for 2 days, but suddenly stopped after I added more stuff to the svg and yaml code.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 17 (10 by maintainers)
Commits related to this issue
- 1.0.37 closes #268 with fix provided in #303 — committed to ExperienceLovelace/ha-floorplan by exetico a year ago
- 1.0.37 closes #268 with fix provided in #303 — committed to ExperienceLovelace/ha-floorplan by exetico a year ago
Hello everyone
I’m still experiencing the same issue in version 1.0.35. Editing my floorplan is incredibly painful because duplicated images cause my browser to slow down and/or crash when I make too many changes at the same time. To work around this issue, I tend to add a character to my SVG file name path so that it fails to open and I can edit the YAML without any hassle.
@pkozul what is the status of PR #303?
Thanks