Need help to get the right layout structure

[Herant]

Hi,

I'm pretty new to this and I've been searching the web for tutorials and general documentation to figure this out for 2 weeks now.
What I want to achieve is a design that is a mix between BitBorn's and lukevink's design where he has a sidebar with the clock and buttons which I think looks really cool.
Luke has used 'custom:config-template-card' and picture-elements as well as a whole bunch of png's which leads to a slightly different method as I see it. I'm struggling to understand how to add the sidebar to my project so that it can be integrated with the rest of the existing svg .

I also noticed luke had png for each button… Does that mean that all the buttons i going to use must be svg elements integrated into .svg or some kind of placeholders such as i did with temperature text?

Btw Is there a way to move the svg elements either in .yaml or .css? I have to either open the svg in Inkscape to do that or just edit manually in the text editor..

Here is what i have managed to make so far: https://imgur.com/a/enp0X99

config.yaml

title: My dashboard
views:
  - title: Floorplan
    path: floorplan
    icon: "mdi:floor-plan"
    theme: lovelace-blue-blur
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:floorplan-card"
                style: >
                  ha-card {
                      max-width: 120vh;
                      margin: 0 auto;
                      background: none;
                  }
                  .sidebar-background {
                      background: #fff;
                  }
                full_height: true
                config:
                  image: "/local/floorplan/primary/floorplan_optimized.svg"
                  stylesheet: "/local/floorplan/primary/floorplan.css"
                  defaults:
                    hover_action: hover-info
                    tap_action: more-info
                  rules:
                    - name: Temperature
                      entities:
                        - sensor.kitchen_temp_sens_temperature
                        - sensor.living_room_temp_sens_temperature
                      state_action:
                        - service: floorplan.text_set
                          service_data: '${entity.state ? entity.state + "°C" : "unknown"}'
                        - service: floorplan.class_set
                          service_data:
                            class: "static-temp"

                    - name: Time
                      entity: sensor.time
                      state_action:
                        - service: floorplan.text_set
                          service_data: "${entity.state}"
                        - service: floorplan.class_set
                          service_data:
                            class: "time"

floorplan.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");

svg,
svg * {
  pointer-events: all !important;
  cursor: auto !important;
}
svg path {
  fill: inherit;
  stroke: initial;
  stroke-width: inherit;
}

g path:active,
g use:active,
.light-on:active,
g#entities > g:active path:not(.touch-area) {
  stroke: #3dee6a99 !important;
  stroke-width: 2px;
  stroke-opacity: 0.7;
}

.static-temp,
.static-temp tspan {
  fill: #ffffff;
  text-shadow: 2px 2px 5px #2c2c2c;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 30px;
  opacity: 0.7;
}

.time,
.time tspan {
  fill: #ffffff;
  text-shadow: 2px 2px 5px #2c2c2c;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 140px;
  opacity: 0.7;
}

#tv {
  stroke: rgb(145, 218, 247) !important;
  stroke-width: 0.6px;
  animation-name: tv_animation;
  animation-duration: 1.5s;
  animation-duration: alternate-reverse;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

@keyframes tv_animation {
  0% {
    filter: drop-shadow(0px 0px 0px rgb(145, 218, 247)) drop-shadow(0px 0px 5px rgb(60, 187, 237))
      drop-shadow(0px 0px 5px #43e5f0) drop-shadow(0px 0px 10px #23d0ee) drop-shadow(0px 0px 15px #20bcf0);
  }

  50% {
    filter: drop-shadow(0px 0px 0px rgb(145, 218, 247)) drop-shadow(0px 0px 5px rgb(60, 187, 237))
      drop-shadow(0px 0px 10px #43e5f0) drop-shadow(0px 0px 15px #23d0ee) drop-shadow(0px 0px 20px #20bcf0);
  }

  100% {
    filter: drop-shadow(0px 0px 0px rgb(145, 218, 247)) drop-shadow(0px 0px 5px rgb(60, 187, 237))
      drop-shadow(0px 0px 5px #43e5f0) drop-shadow(0px 0px 10px #23d0ee) drop-shadow(0px 0px 15px #20bcf0);
  }
}

floorplan_optimized.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="svg445" width="1920" height="1080" fill="none" version="1.1" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <g id="floorplan_optimized" transform="translate(299.16 123.73)">
    <rect id="floorplan" width="1580" height="842" fill="url(#pattern0)"/>
    
    <g id="sidebar">
      <text id="sensor.time" x="0" y="100"xml:space="preserve"><tspan class="sensor_time" id="tspan22-7" x="-300" y="100">Time</tspan></text>
      <rect id="sidebar-background" transform="translate(-299.16 -123.73)" x=".49899" y=".49899" width="319" height="1079" fill="none" stroke-opacity="0" style="paint-order:normal"/>
    </g>

    <g id="rooms" stroke="#61c6ff">
      <path id="wardrobe" d="m499.48 386.61-73.038 18.26-9.946-107.42-0.018-0.193-0.144-0.131-130.75-118.82 172.8-30.787 20.128 13.255 12.482 177.25 0.014 0.198 0.146 0.134 6.349 5.861 1.972 42.386z"/>
      <path id="laundry" d="m427.04 411.38 72.983-18.246 0.478 13.882 3e-3 0.088 0.033 0.081 2 5 0.031 0.077 0.053 0.062 3.066 3.577 4.122 2.061 0.034 0.011 3 1 0.01 4e-3 0.011 3e-3 3.5 1 0.037 0.01 0.038 5e-3 4 0.5 0.031 4e-3h8.559l9.054-1.006 0.026-6e-3 4.5-1 0.071-0.016 0.064-0.035 4.518-2.51 0.016-0.011 3.09-2.06 0.057-0.091 2.5-4 0.058-0.094 0.014-0.109 0.5-4 7e-3 -0.052-5e-3 -0.052-0.499-5.994-0.429-7.297 143.94 126.62-194.85 62.133-28.284-31.758-0.219-0.245-0.312 0.104-8.701 2.9-26.16-27.147-10.942-113.4z"/>
      <path id="hallway" d="m707.71 340.91 0.192 0.137 0.227-0.061 131.8-34.946 47.81 28.296-294.61 82.113-41.136-36.18-0.991-23.787-1e-3 -0.011-1.5-23.5-1e-3 -0.012-1e-3 -0.011-0.5-4.5-2e-3 -0.014-2e-3 -0.013-0.5-3-0.012-0.074-1.534-3.068-8e-3 -0.017-0.01-0.016-1.5-2.5-0.032-0.053-0.043-0.044-2.035-2.035-0.042-0.027-3-2-0.043-0.029-0.048-0.019-2.55-1.02-6.054-1.009-0.041-7e-3h-10.064l-5.522 0.502-0.01 1e-3 -4.5 0.5-0.042 5e-3 -0.04 0.011-3.492 0.998-1.992 0.498-0.054 0.013-0.049 0.025-3 1.5-0.047 0.023-0.041 0.034-2.5 1.999-8e-3 7e-3 -2.247 1.872-10.934-162.52-0.017-0.245-0.205-0.137-3.467-2.312 157.12-28.251 12.078 5.797 3.993 170.19 6e-3 0.249 0.203 0.146 51 36.5z"/>
      <path id="bathroom" d="m661.5 132.49-5e-3 -0.292-0.258-0.139-12.398-6.676 14.399-13.919 92.192-16.445 9.07 4.2961v161.47l0.243 0.146 69.982 41.89-123.63 32.638-46.604-33.218-2.995-169.75z"/>
      <path id="livingroom" d="m597.53 420.23 304.1-84.252 1.146-0.317-1.028-0.597-129.75-75.356v-162.02l-0.276-0.1382-7.649-3.8242 195.88-34.714 562.5 193.98-19.12 6.529-0.27 0.091-0.06 0.274-44.94 203.74-304.02 125.3-221.27-146.35-0.201-0.133-0.23 0.075-225.23 73.412-109.59-95.703z"/>
      <path id="kitchen" d="m677.64 792.89-170.79-204.15 422.07-137.2 215.02 142.35-466.3 198.99z"/>
    </g>

    <g id="devices" stroke="#6dff6a">
      <path id="ev_charger" d="m381.6 355.3 0.01 0.012 1.986 2.483 0.904 1.356v18.349h-6.849l-5.657-3.771-0.483-22.229h4.939l2.303 0.461 1.368 1.367z"/>
      <path id="water_heater" d="m551.5 367.02 1.994 40.885-1.428 3.332-1.926 2.407-2.917 2.431-3.899 1.949-3.93 0.983-5.458 0.992-6.955 0.497h-5.954l-4.439-0.493-3.94-0.985-3.936-1.476-3.387-1.935-2.405-2.887-1.449-2.899-0.975-3.898-1.998-41.201-1-20.625-0.5-10.313-0.25-5.156-0.123-2.554 0.059-1.217 0.288-1.188 0.583-1.166 0.829-1.184 2.434-2.434 2.915-1.944 2.428-0.971 3.456-0.988 2.459-0.491 4.478-0.498 4.473-0.497h8.447l4.969 0.497 3.885 0.485 3.874 2.422 3.406 2.919 1.932 3.382 0.972 2.916 0.99 5.938 0.998 13.971z"/>
      <path id="vacuum_cleaner" d="m816.4 459.32 2.345-1.876 2.891-0.964 4.421-0.982h3.922l5.439 0.494 3.909 0.978 3.879 1.939 1.859 1.859 0.937 2.811v4.369l-0.433 2.167-5.721 1.907-4e-3 2e-3 -16.84 5.448-2.792-0.931-2.431-1.458-1.901-1.426-1.378-2.297v-5.331l0.486-3.884z"/>
      <path id="heat_pump" d="m1064 126.54 47.45 16.807-1.44 20.228-8.48 1.412-46.52-17.817 1.44-17.328z"/>
      <path id="google_home" d="m1398 468.34 2.34-9.844h8.18l1.4 9.847-2.7 3.153h-6.06z"/>
      <path id="tv" d="m1304.6 490.94 13.35-80.066 100.38-36.1-12.82 63.619-1.99 7.981-1.97 6.867-3.33 3.336-75.89 30.456-7.45 2.483-5.95 0.991z"/>
      <path id="ev" d="m48 378.5 6-5 7.5-4.5 15.5-7 15.5-5 8-2 15-3 7-1.5 10-2 8-1.5 7.5-1 8.5-0.5h21l8 1 7.5 2.5 7.5 3.5 5 3 4 4 4.5 5 13.5 13.5 2 3 1 4 1 2.5 1.5 2.5 2.5 3 1.5 3.5 2 3.5 24.5 29.5 2.5-6 2.5-2.5 4.5-1.5 5-0.5 4.5 0.5 3 2 1 4-1 3.5-1.5 2.5-3 2-4 2-2.5 2-2 2.5-0.5 2v2l2.062 2.938 2.563 2.937 15.375 17.625 11.5 14 4.5 5.5 4 6 3 4.75 2.5 5.25 4 9 4 11.5 2.5 10 2.5 11.5 1 10 0.5 11-1.5 8-2.5 4-3.5 4.5-5 4.5-5 4-5.5 4.5-6 4.5-8.5 4.5-9 3.5-11.5 5-19.5 6.5-11.5 4-11 3.5-9 3-14 3-7.5 1.5-7 1.5-7.5 1-8.5 0.5h-16.5l-10.5-0.5-7.5-1.5-8-1.5-5.5-2.5-4.5-3.5-3-2-3.5-1-4-2-1.5-1.5-1.5-2.5-2.5-5-2.5-6-6-19.5-4-12-1.5-5.5-2-6.5-0.5-5.5-27.5-64-2.5-3-3-2.5-3.5-1.5-3-2-2-3.5-2.5-5-1.5-5-2-6-1.5-6-4.5-13.5-2-8.5-1.5-7.5v-4l-1-6.5v-6.5l1.5-6.5 4-13 1.5-5 1.5-4.5 1.5-3.5z" mask="url(#path-8-inside-1_9_54)" stroke-width="2"/>
    </g>

    <g id="sensors" fill="#000" font-family="sans-serif" font-size="24px">
      <text id="sensor.kitchen_temp_sens_temperature" x="742.43793" y="611.1347" style="line-height:1.25" xml:space="preserve"><tspan id="tspan189" x="742.43793" y="611.1347" font-family="Arial" font-size="24px" font-weight="bold">Kitchen temp</tspan></text>
      <text id="sensor.living_room_temp_sens_temperature" x="936.99994" y="377.39914" style="line-height:1.25" xml:space="preserve"><tspan id="tspan148-9-7" x="936.99994" y="377.39914" font-family="Arial" font-size="24px" font-weight="bold">Livingroom temp</tspan></text>
      <text id="sensor.ac_temperature" x="800" y="200" style="line-height:1.25" xml:space="preserve"><tspan id="tspan22" x="800" y="200" font-family="Arial" font-size="24px" font-weight="bold">AC temperature</tspan></text>
      <text id="sensor.ac_mode" x="1100" y="150" style="line-height:1.25" xml:space="preserve"><tspan id="tspan25" x="1100" y="150" font-family="Arial" font-size="24px" font-weight="bold">AC temperature</tspan></text>
    </g>

    <g id="utility">
      <path id="charging_cable" d="m375.5 375.5s-6.338 7.606-6.372 22c-0.023 9.524 2.714 22.019 11.872 37.25 5.262 8.751-15.187 3-5.5 23.25s-32.5 33.317-32.5 33.317c-8.398 3.516-16.306 10.1-21 24.183" stroke="#ff6ac4"/>
    </g>
  <!-- </g> -->
  <defs id="defs443">
    <pattern id="pattern0" width="1" height="1" patternContentUnits="objectBoundingBox">
      <use id="use435" transform="scale(.00063291 .0011876)" xlink:href="#image0_9_54"/>
    </pattern>

[OzGav]

OK Luke is not using ha-floorplan however other than what looks like a graph in the bottom left you can easily do everything else. Have a look at mine here and you will see I have what looks like a sidebar on the left but it is fact just part of the SVG. https://community.home-assistant.io/t/share-your-floorplan/21315/676

Yes all the buttons have to have an associated SVG element. Those elements don't have to be visible they might just be a square on top of something in your base layer. All the "buttons" in my sidebar are done like that as are all the touch points to toggle the room lights. You then associate the SVG element with an action in your yaml. See the docs which give examples of how this is done.

You don't move anything to do with the SVG in yaml or css. I don't think trying to edit the SVG via text is going to be easy so yes you should just use Inkscape for all editing of the SVG.

[Herant]

Ah i see! Thanks for pointing me in the right direction