Ströme einer PV Anlage mit einer Linie abbilden

Stefan71 · 12. Juni 2022 um 16:28

Hallo,
ich glaube ich habe schon mal so einen Thread hier im Forum gesehen, aber finde ihn nicht. Ich möchte gerne bzw. suche eine Lösung das man z.B. wenn die Panels der PV Anlage Strom produzieren das dass dann in einer farbigen Linie abgebildet wird oder wenn die Batterie geladen wird das dort dann z.B. die Linie grün ist und wenn kein Strom fließt dann halt Rot.

Hier mal ein Beispiel der Original RCT App:

Meint ihr man könnte so was realisieren und auch in IPSView? Z.B. bei meinem Powerfox Zählerablesegerät gibt es im Modul eine Variable mit An/Aus wenn Strom eingespeist wird.

Grüße
Stefan

bbernhard · 12. Juni 2022 um 17:56

Mit Bordmitteln nur teilweise, mit Zusatzsoftware (zb. Highcharts) kannst sowas bauen:

oder suche nach „Grafana“ das wird zzt. gerne für Plots benutzt.

Stefan71 · 12. Juni 2022 um 18:12

Das ist aber nur für Charts oder?

erpe · 12. Juni 2022 um 19:09

Bei den Linien kann man auch eine „Variable Hintergrundfarbe“ im Bereich Fernsteuerung angeben. Ich weiß aber nicht, was Andreas sich dabei gedacht hat - die Linie hat ja nur die Linienfarbe und die Variable hat keine Funktion hier.
@Brownson könntest du da mal schauen, ob das so zu ändern geht, dass hier die Linienfarbe geändert wird?
Ansonsten würde mir nur die Progress Bar einfallen, die bei 0 und 1 dann eine andere Farbe anzeigt.

Brownson · 12. Juni 2022 um 20:28

das sieht nach einem Bug aus, die Variable Hintergrund hat bei Linien aktuell keine Funktion.

Ihr könntet aber auch ein normales TxtLabel dafür „missbrauchen“.
2 verschiedenfarbige Images und Steuerung über Visible/Versteckt wäre auch noch eine potentielle Lösung

Stefan71 · 12. Juni 2022 um 20:31

Hallo Andreas,
wie meinst du das mit dem Text Label? Darin dann eine Linie einfügen?

Brownson · 12. Juni 2022 um 22:26

Einfach ein TextLabel machen das keinen Text hat und nur einige Pixel hoch/breit ist

Stefan71 · 12. Juni 2022 um 22:50

Ah ok, geht dann aber nicht als gestrichelt.

todorb · 13. Juni 2022 um 06:37

Hallo Stefan,
du könntest die Linien auch als Bilddatei mit transparentem Hintergrund speichern. Dabei jede Linie 2x mit unterschiedlichen Farben speichern und in IPS-View übereinander legen. Je nach Stromfluss kannst du dann das eine oder das andere Bild einblenden.
Alternativ könntest du über ein PHP-Skript eine Bilddatei mit dem ganzen Schema erstellen und diese in IPS-View einfügen. So habe ich das mit dem Hydraulikschema von meiner Heizung gemacht.
Auf diesem Hintergrundbild…

… werden die Linien, Farbverlauf im Schichtenspiecher, Temperaturen usw. per PHP-Skript eingefügt, so dass es dann so aussieht:

Erledigt wird das ganze von diesem Skript:

<?php
//Erstellt eine Grafik mit dem Hydraulikschema mit aktuellen Temperaturen
include "52003.ips.php";
 
$SHTOfenAus=!GetValueBoolean(15692);
$TempSpeicherOben=round(GetValueFloat(10780),1);
$TempSpeicherMitte=round(GetValueFloat(12794),1);
$TempSpeicherUnten=round(GetValueFloat(35630),1);


$TempOelkessel=GetValueFloat(19178);
$TempWarmwasserVorlauf=round(GetValueFloat(37449),1);
$TempWarmwasserRuecklauf=round(GetValueFloat(38695),1);
$TempBadheizungVorlauf=round(GetValueFloat(22801),1);
$TempHeizungVorlauf=round(GetValueFloat(12988),1);
$TempHeizraum=round(GetValueFloat(47708),1);
$Aussentemp=GetValueFloat(41963);
$AbgastempHoval=GetValueFloat(16545);

$TempSHTKessel=GetValueFloat(36061);
$TempSHTAbgas=GetValueFloat(43201);
$TempSHTVorlauf=GetValueFloat(10551);
$TempSHTRuecklauf=GetValueFloat(25795);


$ArchivHandler=40475;
$Hintergrund=IPS_GetKernelDir().'media/Heizung/Hintergrund_fuer_Hydraulikschema.png';
$Zeitbereich=3; //1=Stunde 2=Tag 3=Wochw 4=Monat 5=Jahr
$Uhrzeit=date('D, d M Y H:i:s');
//Laden des .PNG Files zur Charterzeugung
$Bild=imagecreatefrompng($Hintergrund);

//Festlegen des Dateinamens und der Variablen
$file=IPS_GetKernelDir().'media/Heizung/Hydraulikschema.png';

//Festlegen der Dimensionen des Charts
  $size = getimagesize($Hintergrund);
  $Breite=$size[0];//Gesamtbreite des .png Files
  $Hoehe=$size[1];//Gesamthöhe des .png Files

//Farbdefinitionen
  $schwarz=imagecolorallocate($Bild,0,0,0);
  $grau=imagecolorallocate($Bild,150,150,150);
  $dunkelgrau=imagecolorallocate($Bild,80,80,80);
  $weiss=imagecolorallocate($Bild,255,255,255);
  $rot=imagecolorallocate($Bild,255,0,0);
  $blau=imagecolorallocate($Bild,0,0,255);
  $gruen=imagecolorallocate($Bild,0,255,0);
  $gelb=imagecolorallocate($Bild,255,255,0);
  $lila=imagecolorallocate($Bild,150,0,150);
  $petrol=imagecolorallocate($Bild,0,150,150);

//Überschrift
  $Ueberschrift = 'Hydraulikschema Heizung';
  $text_width = imagefontwidth(5);
  $textlaenge = strlen($Ueberschrift);
  $width = $textlaenge*$text_width;
  imagestring($Bild, 5, ((800/2)-($width/2)), 2, $Ueberschrift, $weiss);

//Datum und Uhrzeit
	imagestring($Bild, 5, 600,2, $Uhrzeit, $weiss);

//Temperaturangaben oben links im Bild
	//Heizraumtemperatur
		imagestring($Bild, 5, 25, 50, utf8_decode('Heizraumtemperatur '.$TempHeizraum.'°C'), $weiss);
	//Außentemperatur
		imagestring($Bild, 5, 25, 65, utf8_decode('Außentemperatur '.$Aussentemp.'°C'), $weiss);
	//Abgastemperatur
		imagestring($Bild, 5, 25, 80, utf8_decode('Abgastemperatur '.$AbgastempHoval.'°C'), $weiss);

//Zeichnen der Leitungen
  imagesetthickness ( $Bild , 5 );
  //Rücklaufzweig
  imageline ($Bild , 135 , 440 , 135 , 420 , $blau ); //Linie Pumpe-Heizkessel
  imageline ($Bild , 135 , 420 , 110 , 420 , $blau );
  imageline ($Bild , 135 , 480 , 135 , 520 , $blau ); //Linie Rücklauf zum Kessel
  imageline ($Bild , 135 , 520 , 450 , 520 , $blau );
  imageline ($Bild , 250 , 520 , 250 , 440 , $blau ); //Abzweig zum Schichtenspeicher
  imageline ($Bild , 250 , 440 , 265 , 440 , $blau );
  imageline ($Bild , 450 , 520 , 450 , 430 , $blau ); //Rücklaufleitung vom Heizkreisverteiler
  imagerectangle ($Bild , 450 , 430 , 650 , 440 , $blau ); //Heizkreisverteiler Rücklauf

  //Heizkreis Heizung
  imageline ($Bild , 515 , 327 , 515 , 400 , $rot );
  imageline ($Bild , 515 , 200 , 515 , 245 , $rot );
  imageline ($Bild , 552 , 195 , 552 , 430 , $blau );
  imageline ($Bild , 527 , 305 , 552 , 305 , $blau );
  imagestring ($Bild , 5 , 500, 225, $TempHeizungVorlauf.utf8_decode("°C"), $weiss); //Badheizung Vorlauftemperatur

  //Heizkreis Bad
  imagestring($Bild , 5 , 600 , 200 , "Bad" , $weiss);
  imageline ($Bild , 594 , 327 , 594 , 400 , $rot );
  imageline ($Bild , 594 , 200 , 594 , 245 , $rot );
  imageline ($Bild , 632 , 195 , 632 , 430 , $blau );
  imageline ($Bild , 607 , 305 , 632 , 305 , $blau );
  imagestring ($Bild , 5 , 570, 225, $TempBadheizungVorlauf.utf8_decode("°C"), $weiss); //Badheizung Vorlauftemperatur

  //Vorlaufzweig Ölkessel
  imageline ($Bild , 110 , 365 , 135 , 365 , $rot ); //Linie Heizkessel-3-Wegeventil
  imageline ($Bild , 135 , 365 , 135 , 285 , $rot );
  imageline ($Bild , 135 , 285 , 170 , 285 , $rot );
  imageline ($Bild , 213 , 285 , 265 , 285 , $rot ); //Linie 3-Wegeventil-Schichtenspeicher oben
  imageline ($Bild , 192 , 300 , 192 , 350 , $rot ); //Linie 3-Wegeventil-Schichtenspeicher unten
  imageline ($Bild , 192 , 350 , 265 , 350 , $rot );
  imagerectangle ($Bild , 450 , 400 , 650 , 410 , $rot ); //Heizkreisverteiler Vorlauf
  imageline ($Bild , 350 , 350 , 405 , 350 , $rot ); //Linie Schichtenspeicher Heizkreisverteiler Vorlauf
  imageline ($Bild , 415 , 350 , 450 , 350 , $rot ); 
  imageline ($Bild , 450 , 350 , 450 , 400 , $rot ); 
  //Kesseltemperatur Ölkessel
	 imagestring ($Bild , 5 , 100, 300, $TempOelkessel.utf8_decode("°C"), $weiss); //Kesseltemperatur Ölkessel

  // SHT Kaminofen
  imageline ($Bild , 672 , 495 , 685 , 495 , $blau ); //Linie 3-Wegeventil-SHT-Ofen Rücklauf
  imageline ($Bild , 685 , 495 , 685 , 420 , $blau );
  imageline ($Bild , 685 , 420 , 698 , 420 , $blau );
  imageline ($Bild , 590 , 495 , 370 , 495 , $blau ); //Linie 3-Wegeventil-Schichtenspeicher Rücklauf
  imageline ($Bild , 370 , 495 , 370 , 440 , $blau );
  imageline ($Bild , 370 , 440 , 350 , 440 , $blau );
  imageline ($Bild , 698 , 330 , 670 , 330 , $rot );//Linie Vorlauf SHT-Schichtenspeicher
  imageline ($Bild , 670 , 330 , 670 , 460 , $rot );
  imageline ($Bild , 670 , 460 , 410 , 460 , $rot );
  imageline ($Bild , 410 , 460 , 410 , 285 , $rot );
  imageline ($Bild , 410 , 285 , 350 , 285 , $rot );
  imageline ($Bild , 612 , 460 , 612 , 484 , $rot );
  imagestring ($Bild , 5, 690 , 500, round($TempSHTRuecklauf,1).utf8_decode("°C"), $weiss); //SHT-Kessel Rücklauftemperatur
  imagestring ($Bild , 5, 640 , 310, round($TempSHTVorlauf,1).utf8_decode("°C"), $weiss); //SHT-Kessel Vorlauftemperatur

//Temperaturangaben oben rechts im Bild
  imagestring ($Bild , 5, 500 , 50, "Kesseltemperatur SHT: ".round($TempSHTKessel,1).utf8_decode("°C"), $weiss); //SHT-Kessel Rücklauftemperatur
  imagestring ($Bild , 5, 500 , 65, "Abgastemperatur SHT:  ".round($TempSHTAbgas,1).utf8_decode("°C"), $weiss); //SHT-Kessel Rücklauftemperatur


//SHT Ofen Feuer aus
	$values = array(
            734,  388,  // Point 1 (x, y)
            764,  385, // Point 2 (x, y)
            764,  358,  // Point 3 (x, y)
            734, 361,  // Point 4 (x, y)
            734,  388
            );
	if ($SHTOfenAus==TRUE)
		{
		imagefilledpolygon($Bild, $values, 5, $dunkelgrau);
		}

	//Brauchwasser
	imageline($Bild, 475 , 138 , 385 , 138 , $gruen);
	imageline($Bild, 385 , 206 , 385 , 138 , $gruen);
	imageline($Bild, 385 , 245 , 385 , 265 , $gruen);
	imageline($Bild, 385 , 265 , 310 , 265 , $gruen);
	imageline($Bild, 400 , 225 , 430 , 225 , $petrol); //Frischwasser waagerecht zum Mischventil
	imageline($Bild, 430 , 225 , 430 , 345 , $petrol); //Frischwasserleitung senkrecht
	imageline($Bild, 430 , 355 , 430 , 455 , $petrol);
	imageline($Bild, 430 , 465 , 430 , 490 , $petrol);
	imageline($Bild, 430 , 500 , 430 , 510 , $petrol);
	imageline($Bild, 375 , 470 , 430 , 470 , $petrol); //Frischwasserzuleitung (Kaltwasser) zum Durchlauferhitzer
	imageline($Bild, 365 , 470 , 310 , 470 , $petrol);
	imageline($Bild, 320 , 510 , 430 , 510 , $petrol);
  //Vorlauftemperatur Bad
	 imagestring ($Bild , 5 , 400, 120, $TempWarmwasserVorlauf.utf8_decode("°C"), $weiss);
	 imagestring ($Bild , 5 , 400, 240, $TempWarmwasserRuecklauf.utf8_decode("°C"), $weiss);


	//Wellrohr im Schichtenspeicher
	imageline($Bild, 310 , 470 , 310 , 450 , $petrol);
	imageline($Bild, 310 , 450 , 270 , 440 , $petrol);
	imageline($Bild, 270 , 440 , 345 , 420 , $petrol);
	imageline($Bild, 345 , 420 , 270 , 400 , $petrol);
	imageline($Bild, 270 , 400 , 345 , 380 , $petrol);
	imageline($Bild, 345 , 380 , 270 , 360 , $petrol);
	imageline($Bild, 270 , 360 , 345 , 340 , $gruen);
	imageline($Bild, 345 , 340 , 270 , 320 , $gruen);
	imageline($Bild, 270 , 320 , 345 , 300 , $gruen);
	imageline($Bild, 345 , 300 , 310 , 290 , $gruen);
	imageline($Bild, 310 , 290 , 310 , 265 , $gruen);



	//Solarleitungen und Wärmetauscher
	imageline($Bild, 185 , 180 , 240 , 180 , $lila);
	imageline($Bild, 240 , 180 , 240 , 370 , $lila);
	imageline($Bild, 240 , 370 , 275 , 370 , $lila);
	imageline($Bild, 275 , 370 , 320 , 390 , $lila);
	imageline($Bild, 320 , 390 , 275 , 410 , $lila);
	imageline($Bild, 275 , 410 , 320 , 430 , $lila);
	imageline($Bild, 320 , 430 , 275 , 450 , $lila);
	imageline($Bild, 275 , 450 , 220 , 450 , $lila);
	imageline($Bild, 220 , 450 , 220 , 255 , $lila);
	imageline($Bild, 220 , 255 , 140 , 255 , $lila);
	
	
	//Temperaturen Solarkollektor
	$TempKollektorVorlauf=GetValueFloat(10692);
	$TempKollektor=GetValueFloat(22908);
	$Kollektorleistung=GetValueFloat(31837);
	imagestring($Bild, 5, 210, 160, $TempKollektorVorlauf.utf8_decode("°C"), $weiss);
	imagestring($Bild, 5, 80, 190, $TempKollektor.utf8_decode("°C"), $weiss);
	imagestring($Bild, 5, 180, 145, $Kollektorleistung.utf8_decode("kW"), $weiss);




//Farbverlauf Schichtenspeicher
	//Farbdefinitionen (21°C-70°C)
	if ($TempSpeicherOben>70){$TempSpeicherOben=70;}
	if ($TempSpeicherOben<21){$TempSpeicherOben=21;}
	if ($TempSpeicherMitte>70){$TempSpeicherMitte=70;}
	if ($TempSpeicherMitte<21){$TempSpeicherMitte=21;}
	if ($TempSpeicherUnten>70){$TempSpeicherUnten=70;}
	if ($TempSpeicherUnten<21){$TempSpeicherUnten=21;}

	$FarbeSpeicherHex=gradient("FF0000","0000FF",50);
	$rgb=hex2rgb($FarbeSpeicherHex[70-$TempSpeicherOben]);
	$FarbeSpeicherObenHex=$FarbeSpeicherHex[70-$TempSpeicherOben];
	$FarbeSpeicherOben=imagecolorallocatealpha($Bild,$rgb[0],$rgb[1],$rgb[2],65);

	$rgb=hex2rgb($FarbeSpeicherHex[70-$TempSpeicherMitte]);
	$FarbeSpeicherMitteHex=$FarbeSpeicherHex[70-$TempSpeicherMitte];
	$FarbeSpeicherMitte=imagecolorallocate($Bild,$rgb[0],$rgb[1],$rgb[2]);

	$rgb=hex2rgb($FarbeSpeicherHex[70-$TempSpeicherUnten]);
	$FarbeSpeicherUntenHex=$FarbeSpeicherHex[70-$TempSpeicherUnten];
	$FarbeSpeicherUnten=imagecolorallocate($Bild,$rgb[0],$rgb[1],$rgb[2]);

   imagefilledellipse ( $Bild , 308 , 290 , 76 , 10 , $FarbeSpeicherOben );
   imagefilledellipse ( $Bild , 308 , 450 , 76 , 10 , $FarbeSpeicherUnten );



	//Farbverlaufsrechteck
	imagesetthickness ( $Bild , 1 );
	//obere Speicherhälfte
	$gradient=gradient($FarbeSpeicherObenHex, $FarbeSpeicherMitteHex, $steps=80);
	for ($i=0;$i<80;$i++)
	   {
		$rgb=hex2rgb($gradient[$i]);
	   $Zeilenfarbe=imagecolorallocatealpha($Bild,$rgb[0],$rgb[1],$rgb[2],65);
	   imageline($Bild,270,$i+290,346,$i+290,$Zeilenfarbe);
	   }
	//untere Speicherhälfte
	$gradient=gradient($FarbeSpeicherMitteHex, $FarbeSpeicherUntenHex, $steps=80);
	for ($i=0;$i<80;$i++)
	   {
		$rgb=hex2rgb($gradient[$i]);
	   $Zeilenfarbe=imagecolorallocatealpha($Bild,$rgb[0],$rgb[1],$rgb[2],65);
	   imageline($Bild,270,$i+370,346,$i+370,$Zeilenfarbe);
	   }

	//Temperaturen Schichtenspeicher
	imagestring($Bild, 5, 289, 290, $TempSpeicherOben.utf8_decode("°C"), $weiss);
	imagestring($Bild, 5, 289, 370, $TempSpeicherMitte.utf8_decode("°C"), $weiss);
	imagestring($Bild, 5, 289, 440, $TempSpeicherUnten.utf8_decode("°C"), $weiss);

	//Brauchwasser
	imageline($Bild, 475 , 138 , 420 , 138 , $rot);




//Bild speichern
imagepng($Bild, $file);

// Destroy image
imagedestroy($Bild);
IPS_SendMediaEvent(53157);

Gruß Thorsten

erpe · 13. Juni 2022 um 06:59

Hallo Stefan,
ich habe das gerade mit einer Progressbar mit folgenden Einstellungen probiert:

das geht zwar nur mit Integer Variablen, aber die kannst du ja durch deine Boolvariable ändern lassen.

Ergebnis bei 1:

Ergebnis bei 0:

viel Spaß beim Testen

bbernhard · 13. Juni 2022 um 07:25

Ach da hab ich dich missverstanden. Dachte du möchtest farbige Line-Plots.

Wenn du farbige Pfeile nimmst wirds auch recht hübsch.
Richtung und Farbe der Pfeile ändert sich je nach Polarität des Stromes.

Stefan71 · 13. Juni 2022 um 15:09

Hi,
Danke erstmal an euch für die vielen Vorschläge.

@todorb
Oje ich als PHP Profi ist das glaube ich erstmal eine Nummer zu groß für mich das mit dem Skript, werde mir das aber genauer anschauen wenn das Grundgerüst der View steht.

Das mit den Bilder hatte ich mir auch schon gedacht, aber da müsste ich ganz genau wissen wie lange die einzelnen Linien werden, weil wenn ich es ja auf die passende Größe skaliere z.B. wenn die eine Linie nicht richtig lang ist, erhalte ich ja unterschiedliche Dicken bzw. größe der Linienteile

@erpe
Sieht doch schon sehr gut aus auch dieses schauen ich mir genauer an und werde alles durch probieren.

@bbernhard
Kein Problem, hast recht das sieht auch gut aus mit den Pfeilen.

Proxima · 13. Juni 2022 um 17:35

Hallo,

ich habe mir ein paar GIF’s gebaut. Die grauen sind fest in den Hintergrund eingebunden und bei „Stromfluss“ wird mit einer Sichtbarkeits-Variable die grüne Leiste darüber eingeblendet.

Beispiele:

Gruß Proxima

Doctor_Snuggles · 13. Juni 2022 um 18:53

Ich hatte mir auch schon mal so einige aus dem Web geladen, aber so richtig glücklich bin ich damit noch nicht.

Du müsstes jetzt nur noch dazu einen Generator bauen, wo man die Länge, Richtung, Farbe usw. eingeben kann, der dann für jeden die passenden Gifs erstellt?
Wobei ich die Symbole eher lang rechteckig machen würde.

VG,
Doc

todorb · 14. Juni 2022 um 08:10

Hallo Stefan,
die Skalierung ist kein Problem, da die Linien in der Bilddatei gespeichert werden. D.h. es wird in IPS-View (oder dem Web-Front) nur EIN Bild dargestellt.
Gruß
Thorsten

Stefan71 · 14. Juni 2022 um 12:01

Hallo Thorsten,
ich dachte bei der Skalierung das wenn ich die Linien einzeln anlege und der Abstand nicht passt zu den Felder dann werden die unterschiedlich groß. Ich könnte mir aber in Illustrator das Bild abbilden von der View in der Pixelgröße wie die Seite ist und dann darin die Linien anpassen und nachher zerstückeln und speichern, dann müsste das normal auch funktionieren.

LG
Stefan

todorb · 14. Juni 2022 um 20:05

Hallo Stefan,
im Bildbearbeitungsprogramm musst du nur statischen Elemente einmalig platzieren und als gesamtes Hintergrundbild speichern. Die Linien werden dann von dem PHP-Skript auf den Hintergrund gezeichnet, eineige Messwerte eingefügt und das Ganze dann als eine Bilddatei gespeichert.
Gruß Thorsten