Ring Example Example Floorplan YAML CSS 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. Previous Next