Multi Floor Example

Example

sidebar_title: Multi Floor
config:
  show_side_bar: false
  show_app_header: false
  config:
    image: /local/floorplan/examples/multi_floor/multi_floor.svg
    stylesheet: /local/floorplan/examples/multi_floor/multi_floor.css
    # log_level: info
    console_log_level: info

    defaults:
      hover_action: hover-info
      tap_action: more-info

    startup_action:
      - service: floorplan.class_set
        service_data:
          element: ground_floor
          class: layer-visible
      - service: floorplan.class_set
        service_data:
          elements:
            - first_floor
          class: layer-hidden
      - service: floorplan.class_set
        service_data:
          element: ground_floor.button
          class: button-on
      - service: floorplan.class_set
        service_data:
          elements:
            - first_floor.button
          class: button-off
      - service: floorplan.text_set
        service_data: 
          element: sample.multilinegroup_text
          shift_y_axis: 1.5em
          text: |
            > /* Split text to two tspans*/
            return 'Multiline\nTSPAN-Print';

    rules:
      - element: ground_floor.button
        tap_action:
          - service: floorplan.class_set
            service_data:
              element: ground_floor
              class: layer-visible
          - service: floorplan.class_set
            service_data:
              elements:
                - first_floor
              class: layer-hidden
          - service: floorplan.class_set
            service_data:
              element: ground_floor.button
              class: button-on
          - service: floorplan.class_set
            service_data:
              elements:
                - first_floor.button
              class: button-off

      - element: first_floor.button
        tap_action:
          - service: floorplan.class_set
            service_data:
              element: first_floor
              class: layer-visible
          - service: floorplan.class_set
            service_data:
              elements:
                - ground_floor
              class: layer-hidden
          - service: floorplan.class_set
            service_data:
              element: first_floor.button
              class: button-on
          - service: floorplan.class_set
            service_data:
              elements:
                - ground_floor.button
              class: button-off

      - entities:
          - binary_sensor.garage
          - binary_sensor.activity
        state_action:
          - service: floorplan.class_set
            service_data: '${ entity.state === "on" ? "binary-sensor-on" : "binary-sensor-off"}'

      - entities:
          - binary_sensor.garage
        hover_action:
          - service: floorplan.class_set
            service_data: '${element.matches(":hover") ? "hover" : ""}'

/* SVG size */

#floorplan {
  padding: 10px;
}

#floorplan > svg {
  max-width: 700px;
}

/* SVG elements */

svg * {
  vector-effect: non-scaling-stroke !important;
}

/* Hover over */

.floorplan-shape:hover,
g.floorplan-hover > :not(text):hover,
g.floorplan-click > :not(text):hover,
g.floorplan-long-click > :not(text):hover,
:not(text).floorplan-hover:hover,
:not(text).floorplan-click:hover,
:not(text).floorplan-long-click:hover {
  stroke: #03a9f4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Layers */

.layer-visible {
  display: inline !important;
}

.layer-hidden {
  display: none !important;
}

/* Binary sensors */

.binary-sensor-on {
  fill: #f9d27c !important;
}

.binary-sensor-off {
  fill: #7cb1f9 !important;
  transition: fill 5s ease;
}

/* Buttons */

.button-on rect {
  fill: #1aba92 !important;
}

/*
.button-off rect {
  fill: #d32f2f !important;
}
*/

.button-on tspan,
.button-off tspan {
  fill: white !important;
}


/* Hover */

.hover {
  stroke: red !important;
  stroke-width: 10px !important;
}

Assets

All assets can be found in the ha-floorplan repository on GitHub.

Here you’ll find the .svg, .css and .yaml used in the example.