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.