habs in den ersten Post eingefügt.
1 „Gefällt mir“
Besten Dank! Ich denke, ich habe die richtige Zeile erwischt:
<body style="background-color: #1b2a3900">
Jetzt fehlt noch die richtige Schriftfarbe 
Edit: Vermutlich wird es zu kompliziert. Es müsste ja je nach eingestelltem Style die passende Schriftfarbe gesetzt werden.
Das wars, der Platz wird nun nicht mehr verschwendet bei Visualisierungen ohne Batterie.
Danke für den Hinweis…
Wenn diese Zeile noch automatisch deaktiviert würde bei ‚$BATTERY = false;‘ wäre das die Krönung
1 „Gefällt mir“
Lieber Stele99, du bist der Held des Monats!
Das schreit (irgendwann) nach einem PV/Energie Modul (für die alte Visu)
Ich war eienr der „Lautesten“ die für eine Neue Visu playdiert hatten. Aber das neue Kachel-Design ist für mich der Horror (Platzverschwendung und absolut unübersichtlich), deswegen werde ich bei der alten bleiben. (Vorerst)
Moien Stele, das löschen hat den Platzhalter in der Tat gelöscht, nur hat sich jetzt auch die Länge der 3 Paneelen darüber auf der stelle breit gemacht. 
grid-template-rows: 100% 23%;
Das hat auch den gleichen Effekt gehabt. Ich finde die Stelle aber nicht wo ich die 3 grünen etwas näher zusammen schieben kann, wie es war, als noch Platz für die Batterie gelassen wurde.
Quasi die gesamte Länge der VISU.
Probier mal mit 500px breit und 350px lang
Sieht nei mir am besten aus…
Danke auch für das Script der Wärmepumpe.
Habs schon ein wenig auf dei Kachel Visu angepasst.
Noch zwei Fragen:
Welche Werte werden hier gefragt?
$DAT["wp_heat_dhw"] = getValue(19021)/1000;
$DAT["wp_heat_room"] = getValue(51427)/1000;
Was braucht bei dieser Visu den leeren Platz unten, so dass ein Scrollbalken entsteht?
Hallo, ein wirklich tolles Projekt 
Ich habe nur eine Variable für die Be- und Entladen der Batterie.
Geht es dann auch ?
Gruß Jürgen
Machst du zwei Variablen draus…
Ungetestet…
<?php
$Leistung = GetValueFloat (13131);
IF ($Leistung <= 0) {
SetValueFloat (25253, $Leistung * -1);
}
else SetValueFloat (23432, $Leistung);
Oder siehe hier:
Script um PV Ertrag / Einspeisung etc. zu visualsieiren - IP-Symcon / Visualisierung - IP-Symcon Community
Grunsätzlich wird die Breite der Panale im CSS hier definiert:
bei #pvVis
grid-template-columns: 26% 45% 26%;
Hier definierst du wie dei breite der einzelnen Panele sind. die Gesamtbreite des Widgets gibst du ja oben an.
Achtung: unten gibt es noch eine separate CSS:
@media (max-device-width:600px) {
hier wird definiert, dass wenn der screen entspechend groß ist, das gesamte Widget immer 100% breit ist. grund: Symcon APP auf Smartphone.
Man kann den ganzen folgenden Block aber auch entfernen:
wp_heat_dhw ist die aktuell produzierte Wärmeleistung der Wärmepumpe für Brauchwasser
wp_heat_room ist die aktuell produzierter Wärmeleistung für Heizbetrieb.
hab ich leider noch nicht gesehen bei mir
Danke für die Info…
Habe es unterdessen rausgefunden, verwende aber nicht die Leistung, sondern nur die Info (Betriebsmodus) der Wärmepumpe.
0=keine Aktivität
1=kühlen
2=heizen
Mit untenstehender Änderung kann ich nun beim Kühlen dem Haus einen blauen Hintergrund hinterlegen und bei heizen einen orangen.
//if($DAT["wp_heat_room"] == 0){
// $cont = str_replace("/*AR_WP_ROOM*/", "color:transparent;", $cont);
//}else{
// $cont = str_replace("/*WP_ROOM*/", "background-color:#8EC041;", $cont);
// $vlrl = '#heatvl::before{content: "🠤"; padding-right: 0.6em; } #heatrl::before{content: "🠦"; padding-right: 0.6em; }';
// $cont = str_replace("/*HEAT_VLRL*/", $vlrl, $cont);
//}
if($DAT["wp_heat_room"] == 1){ //kühlen
$cont = str_replace("/*WP_ROOM*/", "background-color:#66CCFF;", $cont);
$vlrl = '#heatvl::before{content: "🠤"; padding-right: 0.6em; } #heatrl::before{content: "🠦"; padding-right: 0.6em; }';
$cont = str_replace("/*HEAT_VLRL*/", $vlrl, $cont);
}
elseif($DAT["wp_heat_room"] == 2){ //heizen
$cont = str_replace("/*WP_ROOM*/", "background-color:#FF6633;", $cont);
$vlrl = '#heatvl::before{content: "🠤"; padding-right: 0.6em; } #heatrl::before{content: "🠦"; padding-right: 0.6em; }';
$cont = str_replace("/*HEAT_VLRL*/", $vlrl, $cont);
}
else{
$cont = str_replace("/*AR_WP_ROOM*/", "color:transparent;", $cont);
}
So schauts in den drei Zuständen aus (simmuliert)
Hallo. Ich wollte im untern Teil der PV Panele noch 2 Sachen darstellen. Zum einen die Temperatur von meinem Wechselrichter und den Status von meinem Wechselrichter Lüfter, ob der Lüfter rennt oder nicht. Dann dachte ich mir noch, dass es schön wäre die Temperatur ab +50°C die Kachel rot zu färben, sonst wieder grün.
Ab kurzum, das wird nichts. 
Vielleicht könnte mir da jemand aushelfen.
Hier mal ein Bild wo ich aufgegeben habe:
So was wie dieses suchst Du’
Habe aber ziemlich viel abgeändert.
Zum Beispiel habe ich keinen Pool und keine Wallbox.
Ich habe stattdessen meine Garten-Pumpen und die Geräte in der Waschküche erfasst.
Wechselrichter-Temperatur habe ich auch eingebaut, inkl. Farbwechsel auf rot beim überschreiten der 50 Grad.
Vielleicht kannst du es brauchen oder sinngemäss abändern…
Ich stell es hier mal zur Verfügung…
<?php
/*-----------------------------------------------------------------------------
* Dieses Script dient der Visualiserung folgender WErte:
- PV Ertrag
- Hausverbrauch
- Netzbezug / Einspeisung
- Batterieladung / Zustand (aktuell deaktiviert)
- Wärmepumpe
- Waschküche (Waschmaschine, Tumbler, Secomat)
- Wasserpumpen Garten
---------------------------------------------------------------------------
*/
/*==== IST-WERTE (Variablen-ID) ==============================================*/
/* Aktuelle PV Leistung */
$id_current = 25501;
/* Ladestatus der Batterie mit aktueller Entladung / Ladung */
$BATTERY = false; // True, wenn batterieanzeige eingeblendet werden soll.
$id_batload = 11567;
$id_batunload= 42646;
$id_batstatus = 11245;
/* Aktueller Netzbezug oder Netzeinspeisung
Falls nur eine Variable vorhanden, bitte $id_netin benutzen und $id_netout auskommentieren.
*/
$id_netout = 0; //muss 'Null' ansonsten wird falsch gerechnet. Zusätzlich Zeile 88 und 102 auskommentiert und 155 geändert
$id_netin = 54605;
/* Aktueller Verbrauch des Hauses, eigentlich nur sinnhaft, wenn PV Eigenverbrauch */
$id_homeusage = 40178;
/*==== TAGESSUMMEN =====*/
/* Falls Summen angezeigt werden sollen, bitte hier die Variablen angeben für die Summen */
$ACTIVATE_SUMS = true;
/* Tagessumme PV */
$SUMS["PV"] = 50871;
/* Tagessumme Hausverbrauch */
$SUMS["HOME"] = 31093;
/* Tagessume - Einspeisung */
$SUMS["NET"] = 32746;
$SUMS["NET_IN"] =39186;
/*=== ANZEIGE von ZUSATZ-DEVICES Werte in KW, wenn nicht vorhanden => auskommentieren. === */
/* Wärmepumpe Verbrauch un Erzeugung */
$DEVICE["WP_CUR"] = round(getValue(41367),1);
$DEVICE["WP_HEAT"] = round(getValue(13040),1);
/* Pumpe Grundwasser und Garten */
$DEVICE["Aussentemperatur"] = round(getValue(54867),1);
$DEVICE["Pumpen"] = round(getValue(25534)/1000,1);
/* Waschmaschine, Tumbler, Secomat*/
$DEVICE["Maschinen"] = round(getValue(56629)/1000,1);
/* Temperatur Wechselrichter*/
$DEVICE["PV_TEMP"] = round(getValue(19249),1);
/* === LAYOUT und Farbe ====*/
$VIS["width"] = "510px"; // Höhe der Visualsierung
$VIS["height"] = "350px"; // Breite der Visualsierung
$VIS["fgcolor"] = "#000000"; // Text-Icon-Farbe (schwarz)
$VIS["col_alert"] = "#FF6361"; // Fenster-Farbe bei Alarm (rot)
$VIS["col_ok"] = "#8EC041";// Fenster-Farbe wenn OK (grün)
$VIS["devactive"] = "#FF6361"; // Verbraucher Aktiv (rot)
$VIS["devinactive"] ="#FFFFFF"; // Verbraucher inaktiv (weiss)
$VIS["flowicon"] = '⌇'; // Symbol Stromfluss
$UPDATE_DLEAY = 5; // Minimale Dauer zwischen Aktualisierung der Visualisierung (verhindert zu häufiges Flackern.)
/* ggf. Faktor anpassen damit Ausgabe in KW erfolgt wenn Urprungsvariablen nicht in KW*/
$PV_Current = GetValue($id_current)/1000;
if($BATTERY){
$BAT_Load = getvalue($id_batload)/1000;
$BAT_UnLoad = getvalue($id_batunload)/1000;
$BAT_Status = getValue($id_batstatus);
}
if(!isset($id_netout)){
$NET_IN = getvalue($id_netin)/1000;;
if($NET_IN > 0) {
$NET_OUT = 0;
}else{
$NET_OUT = $NET_IN * -1;
}
}else{
// $NET_OUT = getvalue($id_netout)/1000;
$NET_IN = getvalue($id_netin)/1000;;
$HOME_USAGE = getvalue($id_homeusage)/1000;
}
/* no change below required -------------------------------------------- */
$PV_Current = round($PV_Current,2);
if($BATTERY){
$BAT_Load = round($BAT_Load,2);
$BAT_UnLoad = round($BAT_UnLoad,2);
}
//$NET_OUT = round($NET_OUT,2);
$NET_IN = round($NET_IN,2);
$HOME_USAGE = round($HOME_USAGE,2);
$pv_col ="";
$net_col = "";
$bat_col= "";
$home_col = "";
if($NET_IN > 0)$net_col = "colred";
if($NET_IN < 0)$net_col = "colgreen";
if($BATTERY){
if($BAT_Load > 0 )$bat_col = "colgreen";
if($BAT_UnLoad > 0 )$bat_col = "colred";
}else{
$BAT_UnLoad = 0;
$BAT_Load = 0;
}
if($PV_Current > 0.01 )$pv_col = "colgreen";
if($HOME_USAGE > ($PV_Current + $BAT_UnLoad))$home_col = "colred";
if($HOME_USAGE < ($PV_Current))$home_col = "colgreen";
/* prüfen ob HTMLBox exisitert, falls nein, anlegen */
$chlds = IPS_GetChildrenIDs($_IPS['SELF']);
$id = -1;
foreach($chlds as $chld){
$t = IPS_GetObject($chld);
if($t["ObjectType"] == 2 ){
$v = IPS_GetVariable($t["ObjectID"]);
$vp = $v["VariableCustomProfile"];
if($vp == "~HTMLBox") $id = $t["ObjectID"];
}
}
if($id < 0 ){
$id = IPS_CreateVariable(3);
IPS_SetParent($id, $_IPS['SELF']);
IPS_SetName($id, "PV Status");
IPS_SetVariableCustomProfile($id, "~HTMLBox");
};
$varInfo = IPS_GetVariable($id);
if(time() - $varInfo["VariableUpdated"] < $UPDATE_DLEAY) return;
$cont = getHTML();
// Farben setzen -------------
$cont = str_replace("#PV_COL#", $pv_col, $cont);
$cont = str_replace("#HOME_COL#", $home_col, $cont);
$cont = str_replace("#NET_COL#", $net_col, $cont);
$cont = str_replace("#BAT_COL#", $bat_col, $cont);
// Current-Werte schreiben --------------------------------
$cont = str_replace("<!--CUR_PV-->", abs($PV_Current), $cont);
$cont = str_replace("<!--CUR_HOME-->", abs($HOME_USAGE), $cont);
$cont = str_replace("<!--CUR_NET-->", abs($NET_IN), $cont); //Geändert weil kein NET_OUT Wert
$devFR="";
if(isset($DEVICE["WP_CUR"])){
$v = $DEVICE["WP_CUR"];
$s = ($v > 0 )? "background-color:".$VIS["devactive"].";" : "background-color:".$VIS["devinactive"].";";
$cont = str_replace("<!--WP_CURRENT-->", $DEVICE["WP_CUR"], $cont);
$cont = str_replace("<!--WP_HEAT-->", $DEVICE["WP_HEAT"], $cont);
$cont = str_replace("/*WP_STYLE*/", $s, $cont);
$devFR .= " 1fr";
}else{
$cont = str_replace("/*WP_STYLE*/", "display:none;", $cont);
}
if(isset($DEVICE["Maschinen"])){
$v = $DEVICE["Maschinen"];
$s = ($v > 0 )? "background-color:".$VIS["devactive"].";" : "background-color:".$VIS["devinactive"].";";
$cont = str_replace("<!--Maschinen-->", $DEVICE["Maschinen"], $cont);
$cont = str_replace("/*Maschinen*/", $s, $cont);
$devFR .= " 1fr";
}else{
$cont = str_replace("/*Maschinen*/", "display:none;", $cont);
}
if(isset($DEVICE["Pumpen"])){
$v = $DEVICE["Pumpen"];
$s = ($v > 0 )? "background-color:".$VIS["devactive"].";" : "background-color:".$VIS["devinactive"].";";
$cont = str_replace("<!--Aussentemperatur-->", $DEVICE["Aussentemperatur"], $cont);
$cont = str_replace("<!--Pumpen-->",$DEVICE["Pumpen"], $cont);
$cont = str_replace("/*Garten*/", $s, $cont);
$devFR .= " 1fr";
}else{
$cont = str_replace("/*Garten*/", "display:none;", $cont);
}
$devPV="";
if(isset($DEVICE["PV_TEMP"])){
$v = $DEVICE["PV_TEMP"];
$s = ($v > 50 )? "background-color:".$VIS["devactive"].";" : "background-color:".$VIS["devinactive"].";";
$cont = str_replace("PV_Temperatur", $DEVICE["PV_TEMP"], $cont);
$cont = str_replace("/*PV_TEMP*/", $s, $cont);
$devPV .= " 1fr";
}else{
$cont = str_replace("/*PV_TEMP*/", "display:none;", $cont);
}
$cont = str_replace("<!--STYLE_DEVICES_FR-->", $devFR,$cont);
if($BATTERY){
$cont = str_replace("<!--BAT_LAD-->", abs($BAT_Load - $BAT_UnLoad), $cont);
$cont = str_replace("<!--BAT_STAT-->", $BAT_Status, $cont);
}
$cont = str_replace("<!--STYLE_DEVICES_PV-->", $devPV,$cont);
if($BATTERY){
$cont = str_replace("<!--BAT_LAD-->", abs($BAT_Load - $BAT_UnLoad), $cont);
$cont = str_replace("<!--BAT_STAT-->", $BAT_Status, $cont);
}
// Pfeile anzeigen --------------------------------
if($PV_Current > 0 ){
$cont = str_replace("/*AR_PVOUT*/", "display:visible", $cont);
}else{
$cont = str_replace("/*AR_PVOUT*/", "display:none", $cont);
}
if($BATTERY){
if($BAT_UnLoad > 0 ){
$cont = str_replace("/*AR_BATOUT*/", "display:visible", $cont);
}else{
$cont = str_replace("/*AR_BATOUT*/", "display:none", $cont);
}
if($BAT_Load > 0 ){
$cont = str_replace("/*AR_PVOUTBAT*/", "display:visible", $cont);
}else{
$cont = str_replace("/*AR_PVOUTBAT*/", "display:none", $cont);
}
$cont = str_replace("/*BATT_VIS*/", "display:visible", $cont);
}else{
$cont = str_replace("/*BATT_VIS*/", "display:none", $cont);
$cont = str_replace("/*AR_PVOUTBAT*/", "display:none", $cont);
$cont = str_replace("/*AR_BATOUT*/", "display:none", $cont);
}
if($NET_IN < 0 ){
$cont = str_replace("/*AR_NETOUT*/", "display:visible", $cont);
}else{
$cont = str_replace("/*AR_NETOUT*/", "display:none", $cont);
}
if($NET_IN > 0 ){
$cont = str_replace("/*AR_NETIN*/", "display:visible", $cont);
}else{
$cont = str_replace("/*AR_NETIN*/", "display:none", $cont);
}
if($PV_Current > 0 ){
$cont = str_replace("#PV_OUT_ARROW#", "display:visible", $cont);
}else{
$cont = str_replace("#PV_OUT_ARROW#", "display:none", $cont);
}
if($ACTIVATE_SUMS){
foreach($SUMS as $key => $sumid){
if($key == "NET" || $key =="NET_IN"){
$txt = round(getValue($sumid),2).'<span class="sumspveinheit">kWh </span>';
}else{
$txt = round(getValue($sumid),2).'<span class="sumspveinheit">kWh</span>';
}
$cont = str_replace("<!--SUM_".$key."-->", $txt, $cont);
}
}
// VIsualisierung anpassen
if(isset($VIS["fgcolor"])){
$cont = str_replace("#fff", $VIS["fgcolor"], $cont);
}
if(!isset($VIS["width"])){
$VIS["width"] = "350px";
}
$cont = str_replace("<!--VIS_WIDTH-->", $VIS["width"], $cont);
if(!isset($VIS["height"])){
$VIS["height"] = "350px";
}
$cont = str_replace("<!--VIS_HEIGHT-->", $VIS["height"], $cont);
$cont = str_replace("⌇", $VIS["flowicon"], $cont);
$cont = str_replace("#A73434", $VIS["col_alert"], $cont);
$cont = str_replace("#4CA734", $VIS["col_ok"], $cont);
SetValue($id,$cont);
function getHTML(){
return
'<html>
<style tpye="css">
:root {
--vis-height:<!--VIS_HEIGHT-->;
}
body {
border: 0;
margin: 0;
}
#pvVis,
#bat {
display: grid;
}
#pvVis {
font-size: calc(var(--vis-height) * 0.055);
font-family: Arial, Helvetica, sans-serif;
color: #fff;
width: <!--VIS_WIDTH-->;
height: var(--vis-height);
min-width: 350px;
min-height: 350px;
border-radius: 10px;
grid-template-columns: 26% 45% 26%;
// grid-template-rows: 73% 23%;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.usage {
border: 1px solid #576471;
border-radius: 5px;
text-align: center;
white-space: nowrap;
width: 100%;
}
.usage_home_detail {
display: grid;
grid-template-columns: <!--STYLE_DEVICES_FR-->;
grid-template-rows: 6em;
align-content: stretch;
justify-items: center;
grid-row-gap: 1vh;
grid-column-gap: 1vh;
margin: 1vh;
}
.usage_home_pv {
display: grid;
grid-template-columns: <!--STYLE_DEVICES_PV-->;
grid-template-rows: 6em;
align-content: stretch;
justify-items: center;
grid-row-gap: 1vh;
grid-column-gap: 1vh;
margin: 1vh;
}
#bat {
grid-column: 1 / span 3;
grid-template-columns: 1fr 1fr 1fr;
overflow: hidden;
min-height: 5em;
max-height: 12em;
}
#bat1,
#bat2,
#bat3 {
padding: 0.5em;
display: grid;
grid-template-columns: 100%;
}
#bat2 {
justify-items: center;
align-items: center;
}
.innerusage {
display: grid;
grid-template-columns: 100%;
align-content: space-between;
grid-template-rows: 7em 20px 2fr auto 10px;
}
.svgimg,
.svgimgbottom {
width: 100%;
max-width: 4em;
display: inline-block;
}
.usage_home_detail .svgimg {
width: 2.8em;
height: 2.8em;
margin-top: 0.5vh;
}
.usage_home_pv .svgimg {
width: 2.8em;
height: 2.8em;
margin-top: 0.5vh;
}
.home_detail_usage {
font-size: 0.7em;
line-height: 100%;
margin-top: 0.3vh;
}
.svgimgbottom {
position: relative;
padding-top: 10px;
}
.pvtitle {
font-size: 1.5em;
}
.pvinfo {
font-size: 1.8em;
}
.pveinheit {
font-size: 0.6em;
padding-left: 2px;
}
.netsums {
height: 0.5em;
display: grid;
grid-template-columns: 1fr 1fr;
}
.pvinfo,
.pvtitle {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
.sums {
font-size: 0.8em;
}
.sumspveinheit {
font-size: 80%;
padding-left: 2px;
}
.colgreen {
background-color: #4CA734;
}
.colred {
background-color: #A73434;
}
.topsvg {
margin-top: 1vh;
}
.arrow {
font-size: 2em;
height: 0;
transform: rotate(0deg);
transform-origin: 0 1em;
}
.aax {
animation: arMove 2s linear infinite;
display: block;
margin-left: -10px;
left: 0;
}
.aar {
float: right;
}
.aal {
float: left;
}
.aa1 {
animation-delay: 0;
}
.aa2 {
animation-delay: -0.5s;
}
.aa3 {
animation-delay: -1s;
}
.aa4 {
animation-delay: -1.5s;
}
@keyframes arMove {
0% {
transform: scale(0) translateX(0em);
filter: opacity(0);
}
33% {
transform: scale(0.5) translateX(0.3em);
filter: opacity(0.5);
}
66% {
transform: scale(1) translateX(0.6em);
filter: opacity(1);
}
100% {
transform: scale(1) translateX(1.5em);
filter: opacity(0);
}
}
@media (max-device-width:600px) {
#pvVis {
width: 100% !important;
max-width: 100% !important;
height: 100%;
max-height: 100% !important;
font-size: calc(2vh + 15px);
}
}
</style>
<body style="background-color: #ff">
<div id="pvVis">
<!-- PV ---------------------->
<div id="pv" class="usage innerusage #PV_COL#">
<div>
<div class="svgimg topsvg">
<svg viewBox="0 0 70 70">
<path
style="fill: #fff"
d="m 31.255907,63.290793 c -1.0338,-0.56053 -1.24459,-1.32315 -1.24459,-4.50285 0,-3.13135 0.31562,-4.07302 1.53435,-4.57783 0.97169,-0.40249 1.94851,-0.15921 2.74004,0.68241 0.55892,0.59429 0.62933,0.94801 0.71048,3.56921 0.10197,3.29361 -0.1613,4.27562 -1.30483,4.86696 -0.92973,0.48079 -1.49504,0.47199 -2.43545,-0.0379 z m -20.6942,-8.62504 c -1.1705996,-1.39117 -0.8422696,-2.27471 1.84329,-4.96026 2.07877,-2.07877 2.33408,-2.25225 3.3147,-2.25225 1.41581,0 2.4242,0.96509 2.46368,2.35788 0.0256,0.90378 -0.16869,1.178 -2.36818,3.34222 -2.22138,2.18577 -2.47432,2.35767 -3.46917,2.35767 -0.88204,0 -1.19971,-0.15049 -1.78432,-0.84526 z m 39.34765,-0.97834 c -2.63014,-2.26369 -3.22928,-3.05381 -3.22928,-4.2586 0,-0.80805 0.16566,-1.15391 0.81405,-1.69949 1.22397,-1.02991 2.07732,-0.8986 3.86856,0.59524 3.65903,3.05153 4.33331,4.56123 2.74607,6.14847 -1.21752,1.21752 -2.05377,1.06107 -4.1994,-0.78562 z m -19.85537,-4.02299 c -6.31554,-0.79794 -11.84831,-5.35448 -13.82327,-11.38421 -0.91942,-2.80706 -0.91942,-7.44593 0,-10.25298 1.73505,-5.29727 6.45935,-9.672175 11.92852,-11.046316 2.20877,-0.554958 5.99332,-0.554958 8.20208,0 5.46917,1.374141 10.19347,5.749046 11.92853,11.046316 0.91941,2.80705 0.91941,7.44592 0,10.25298 -2.47336,7.55135 -10.23276,12.39536 -18.23586,11.38421 z M 2.8462176,35.546143 c -1.52417,-0.663 -1.89290997,-2.46232 -0.77192,-3.76673 0.62116,-0.72281 0.71928,-0.74472 3.72543,-0.8318 3.4804498,-0.10082 4.4441294,0.14846 5.0417794,1.30419 0.69903,1.35178 0.27793,2.62541 -1.0813096,3.27042 -1.1213798,0.53212 -5.7091898,0.548 -6.9139798,0.0239 z m 51.8004794,-0.51269 c -0.70337,-0.38985 -1.32833,-1.36327 -1.34266,-2.09131 -0.0174,-0.88129 0.75805,-1.97644 1.60956,-2.27328 1.22004,-0.42531 5.6179,-0.37202 6.70264,0.0812 1.93753,0.80955 2.02501,3.28359 0.15038,4.253 -1.01151,0.52307 -6.19112,0.54517 -7.11992,0.0304 z M 11.969597,16.931901 C 9.7957874,14.758089 9.6384074,14.527467 9.6384074,13.515838 c 0,-0.886613 0.14876,-1.210049 0.8140496,-1.769848 1.29292,-1.087921 2.07528,-0.919151 4.19454,0.904843 3.04386,2.619768 3.64728,3.739321 2.89973,5.380011 -0.34825,0.764339 -1.26512,1.232249 -2.41458,1.232249 -0.69279,0 -1.2199,-0.38854 -3.16255,-2.331192 z m 35.9011,1.816482 c -0.92647,-0.37919 -1.56104,-1.314299 -1.56104,-2.300343 0,-0.829962 0.27291,-1.205182 2.39589,-3.294132 2.14989,-2.115419 2.497,-2.35748 3.38056,-2.35748 1.29818,0 2.53147,1.164993 2.53147,2.391281 0,0.695343 -0.36215,1.217342 -2.05053,2.955668 -2.62334,2.700956 -3.40398,3.133966 -4.69635,2.605006 z m -17.10371,-6.76567 c -0.96435,-0.523888 -1.28483,-1.644735 -1.28483,-4.4935769 0,-2.896554 0.32191,-3.980277 1.33846,-4.505956 0.94508,-0.488717 1.40508,-0.488717 2.35016,0 1.01655,0.525679 1.33846,1.609402 1.33846,4.505956 0,2.8965549 -0.32191,3.9802779 -1.33846,4.5059559 -0.92906,0.480434 -1.50207,0.477484 -2.40379,-0.01238 z"
/>
</svg>
</div>
<div id="tit_haus" class="pvtitle">PV</div>
<div class="sums"><!--SUM_PV--></div>
</div>
<div>
<div class="arrow" style="/*AR_PVOUT*/">
<div class="aa1 aax aar">⌇</div>
<div class="aa2 aax aar">⌇</div>
<div class="aa3 aax aar">⌇</div>
<div class="aa4 aax aar">⌇</div>
</div>
</div>
<div id="pv_erz" class="pvinfo">
<!--CUR_PV--><span class="pveinheit">kw</span>
</div>
<div class="usage_home_pv">
<div class="usage" style="/*PV_TEMP*/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0 640 512" id="IconChangeColor" height="50" width="50"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M575.4 25.72C572.4 10.78 559.2 0 543.1 0H96c-15.25 0-28.39 10.78-31.38 25.72l-63.1 320c-1.891 9.406 .5469 19.16 6.625 26.56S22.41 384 32 384h255.1v64.25H239.8c-26.26 0-47.75 21.49-47.75 47.75c0 8.844 7.168 16.01 16.01 16l223.1-.1667c8.828-.0098 15.99-7.17 15.99-16C447.1 469.5 426.6 448 400.2 448h-48.28v-64h256c9.594 0 18.67-4.312 24.75-11.72s8.516-17.16 6.625-26.56L575.4 25.72zM517.8 64l19.2 96h-97.98L429.2 64H517.8zM380.1 64l9.617 96H250l9.873-96H380.1zM210.8 64L201 160H103.1l19.18-96H210.8zM71.16 320l22.28-112h102.7L184.6 320H71.16zM233.8 320l11.37-112h149.7L406.2 320H233.8zM455.4 320l-11.5-112h102.7l22.28 112H455.4z" id="mainIconPathAttribute" fill="#000000"></path></svg>
<div class="home_detail_usage">
<br />🌡PV_Temperatur<span
style="font-size: 0.7em; margin-left: 0.2em"
>°C</span
>
</div>
</div>
</div>
</div>
<!-- HAUS ------------------------------------>
<div id="haus" class="usage innerusage #HOME_COL#">
<div>
<div class="svgimg topsvg">
<svg viewBox="0 0 70 70">
<path
style="fill: #fff"
d="m 12.7944,57.783422 c -2.8666988,-1.307698 -1.410751,-5.029653 -1.79342,-7.505139 -0.01774,-5.081828 -0.0079,-10.163702 -0.01098,-15.245553 7.263116,-6.5631 14.455753,-13.206209 21.804646,-19.6728 7.348975,6.466495 14.54153,13.109698 21.804642,19.6728 -0.03923,6.994426 0.10289,13.99438 -0.1288,20.984308 -1.084311,2.901218 -4.754046,1.58199 -7.105066,1.91706 -3.228515,0.0095 -6.457055,0.0033 -9.685582,0.0051 0,-5.336073 0,-10.672145 0,-16.008218 -3.256796,0 -6.513592,0 -9.770388,0 0,5.336073 0,10.672145 0,16.008218 -5.037703,-0.04012 -10.082278,0.06689 -15.115047,-0.155745 z M 5.3553143,35.803597 C 3.8251116,34.086352 0.66727274,31.219044 3.9200326,29.507076 12.755754,21.256958 21.598877,13.005701 30.682189,5.0294583 c 3.205446,-1.8877642 5.813395,1.3037437 7.948876,3.2372401 2.093518,1.9085456 4.171315,3.8342536 6.257414,5.7508986 0.09301,-2.965601 -0.137891,-5.9641949 0.264055,-8.9022117 1.674732,-1.091243 4.041067,-0.3713174 6.021446,-0.5444488 0.945273,0.1546731 2.153048,-0.2748777 2.923245,0.2694423 0.865169,0.6955693 0.272135,1.957332 0.45139,2.9192287 0.01847,5.0497575 0.03703,10.0995145 0.05559,15.1492715 2.869797,2.696489 5.901609,5.235187 8.59045,8.113412 -0.241146,2.059984 -3.097744,6.858452 -5.229829,3.577752 C 49.52339,26.99655 41.227364,19.233178 32.794645,11.620322 23.911716,19.63141 15.193655,27.82479 6.2872463,35.809746 l -0.4219082,0.06784 -0.5100198,-0.07404 z"
/>
</svg>
</div>
<div id="tit_haus" class="pvtitle">Verbrauch</div>
<div class="sums"><!--SUM_HOME--></div>
</div>
<div>
<div class="arrow" style="/*AR_NETOUT*/">
<div class="aa1 aax aar">⌇</div>
<div class="aa2 aax aar">⌇</div>
<div class="aa3 aax aar">⌇</div>
<div class="aa4 aax aar">⌇</div>
</div>
</div>
<div id="pv_erz" class="pvinfo">
<!--CUR_HOME--><span class="pveinheit">kw</span>
</div>
<div class="usage_home_detail">
<div class="usage" style="/*Garten*/">
<svg width="50" height="50" viewBox="0 -5 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" id="IconChangeColor"> <path d="M30 26.8182C30 30.2323 27.3137 33 24 33C20.6863 33 18 30.2323 18 26.8182C18 21.4091 24 15 24 15C24 15 30 21.4091 30 26.8182Z" fill="#000000" id="mainIconPathAttribute"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 31C26.1533 31 28 29.1844 28 26.8182C28 24.7373 26.7943 22.2053 25.3295 19.9805C24.8713 19.2844 24.4116 18.6537 24 18.1198C23.5885 18.6537 23.1288 19.2844 22.6705 19.9805C21.2057 22.2053 20 24.7373 20 26.8182C20 29.1844 21.8467 31 24 31ZM22.6966 16.5398C20.9318 18.7675 18 23.0371 18 26.8182C18 30.2323 20.6863 33 24 33C27.3137 33 30 30.2323 30 26.8182C30 23.0371 27.0683 18.7675 25.3035 16.5398C24.5436 15.5806 24 15 24 15C24 15 23.4565 15.5806 22.6966 16.5398Z" fill="#000000" id="mainIconPathAttribute"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8607 10.8671C11.7227 13.0508 9.47039 16.286 8.51148 19.9869C7.55258 23.6877 7.95052 27.6096 9.63324 31.0424C11.316 34.4752 14.1722 37.1921 17.6849 38.701C21.1976 40.2099 25.1345 40.4112 28.7827 39.2685L29.3806 41.177C25.2763 42.4627 20.8473 42.2362 16.8955 40.5386C12.9438 38.8411 9.73046 35.7846 7.83739 31.9227C5.94433 28.0608 5.49665 23.6487 6.57542 19.4852C7.65418 15.3218 10.1881 11.6822 13.7183 9.22547L14.8607 10.8671Z" fill="#000000" id="mainIconPathAttribute"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M33.1393 37.1329C36.2773 34.9492 38.5297 31.714 39.4886 28.0131C40.4475 24.3123 40.0495 20.3904 38.3668 16.9576C36.6841 13.5248 33.8278 10.8079 30.3151 9.299C26.8024 7.79006 22.8656 7.58877 19.2173 8.73156L18.6195 6.823C22.7238 5.53736 27.1527 5.76382 31.1045 7.46137C35.0563 9.15893 38.2696 12.2154 40.1626 16.0773C42.0557 19.9392 42.5034 24.3513 41.4246 28.5148C40.3459 32.6782 37.812 36.3178 34.2817 38.7745L33.1393 37.1329Z" fill="#000000" id="mainIconPathAttribute"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 10H7.00002V8H16V17H14V10Z" fill="#000000" id="mainIconPathAttribute"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M34 38H41V40H32L32 31H34L34 38Z" fill="#000000" id="mainIconPathAttribute"></path> </svg>
<div class="home_detail_usage">
<br />⭢<!--Pumpen--><span
style="font-size: 0.7em; margin-left: 0.2em"
>kW</span
>
<br />🌡<!--Aussentemperatur--><span
style="font-size: 0.7em; margin-left: 0.2em"
>°C</span
>
</div>
</div>
<div class="usage" style="/*Maschinen*/">
<svg width="50" height="50" viewBox="0 -2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="IconChangeColor"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H18C18.5523 4 19 4.44772 19 5V8H5V5C5 4.44772 5.44771 4 6 4ZM19 19V10H5V19C5 19.5523 5.44772 20 6 20H18C18.5523 20 19 19.5523 19 19ZM3 5C3 3.34315 4.34315 2 6 2H18C19.6569 2 21 3.34315 21 5V19C21 20.6569 19.6569 22 18 22H6C4.34315 22 3 20.6569 3 19V5ZM7 5C6.44772 5 6 5.44772 6 6C6 6.55228 6.44772 7 7 7H9C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5H7ZM14 7C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7ZM18 6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6C16 5.44772 16.4477 5 17 5C17.5523 5 18 5.44772 18 6ZM14 15C14 16.1046 13.1046 17 12 17C10.8954 17 10 16.1046 10 15C10 13.8954 10.8954 13 12 13C13.1046 13 14 13.8954 14 15ZM16 15C16 17.2091 14.2091 19 12 19C9.79086 19 8 17.2091 8 15C8 12.7909 9.79086 11 12 11C14.2091 11 16 12.7909 16 15Z" fill="currentColor" id="mainIconPathAttribute"></path> </svg>
<div class="home_detail_usage">
<br />⭢<!--Maschinen--><span
style="font-size: 0.7em; margin-left: 0.2em"
>kW</span
>
</div>
</div>
<div class="usage" style="/*WP_STYLE*/">
<svg viewBox="0 0 70 70" class="svgimg topsvg">
<g
transform="matrix(.53019 0 0 .45008 5.9169 5.393)"
stroke-width="7.7371"
>
<path
transform="matrix(1.8861 0 0 2.2218 -11.16 10)"
d="m10.027 6.7363c-3.1768 0-5.7773 2.2055-5.7773 4.9023v28.428c0 2.6968 2.6005 4.9023 5.7773 4.9023h51.875c3.1768 0 5.7754-2.2055 5.7754-4.9023v-28.428c0-2.6968-2.5986-4.9023-5.7754-4.9023h-51.875zm0 2.3027h51.875c1.7205 0 3.0625 1.139 3.0625 2.5996v28.428c0 1.4606-1.342 2.5996-3.0625 2.5996h-51.875c-1.7205 0-3.0645-1.139-3.0645-2.5996v-28.428c0-1.4606 1.3439-2.5996 3.0645-2.5996zm12.605 5.2852c-6.8521 0-12.211 5.4434-12.211 11.926s5.3589 11.926 12.211 11.926c6.8521 0 12.213-5.4434 12.213-11.926s-5.3608-11.926-12.213-11.926zm16.883 0.74805a1.3568 1.1518 0 1 0 0 2.3027h19.18a1.3568 1.1518 0 1 0 0-2.3027h-19.18zm-16.883 1.5566c5.1375 0 9.498 4.2034 9.498 9.6211s-4.3605 9.6211-9.498 9.6211c-5.1375 0-9.498-4.2034-9.498-9.6211s4.3605-9.6211 9.498-9.6211zm-1.8184 1.8125c-1.2299 0.077631-2.3929 0.91864-2.8652 2.0723-0.12632 0.30851-0.14735 0.42525-0.16406 0.87109-0.030205 0.80607 0.1333 1.3539 0.61719 2.0586 0.25759 0.37514 0.60045 0.69796 1.168 1.0918 0.44617 0.30962 1.2508 0.71191 1.627 0.81641 0.16001 0.04445 0.19125 0.070055 0.16406 0.13477-0.14149 0.33679-0.19982 0.59545-0.20117 0.88867l-0.001953 0.33203-0.65039 0.18945c-0.59499 0.17281-0.69756 0.18913-1.1777 0.18555-0.92418-0.006913-1.4084-0.18038-1.9512-0.69922-0.34324-0.3281-0.42713-0.37109-0.72266-0.37109-0.34259 0-0.6594 0.15426-0.93359 0.45508-0.7139 0.78324-0.78966 1.8788-0.21484 3.0859 0.6784 1.4247 1.9974 2.144 3.2656 1.7793 1.2458-0.35823 2.2747-1.4748 2.8984-3.1445 0.14538-0.38919 0.21056-0.50799 0.26367-0.49023 0.038491 0.012863 0.16222 0.058191 0.27539 0.10156 0.11725 0.044931 0.36188 0.081255 0.57031 0.085938l0.36719 0.009765 0.20117 0.61524c0.18187 0.55498 0.20313 0.67045 0.2207 1.1621 0.032925 0.92119-0.15353 1.5472-0.63867 2.1406-0.32698 0.39994-0.35474 0.46159-0.35352 0.76172 0.001272 0.32229 0.11731 0.58939 0.39062 0.89258 0.32397 0.35938 0.79107 0.60046 1.3223 0.68164 0.1808 0.02763 0.68418-0.011285 0.91406-0.070313 1.1228-0.28833 2.0701-1.1279 2.4277-2.1504 0.27555-0.78768 0.135-1.8061-0.35547-2.5957-0.24301-0.39124-0.75263-0.91172-1.2051-1.2285-0.41634-0.29151-1.2122-0.70889-1.5762-0.82812-0.32915-0.10784-0.3481-0.12947-0.26172-0.31836 0.092065-0.20132 0.16434-0.67282 0.13672-0.89844l-0.021485-0.17383 0.38281-0.11914c0.74894-0.23477 0.93335-0.26848 1.4629-0.26758 0.90941 0.00144 1.3898 0.16657 1.9375 0.66602 0.17498 0.15957 0.38392 0.31865 0.46484 0.35547 0.51687 0.23514 1.2761-0.23927 1.6309-1.0215 0.12244-0.26997 0.14116-0.37017 0.1582-0.83203 0.020841-0.56494-0.031807-0.8778-0.23828-1.4082-0.37325-0.95883-1.1168-1.691-2.041-2.0137-0.31943-0.11153-0.95618-0.1087-1.3652 0.003906-1.1997 0.3302-2.251 1.4767-2.8867 3.1504l-0.19727 0.51562-0.20898-0.095703c-0.14088-0.064663-0.34824-0.1037-0.63281-0.11914l-0.42188-0.023438-0.095703-0.26367c-0.42393-1.1757-0.46667-2.0198-0.14648-2.8535 0.14316-0.37276 0.2891-0.61717 0.54102-0.9043 0.22572-0.25727 0.31523-0.50519 0.27539-0.76367-0.13651-0.88579-1.076-1.5173-2.1543-1.4492zm18.701 1.1797a1.3571 1.152 0 0 0 0 2.3047h19.18a1.3571 1.152 0 0 0 0-2.3047h-19.18zm0 4.8242a1.3568 1.1518 0 1 0 0 2.3027h19.18a1.3568 1.1518 0 1 0 0-2.3027h-19.18zm-16.875 1.3262c0.067279-0.013727 0.14196-0.010843 0.2207 0.011719 0.26177 0.074998 0.35949 0.18688 0.38672 0.4375 0.022368 0.20594 0.012744 0.23359-0.13672 0.38867-0.16229 0.1684-0.34561 0.21238-0.54297 0.12891-0.13706-0.057971-0.26758-0.27652-0.26758-0.45117 0-0.27941 0.13801-0.47444 0.33984-0.51562zm16.875 3.0156a1.3568 1.1518 0 1 0 0 2.3027h19.18a1.3568 1.1518 0 1 0 0-2.3027h-19.18zm0 4.502a1.3568 1.1518 0 1 0 0 2.3047h10.924a1.3568 1.1518 0 1 0 0-2.3047h-10.924zm15.721 0a1.3568 1.1518 0 1 0 0 2.3047h3.3477a1.3568 1.1518 0 1 0 0-2.3047h-3.3477z"
fill="#fff"
/>
</g>
</svg>
<div class="home_detail_usage">
⭢<!--WP_CURRENT--><span
style="font-size: 0.7em; margin-left: 0.2em"
>kW</span
><br />🌡<!--WP_HEAT--><span
style="font-size: 0.7em; margin-left: 0.2em"
>kW</span
>
</div>
</div>
</div>
<div
class="arrow"
style="
transform: rotate(270deg) translate(-100%);
top: -10px;
position: relative;
margin-left: calc(50% + 15px);
/*AR_BATOUT*/
"
>
<div class="aa1 aar aax">⌇</div>
<div class="aa2 aar aax">⌇</div>
<div class="aa3 aar aax">⌇</div>
<div class="aa4 aar aax">⌇</div>
</div>
</div>
<!-- NETZ ------------------------------------>
<div id="netz" class="usage innerusage #NET_COL#">
<div>
<div class="svgimg topsvg">
<svg viewBox="0 0 70 70">
<path
style="fill: #fff"
d="m 22.576554,60.480617 c -0.494098,-0.235519 -0.811416,-0.72488 -0.811416,-1.251347 0,-0.217287 3.616069,-27.598635 3.730236,-28.245836 l 0.03149,-0.178511 h -2.838335 -2.838334 l -0.003,1.808886 c -0.003,1.790725 -0.0046,1.811977 -0.162283,2.116719 -0.0916,0.177022 -0.279244,0.394493 -0.441564,0.511765 -0.259055,0.187159 -0.323994,0.203931 -0.789596,0.203931 -0.460428,0 -0.533347,-0.01827 -0.7888,-0.197622 -0.154811,-0.108693 -0.354501,-0.327775 -0.443757,-0.48685 -0.160902,-0.286765 -0.162453,-0.304839 -0.182219,-2.123028 l -0.01994,-1.833801 h -2.49092 -2.490936 l -0.02075,1.833801 -0.02074,1.833801 -0.1821,0.309791 c -0.100155,0.170386 -0.302498,0.389468 -0.449653,0.48685 -0.232767,0.154036 -0.332092,0.177058 -0.763887,0.177058 -0.431795,0 -0.53112,-0.02302 -0.7638833,-0.177058 -0.1471546,-0.09738 -0.3494978,-0.316464 -0.4496526,-0.48685 l -0.1821,-0.309791 v -2.726359 c 0,-2.667129 0.00304,-2.732 0.1397376,-2.986013 0.1758476,-0.32675 0.3790989,-0.517507 0.6896653,-0.64727 0.133877,-0.05594 3.883612,-1.093278 8.332747,-2.305202 4.449133,-1.211924 8.096461,-2.211844 8.105172,-2.222045 0.01639,-0.01919 1.33397,-9.912521 1.331649,-9.998969 -7.21e-4,-0.02678 -1.795454,-0.04869 -3.988299,-0.04869 h -3.986992 l 0.0062,1.812449 c 0.0062,1.80782 0.0058,1.813248 -0.154779,2.125317 -0.441043,0.85703 -1.663248,1.003296 -2.28769,0.273776 -0.362002,-0.422919 -0.374081,-0.539426 -0.352509,-3.400126 0.01896,-2.514896 0.02397,-2.604695 0.159317,-2.856185 0.07686,-0.142809 0.208306,-0.322455 0.29211,-0.399212 0.0838,-0.07676 2.357799,-1.2451968 5.053324,-2.5965324 l 4.900955,-2.4569738 h 5.128152 5.128151 l 4.950044,2.4840532 c 4.563311,2.289981 4.964946,2.504626 5.140797,2.747381 0.315505,0.435543 0.339984,0.70106 0.316636,3.434493 l -0.02135,2.499162 -0.162284,0.289228 c -0.08926,0.159074 -0.288946,0.378157 -0.443756,0.48685 -0.254862,0.178938 -0.328955,0.197622 -0.7837,0.197622 -0.438216,0 -0.536328,-0.02257 -0.76978,-0.177058 -0.147155,-0.09738 -0.349498,-0.316464 -0.449653,-0.48685 l -0.1821,-0.309792 -0.01994,-1.833801 -0.01994,-1.833801 h -3.956004 c -3.814022,0 -3.956004,0.0043 -3.956004,0.120786 0,0.06643 0.175586,1.432045 0.390192,3.034697 0.214605,1.602651 0.508507,3.804205 0.653115,4.892341 0.144609,1.088136 0.271868,1.987373 0.282798,1.998303 0.01093,0.01093 3.711632,1.026719 8.22378,2.257308 6.624895,1.806793 8.253198,2.271878 8.460012,2.416396 0.147873,0.103331 0.326187,0.315136 0.421936,0.501185 l 0.16583,0.322224 v 2.664894 2.664895 l -0.16583,0.322272 c -0.231967,0.450803 -0.598707,0.696571 -1.092764,0.732307 -0.647739,0.04685 -1.103734,-0.191191 -1.38947,-0.725349 -0.136392,-0.254975 -0.144157,-0.354994 -0.163144,-2.101517 l -0.01994,-1.833801 -2.511682,6.4e-5 -2.511683,6.5e-5 v 1.833729 1.833729 l -0.1821,0.309792 c -0.100155,0.170386 -0.302498,0.389468 -0.449653,0.48685 -0.233452,0.154491 -0.331564,0.177058 -0.76978,0.177058 -0.454745,0 -0.528838,-0.01868 -0.7837,-0.197622 -0.15481,-0.108693 -0.354501,-0.327775 -0.443756,-0.48685 -0.160902,-0.286766 -0.162453,-0.304839 -0.18222,-2.123029 l -0.01994,-1.833786 h -2.820021 c -1.551011,0 -2.820021,0.01005 -2.820021,0.02233 0,0.02287 0.627597,4.695822 0.685734,5.105823 0.619025,4.365552 3.081148,23.225262 3.061166,23.448338 -0.05548,0.619384 -0.605467,1.151927 -1.244371,1.20491 -0.622794,0.05165 -1.168298,-0.260953 -1.410382,-0.808215 -0.11795,-0.266642 -0.173192,-0.299523 -4.125418,-2.455505 -3.835739,-2.092437 -4.013209,-2.181585 -4.178724,-2.099075 -0.09507,0.04739 -1.907043,1.033919 -4.026603,2.192278 l -3.853747,2.106107 -0.162283,0.328044 c -0.231475,0.467909 -0.594488,0.705284 -1.12109,0.733082 -0.297894,0.01573 -0.472745,-0.01124 -0.664026,-0.102421 z m 5.177171,-4.853059 c 1.543941,-0.842693 2.81557,-1.53999 2.825842,-1.549548 0.02045,-0.01903 -0.631868,-0.381128 -3.217703,-1.786144 -0.938312,-0.509833 -1.716346,-0.915718 -1.728964,-0.901968 -0.05446,0.05934 -0.78512,5.769828 -0.738253,5.769828 0.02855,0 1.315136,-0.689476 2.859078,-1.532168 z m 12.513261,1.451027 c 0.0042,-0.219253 -0.750174,-5.696143 -0.784575,-5.696143 -0.04828,0 -4.811225,2.592385 -4.881902,2.657132 -0.04332,0.03969 5.486757,3.10896 5.616237,3.117094 0.02678,0.0017 0.04939,-0.03346 0.05024,-0.07808 z m -4.072997,-6.053166 c 1.309943,-0.714047 2.379748,-1.312872 2.377345,-1.330723 -0.0024,-0.01785 -1.356659,-0.92814 -3.009457,-2.022864 l -3.005088,-1.990408 -2.992247,1.990408 c -1.645736,1.094724 -2.993051,2.005366 -2.994033,2.023648 -9.8e-4,0.01828 1.347306,0.769304 2.996195,1.668936 l 2.997982,1.635694 0.623795,-0.338213 c 0.343087,-0.186017 1.695565,-0.922432 3.005508,-1.636478 z M 28.53601,46.124464 c 1.268718,-0.839005 2.308252,-1.540069 2.310078,-1.55792 0.0018,-0.01785 -0.886321,-0.623703 -1.973658,-1.346338 -1.811016,-1.203587 -1.979658,-1.301672 -2.008931,-1.16844 -0.02984,0.135816 -0.74917,5.514201 -0.74917,5.601501 0,0.07035 0.07701,0.02173 2.421681,-1.528803 z m 10.460809,1.314494 c -0.02024,-0.133884 -0.19347,-1.421658 -0.384963,-2.86172 -0.191493,-1.440062 -0.359283,-2.629409 -0.372867,-2.642993 -0.0317,-0.0317 -3.908487,2.550937 -3.926769,2.615942 -0.01419,0.05044 4.581769,3.132196 4.67117,3.132196 0.02762,0 0.03366,-0.109541 0.01343,-0.243425 z m -4.04609,-5.604236 c 1.289051,-0.85986 2.318437,-1.585756 2.287524,-1.613102 -0.673628,-0.595911 -4.640591,-3.963979 -4.668835,-3.963979 -0.0507,0 -4.66518,3.952452 -4.684306,4.01226 -0.01504,0.04703 4.586951,3.127903 4.672533,3.128094 0.02714,6e-5 1.104033,-0.703412 2.393084,-1.563273 z m -5.780172,-5.161051 c 0.943196,-0.806552 1.767571,-1.51728 1.831945,-1.579398 0.112018,-0.108091 0.05542,-0.165677 -1.318078,-1.341044 -1.42368,-1.218311 -1.556057,-1.32163 -1.559639,-1.217285 -10e-4,0.02975 -0.169905,1.302864 -0.375298,2.829139 -0.205393,1.526274 -0.35553,2.775044 -0.333637,2.775044 0.02189,0 0.811511,-0.659906 1.754707,-1.466456 z m 8.203122,-1.39973 c -0.20174,-1.511849 -0.378327,-2.760808 -0.392416,-2.775465 -0.01409,-0.01466 -0.07691,0.01723 -0.139611,0.07086 -0.0627,0.05363 -0.720125,0.615878 -1.460948,1.249444 -0.740823,0.633567 -1.346951,1.161771 -1.346951,1.173786 0,0.06972 3.666502,3.150866 3.684657,3.096401 0.01214,-0.03641 -0.142991,-1.303172 -0.344731,-2.815021 z m -3.127235,-2.952314 c 0.900536,-0.772417 1.647075,-1.429664 1.658976,-1.460549 0.01201,-0.03116 -1.489141,-0.05616 -3.372246,-0.05616 -2.115766,0 -3.370661,0.02295 -3.332217,0.06094 0.230355,0.227655 3.317429,2.854221 3.357741,2.856858 0.02773,0.0018 0.78721,-0.628681 1.687746,-1.401098 z M 25.975261,27.32848 c 0.04847,-0.341418 0.0733,-0.635587 0.05518,-0.653709 -0.03835,-0.03835 -4.719682,1.225043 -4.719726,1.273758 -1.6e-5,0.01797 1.029671,0.02548 2.288194,0.01669 l 2.288224,-0.01598 z m 3.903015,-0.252194 c 0.428992,-0.51555 0.779985,-0.953715 0.779985,-0.973699 0,-0.01998 -0.376085,-0.03634 -0.835745,-0.03634 h -0.835744 l -0.122344,0.925015 -0.122344,0.925014 0.1629,0.041 c 0.0896,0.02255 0.169742,0.04446 0.178104,0.04869 0.0084,0.0042 0.366196,-0.414134 0.795188,-0.929684 z m 3.636171,0.870633 c 0,-0.03471 -0.71796,-0.933234 -0.870075,-1.088892 -0.06743,-0.069 -0.168132,0.01752 -0.54752,0.470402 -0.25569,0.305225 -0.464891,0.576961 -0.464891,0.603859 0,0.0269 0.423559,0.04891 0.941243,0.04891 0.517683,0 0.941243,-0.01542 0.941243,-0.03427 z m 10.320721,0.0018 c -8.38e-4,-0.0508 -4.683799,-1.309368 -4.723659,-1.269508 -0.03751,0.03751 0.08759,1.17219 0.138268,1.254081 0.03253,0.05257 4.586256,0.06789 4.585391,0.01543 z m -7.469443,-0.178512 c -0.0027,-0.09818 -0.05382,-0.514438 -0.113598,-0.925014 L 36.143436,26.09869 35.315791,26.08052 c -0.455205,-0.01 -0.827645,2.59e-4 -0.827645,0.02275 0,0.0225 0.338371,0.446934 0.751934,0.943182 0.651374,0.781604 0.777251,0.90227 0.941243,0.90227 0.164433,0 0.188665,-0.02346 0.184402,-0.178512 z M 29.53967,23.145152 c -0.04459,-0.0714 -0.103262,-0.129827 -0.130377,-0.129827 -0.02711,0 -0.0493,0.05842 -0.0493,0.129827 0,0.08673 0.04328,0.129827 0.130376,0.129827 0.114128,0 0.120272,-0.01618 0.0493,-0.129827 z m 4.230018,-0.746916 0.72873,-0.876742 -0.890579,-1.119342 c -0.489818,-0.615638 -0.92457,-1.156391 -0.966115,-1.201673 -0.05923,-0.06456 -0.283118,0.177696 -1.037229,1.122331 -0.870686,1.090661 -0.952742,1.215168 -0.8671,1.315683 0.05203,0.06106 0.379782,0.454252 0.728348,0.873754 l 0.633755,0.762732 h 0.470731 0.47073 z m 1.991213,0.774063 c -0.02167,-0.05647 -0.0394,-0.118472 -0.0394,-0.137774 0,-0.0193 -0.04382,0.0013 -0.09737,0.04571 -0.137256,0.113912 -0.120902,0.19474 0.0394,0.19474 0.09805,0 0.125616,-0.02907 0.09737,-0.10268 z m -5.111277,-4.65702 0.717468,-0.897357 -0.495369,-0.628106 c -0.272454,-0.345457 -0.504968,-0.640276 -0.516699,-0.655152 -0.05202,-0.06596 -0.08266,0.101823 -0.242005,1.325313 -0.093,0.714047 -0.186966,1.41511 -0.208818,1.55792 -0.02185,0.142809 -0.0245,0.245047 -0.0059,0.227196 0.01861,-0.01785 0.356704,-0.436267 0.75131,-0.929814 z m 4.402987,-0.64524 c -0.11302,-0.847432 -0.220535,-1.539391 -0.238923,-1.537688 -0.01839,0.0017 -0.261282,0.292486 -0.539765,0.646183 l -0.506334,0.643086 0.728972,0.910886 c 0.400934,0.500986 0.7363,0.903557 0.745256,0.894601 0.009,-0.009 -0.07619,-0.709637 -0.189206,-1.557068 z m -1.506937,-2.976186 c 0.51836,-0.646661 0.942472,-1.216275 0.942472,-1.26581 0,-0.07477 -0.325112,-0.09006 -1.914942,-0.09006 -1.670187,0 -1.914943,0.01261 -1.914943,0.09868 0,0.101919 1.813003,2.423184 1.897485,2.429431 0.0261,0.0019 0.471568,-0.525577 0.989928,-1.172239 z M 40.654911,10.709 c 0,-0.01472 -0.846924,-0.450427 -1.882053,-0.9682303 l -1.882054,-0.9414592 -4.300939,-0.00291 -4.30094,-0.00291 -1.8941,0.9279238 c -1.041755,0.5103587 -1.896177,0.9475897 -1.898714,0.9716237 -0.0025,0.02403 3.632154,0.04348 8.077093,0.04322 4.444939,-2.6e-4 8.081707,-0.01253 8.081707,-0.02726 z"
/>
</svg>
</div>
<div id="tit_netz" class="pvtitle">Netz</div>
<div class="sums netsums">
<div style="text-align: right; margin-right: 0.3em">
<!--SUM_NET-->
<div style="position: relative; top: -6px">⭢</div>
</div>
<div style="text-align: left; margin-left: 0.3em">
<!--SUM_NET_IN-->
<div style="position: relative; top: -6px">⭠</div>
</div>
</div>
</div>
<div s>
<div
class="arrow"
style="
transform: rotate(180deg);
position: relative;
top: -32px;
left: 10px;
height:1px;
/*AR_NETIN*/;
"
>
<div class="aa1 aax aal">⌇</div>
<div class="aa2 aax aal">⌇</div>
<div class="aa3 aax aal">⌇</div>
<div class="aa4 aax aal">⌇</div>
</div>
</div>
<div id="pv_erz" class="pvinfo">
<!--CUR_NET--><span class="pveinheit">kw</span>
</div>
<div> </div>
</div>
<div id="bat" class="usage #BAT_COL#" style="/*BATT_VIS*/">
<div id="bat1">
<div><div id="tit_bat1" class="pvtitle">Ent-/Ladung</div></div>
<div id="bat_lad" class="pvinfo">
<!--BAT_LAD--><span class="pveinheit">kw</span>
</div>
</div>
<div id="bat2">
<div class="svgimg svgimgbottom">
<svg viewBox="0 0 70 70">
<path
style="fill: #fff"
d="m 9.8494365,46.519408 c -0.587334,-0.255828 -1.201331,-1.001639 -1.306893,-1.587463 -0.0466,-0.258616 -0.06564,-5.803637 -0.04231,-12.32227 0.04191,-11.709433 0.04604,-11.85691 0.343445,-12.255194 0.165565,-0.221725 0.482453,-0.538598 0.704196,-0.704162 0.401819,-0.300019 0.4677145,-0.301154 19.6884255,-0.339126 19.213114,-0.03796 19.287584,-0.03697 19.906574,0.262675 1.055877,0.511142 1.146313,0.763098 1.229512,3.425489 l 0.073,2.336041 2.581366,0.03983 2.581368,0.03983 0.375184,0.445882 0.375186,0.445883 v 6.693714 6.693714 l -0.375186,0.445882 -0.375184,0.445883 -2.581368,0.03983 -2.581366,0.03983 -0.073,2.336041 c -0.08316,2.661024 -0.173931,2.914492 -1.226211,3.42389 -0.613492,0.296987 -0.757822,0.299133 -19.734752,0.293461 -15.564009,-0.0047 -19.199487,-0.04176 -19.5619865,-0.19966 z M 48.182348,33.000533 V 21.46633 H 29.421018 10.659689 v 11.534203 11.534203 h 18.761329 18.76133 z m -34.682246,8.839791 -0.358369,-0.358369 v -8.481422 -8.481422 l 0.358369,-0.35837 0.35837,-0.35837 h 3.948706 3.948706 v 9.198162 9.198162 H 17.807178 13.858472 Z M 24.96794,33.000533 v -9.198162 h 4.380077 4.380077 v 9.198162 9.198162 H 29.348017 24.96794 Z m 11.972211,0 v -9.198162 h 4.021706 4.021708 l 0.358369,0.35837 0.35837,0.35837 v 8.481422 8.481422 l -0.35837,0.358369 -0.358369,0.358371 h -4.021708 -4.021706 z m 17.228302,0 V 27.598438 H 52.27042 50.372386 v 5.402095 5.402095 h 1.898034 1.898033 z"
/>
</svg>
</div>
</div>
<div id="bat3">
<div id="tit_bat1" class="pvtitle">Ladezustand</div>
<div id="bat_lad" class="pvinfo">
<!--BAT_STAT--><span class="pveinheit">%</span>
</div>
</div>
</div>
</div>
</body>
</html>
';
}
Hallo, bin richtig begeistert ! Sowas minimalistisch aber zugleich schönes wollte ich immer haben. Sieht aus wie von SMA 
Habe jedoch auf meinem Raspi mit Chromium Browser (KioskMode) grafische Anzeige Probleme mit den Pfeilen und den kleinen Symbolen (Thermometer etc.) Jemand eine Idee wie ich das umgehen kann ? Die Animationen (Pfeile) werfen Schatten und die Symbole erscheinen als kleine Quadrate.
Auf meinem Mac oder PC mit Chrome sieht alles schön aus.
Gruß Christian
Ist der chromium denn auf der selben Version?
Hab den Raspi komplett neu aufgesetzt… Nun läufts sauber Sehr schick das Ganze ! Danke
1 „Gefällt mir“
Sollte dieses Thema nicht vielleicht auch in die neue Kategorie „Visualisierung (Kacheln)“ verschoben werden? 
Grüße
Thomas