My floor plan example:

[Trzinka]

My native language is slovenian!

Updated 05.10.2024 - Contains:

• Calendar and cameras are addon card, the rest is SVG (custom card=grid-layout)
• Floor plan card - Dimming relative to external brightness
• The colored edge (stroke) of the room where the light is on
• Display the image of the room (illuminated) when the light is on
• Display of the temperature and humidity in the rooms
• Colored edge of device when consuming electricity
• Colored edge of the printer when printing
• Colored edge of the computer when it is on
• Colored edge (blur) when the room heating is on
• Full screen display on tablet/phone
• Show the camera when it detects motion (for now, until I solve the issue to add more precise motion + object detection)
• Display person (home/away) + battery status
• Image display + borders (stroke) of open doors/windows
• Partial display of weather as SVG elements
• Navigate on hold to display other Lovelace cards

Here is the zip file of the files I currently use.

20241005.zip

fp.svg file is optimize

view using file 20240830.zip:

Current view:
On PC:

On tablet:

On phone:

Here is the zip file of the files I used which contains the other add-on cards in addition to the floor plan card. 20240216.zip
fp.svg file is optimize

view using file 20240216.zip:

My PNG files! In Inkscape I use the link to the files (they are not included in the SVG file)

The images of the view below will be changed during my upgrade, but the essence will remain! The zip file will contain the latest settings!!

Thanks to everyone from the group who helped me!!!!

[Trzinka]

Inkscape tricks & tips

How to XML editor

Why XML Editor

Setting the size of the working area

Setting the size and position of the image/objects

Order of elements/objects in SVG
(read: https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/z-index)

the lowest/first element/object is the lowest

Default setting for link to images which is broken/wrong

It is necessary to add a link to the files in the HA folder

Save the work file as normal.

To use in HA, follow the instructions:

select a different file from the one you are working in !!!!

[Trzinka]

Changing the background image based on the time of day, which I don't use!!!

If anyone doesn't like the blackout overlay with opacity???

morning

until noon

noon

after noon

evening

night

code in sensors.yaml for the time of day sensor

  - platform: template
    sensors:
      del_dneva:
        friendly_name: "Del dneva"
        value_template: >
          {% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
          {% set sun_state = states('sun.sun') %}
          {% if sun_state == "below_horizon" and current_hour < 22 %}
            Noč
          {% elif sun_state == "above_horizon" and current_hour < 6 %}
            Jutro
          {% elif '09:00' <= states('sensor.time') <= '11:45' %}
            Dopoldan
          {% elif '11:45' <= states('sensor.time') <= '12:15' %}
            Poldne
          {% elif '12:15' <= states('sensor.time') <= '19:00' %}
            Popoldan
          {% elif sun_state == "below_horizon" and current_hour < 16 %}
            Večer
          {% endif %}

FP yaml

config:
  defaults:
    hover_action: hover-info
    tap_action: more-info
  image: /local/img/fp/fp.svg
  rules:
    - element: del_dneva
      entity: sensor.del_dneva
      tap_action: false
      hover_action: false
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'Jutro': imageName ='jutro'; break; 
             case 'Dopoldan': imageName = 'dopoldan'; break; 
             case 'Poldne': imageName = 'poldne'; break; 
             case 'Popoldan': imageName = 'popoldan'; break; 
             case 'Večer': imageName = 'vecer'; break; 
             case 'Noč': imageName = 'noc'; break;  
           } 
           return '/local/img/fp/' + imageName + '.png';     

Be careful! The images are not the same size as the images in zip filel!

Enjoy

[Trzinka]

Let's go into more detail

Where is the Floor plan located?

For file editor click on three dots on top right side and select Edit Dashboard``

then again three dots on top right side and select Raw configuration editor``

and now you are in FP-Edit Configuration``

I made the first horizontal page, which allows for the addition of subsequent pages!

Next is the card where I placed the cameras!

floor plan card

card_mod:                                                    //HACS add on card
    style: |
      :host {                                                //element in HTML (DOM) from HA "https://www.w3schools.com/jsref/dom_obj_all.asp"
        position: absolute !important;                       //position of page "https://www.w3schools.com/css/css_positioning.asp" and "https://www.w3schools.com/css/css_important.asp"
        heigh: auto;                                         //heigh of the object "https://www.w3schools.com/cssref/pr_dim_height.php"
        max-width: 18vw !important;                          //max-width of the object "https://www.w3schools.com/cssref/pr_dim_max-width.php"
        z-index: 10 !important;                              //setting the height of an object above other objects (layer)  "https://www.w3schools.com/cssref/pr_pos_z-index.php"  THIS PLACES THE ELEMENTS ABOVE ALL OTHERS!!!!!
        }

Camera card!

floor plan card

              - type: custom:webrtc-camera                      //HACS add on card
                card_mod:
                  style: |
                    :host {
                      position: absolute !important;
                      heigh: auto;
                      max-width: 18vw !important;
                      top: 100px !important;                   //The position of the object from the top "https://www.w3schools.com/cssref/pr_pos_top.php"
                      left: 40px !important;                   //Position of the object from the left "https://www.w3schools.com/cssref/pr_pos_left.php"
                      z-index: 10 !important;
                      }
                url: rtsp://192.168.1.42:8554/Jedilnica        //the path to the camera or server that stream video from the camera
                mode: webrtc
                muted: true                                    //sound muted

Now the floor plan!

floor plan card //read it: "https://experiencelovelace.github.io/ha-floorplan/docs/how-to-handle-size-and-expand-floorplan/"

              - type: custom:floorplan-card
                panel: true
                full_height: true
                config:
                  defaults:
                    hover_action: hover-info
                    tap_action: more-info
                  image: /local/img/fp/fp.svg
                  stylesheet: /local/img/fp/fp.css
                  rules:
                    - element: background           //Sunlight opacity function (special sensor described above)
                      entity: sensor.povprecje_zatemnitve_doma
                      tap_action: false
                      hover_action: false
                      state_action:
                        action: call-service
                        service: floorplan.style_set
                        service_data: |
                          > return `opacity: ${entity.state};`

css

svg, svg * {
  cursor: auto !important;                             // read it: "https://www.w3schools.com/cssref/pr_class_cursor.php"
  margin: 0px !important;                              // read it: "https://www.w3schools.com/css/css_margin.asp"
  max-height: 100vh !important;
  width: auto  !important;
  padding-top: 220px !important;                       //read it: "https://www.w3schools.com/css/css_padding.asp"
  padding-bottom: 220px !important;
  z-index: 0;                                          //is the lowest level/layer in this layout 
  }

svg path {                                             //setting for borders/line of rooms from SVG
  fill: inherit; ;                                     //read it: "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill"
  stroke: inherit;                                     //read it: "https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes"
  stroke-width: 0px !important;                        //read it: "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width"
  }

Setting the background image (default image)!

css

#background {
  display: block !important;                       //read it: "https://www.w3schools.com/cssref/pr_class_display.php"
  z-index: 1;                                      //is top above svg, svg * for 1 layer
 }

How to set background images to show room images when the light/switch is on!

floor plan card

                    - entity: switch.sw_st
                      element: room.sw_st
                    - entity: switch.sw_vh
                      element: room.sw_vh
                    - entity: switch.sw_mi
                      element: room.sw_mi
                    - entity: switch.sw_gr
                      element: room.sw_gr
                    - entity: switch.sw_ho
                      element: room.sw_ho
                    - entity: switch.sw_sp
                      element: room.sw_sp
                    - entity: switch.sw_na
                      element: room.sw_na
                    - entity: switch.sw_di
                      element: room.sw_di
                    - entity: switch.sw_je
                      element: room.sw_je
                    - entity: switch.sw_sh
                      element: room.sw_sh
                    - entity: switch.sw_ku
                      element: room.sw_ku
                    - entity: switch.sw_ko
                      element: room.sw_ko
                    - entity: switch.sw_ko
                      element: room.sw_ko
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: switch-${entity.state}
                      tap_action:
                        action: call-service
                        service: homeassistant.toggle

css

#rooms image {                                               //default for images of rooms that are illuminated (does not display)
  display: none;                                             //does not display any views
  mix-blend-mode: lighten;                                   //this setting is important for the overlap between images "https://www.w3schools.com/cssref/pr_mix-blend-mode.php"                 
  animation: 0.75s fade-in linear forwards;                  //for a nice transition between picture exchanges "https://www.w3schools.com/css/css3_animations.asp"
  }

@keyframes fade-in {                                         //animation that makes the image go from opacity 0 (hidden) to opacity 1 (full view) "https://www.w3schools.com/css/css3_animations.asp"
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#rooms image.switch-on {                                     //what happens when the switch/light is turned on, or click on the room
  display: block !important;                                 //Shows a image
  opacity: 1;;                                               //opacity is not active
  z-index: 5 !important;                                     //is top above background for 4 layer
  }

How to show room boundaries/lines to display when light/switch is on!

floor plan card

                    - entities:
                        - switch.sw_st
                        - switch.sw_vh
                        - switch.sw_mi
                        - switch.sw_gr
                        - switch.sw_ho
                        - switch.sw_sp
                        - switch.sw_na
                        - switch.sw_di
                        - switch.sw_je
                        - switch.sw_sh
                        - switch.sw_ku
                        - switch.sw_ko
                      tap_action:
                        action: call-service
                        service: homeassistant.toggle
                      state_action:
                        action: call-service
                        service: floorplan.class_set
                        service_data: switch-${entity.state}

css

#areas {                                                   //it shows nothing/hide
  fill: none;
  stroke: none;
  }

#areas .switch-on {
  stroke: red !important;
  stroke-width: 15px !important;
  stroke-opacity: 1;
  z-index: 6;                                              //is top above rooms image.switch-on for 1 layer
  }

[Trzinka]

Other problems I encountered:

#396 Change svg/png background image based on entity state or "sensor.stateofday"

#397 Inkscape structure & png path

#401 placement of elements in the Floorplan card

#403 Show the room image, when the switch is on, with an SVG that have links to the room images.

#404 Cloud coverage over floor plan card "darken"

#406 SVG layer/position in floorplan card

#410 Floor plan layer sun/cloud effect with opacity

#412 On/off sensor display if consumption is greater than 0 or any!

#413 Inkscape properti setting multiple objects

#414 showing whether the heating is ON/OFF

#415 showing text in svg and HTML

#416 Play the camera video (pop-up) in the window if figate detects objects on the individual camera

#419 Phone/tablet layout full screan

#420 Person status on FP

#446 Is there any possibility to write comments in the floor plan card?

#448 floorplan.stayle_set or css

#465 navigation_path, hold_action

#466 Display multiple entity states

it is not tied to the floor plan

https://github.com/Trzinka/Home-Assistant-SOLVED---Calculate-cost-for-individual-device-cost-kWh Calculate-cost-for-individual-device in €

[tsx-5]

Tzinka,
You rock! I look forward to adding my own lessons to the list :-)

[Trzinka]

I'm glad that you can help yourself with what I wrote.

If something is incomprehensible, you can write to me without hesitation.

If I left something out, feel free to add it!

[Trzinka]

That's all for now!!