Example

title: Light
config:
  image:
    location: /local/floorplan/examples/light/light.svg
    cache: true
  stylesheet:
    location: /local/floorplan/examples/light/light.css
    cache: true

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

  rules:
    - entities:
        - light.kitchen
        - light.office
      tap_action:
        action: navigate
        navigation_path: /lovelace/lights
      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data: |
            >
              var elements = [
                `${entity.entity_id}`,
                `${entity.entity_id}.gradient_color_0`,
              ];

              var color = 'rgb(0, 0, 0)';
              var opacity = 0;

              if (entity.state === 'on') {
                if (entity.attributes.color_temp) {
                  var rgb = util.color.miredToRGB(entity.attributes.color_temp);
                  color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                  opacity = 1;
                }
                else if (entity.attributes.rgb_color) {
                  var rgb = entity.attributes.rgb_color;
                  color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                  opacity = 1;
                }
              }
              var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;

              return {
                elements: elements,
                style: style,
              };
/* SVG size */

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

/* 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;
}

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.

Updated: