Mit dem genialen Floorplan for Homeassistant kann man bekanntlich beliebige Entities aus Homeassistant in eine SVG-Grafik mappen. Die SVG-Grafik kann man mit dem kostenfreien Inkscape erstellen. Und mit wenigen Zeilen-Code kann man das Ganze dann animieren, so dass sich Pumpen und Lüfter auch drehen und eine Wärmepumpe “pumpend” Wärme erzeugt. Den Spielereien sind da keine Grenzen gesetzt und das Ganze ist erstaunlich performant (während z.B. komplexe Apex-Charts eine absolute Performance-Bremse sind).
Animiert sieht das dann so aus:
Zur Erklärung:
Oben links Solarthermie.
Unten links Erdwärmepumpe
Mitte: 750-L-Speicher
Oben rechts Zentrale Lüftungsanlage mit Warmwasserheizregister
Unten rechts Wandheizung
Der YAML-Code für die animierte Wärmepumpe sieht z.B. so aus:
- entity: sensor.warmepumpe_current_power
element: waermepumpe_active
state_action:
action: call-service
service: floorplan.class_set
service_data:
class: ${(entity.state > 10) ? "pumping" : ""}
Wenn die Wärmepumpe mehr als 10 Watt verbraucht, dann wird das als “arbeitet” gewertet. Der “Kolben” wird dann orange eingefärbt und über folgenden CSS-Code hoch und runter bewegt. Der Raum oberhalb des Kolbens wird rötlich eingefärbt, wenn er “zusammengepresst” wird.
.pumping {
fill: #Ff9900 !important;
color: #Ff9900 !important;
animation-name: pump;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}
@keyframes pump{
0% {
transform: translate(0px,0px);
}
50% {
transform: translate(0px, -5px);
}
100% {
transform: translate(0px, 0px);
}
}
.heating {
animation: heat;
animation-name: heat;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-box: fill-box;
transform-origin: 0% 0%;
}
@keyframes heat{
0% {
fill: #507eec;
transform: scaleY(100%);
}
50% {
fill: #ef7e87;
transform: scaleY(50%);
}
100% {
fill: #507eec;
transform: scaleY(100%);
}
}
Vielleicht bringt das ja jemand auf Ideen