Ring Example

Example

title: Ring
config:
  image: /local/floorplan/examples/ring/ring.svg
  stylesheet: /local/floorplan/examples/ring/ring.css
  log_level: info

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

  functions: |
    >
    return {

      getPercentageFill: (entity) => {
        var max = [195, 232, 141];
        var min = [240, 113, 120];
        var r = Math.floor(min[0] + ((max[0] - min[0]) * (entity.state / 100)));
        var g = Math.floor(min[1] + ((max[1] - min[1]) * (entity.state / 100)));
        var b = Math.floor(min[2] + ((max[2] - min[2]) * (entity.state / 100)));
        return `fill: rgb(${r}, ${g}, ${b})`; 
      },

      someOtherFunctionA: (entity, entities, hass) => {
        return 'foo'; 
      },

      someOtherFunctionB: (entity, entities, hass) => {
        return 'bar'; 
      },
      
    };

  rules:
    - entity: sensor.ring_salon_battery
      state_action:
        - service: floorplan.text_set
          service_data:
            element: sensor.ring_salon_battery
            text: |
              >
              return (entity.state !== undefined) ? entity.state + "%" : "unknown";
        - service: floorplan.style_set
          service_data: ${functions.getPercentageFill(entity)}

    - entities:
        - binary_sensor.ring_salon_motion
      state_action:
        service: floorplan.class_set
        service_data:
          class: '${(entity.state === "on") ? "ring-motion" : ""}'

    - entity: binary_sensor.ring_salon_ding
      state_action:
        service: floorplan.class_set
        service_data:
          class: |
            >
            switch (entity.state) {
              case "on":
                return "ring-ding";

              case "off":
                return "";

              default:
                return "";
            }

/* SVG size */

#floorplan {
  margin: 0px 10px 10px 10px;
}

#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;
}

/* Ring doorbell */

.ring-motion {
  fill: #F9D27C !important;
  fill-opacity: 1 !important;
}

.ring-ding {
  stroke: #379FD4;
  stroke-width: 5;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

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.