Hallo zusammen
Hab heute mal wieder ein wenig rumgespielt und wollte die PV Anlage besser visualisieren.
Als Abfallprodukt ist eine nette Methode zur grafischen Darstellung von aktuellen Messwerten rausgekommen.
Alles nur natives PHP und CSS, kein JS, kein Highcharts, keine Googlechart kein gar nix,
Trotzdem recht ansehenlich wie ich finde.
Vorteil: Der Plot zeigt im WF immer Livedaten und braucht nahezu keine Resourcen.
Gebaut hab ich es nach der bekannten „Floorplan“ Methode.
Falls es jemand für eigene Kreationen anpassen möchte, hier der Code.
<?
$id_Floorplan = 23961 /*[Energie\PV\Visu\PV_Visu]*/;
$ImgBackground = '"user\PVMonitor\PVBackground.png"';
$AllHigh = 200;
$TopOffset = 56;
$LeftOffset = 80;
$ColWidth = 100;
// Lastverteilung
$LoadValues = array(
array(getValue(35068 /*[Energie\Plugwise\Circles\Kühlschrank Keller\Leistung_log]*/) ,'Kühlschrank', 'rgba(220,210,0,0.4)' ) ,
array(getValue(10978 /*[Energie\Plugwise\Circles\Gefrierschrank\Leistung_log]*/) , 'Gefrierschrank', 'rgba(80,140,230,0.7)') ,
array(getValue(34012 /*[Energie\Plugwise\Circles\Aquarium\Leistung_log]*/) , 'Aquarium','rgba(90,200,70,0.7)' ) ,
array(getValue(39185 /*[Energie\Plugwise\Circles\Heizraum\Leistung_log]*/) , 'Heizraum','rgba(240,60,230,0.7)' ) ,
array(getValue(23343 /*[Energie\Plugwise\Circles\Luftbefeuchter\Leistung_log]*/) ,'Luftbef.','yellow' ) ,
array(getValue(48100 /*[Energie\Plugwise\Circles\Server\Leistung_log]*/) , 'Server/IT','rgba(240,240,10,0.7)' ) ,
array(getValue(36554 /*[Energie\Plugwise\Circles\Computer\Leistung_log]*/) ,'Arbeitsplatz','rgba(250,20,40,0.7)') ,
);
$ScaleHigh = $AllHigh / 100;
$Sum = 0;
foreach($LoadValues as $Value) {
$Sum = $Sum + $Value[0];
}
$Offset = $TopOffset;
// Batt Status
$BattChargeStatus = getValue(22402 /*[Energie\PV\PIP Daten\Batterie\Batterie Ladezustand]*/);
$BattColor = 'rgba(' . intval(255 / 100 * (100 - $BattChargeStatus)) . ',' . intval(255 / 100 * $BattChargeStatus) . ',0,1)';
$BattColor= 'background-image: -webkit-linear-gradient(rgba(60,240,70,0.9) 0%, yellow '.($BattChargeStatus-50).'% , rgba(250,20,40,0.8) 80%)';
$BattChargeStatus = $BattChargeStatus * $ScaleHigh;
$BattChargeStatusOffset = $TopOffset + $AllHigh - $BattChargeStatus;
// Inerterauslastung
$InvLoadStatus = getValue(17804 /*[Energie\PV\PIP Daten\Wechselrichter\Auslastung]*/);
$InvLoadStatus = $InvLoadStatus * $ScaleHigh;
$InvLoadStatusOffset = $TopOffset + $AllHigh - $InvLoadStatus;
$LoadColor='background-image: -webkit-linear-gradient(rgba(250,120,40,0.9) 0%, rgba(60,240,70,0.7)'.($InvLoadStatus-99).'% )';
// Generator
$PVWatt = getValue(12946 /*[Energie\PV\PIP Daten\PV Daten\PV Leistung]*/);
$PVWattPrz = (100 / getValue(25233 /*[Energie\PV\PIP Daten\Wechselrichter\Wirkleistung]*/)) * $PVWatt;
$BatWattPrz = 100 - $PVWattPrz;
$PVHigh = $PVWattPrz * $ScaleHigh;
$BatHigh = $BatWattPrz * $ScaleHigh;
$PVOffset = $TopOffset + $AllHigh - $PVHigh;
$BatOffset = $TopOffset + $AllHigh - $PVHigh - $BatHigh;
// Now do the Plot
IF (($_IPS['SENDER'] == 'Variable') or ($_IPS['SENDER'] == 'Execute')) {
// Your Script to get Actuator icon
$ausgabe = '<p> Photovoltaik Übersicht </p>';
$ausgabe.= '<p> </p>';
$ausgabe.= '<div id="floorplan" position:absolute; left:0px; top:0px; z-index:-10';
$ausgabe.= '<p> <img src=' . $ImgBackground . '; border="0"></p> </div>';
// Generator (Entweder 100% Netz oder Akku/PV anteilig)
$Offset = $TopOffset;
if (getValue(29240 /*[Energie\PV\PIP Daten\Status\Betriebmodus]*/) <> 2) {
$ausgabe.= '<div style="width:' . $ColWidth . 'px; height:' . $PVHigh . 'px; position:absolute; left:' . ($LeftOffset) . 'px; top:' . $PVOffset . 'px; z-index:0;
background-color: rgba(60,240,70,0.7); border: 1px solid gray;";>
<p style="font-family: Verdana; font-size:10px" > PV </p>
</div>';
$ausgabe.= '<div style="width:' . $ColWidth . 'px; height:' . $BatHigh . 'px; position:absolute; left:' . ($LeftOffset) . 'px; top:' . $BatOffset . 'px; z-index:0;
background-color: rgba(80,140,230,0.7); border: 1px solid gray;";>
<p style="font-family: Verdana; font-size:10px" > Akku </p>
</div>';
}
else {
$ausgabe.= '<div style="width:' . $ColWidth . 'px; height:' . $AllHigh . 'px; position:absolute; left:' . ($LeftOffset) . 'px; top:' . $TopOffset . 'px; z-index:0;
background-color: orange; border: 1px solid gray;";>
<p style="font-family: Verdana; font-size:10px" > Netz </p>
</div>';
}
$ausgabe.= '<div style="font-size:10px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset + 10) . 'px; top:260px; z-index:1";
<p> Energiequelle </p> </div>';
// Lastverteilung
foreach($LoadValues as $Value) {
$Value[0] = (($Value[0] * 100) / $Sum) * $ScaleHigh;
if ($Value[0] > 1) {
$ausgabe.= '<div style="width:' . $ColWidth . 'px; height:' . $Value[0] . 'px; position:absolute; left:' . ($LeftOffset + 150) . 'px; top:' . $Offset . 'px; z-index:0;
background-color: ' . $Value[2] . '; border: 1px solid gray;";>
<p style="font-family: Verdana; font-size:10px" > ' . $Value[1] . '</p>
</div>';
$Offset = $Offset + $Value[0];
}
$ausgabe.= '<div style="font-size:10px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset + 10 + 150) . 'px; top:260px; z-index:1";
<p> Lastverteilung </p> </div>';
}
// Batt Ladestatus Status
$ausgabe.= '<div style="width:100px; height:' . $BattChargeStatus . 'px; position:absolute; left:' . ($LeftOffset + 300) . 'px; top:' . $BattChargeStatusOffset . 'px; z-index:0;
'.$BattColor.'; border: 1px solid gray;";>
<p></p>
</div>';
$ausgabe.= '<div style="font-size:10px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset + 10 + 300) . 'px; top:260px; z-index:1";
<p> Akkuladezustand </p> </div>';
// Inverter Load Status
$ausgabe.= '<div style="width:100px; height:' . $InvLoadStatus . 'px; position:absolute; left:' . ($LeftOffset + 450) . 'px; top:' . $InvLoadStatusOffset . 'px; z-index:0;
'.$LoadColor.'; border: 1px solid gray;";>
<p></p>
</div>';
$ausgabe.= '<div style="font-size:10px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset + 10 + 450) . 'px; top:260px; z-index:1";
<p> Inverterauslastung </p> </div>';
$ausgabe.= '<div style="font-size:25px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset-50) . 'px; top:330px; z-index:1";
<p> Ersparnis Heute: '.round(getvalue(21834 /*[Energie\PV\PIP Daten\Ertrag\Euro_Ertrag Heute]*/),2).'€ </p> </div>';
$ausgabe.= '<div style="font-size:25px; font-family: Verdana; color: #777777; position:absolute; left:' . ($LeftOffset-50) . 'px; top:300px; z-index:1";
<p> Ersparnis Gestern: '.round(getvalue(42506 /*[Energie\PV\PIP Daten\Ertrag\Euro_Tagesertrag]*/),2).'€ </p> </div>';
// ___________________________________________________________
SetValue($id_Floorplan, $ausgabe);
}
?>