Sidebar with ha-floorplan not loading correctly.

[jarffs]

Hi,
I would like to request help, because I'm facing the following issue. I created the dashboard below using sidebar with ha-floorplan and I dont know why, must of the times the ha-floorplan do not load correctly

ha-floorplan not able to see

##ha-floorplan is visible if I zoom out the navigator

codes:

ui-lovelace.yaml

views:
  - !include lovelace/view-weather.yaml
  - !include lovelace/view-main.yaml
  - !include lovelace/view-calendar.yaml
  - !include lovelace/view-shutter.yaml
  - !include lovelace/view-vacuum.yaml

title: Dashboard
sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 17
  breakpoints:
    mobile: 768
    tablet: 768
  style: |
    :host {
        --sidebar-background: #1C1C1C;
        --sidebar-text-color: #FFF;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }

    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     icon-size: 185px;
    }
  digitalClock: false
  hideHassSidebar: true
  hideTopMenu: true
  date: true
  dateFormat: ddd, DD MMM YYYY
  clock: true
  updateMenu: true
  debig: true
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Casa
      active: true
      icon: mdi:home-account
    - action: navigate
      navigation_path: /lovelace/vacuum
      name: Aspirador
      icon: mdi:robot-vacuum
    - action: navigate
      navigation_path: /lovelace/weather
      name: Tempo
      icon: mdi:weather-cloudy
    - action: navigate
      navigation_path: /lovelace/shutter
      name: Estores
      icon: mdi:window-shutter
    - action: navigate
      navigation_path: /lovelace/calendar
      name: Calendario
      icon: mdi:calendar
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: weather-forecast
          show_current: true
          show_forecast: true
          entity: weather.forecast_home_2
          secondary_info_attribute: humidity
    cardStyle: |
      :host {
        width: 100%;
        
      }
      title: Home

view-main.yaml

title: Home
theme: Google Dark Theme
panel: true
background: "#1C1C1C"
path: home
badges: []
cards:
  - type: custom:floorplan-card
    full_height: true
    panel: true
    config:
      defaults:
        tap_action: more-info
      image: /local/floorplan/painel_principal.svg
      stylesheet: /local/floorplan/painel.css
      rules:
        - name: Luzes
          entities:
            - element: light.luz_casal
              entity: light.luz_casal
            - element: light.luz_escritorio
              entity: light.luz_escritorio
            - element: light.luz_lais
              entity: light.luz_lais
            - element: light.luz_tom
              entity: light.luz_tom
            - element: light.luz_banheiro_entrada
              entity: light.luz_banheiro_entrada
            - element: light.luz_banheiro_tom
              entity: light.luz_banheiro_tom
            - element: light.luz_banheiro_casal
              entity: light.luz_banheiro_casal
            - element: light.luz_porta
              entity: light.luz_porta
            - element: light.luz_sala
              entity: light.luz_sala
            - element: light.luz_mesa
              entity: light.luz_mesa
            - element: light.luz_pia
              entity: light.luz_pia
            - element: light.luz_linda
              entity: light.luz_linda
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: entitystate-${entity.state}
          tap_action:
            action: call-service
            service: homeassistant.toggle
        - name: Exaustores
          entities:
            - element: fan.exaustor_banheiro_entrada_button
              entity: fan.exaustor_banheiro_entrada
            - element: fan.exaustor_banheiro_tom_button
              entity: fan.exaustor_banheiro_tom
            - element: fan.exaustor_banheiro_casal_button
              entity: fan.exaustor_banheiro_casal
          tap_action:
            action: call-service
            service: homeassistant.toggle
        - name: Exaustores girando
          entities:
            - element: fan.exaustor_banheiro_entrada
              entity: fan.exaustor_banheiro_entrada
            - element: fan.exaustor_banheiro_tom
              entity: fan.exaustor_banheiro_tom
            - element: fan.exaustor_banheiro_casal
              entity: fan.exaustor_banheiro_casal
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: fan-${entity.state}
        - name: Televisoes
          entities:
            - element: media_player.samsung_7_series_55
              entity: media_player.samsung_7_series_55
            - element: media_player.samsung_7_series_43
              entity: media_player.samsung_7_series_43
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: tv-${entity.state}
        - name: Pessoas
          entities:
            - element: person.junior
              entity: device_tracker.honor
            - element: person.cintia
              entity: device_tracker.note12
            - element: person.linda
              entity: device_tracker.paivinha_6
            - element: person.tom
              entity: device_tracker.sm_g570m
            - element: person.lais
              entity: device_tracker.iphone_de_lais
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: device-${entity.state}
          hold_action: hover-info

[Trzinka]

If you want, take a look at my layout and explanation: #411!

If you have any questions, I'm at your disposal.

[jarffs]

Our setup is different,
I have a fix sidebar and it load the left side based on the view I go throught the sidebarMenu. The problem in my dashboard is the combination between the sidebar and the ha-floorplan.
I will recreate it adding a fix sidebar without using the sidebar plugin to fix the issue as lukevink did here: https://github.com/lukevink/hass-config-lajv

[Trzinka]

Hi. I had a similar case!
The only solution that works is to split the view using the grid-layout card.

Example fp-yaml:

views:
  - title: Grid
    type: custom:grid-layout
    path: grid
    subview: false
    layout:
      grid-template-columns: 35vw auto
      grid-template-rows: auto
      grid-template-areas: |
        "calendar fp"
    badge: []
    cards:
      - type: horizontal-stack
        card_mod:
          style: |
            :host {
              margin: 0px !important;
              padding: 0px !important;
              }
            ha-card {
              background: transparent;
              }
        cards:
            *********
      - type: custom:atomic-calendar-revive
            ********
        view_layout:
          grid-area: calendar
      - type: custom:floorplan-card
        card_mod:
          style: |
            :host {
              margin: 0px !important;
              padding: 0px !important;
              width: auto;
              }
            ha-card {
              border-width: 0px !important;
              background: transparent;
              margin: 0px !important;
              }
        config:
          defaults:
            hover_action: hover-info
            tap_action: more-info
          image: /local/img/fp/fp.svg
          stylesheet: /local/img/fp/fp.css 
                ***********
        view_layout:
          grid-area: fp

So you get 2 separate vertical windows/grid!
In the left side you can use any cards, but in the right grid only floorplan-card (control/view of SVG elements).

Be careful not to mix floor plan display via Floor Plan Card and Picture Elements Card! They are completely different cards to configure.

[jarffs]

Thanks for the suggestion,
I'm working on it. but I can see the light in the end of the tunnel :)

[Trzinka]

:=))) Floor plan is never ending story.

[Trzinka]

Hello! Are you looking at #411 under "Inkscape Tricks and Tips"? It is important to set the "work area size" correctly! I think you have a problem here because given that when you use zoom you see FP. At the end you have the Other Problems I encountered section! You can send me the SVG file so I can customize it for you if you can't make it yourself. Od: "jarffs" ***@***.***> Za: "ExperienceLovelace/ha-floorplan" ***@***.***> Cc: "Robert Perič" ***@***.***>, "Comment" ***@***.***> Poslano: Petek, 14. Junij 2024 22:44:48 Zadeva: Re: [ExperienceLovelace/ha-floorplan] Sidebar with ha-floorplan not loading correctly. (Discussion #444) My fight now is to resize the panel based on the screen to always show all the svg — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you commented. Message ID: <ExperienceLovelace/ha-floorplan/repo-discussions/444/comments/9778500 @ github . com>

[jarffs]

I found the solution, was only add the option "full_height: true"
I'm still working to improve the dashboard

• type: custom:floorplan-card
  full_height: true

[Trzinka]

Nice but I solved it differently:
I already forgot why I didn't use full_height: true!
Most likely due to the problem of the same display on all devices (PC, tablet and phone)!

If you are happy with the current look, then don't change!!!

fp.yaml

- type: custom:floorplan-card
 card_mod:
 style: |
 :host {
 margin: 0px !important;
 padding: 0px !important;
 width: auto; # max-height: 90vh !important; in css (Adjust the size to fit you best!)
 }
 ha-card {
 border-width: 0px !important;
 background: transparent;
 margin: 0px !important;
 }
 configuration:
 defaults:
 hover_action : hover-info
 tap_action: more-info
 image: /local/img/fp/fp.svg
******
 stylesheet: /local/img/fp/fp.css   #Put it right at the end of the code!

fp.css

svg,
svg * {
 cursor: auto !important;
 margin: 0px !important;
 padding: 0px !important;
 max-height: 90vh !important; # size of your svg file
 z-index: 0;
}

svg path {
 pods: inherit;
 stroke-width: 0px !important;
}

image.person-not_home {
 display: block !important;
 opacity: 0.2 !important;
 z-index: 12 !important;
}

#background {
 display: block !important;
 z-index: 1;
}

#rooms image {
 display: none;
 mix-blend-mode: lighten;
 animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
 from {
 opacity: 0;
 }

 this {
 opacity: 1;
 }
}

#rooms image.switch-on {
 display: block !important;
 opacity: 1;
 z-index: 11 !important;
}


#window image {
 display: none;
 mix-blend-mode: lighten;
 animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
 from {
 opacity: 0;
 }

 this {
 opacity: 1;
 }
}

#window image.window-open {
 display: block !important;
 opacity: 1;
 z-index: 11 !important;
}

#doors image {
 display: none;
 mix-blend-mode: lighten;
 animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
 from {
 opacity: 0;
 }

 this {
 opacity: 1;
 }
}

#doors image.door-open {
 display: block !important;
 opacity: 1;
 z-index: 11 !important;
}

#areas {
 fill: none;
 pods: none;
}

#areas .switch-on {
 pods: order !important;
 stroke-width: 13px !important;
 stroke-opacity: 1;
 z-index: 10;
}

#elements {
 fill: none;
 pods: none;
}

#elements .switch-on {
 strokes: rgb(78, 192, 245) !important;
 stroke-width: 5px !important;
 stroke-opacity: 1;
 z-index: 6;
}

#heating {
 fill: none;
 pods: none;
}

#heating .switch-on {
 stripes: rgb(255, 94, 0) !important;
 stroke-width: 35px !important;
 filter: blur(36px);
 -o-filter: blur(36px);
 -ms-filter: blur(36px);
 -moz-filter: blur(36px);
 -webkit-filter: blur(36px);
 stroke-opacity: 1;
 z-index: 7 !important;
}

teaspoon {
 fill: white;
 font-weight: 900 !important;
 text-shadow: 0 0 5px black, 0 0 10px #FF0000;
 font-family: 'Single Day', cursive;
 opacity: 1 !important;
 z-index: 50 !important;
}

#door.door-open {
 pods: #DEB887;
 stroke-width: 5px !important;
 opacity: 1 !important;
 z-index: 10;
 filter: blur(2px);
 -o-filter: blur(2px);
 -ms-filter: blur(2px);
 -moz-filter: blur(2px);
 -webkit-filter: blur(2px);
}

#windows .window-open {
 pods: white;
 stroke-width: 5px !important;
 opacity: 1 !important;
 z-index: 10;
 filter: blur(2px);
 -o-filter: blur(2px);
 -ms-filter: blur(2px);
 -moz-filter: blur(2px);
 -webkit-filter: blur(2px);
}

.comp-on {
 pods: green;
 stroke-width: 5px !important;
 opacity: 2 !important;
 z-index: 10;
}

.printer-on {
 pods: #ff00ff;
 stroke-width: 5px !important;
 opacity: 2 !important;
 z-index: 10;
}

svg #weather.accuweather.img {
 z-index: 50 !important;
}