openhabforum.de

Moin
Ich hab mich etwas mit SVG und Animation beschäftigt und dabei einige Meßgeräte entworfen :

Ein Template für einen Heizkörperthermostaten mit Sollwert ( Klickbar ), Istwert und Luftfeuchte. Die Sollwertverstellung geschied durch klicken auf den bunten oder den grauen Balken. Die Messwerte kommen aus einer Gruppe

Thermostat.png

Einen animierten Rollenzähler. Funktionioert nur, wenn die Änderung < 3 Stellen ist. Kommastellen und Bezeichnung kommen aus dem Item

Rollenzähler.png

Ein Kombiinstrument für CO2, Temperatur und Luftfeuchte. Der CO2-Messwert wird noch über einen Farbverlauf über dem grauen Balken angezeigt. Die Messwerte kommen aus einer Gruppe

CO2.png

Dazu gibts noch eine animierte Analoguhr
Wenn jemand Interesse hat, stelle ich gerne den Quelltext hier ein. Da alles SVG ist, sind die Dinger frei skalierbar

Hier auch noch die Uhr. Die Zeit wird sekündlich aktualisiert, kann aber auch ohne viel aufwand aus einem Item kommen

Uhr.png

Nice!

Cool!
Ich bin großer Fan von svg. Ich habe einige Dinge ausserhalb von OpenHAB mit php und svg realisiert.
z.B. meine Solaranlagen und auch animierte Zähler.
Mich würde interessieren, wie ich das direkt in OH einbinden kann. Wäre an einem Gedankenaustausch interessiert!
An den Grafiken ist so ziemlich alles animiert:

Sonnenstand_berechnet.gif

Solarthermie.gif

Energiefluss.gif

Bis jetzt läuft es per REST-API und Webbrowser

Zaehler.gif

Wenn Du Lust auf einen Gedankenaustausch hast, melde Dich mal.
Ich hatte bisher nicht die Zeit, das Ganze in OH3 zu implementieren. Muss mich erst in YAML und F7 einlesen.

Moin
Ich dynamisiere auch über die Rest-Schnittstelle. Was anderes hab ich noch nicht gefunden. Allerdings benutze ich noch Openhab 2.5.8, weil ich mit Openhab 2.5.10 Probleme mit dem eBus hatte. Ich hatte mir 3.0 mal angesehen, aber nichts gefunden, was einen Umstieg interessant machen würde.
Zur einbindung :
Ich benutze einen Container um mehrere Anzeigen auch nebeneinander darstellen zu können :

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8"/>
	<script src="script/guinnesutils.js"></script>

    <style>
        .MyKnop3 {
            width:330px;
            height:330px;
        }
        .MyKnop4 {
            width:246px;
            height:246px;
        }
        .Counter3 {
            width:330px;
            height:133px;
        }
        .Counter4 {
            width:246px;
            height:100px;
        }
    </style>

	<script>
	</script>
</head>
<body>
    <iframe class="Counter3" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 
    <iframe class="Counter3" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 
    <iframe class="Counter3" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 

    <iframe class="Counter4" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 
    <iframe class="Counter4" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 
    <iframe class="Counter4" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 
    <iframe class="Counter4" src="Template Zählwerk.html?Item=Gas_Counter_m3" ></iframe> 

    <iframe class="MyKnop3" src="Template Uhr.html" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop3" src="Template CO2.html?group=gKL_AZ&room=Arbeitszimmer" title="Test Thermo" ></iframe> 

    <iframe class="MyKnop3" src="Template HRT.html?group=gHZ_KI&room=Kino" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop4" src="Template HRT.html?group=gHZ_AZ&room=Arbeitszimmer" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop4" src="Template HRT.html?group=gHZ_SZ&room=Schlafzimmer" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop4" src="Template HRT.html?group=gHZ_BAD&room=Bad" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop4" src="Template HRT.html?group=gHZ_WZ1&room=Wohnzimmer 1" title="Test Thermo" ></iframe> 
    <iframe class="MyKnop4" src="Template HRT.html?group=gHZ_WZ2&room=Wohnzimmer 2" title="Test Thermo" ></iframe> 

    <script>
        AdjustIFrames();
	</script>			  
</body>
</html>

Diesen Container binde ich einfach als Webview in die Sitemap ein.

p.s. Deine Bilder finde ich echt super, so würd ich das nicht hinkriegen. Danke für ein paar Ideen für meine eigene Darstellung

violine21 hat geschrieben: ↑13. Feb 2021 11:58 Cool!
Ich bin großer Fan von svg. Ich habe einige Dinge ausserhalb von OpenHAB mit php und svg realisiert.
z.B. meine Solaranlagen und auch animierte Zähler.

Das sieht ja MEGA aus (um Herrn B. mal zu zitieren) Dies würde ich auch Mega gerne bei mir einbinden, aber da bin ich noch jünger als Jungfrau.
Ist dies extrem aufwendig oder mit etwas Grundverständnis zu realisieren??

Plane gerade mein PV auf dem Dach mit weiteren Module auf der Garage zu erweitern, zzgl. Batterie im Keller und Wallbox in der Garage.
Da passt das Bild wie die Faust auf ein Auge.

Wäre an einem Beispiel interessiert um mir mal den Aufwand anschauen zu können

Hallo,
ich stell den Code von der Photovoltaik erst mal hier rein.

Auf dem Visu-Rechner müssen bestimmte Vorraussetzungen geschaffen sein (Webserver) aber das ist kein Hexenwerk.
Eine Datenbankabfrage ist auch dabei. Die einzelnen Symbole sind als Datei in einem Ordner abgelegt. Sie können aber auch frei skalierbar
in die svg-Datei integriert werden. Das sind dann aber unendliche Zahlen/Buchstabenkolonnen, was es mir unübersichtlich macht.
Aber ich stelle die Visu immer auf dem selben Rechner dar, da spielt das keine Rolle. Kann ich aber jederzeit ändern.

Mein großes Ziel ist es, alle Darstellungen vereint in OH3 zu haben. Die neue Art der UI mit ihren Kacheln und Widgets gefällt mir super.

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="refresh" content="30; URL=anlagenschema_energie.php">
</head>
<body>


 <?php
 
// Farbdefinitionen
$gelb = "#FFFF00";
$gold = "#FFD700";
$rot = "#FF0000";
$gruen_1 = "#00FF00";
$gruen_2 = "#00EE00";
$gruen_3 = "#00CD00";
$gruen_4 = "#008B00";
$gruen_5 = "#228B22";
$gruen = "#00FF00";
$waldgruen = "#228B22";
$blau = "#0000FF";
$cyan = "#00FFFF";
$weiss = "#FFFFFF";
$pink = "#FFC0CB";
$orange = "#FFA500";
$magenta = "#FF00FF";
$braun = "#A52A2A";
$grau = "#BEBEBE";
$schwarz = "#000000";

include ("db_connect_oh.php");

$kWh_kWp = "SELECT MAX(`Value`) FROM `Item10` WHERE `Time` LIKE '2020-%'";
foreach ($db_pdo->query($kWh_kWp) as $row) {
  $data1 = $row;
}
$ausbeute_kWp = number_format(($data1[0] * 1000) / 6.08, 0, ',', '');



//Richtung
//from="1" to="100"
//from="100" to="1"
$ip_OH = "http://XXX.XXX.XXX.XXX:8080";

$adresse = $ip_OH."/rest/items/Einspeisung/state";
$antwort = file_get_contents($adresse);
$einspeisung = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/AC_Powery/state";
$antwort = file_get_contents($adresse);
$AC_Powery = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/Wirkleistung/state";
$antwort = file_get_contents($adresse);
$Wirkleistung = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/Varta_Restzeit/state";
$antwort = file_get_contents($adresse);
$Varta_Restzeit = number_format($antwort, 1, ',', '');

if ($Wirkleistung < 0){
$Varta_Uhrzeit = "Reichweite: ".date("d.m.Y H:i", (time() + (intval($Varta_Restzeit) * 60 * 60)));
}
if ($Wirkleistung == 0){
  $Varta_Uhrzeit = "";
}
if ($Wirkleistung > 0){
  $Varta_Uhrzeit = "";
}

$adresse = $ip_OH."/rest/items/P_Netz/state";
$antwort = file_get_contents($adresse);
$P_Netz = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/Varta_SOC/state";
$antwort = file_get_contents($adresse);
$Varta_SOC = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/Hausverbrauch/state";
$antwort = file_get_contents($adresse);
$Hausverbrauch = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/svg_Solarthermieleistung/state";
$antwort = file_get_contents($adresse);
$Solarthermieleistung = number_format($antwort, 0, ',', '');

$adresse = $ip_OH."/rest/items/SEM_1_Meter1CurrentWatts/state";
$antwort = file_get_contents($adresse);
$Geschirrspueler_Verbrauch = str_replace(".", ",", $antwort);
$Geschirrspueler_Verbrauch = str_replace(" W", "", $Geschirrspueler_Verbrauch);
$Geschirrspueler_Verbrauch = str_replace("-", "", $Geschirrspueler_Verbrauch);

$adresse = $ip_OH."/rest/items/SEM_2_Meter1CurrentWatts/state";
$antwort = file_get_contents($adresse);
$Waschmaschine_Verbrauch = str_replace(".", ",", $antwort);
$Waschmaschine_Verbrauch = str_replace(" W", "", $Waschmaschine_Verbrauch);
$Waschmaschine_Verbrauch = str_replace("-", "", $Waschmaschine_Verbrauch);

$adresse = $ip_OH."/rest/items/SRelais_A4_RelayOutput/state";
$antwort = file_get_contents($adresse);
$fhz_bad = $antwort;

if ($fhz_bad == "ON"){
  $fhz_bad_vis = "visible";
}
if ($fhz_bad == "OFF"){
  $fhz_bad_vis = "hidden";
}

$adresse = $ip_OH."/rest/items/virtual_UVR_Broetje_oben/state";
$Broetje_oben = file_get_contents($adresse);

$adresse = $ip_OH."/rest/items/virtual_UVR_Broetje_unten/state";
$Broetje_unten = file_get_contents($adresse);

$adresse = $ip_OH."/rest/items/virtual_UVR_Viessmanntemperatur/state";
$Viessmann = file_get_contents($adresse);

$adresse = $ip_OH."/rest/items/virtual_UVR_Kollektortemperatur/state";
$Kollektortemperatur = file_get_contents($adresse);

$adresse = $ip_OH."/rest/items/Wetterstation1ACTUALTEMPERATURE/state";
$Aussentemperatur = file_get_contents($adresse);

$solarpumpe = $gold;
$pumpendrz = 0.5;
$pumpendrz = $AC_Powery / 50;

//min = 0 W
//min = 20
//max = 6000 W
//max = 3
//Tempo = Eingangswert * ((3-20) / (6000-0)) + 20

//<!-- Photovoltaik >>> Haus -->
$tempo_1 = round($AC_Powery * ((3 - 20) / (6000 - 0)) + 20);
if ($AC_Powery > 0){
    $linie_pv_animate_a = "100";
    $linie_pv_animate_b = "1";
    $linie_pv_farbe = $gruen;
    $linie_pv_dicke = 0.75;
    $linie_pv_strichform = 2;
    $linie_pv_tempo = $tempo_1;    
}
if ($AC_Powery == 0){
    $linie_pv_animate_a = "1";
    $linie_pv_animate_b = "1";
    $linie_pv_farbe = $grau;
    $linie_pv_dicke = 0.75;
    $linie_pv_strichform = "none";
    $linie_pv_tempo = 0;    
}


//<!-- Haus >>> Akku -->
$tempo_2 = round($Wirkleistung * ((3 - 20) / (2200 - 0)) + 20);
if ($Wirkleistung > 0){
    $linie_akku_animate_a = "100";
    $linie_akku_animate_b = "1";
    $linie_akku_farbe = $gruen;
    $linie_akku_dicke = 0.75;
    $linie_akku_strichform = 2;
    $linie_akku_tempo = $tempo_2;
}
if ($Wirkleistung == 0){
    $linie_akku_animate_a = "1";
    $linie_akku_animate_b = "1";
    $linie_akku_farbe = $grau;
    $linie_akku_dicke = 0.75;
    $linie_akku_strichform = "none";
    $linie_akku_tempo = 0;
}
if ($Wirkleistung < 0){
    $linie_akku_animate_a = "1";
    $linie_akku_animate_b = "100";
    $linie_akku_farbe = $rot;
    $linie_akku_dicke = 0.75;
    $linie_akku_strichform = 2;
    $linie_akku_tempo = $tempo_2;
    $Wirkleistung = $Wirkleistung * (-1);
}


//<!-- Haus >>> Netz -->
$tempo_3 = round($P_Netz * ((3 - 20) / (6000 - 0)) + 20);
if ($P_Netz > 0){
    $linie_netz_animate_a = "1";
    $linie_netz_animate_b = "100";
    $linie_netz_farbe = $gruen;
    $linie_netz_dicke = 0.75;
    $linie_netz_strichform = 2;
    $linie_netz_tempo = $tempo_3;
}
if ($P_Netz == 0){
    $linie_netz_animate_a = "1";
    $linie_netz_animate_b = "1";
    $linie_netz_farbe = $orange;
    $linie_netz_dicke = 0.75;
    $linie_netz_strichform = "none";
    $linie_netz_tempo = 0;
}
if ($P_Netz < 0){
    $linie_netz_animate_a = "100";
    $linie_netz_animate_b = "1";
    $linie_netz_farbe = $rot;
    $linie_netz_dicke = 0.75;
    $linie_netz_strichform = 2;
    $linie_netz_tempo = $tempo_3;
    $P_Netz = $P_Netz * (-1);
}
 

//<!-- Solarthermie >>> Haus -->
$tempo_4 = round($Solarthermieleistung * ((3 - 20) / (6000 - 0)) + 20);
if ($Solarthermieleistung > 0){
    $linie_st_animate_a = "1";
    $linie_st_animate_b = "100";
    $linie_st_farbe = $gold;
    $linie_st_dicke = 0.75;
    $linie_st_strichform = 2;
    $linie_st_tempo = $tempo_4;
}
if ($Solarthermieleistung == 0){
    $linie_st_animate_a = "1";
    $linie_st_animate_b = "1";
    $linie_st_farbe = $grau;
    $linie_st_dicke = 0.75;
    $linie_st_strichform = "none";
    $linie_st_tempo = 0;
}


//<!-- Haus >>> Waschmaschine -->
if ($Waschmaschine_Verbrauch != "0,0"){
    $linie_wm_animate_a = "100";
    $linie_wm_animate_b = "1";
    $linie_wm_farbe = $blau;
    $linie_wm_dicke = 0.75;
    $linie_wm_strichform = 2;
    $linie_wm_tempo = 10;    
} else {
    $linie_wm_animate_a = "1";
    $linie_wm_animate_b = "1";
    $linie_wm_farbe = $grau;
    $linie_wm_dicke = 0.75;
    $linie_wm_strichform = "none";
    $linie_wm_tempo = 0;    
}


//<!-- Haus >>> Geschirrspueler -->
if ($Geschirrspueler_Verbrauch != "0,0"){
    $linie_gsp_animate_a = "100";
    $linie_gsp_animate_b = "1";
    $linie_gsp_farbe = $blau;
    $linie_gsp_dicke = 0.75;
    $linie_gsp_strichform = 2;
    $linie_gsp_tempo = 10;    
} else {
    $linie_gsp_animate_a = "1";
    $linie_gsp_animate_b = "1";
    $linie_gsp_farbe = $grau;
    $linie_gsp_dicke = 0.75;
    $linie_gsp_strichform = "none";
    $linie_gsp_tempo = 0;    
}


$sichtbar = "visible";
//$sichtbar = "hidden";



echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>";
?>
<!-- ENDE php-Teil -->
<!----------------------------------------------------------------------------->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="800"
   height="800"
   viewBox="0 0 105.83333 105.83334"
   version="1.1"
   id="svg8"
   inkscape:version="0.91 r13725"
   sodipodi:docname="visu.svg">

  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="360.10208"
     inkscape:cy="219.61911"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="true"
     units="px"
     showguides="false"
     inkscape:window-width="1680"
     inkscape:window-height="998"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1">
    <inkscape:grid
       type="xygrid"
       id="grid4485" />
  </sodipodi:namedview>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>

  
<!-- Energiefluss -->
<!-- Haus -->
<text x="66" y="60" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="start"><?php echo $Hausverbrauch." W"?></text>

<!-- Photovoltaik >>> Haus -->
<polyline
  points="53,20 53,48"
  id="visu_photovoltaik"
  style=" stroke: <?php echo $linie_pv_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_pv_dicke?>;
          stroke-dasharray: <?php echo $linie_pv_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_pv_animate_a?>" to="<?php echo $linie_pv_animate_b?>"
              dur="<?php echo $linie_pv_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="50" y="36" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="end"><?php echo $AC_Powery." W"?></text>
<text x="5" y="5" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="start"><?php echo "2020: ".number_format(($data1[0] * 1000), 0, ',', '')." kWh (".$ausbeute_kWp." kWh/kWp)"?></text>


<!-- Haus >>> Akku -->
<polyline
  points="53,60 53,90"
  id="visu_akku"
  style=" stroke: <?php echo $linie_akku_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_akku_dicke?>;
          stroke-dasharray: <?php echo $linie_akku_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_akku_animate_a?>" to="<?php echo $linie_akku_animate_b?>"
              dur="<?php echo $linie_akku_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="50" y="77" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="end"><?php echo $Wirkleistung." W"?></text>
<text x="44" y="94" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="end"><?php echo $Varta_SOC." %"?></text>
<text x="44" y="97" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="end"><?php echo $Varta_Uhrzeit?></text>

<!-- Haus >>> Netz -->
<polyline
  points="18,56 44,56"
  id="visu_netz"
  style=" stroke: <?php echo $linie_netz_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_netz_dicke?>;
          stroke-dasharray: <?php echo $linie_netz_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_netz_animate_a?>" to="<?php echo $linie_netz_animate_b?>"
              dur="<?php echo $linie_netz_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="28" y="61" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="start"><?php echo $P_Netz." W"?></text>

<!-- Solarthermie >>> Haus -->
<polyline
  points="54,56 77,31"
  id="visu_solarthermie"
  style=" stroke: <?php echo $linie_st_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_st_dicke?>;
          stroke-dasharray: <?php echo $linie_st_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_st_animate_a?>" to="<?php echo $linie_st_animate_b?>"
              dur="<?php echo $linie_st_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="68" y="46" style="fill:black; font-weight:standard; font-size:2.5px"; font-family="sans-serif"; text-anchor="start"><?php echo $Solarthermieleistung." W"?></text>
<text x="84" y="46" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Broetje_oben?></text>
<text x="84" y="49" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Broetje_unten?></text>
<text x="92" y="46" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Viessmann?></text>
<text x="82" y="28" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Kollektortemperatur?></text>


<!-- Haus >>> Waschmaschine -->
<polyline
  points="53,60 76,74"
  id="visu_waschmaschine"
  style=" stroke: <?php echo $linie_wm_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_wm_dicke?>;
          stroke-dasharray: <?php echo $linie_wm_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_wm_animate_a?>" to="<?php echo $linie_wm_animate_b?>"
              dur="<?php echo $linie_wm_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="83" y="76" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Waschmaschine_Verbrauch." W"?></text>



<!-- Haus >>> Geschirrspueler -->
<polyline
  points="53,60 70,80"
  id="visu_geschirrspueler"
  style=" stroke: <?php echo $linie_gsp_farbe?>;
          fill: none;
          stroke-width: <?php echo $linie_gsp_dicke?>;
          stroke-dasharray: <?php echo $linie_gsp_strichform?>;
          stroke-dashoffset: "0">
            <animate
              attributeName="stroke-dashoffset"       
              from="<?php echo $linie_gsp_animate_a?>" to="<?php echo $linie_gsp_animate_b?>"
              dur="<?php echo $linie_gsp_tempo?>s"
              repeatCount="indefinite"
              />
</polyline>
<text x="76" y="86" style="fill:black; visibility:visible; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start"><?php echo $Geschirrspueler_Verbrauch." W"?></text>



<!-- Haus -->
<image
    id="visu_haus" 
    x="42px"
    y="38px"
    width="24px"
    height="34px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/solarhaus.gif">
</image>
<a href="weiterleitung.php?datei='Auswertungen/diagramm_aussentemperatur.php'">
<text x="42" y="48" style="fill:black; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="end"><?php echo $Aussentemperatur?></text>
</a>


<!-- Sonne -->
<image
    id="visu_sonne" 
    x="45px"
    y="10px"
    width="16px"
    height="16px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/sonne_1.gif">
</image>


<!-- Batterie -->
<a href="weiterleitung.php?datei='Auswertungen/diagramm_batterieverlauf.php'">
<image
    id="visu_batterie" 
    x="45px"
    y="87px"
    width="16px"
    height="16px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/Batterie.gif">
</image>


<!-- Strommast -->
<image
    id="visu_strommast" 
    x="8px"
    y="46px"
    width="16px"
    height="16px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/strommast.gif">
</image>


<!-- Solarthermie -->
<image
    id="visu_solarthermie" 
    x="70px"
    y="26px"
    width="16px"
    height="16px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/therm_kollektor.gif">
</image>


<!-- Waschmaschine -->
<image
    id="visu_waschmaschine" 
    x="72px"
    y="68px"
    width="10px"
    height="10px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/waschmaschine.gif">
</image>


<!-- Spuelmaschine -->
<image
    id="visu_spuelmaschine" 
    x="64px"
    y="79px"
    width="11px"
    height="11px"
    visibility="<?php echo $sichtbar?>"
    xlink:href="img/spuelmaschine.gif">
</image>


<!-- FHZ Bad -->
<image
    id="visu_fhz_bad" 
    x="79px"
    y="59px"
    width="6px"
    height="6px"
    visibility="<?php echo $fhz_bad_vis?>"
    xlink:href="img/fussbodenheizung_1.gif">
</image>
<text x="78" y="58" style="fill:black; visibility:<?php echo $fhz_bad_vis?>; font-weight:standard; font-size:2px"; font-family="sans-serif"; text-anchor="start">FHZ Bad</text>

 

       
</svg>
</body>
</html>

violine21 hat geschrieben: ↑13. Feb 2021 18:33 Hallo,
ich stell den Code von der Photovoltaik erst mal hier rein.

Der Code erscheint mir ziemlich lang für 13 Messwerte.
Schon mal daran gedacht, die Items der Messwerte in eine Gruppe zu packen ? Dann kannst die in einem Rutsch ( mit nur einer REST-Abfrage ) holen ?
Das würde me Menge Code sparen

guinnes hat geschrieben: ↑13. Feb 2021 19:15
violine21 hat geschrieben: ↑13. Feb 2021 18:33 Hallo,
ich stell den Code von der Photovoltaik erst mal hier rein.
Der Code erscheint mir ziemlich lang für 13 Messwerte.
Schon mal daran gedacht, die Items der Messwerte in eine Gruppe zu packen ? Dann kannst die in einem Rutsch ( mit nur einer REST-Abfrage ) holen ?
Das würde me Menge Code sparen

Ja. Du hast absolut recht. Das System ist gewachsen, d.h. ich habe ohne viel Erfahrung mit einem Item angefangen und dann die Visu Stück für Stück erweitert. Beim Seiten-Refresh fällt die Abfrage nicht auf, keine Ahnung, wie lange es dauert.
Möglichkeiten der Optimierung gibt es immer.
Als es dann fertig war, habe ich es aus Zeitgründen so gelassen.
Ich habe ein System gesucht, welches alle meine Geräte implementieren kann und mir dann die Werte zur Verfügung stellt.
Das war dann mein Start mit OpenHAB 2.
Alle anderen Visualisierungen (Solarthermie, Sonnenstand) basieren auf simplen http-Webabfragen.
Das ging mit den PV-Geräten nicht. Mittlerweile ist auch die Solarthermie in OH2 integriert aber die Visu läuft immer noch per http-Request.

Jetzt wo OH3 draussen ist, will ich alles noch einmal neu anfassen und alte Fehler (ja, man bringt sich manche Dinge auch falsch bei) ausbügeln.
Die neue Art der UI-Konfiguration finde ich super, leider fehlt mir die Zeit, mich intensiv damit zu beschäftigen.

Alles fing 2014 mit der Solarthermie an. Hätte mir einer gesagt, das ich mich irgendwann mit Web-Programmierung
und undokumentierten Schnittstellen herumschlage, ich glaube, ich hätte nur mit dem Kopf geschüttelt.
Mit den kleinen Erfolgen kam die Lust auf mehr.

openhabforum.de

Gauges

Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges

Re: Gauges