FHEM mit bunten Bildern

kvo1 · 06 April 2015, 12:06:21

Hallo pah,

hmmm, entweder stell ich mich zu doof an, oder es hängt doch noch irgendwo ?

Ich habe den angegebenen Code an allen 3 Stellen ersetzt !.

Ergebnis:
p2=333.0 geht
p2=333 geht nicht
p2=rawValue geht auch nicht

schönes Restostern !
kvo1

Prof. Dr. Peter Henning · 06 April 2015, 12:58:49

OK, anderer Ansatz für den regulären Ausdruck: /[\.\d]*/

LG

pah

kvo1 · 06 April 2015, 15:04:45

geht leider garnicht

habe es zunächst auf /\d*\.+\d*/ zurück geändert !

Reinhart · 09 Juni 2015, 17:07:00

Fhem mit bunten Bildern ist eine tolle Sache und pah hat uns hier ein tolles Beispiel gegeben!

Da pah ja schon das Thermometer vorbereitet hat, habe ich es nun für mich ausgebaut um die Wassertemperatur des Pools darzustellen. Sie he dazu das angehängte Bild.
Es funktionieren ebenfalls nur die 3 Farben (red, green, blue), wobei beim Thermometer "Blue" den meisten Sinn macht.

Der Aufruf sieht z.B. so aus:

Code Auswählen

attr PoolWasser stateFormat <embed src='fhem/SVGX_widget?type=thermometer&subtype=blue&dev=CUL_HM 268735&size=200x240&p1=temperature&s1=35.0&p2=temperature&s2=1 °C&p3=Wassertemperatur'/>

Die Übergabeparameter entsprechen der Beschreibung von pah. Die Thermometeransicht muss mit Typ "thermometer" angegeben werden.

Ebenfalls hänge ich den erweiterten ursprünglichen Code hier an. Neu ist alles ab dieser Zeile: elsif($type eq 'thermometer'){

Code Auswählen

sub SVGX_widget($)
{
  my ($arg) = @_;
  my $type = $FW_webArgs{type};
  my $subtype = $FW_webArgs{subtype};
  
  my @size=split('x',($FW_webArgs{size} ? $FW_webArgs{size} : 320x240));
  #Log 1,"++++++++++++++++++++++++++++++++++++++++++++";
  #Log 1,"SVGX_widget type $type (subtype $subtype) called with $arg";
  #Log 1,"SVG Plotmode is ".AttrVal($FW_wname, "plotmode", "SVG");
  #Log 1,"SVGX_widget has size ".$size[0]."x".$size[1];
  #Log 1,"++++++++++++++++++++++++++++++++++++++++++++";
  
  $FW_RETTYPE = "image/svg+xml";
  $FW_RET="";
  FW_pO '<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 320 200" width="'.$size[0].'px" height="'.$size[1].'px">';

if( $type eq 'bar' ){
    #
    # Horizontal color bar
    #
    #  ---------------
    # | |    | |    | | 
    #  ---------------
    #
    # 16           264
    # three parameters w. scale
    # p1 = interior display value - either as "reading" name or as number
    #      if it is given as "reading" name, a dev parameter must be given
    # s1 = scale, consisting of max. value and unit e.g.: 35.0 kWh
    # p2 = exterior display value - either as "reading" name or as number
    # s2 = scale, consisting of (ignored) number and unit, e.g.: 1 kW
    # p3 = lower bottom label

    my $p1 = $FW_webArgs{p1};
    my $raw1;
    if( $p1 =~ /\d*\.\d*/ ){
      $raw1 = $p1;
    } else {
      $raw1 = ReadingsVal($FW_webArgs{dev},$p1,0);
    }
    my @s1 = split(' ',$FW_webArgs{s1}); 
 
    my $p2 = $FW_webArgs{p2};
    my $raw2;
    if( $p2 =~ /\d*\.\d*/ ){
      $raw2 = $p2;
    } else {
      $raw2 = ReadingsVal($FW_webArgs{dev},$p2,0);
    }
    my @s2 = split(' ',$FW_webArgs{s2});

    #-- scaling
    my $val1 = int($raw1/$s1[0]*248+16);
  
    FW_pO '<defs>';
    #-- white - snow4
    FW_pO '<linearGradient id="grad0" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:white;stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(139, 137, 137);stop-opacity:1"/></linearGradient>';
    if( $subtype eq 'red'){
      #-- lightsalmon/red and lightsalmon/lightsalmon3
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:red;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 255, 140, 105);stop-opacity:1"/></linearGradient>';
   }elsif( $subtype eq 'green'){
      #-- chartreuse/green and chartreuse/chartreuse3 
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 127,255, 0);stop-opacity:1"/><stop offset="100%" style="stop-color:green;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 127,255, 0);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 102, 205, 0);stop-opacity:1"/></linearGradient>';
    }elsif( $subtype eq 'blue'){
      #-- cyan/blue and cyan/cyan3
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:cyan;stop-opacity:1"/><stop offset="100%" style="stop-color:blue;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:cyan;stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 0, 205, 205);stop-opacity:1"/></linearGradient>';
    }
    #-- colored shadow 1 / 2 pixel
    FW_pO '<filter id="cshadow1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0.9 0.9 0.9 0.4 0" /><feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>';
    FW_pO '<filter id="cshadow2" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" /><feColorMatrix result="matrixOut" in="offOut" type="saturate" values="0.2" /><feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>';
    FW_pO '</defs>';
   
    FW_pO '<g><g transform="translate(0,45)">';
    FW_pO '<rect x="16" y="5" width="40" height="80" rx="20" ry="40" fill="url(#grad0)"/>';
    FW_pO '<rect x="264" y="5" width="40" height="80" rx="20" ry="40" fill="rgb(255,250,250)"/>';
    FW_pO sprintf('<rect x="16" y="5" width="%d" height="80" rx="20" ry="40" fill="url(#grad1)"/>',$val1+20);
    FW_pO sprintf('<rect x="%d" y="5" width="40" height="80" rx="20" ry="40" fill="url(#grad2)"/>',$val1);
    FW_pO '<rect x="264" y="5" width="40" height="80" rx="20" ry="40" fill="none" stroke="rgb(139, 137, 137)" stroke-width="2"/>';
    FW_pO '<rect x="16" y="5" width="288" height="80" rx="20" ry="40" fill="none" stroke="rgb(139, 137, 137)" stroke-width="2"/>';
    #-- label
    FW_pO sprintf('<text x="150" y="52" fill="rgb(75, 75, 75)" style="filter:url(#cshadow1);font-size:24px;font-weight:bold">%5.2f %s</text>',$raw1,$s1[1]);
    FW_pO '</g>';
    FW_pO sprintf('<text x="30" y="40" fill="blue" style="filter:url(#cshadow2);font-family:Helvetica;font-size:32px;font-weight:bold">%5.2f %s</text>',$raw2,$s2[1]);
    FW_pO sprintf('<text x="16" y="160" fill="rgb(75, 75, 75)" style="filter:url(#cshadow1);font-family:Helvetica;font-size:24px;font-weight:bold">%s</text>',$FW_webArgs{p3});
    FW_pO '</g>';

  }elsif($type eq 'thermometer'){
    #
    # Vertical Color thermometer
    #
    #    || 
    #    ||  
    #    || 
    #   |__|
    # 
    # 16           264
    # three parameters w. scale
    # p1 = interior display value - either as "reading" name or as number
    #      if it is given as "reading" name, a dev parameter must be given
    # s1 = scale, consisting of max. value and unit e.g.: 35.0 Grad
    # p2 = exterior display value - either as "reading" name or as number
    # s2 = scale, consisting of (ignored) number and unit, e.g.: 1 Grad
    # p3 = lower bottom Label

    my $p1 = $FW_webArgs{p1};
    my $raw1;
    if( $p1 =~ /\d*\.+\d*/ ){
      $raw1 = $p1;
    } else {
      $raw1 = ReadingsVal($FW_webArgs{dev},$p1,0);
    }
    my @s1 = split(' ',$FW_webArgs{s1}); 
 
    my $p2 = $FW_webArgs{p2};
    my $raw2;
    if( $p2 =~ /\d*\.+\d*/ ){
      $raw2 = $p2;
    } else {
      $raw2 = ReadingsVal($FW_webArgs{dev},$p2,0);
    }
    my @s2 = split(' ',$FW_webArgs{s2});

    #-- scaling
    my $val1 = int($raw1/$s1[0]*195+16);
    FW_pO '<defs>';

    #-- white - snow4
    FW_pO '<linearGradient id="grad0" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:white;stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(139, 137, 137);stop-opacity:1"/></linearGradient>';
    if( $subtype eq 'red'){
      #-- lightsalmon/red and lightsalmon/lightsalmon3
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:red;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 255, 140, 105);stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 0, 0);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 205, 0, 0);stop-opacity:1"/></linearGradient>';
   }elsif( $subtype eq 'green'){
      #-- chartreuse/green and chartreuse/chartreuse3 
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 127,255, 0);stop-opacity:1"/><stop offset="100%" style="stop-color:green;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 127,255, 0);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 102, 205, 0);stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 50, 205, 50);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 0, 100, 0);stop-opacity:1"/></linearGradient>';
    }elsif( $subtype eq 'blue'){
      #-- cyan/blue and cyan/cyan3
      FW_pO '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:blue;stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 255, 192, 188);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 0, 0, 139);stop-opacity:1"/></linearGradient>';
      FW_pO '<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb( 0, 0, 255);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb( 0, 0, 139);stop-opacity:1"/></linearGradient>';
    }
    #-- colored shadow 1 / 2 pixel
    FW_pO '<filter id="cshadow1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0.9 0.9 0.9 0.4 0" /><feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>';
    FW_pO '<filter id="cshadow2" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" /><feColorMatrix result="matrixOut" in="offOut" type="saturate" values="0.2" /><feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>';
    FW_pO '</defs>';
    FW_pO '<g><g transform="translate(0,45)">';

    # untere Thermometer Kugel
    FW_pO '<rect x="39" y="188" width="80" height="60" rx="80" ry="20" fill="url(#grad3)" stroke="rgb(161,161,161)" stroke-width="1"/>';

    # Thermometersäule
    FW_pO '<rect x="60" y="1" width="40" height="210" rx="40" ry="20" fill="none" stroke="rgb(161,161,161)" stroke-width="2"/>';

    # untere Fläche
    #FW_pO '<rect x="60" y="190" width="40" height="20" rx="40" ry="20" fill="url(#grad0)"/>';
    # obere Fläche
    #FW_pO '<rect x="60" y="1" width="40" height="20" rx="40" ry="20" fill="rgb(255,250,250)"/>';

    FW_pO sprintf('<rect x="60" y="%d" width="40" height="%d" rx="40" ry="20" fill="url(#grad1)"/>',211-$val1,$val1);

    #-- label
    FW_pO sprintf('<text x="52" y="235" fill="rgb(75, 75, 75)" style="filter:url(#cshadow1);font-size:28px;font-weight:bold">%5.1f %s</text>',$raw1,$s1[1]);

    # Beschriftung Max.  
    FW_pO sprintf('<text x="10" y="7" fill="rgb(75, 75, 75)" style="font-size:28px;font-weight:bold">%.2i --------%.2i</text>',$s1[0],$s1[0]);

    FW_pO sprintf('<text x="10" y="54" fill="rgb(75, 75, 75)" style="font-size:28px;font-weight:bold">%.2i --------%.2i</text>',$s1[0]/1.33,$s1[0]/1.33);

    FW_pO sprintf('<text x="10" y="102" fill="rgb(75, 75, 75)" style="font-size:28px;font-weight:bold">%.2i --------%.2i</text>',$s1[0]/2,$s1[0]/2);

    FW_pO sprintf('<text x="10" y="151" fill="rgb(75, 75, 75)" style="font-size:28px;font-weight:bold">%.2i --------%.2i</text>',$s1[0]/4,$s1[0]/4);

    FW_pO '</g>';
    FW_pO sprintf('<text x="30" y="5" fill="orange" style="filter:url(#cshadow1);font-family:Helvetica;font-size:32px;font-weight:bold">%5.1f %s</text>',$raw2,$s2[1]);

    # Beschriftung Text
    #FW_pO sprintf('<text x="76" y="160" fill="rgb(75, 75, 75)" style="filter:url(#cshadow1);font-family:Helvetica;font-size:28px;font-weight:bold">%s</text>',$FW_webArgs{p3});
FW_pO '</g>';
}
  FW_pO '</svg>';
  return ($FW_RETTYPE, $FW_RET);

Zurzeit funktionieren keine negativen Werte (also s2 ab -10 Grad) da ich das für die Darstellung der Pooltemperatur nicht benötige. Wenn ich Zeit habe werde ich mir das auch noch anschauen, wenn es auch wegen der Beschriftung etwas aufwändiger ist.

Vielleicht kann es wer für seine Implementation in FHEM gebrauchen.

LG
Reinhart

Code geändert am 09.06 um 18:10 wegen Fehler im Firefox.

kvo1 · 09 Juni 2015, 17:26:55

Hallo Reinhart,

Danke für das tolle Beispiel , sieht cool aus!
Ich glaube ich muss hier auch nochmal neu aufsetzen , das hat bei mir bisher noch nicht funktioniert.
Liegt aber wohl an mir

klaus

Reinhart · 09 Juni 2015, 18:05:44

Hallo kvo1!

Zitat von: kvo1 am 09 Juni 2015, 17:26:55
Hallo Reinhart,

Danke für das tolle Beispiel , sieht cool aus!
Ich glaube ich muss hier auch nochmal neu aufsetzen , das hat bei mir bisher noch nicht funktioniert.
Liegt aber wohl an mir

klaus

Ich glaube nicht, das es an dir liegt!
Während ich den Code erweitert habe, hatte ich ähnliche Fehler wie du erwähnt hast. Das passierte jedes Mal wenn ich mit den Size Parametern herumgedreht habe. Einmal war kein Bild da und bei Änderung der Werte war es plötzlich wieder da.
Wenn du experimentieren willst, nimm vorher meine Einstellungen, mit denen passt alles soweit. Getestet habe ich mit IE11 (unter Win8.1 und Win10). Bei Firefox bekomme ich derzeit noch einen "XML Verarbeitungsfehler", da scheint ein fehlender Tag noch wo zu sein, meckert er zumindest so an.

LG
Reinhart

PS: den Firefoxfehler habe ich soeben im obigem Code um 18:10 gefixt. Es war die 4 vorletzte Zeile, die fehlte.

kvo1 · 09 Juni 2015, 20:11:48

Danke nochmal für den Hinweis !

klaus

Prof. Dr. Peter Henning · 09 Juni 2015, 20:36:27

Freut mich, dass das läuft - ich habe im Moment leider gatr keine Zeit, das zu testen.

Tipp zur Vermeidung von XML-Problemen: Richtigen Editor verwenden. oXygen XML bietet eine kostenlose Lizenz für 4 Wochen.

LG

pah

Reinhart · 10 Juni 2015, 11:58:11

@pah

Danke für den Hinweis, ich mach prinzipiell alles mit PSPad, außer bei FHEM, da nutze ich immer den integrierten Editor weil es per Webif einfacher zu handhaben ist.

Die Probleme die ich bei Firefox bemerkte waren aber typische Copy & Paste direkt aus dem Forum.

Ich staune immer wieder welche Ideen dir da so einfallen und vor allem wie elegant du die umsetzt. Hinterher was zu erweitern ist einfach wenn der Grundstock schon steht.

LG
Reinhart

Hans Franz · 13 September 2016, 12:45:37

Ich habe versucht, das widget um den subtype bar2 (vertikal) zu erweitern. In einem 99_SVG_Utils.pm.
Klappt auch (glaube ich

).
Aber wie bekomme ich es auch im Dashboard zu sehen? Hat jemand einen Ansatz?

Gruß
Hans

Edit:
Da mir nichts Besseres einfiel, lasse ich jetzt die sub eine .svg-Datei schreiben und binde diese ein.
Bestimmt suboptimal, aber wenig Code (5 Zeilen) und mein Dashboard ist bunter.

mcfly71 · 15 September 2016, 11:56:54

Hallo Gemeinde,

ich finde diese Bars egal für was auch wirklich super. Habe auch viele Einsatzmöglichkeiten dafür. Es müsste nur alles auch im Floorplan und (so habe ich jetzt gelesen) auch im Dashboard funktionieren. Statt "embed src" habe ich es auch mit iframes und object probiert, leider ohne Erfolg. Im normalen fhem sieht man das schön, in dem floorplan leider nicht (jedoch mit einer anderen Fehlermeldung als 'ein plugin ist vonnöten'). Da ich mich mit HTML etc. nicht so sehr auskenne, benötige ich dafür von jemandem Hilfe.... ??!!!

Im Firefox / Safari passiert das oben beschriebene....

VG
mcfly

Prof. Dr. Peter Henning · 15 September 2016, 16:08:38

Na, im Zustand "nicht so auskennen" waren wir alle mal.

Siehe hier: https://wiki.selfhtml.org/

Da steht alles nötige drin.

LG

pah

Bubbles71 · 15 Dezember 2020, 15:37:16

Hallo,

solle nochmal jemand auf dieses Thema stoßen und selbige oben genannte Problem mit der Einbindung im Floorplan haben:

Die Lösung ist, die komplette url von FHEM einzugeben, also statt

Code Auswählen

attr PoolWasser stateFormat <embed src='fhem/SVGX_widget?... usw.

Code Auswählen

attr PoolWasser stateFormat <embed src='http://192.168.178.xxx:8083/fhem/SVGX_widget?... usw.

Mir hätte diese einfache Antwort eine Stunde Arbeit gespart. Vielleicht freut sich ja nun jemand nach mir

LG,

Roland

Prof. Dr. Peter Henning · 15 Dezember 2020, 18:48:31

Schon mal auf das Datum geschaut? Sowohl in den SmartHomeHacks, als auch im FHEM-Buch steht alles drin.

LG

pah

Bubbles71 · 16 Dezember 2020, 16:43:04

Nicht jeder hat die Bücher oder das gesamte Forum durchgelesen.
Manchmal ist es einfach schön, eine einfache und schnelle Lösung direkt hinter einer Frage zu finden, die man sich selber schon gestellt hat.
Wie gesagt, vielleicht freut sich ja irgendwann jemand, der den Post bis hierhin gelesen hat.
Und wenn nicht, schadet mein Post auch nicht.

LG,

Roland