Heyho everyone. I hope someone can help me out.
I’m using HA with Floorplan and I have designed an SVG with a background image and icons for lights, covers, switches and text elemnts for displaying temps.
In CSS i have defined rules for coloring etc.
Somehow the SVG isn’t rendered correctly, no matter what I do (have a look at the attached screenshot.
You’ll also find attached my floorplan YAML and the floorplan CSS.
I hope someone can point me to the error I’ve got in there.
I have tried most everthing - but I’m not an expert by a far cry.
Weirdly enough: all icons are hoverable (mouse arrow turns to hand), but only one (the lower left one below “Essen”) is clickable and shows a popup to control the light.
my CSS looks like this:
/* General transition and hover effect */
use {
color: black
transition: transform 0.3s ease, filter 0.3s ease;
transform-origin: center;
pointer-events: all;
cursor: pointer;
}
text {
color: black;
font-family: sans-serif;
font-size: 16px;
}
/* Pulsating animation */
@keyframes pulsing {
0% { fill-opacity: 1; }
50% { fill-opacity: 0.4; }
100% { fill-opacity: 1; }
}
/* Colour rules for switches */
.door-open {
color: red;
fill-opacity: 0.6;
}
.door-closed {
color: green;
fill-opacity: 0.6;
}
/* Colour rules for lights */
.light-on {
color: yellow;
fill-opacity: 0.6;
}
.light-off {
color: grey;
fill-opacity: 0.6;
}
/* Colour rules for covers */
.cover-open {
color: green;
fill-opacity: 1;
}
.cover-closed {
color: gray;
fill-opacity: 0.6;
}
.cover-opening {
color: orange;
fill-opacity: 1;
animation: pulsing 1s infinite;
}
.cover-closing {
color: blue;
fill-opacity: 1;
animation: pulsing 1s infinite;
}
/* Colour rules for CO2-sensor */
.co2-low {
color: green;
}
.co2-mid {
color: orange;
}
.co2-high {
color: red;
font-weight: bold;
}
and the yaml like this (note: both views show the same thing as in the screenshot).
views:
- title: Floorplan Test
path: floorplan-test
type: panel
cards:
- type: custom:floorplan-card
full_height: true
config:
image: /local/floorplan/eg-test.svg
stylesheet: /local/floorplan/floorplan.css
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entity: light.licht_eg_essen
use_template: |
if (entity.state === 'on') return '#light-on';
else return '#light-off';
- entity: switch.kontakt_fensterkontakt_eg_kueche
use_template: |
if (entity.state === 'on') return '#door-open';
else return '#door-closed';
- entity: cover.jalousie_eg_kueche
use_template: |
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: sensor.sensor_eg_co2
text_template: |
return `${entity.state} ppm`;
class_template: |
const val = parseInt(entity.state);
if (val < 700) return 'co2-low';
else if (val <= 1100) return 'co2-mid';
else return 'co2-high';
- title: Erdgeschoss
type: panel
path: erdgeschoss
cards:
- type: custom:floorplan-card
full_height: true
config:
image: /local/floorplan/eg-test.svg
stylesheet: /local/floorplan/floorplan.css
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entity: light.licht_ug_alice
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_werkstatt
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_kino
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_foyer
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_technik
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_reduit
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_bad_spiegelschrank
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_treppe_ug
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_ug_ug_gang
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_eingang
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_vorplatz
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_essen
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_kueche
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_wohnen
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_terrasse
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_eg_gaeste_wc
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_eltern
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_ranya
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_samy
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_bad_dusche
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_bad_wc
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_bad_badewanne
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_bad_spiegelschrank
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: light.licht_og_og_gang
use_template: >-
if (entity.state === 'on') return '#light-on'; else return
'#light-off';
- entity: switch.kontakt_tuerkontakt_ug_alice
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_ug_werkstatt
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_eg_wohnen
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_tuerkontakt_eg_wohnen
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_tuerkontakt_eg_essen
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_eg_essen
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_eg_kueche
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_eg_gaeste_wc
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_treppe
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_eltern_gross
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_eltern_klein
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_ranya_gross
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_ranya_klein
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_samy_gross
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_samy_klein
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_fensterkontakt_og_bad
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_steckdose_eg_wohnen
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: switch.kontakt_steckdose_eg_eingang
use_template: >-
if (entity.state === 'on') return '#switch-on'; else return
'#switch-off';
- entity: cover.jalousie_ug_alice
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_ug_werkstatt
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_kueche
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_garten
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_terrasse_essen
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_terrasse_wohnen
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_wohnen
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_eg_gaeste_wc
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_treppe
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_eltern_gross
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_eltern_klein
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_ranya_gross
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_ranya_klein
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_samy_gross
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_samy_klein
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
- entity: cover.jalousie_og_bad
use_template: |-
if (entity.state === 'opening') return '#cover-opening';
else if (entity.state === 'closing') return '#cover-closing';
else if (entity.state === 'open') return '#cover-open';
else return '#cover-closed';
