First of all I need to admitt that I am not a programmer (as you can see in this post obviously ;-))
I have actually two different approaches working fine for themselves (floorplan with badges and floorplan with windows states e.g.), but I would like to merge both.
After reading a lot and trying various approaches (ha-floorplan, or thomasloven/lovelace-layout-card: 
Get more control over the placement of lovelace cards. (github.com)) I don’t get it done.
This one is based on ha-floorplan and shows the badges I like:
Code Snippet:
views:
- title: Home
cards:
- type: custom:layout-card
layout_type: custom:masonry-layout
cards:
- type: picture-elements
elements:
- type: state-badge
entity: binary_sensor.gartentor_home_security_intrusion
style:
top: 42%
left: 2.8%
color: transparent
- type: state-badge
entity: binary_sensor.fenster_balkon_flur_dg_home_security_intrusion
style:
top: 70.8%
left: 17.4%
color: transparent
This one is integrating the state of windows (red) if open and occupancy (blue) if on:
With a Snippet:
views:
- theme: Google Dark Theme
title: Home
type: custom:masonry-layout
panel: true
path: floorplan
badges: []
cards:
- config:
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
image: /local/floorplan/home/home.svg
color: transparent
rules:
- element: Occupancy_WoZi
entity: input_boolean.wohnzimmer_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_DG
entity: input_boolean.flur_dg_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
and the css:
/* All good :/ */
.entitystate-on {
opacity: 0;
}
.entitystate-off {
fill: #a5a5a5 !important;
}
.entitystate-home {
opacity: 0;
}
.entitystate-Billstedt {
fill: #e1dfdf !important;
}
.entitystate_window-on {
opacity: 0;
}
.entitystate_window-off {
fill: #f2f2f2 !important;
}
So my problem basically is to merge the badges with the svg (and the color functions of windows and occupancy).
means:
how to get this part:
- type: state-badge
entity: sensor.netatmo_temperature
style:
top: 31.5%
left: 39.7%
color: transparent
into the svg based ha-floorplan somewhere:
This is another try with grid-layout:
But the states like occupancy and window don’t work:
Snippet:
title: Home
views:
- theme: Backend-selected
path: default_view
title: Home
type: custom:grid-layout
layout:
grid-gap: 1px 1px
grid-template-columns: 80% 20%
grid-template-rows: auto
visible:
- user: xxx
badges: []
cards:
- type: picture-elements
elements:
- type: state-badge
entity: binary_sensor.remote_ui
style:
top: 32%
left: 40%
image: /local/floorplan/home/etagen.svg
- type: picture-elements
elements:
- type: state-badge
entity: binary_sensor.arbeitstag
style:
top: 52%
left: 40%
image: /local/floorplan/home/schnitt.svg
stylesheet: /local/floorplan/home/home.css
rules:
- element: Occupancy_WoZi
entity: input_boolean.wohnzimmer_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_DG
entity: input_boolean.flur_dg_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_EG
entity: input_boolean.flur_eg_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_OG
entity: input_boolean.flur_og_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_UG
entity: input_boolean.flur_ug_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_Garten_vorne
entity: input_boolean.garten_vorne_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: Occupancy_Garten_hinten
entity: input_boolean.garten_hinten_occupancy
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
- element: presence
entity: group.persons
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}