FHEM mit bunten Bildern

Begonnen von Prof. Dr. Peter Henning, 22 März 2015, 15:49:50

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1 2 3 Alle
Benutzer-Aktionen

Prof. Dr. Peter Henning

22 März 2015, 15:49:50
Hallo Liste,

nachdem ich das gestern auf dem Usertreffen angekündigt habe, hier die erste Implementation.

1. In die Datei 99_myUtils.pm einfügen

Code Auswählen

# This block is only needed when SVG is loaded bevore FHEMWEB
sub FW_pO(@);
use vars qw($FW_RET);     # Returned data (html)
use vars qw($FW_RETTYPE); # image/png or the like
use vars qw($FW_plotmode);# Global plot mode (WEB attribute), used by SVG
use vars qw($FW_plotsize);# Global plot size (WEB attribute), used by SVG
use vars qw(%FW_webArgs); # all arguments specified in the GET

sub myUtils_Initialize($$)
{
  my ($hash) = @_;
  $data{FWEXT}{"/SVGX_widget"}{FUNC} = "SVGX_widget";
  $data{FWEXT}{"/SVGX_widget"}{FORKABLE} = 1;
}


2.
In der Datei 99_myutils.pm eine Subroutine einfügen:
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 thermometer symbol
    #
    #    ||
    #    || 
    #    ||
    #   |__|
    #
    # one parameters w. scale
    # p1 = 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
    #

    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});
  }
  FW_pO '</svg>';
  return ($FW_RETTYPE, $FW_RET);
}


3. Wenn man nun als normalen "STATE" eines Devices ein Bild anzeigen lassen möchte, (sagen wir, die readings Wd und Pac des devices nt5000), so muss dessen Stateformat gesetzt werden auf

Code Auswählen

<embed src='fhem/SVGX_widget?type=bar&subtype=green&dev=nt5000&size=200x100&p1=Wd&s1=35.0 kWh&p2=Pac&s2=1 kW&p3=PV'/>


4. Selbstverständlich kann man das auch in Webseiten einbinden - einfach per <img href="<serveradresse>/fhem ...."/>

Resultate siehe anliegende Bilddatei.

Bisher ist nur der horizontale Balken realisiert - mehr solcher Widgets werde ich noch zur Verügung stellen. Außerdem muss noch die automatische Aktualisierung eingebaut werden.

Die leichte (und beabsichtigte) Verunschärfung beruht auf dem SVG-Filter, wem das nicht gefällt sollte die entsprechenden Parameter aus dem Code herauslassen.

LG

pah

kvo1

#1
22 März 2015, 20:43:07
Hallo pah,

hab das eben mal versucht nachzustellen... mit meinem Gaszählerstand... irgendwas mach ich aber falsch (Achtung "Anfänger"  ;) )

Du schreibst einmal "99_myUtils.pm" und dann "99_myutils.pm"    meinst Du die gleiche Datei ?

Wo muss diese Datei(en) liegen .? , doch im Pfad .../fhem/FHEM   ? oder

Firefox bemängelt (bei mir ) ein fehlendes Plugin ????

Danke für ein paar Tipp´s

kvo1





RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#2
22 März 2015, 22:23:20
Ja, gleiche Datei mit U.

Welches fehlende Plugin ? Firefox kann SVG ganz gut verarbeiten.

LG

pah

anfichtn

#3
22 März 2015, 22:23:42
Moin!

Ich hab das gleiche Problem....

fehlendes Plugin.

direktaufruf der funktion ist auch nicht möglich.

Grüße

anfichtn
FHEM 5.6 + Pilight + Pimatic auf BananaPro mit Bananian 15.04 r01
FB7270 v2 & FB7412
LDA382A mit WifiLight
MAX-Cube (aculfw), 6 Fensterkonstakte, 5 HK-Thermostate, 3 WandThermostate
[...]

Prof. Dr. Peter Henning

#4
22 März 2015, 22:27:02
Hm. Mal ein Test: Was sagt diese seltsame Firefox-Version, wenn man mit ihr die anhängende Datei aufmacht ?

LG

pah

kvo1

#5
23 März 2015, 00:18:07
das geht !
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#6
23 März 2015, 09:08:56
OK, das ist geklärt. Nächster Testschritt:

1. In der 99_myUtils.pm die Zeilen

  #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,"++++++++++++++++++++++++++++++++++++++++++++";

von Kommentarzeichen befreien.

2. reload von 99_:myUtils.pm

3. Im Browser aufrufen

Code Auswählen

http://<server-adresse>/fhem/SVGX_widget?type=bar&subtype=green&p1=3.45&s1=10 kWh&p2=2.0&s2=1 kW&p3=Keine Ahnung


und mitteilen, was passiert.

LG

pah

kvo1

#7
23 März 2015, 13:30:08
Code Auswählen
http://<server-adresse>/fhem/SVGX_widget?type=bar&subtype=green&p1=3.45&s1=10 kWh&p2=2.0&s2=1 kW&p3=Keine Ahnung

Hier kommt nichts raus !

Code Auswählen
http://<server-adresse/fhem/SVGX_widget?type=bar&subtype=green&dev=HCN2_Gas&size=200x100&p1=countsPerDay&s1=35.0 kWh&p2=verbrTagkWh&s2=1 kW&p3=PV

Kommt siehe "link.jpg"

im Fhem aber "CNG-reading2.jpg"

die Readings sind aber vorhanden   "CNG-reading.jpg"

Ich habe wohl noch ein Verständnisproblem was p1 / S1 / p2 / s2 ... angeht  ?

Anbei mal meine DEF

###########################
define HCN2_Gas HourCounter AZ3fachSchalter_Sw_01.closed.* AZ3fachSchalter_Sw_01.open.*
attr HCN2_Gas group Gaszähler
attr HCN2_Gas room UG_Gesamt
attr HCN2_Gas userReadings verbrTagkWh {sprintf("%.2f",ReadingsVal("HCN2_Gas","countsPerDay",0)*0.1*0.9655*11.178) . " kWh";;;;}
attr HCN2_Gas verbose 1
attr HCN2_Gas stateFormat <embed src='fhem/SVGX_widget?type=bar&subtype=green&dev=HCN2_Gas&size=200x100&p1=countsPerDay&s1=35.0 kWh&p2=verbrTagkWh&s2=1 kW&p3=PV'/>

### Alles loggen ==> define FileLog_HCN2_Gas FileLog ./log/HCN2_Gas-%Y.log HCN2_Gas
### nicht alle Daten in das Logfile schreiben
define FileLog_HCN2_Gas FileLog ./log/HCN2_Gas-%Y-%m.log HCN2_Gas:countsOverall:.*|HCN2_Gas:countsPerDay:.*|HCN2_Gas:state:.*
attr FileLog_HCN2_Gas group Gaszähler
attr FileLog_HCN2_Gas logtype text
attr FileLog_HCN2_Gas room hidden
# dummy fuer Zaehlerstand im Floorplan
define Zaehlerstand dummy
attr Zaehlerstand group Gaszähler
attr Zaehlerstand room UG_Gesamt
define myNotify notify HCN2_Gas:countsOverall.* { fhem("set Zaehlerstand ". $EVTPART1 / 10 ) }
# dummy fuer Tagesverbrauch im Floorplan
define Tagesverbrauch dummy
attr Tagesverbrauch alias Tagesverbrauch (m³)
attr Tagesverbrauch group Gaszähler
attr Tagesverbrauch room UG_Gesamt
define TVNotify notify HCN2_Gas:countsPerDay.* { fhem("set Tagesverbrauch ". $EVTPART1 / 10 ) }
####################################################################
### Umrechung/Darstellung der Leistung in KWh
####################################################################
### neues UserReading fuer Energieverbrauch in KWh
# dummy fuer TagesLeistung im Floorplan
define TagesLeistung dummy
attr TagesLeistung alias Tagesenergie
attr TagesLeistung group Gaszähler
attr TagesLeistung room UG_Gesamt
define KWNotify notify HCN2_Gas:verbrTagkWh.* set TagesLeistung %EVTPART1 KWh

kvo1
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

UweH

#8
23 März 2015, 17:50:01 Letzte Bearbeitung: 23 März 2015, 18:05:29 von UweH
Interessanter Effekt. Firefox 36.0.4 auf Linux Mint 17.1
Im Dashboard mault Firefox über ein fehlendes Plugin, im Raum OWX ist alles ok...

Edit: Hab's gerade mal unter Win 8.1 versucht, gleicher Effekt mit Firefox 36.0.4. Unter Ubuntu Mate mit 36.0.1 ebenso.
Ganz verrückt ist der IE11 unter Win 8.1. Statt des SVG lädt er die FHEM-Webseite...

kvo1

#9
03 April 2015, 22:34:24 Letzte Bearbeitung: 03 April 2015, 22:39:55 von kvo1
Hallo pah,
Ich würde das Thema gern weiter verfolgen.
Könntest Du die Parameter bitte nochmal beschrieben , bzw mir eine Denkanstoß geben, was da in
meinem Fall falsch ist.

Danke vorab.

Kvo1
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#10
04 April 2015, 19:10:44
Mach ich.

type=bar (einzige Möglichkeit bisher)
subtype=green,red oder blue
size=200x100  (Größe)
dev=HCN2_Gas  (Devicename)
p1=countsPerDay (Entweder ein Zahlenwert, oder der Name eines Readings, bestimmt Zylinderfüllung)
s1=35.0 kWh (Maximaler Wert (d.h. farbige Säule füllt den Zylinder) und Skalenparameter (kWh hier))
p2=verbrTagkWh (Entweder ein Zahlenwert, oder der Name eines Readings, wird oben drüber geschrieben)
s2=1 kW (Zahl wird ignoriert, Skalenparameter (kW hier))
p3=PV (Label, wird unten drunter geschrieben)

LG

pah

kvo1

#11
05 April 2015, 01:31:55
Hallo pah,
danke für die Erklärung , aber irgendwas mache ich vermutlich immer noch falsch.
Habe jetzt mal versucht den Inhalt eines Brunnens darzustellen , mit folgenden Readings

content      1746.5
Level          66
rawValue    266
state          1746.5     

Maximale Menge sind 2100 Liter !

Code Auswählen
attr Brunnen stateFormat <embed src='fhem/SVGX_widget?type=bar&subtype=green&dev=Brunnen&size=200x100&p1=content&s1=2100.0 Liter&p2=rawValue&s2=1 Liter&p3=Wassermenge'/>

p2 (rawValue)  soll oben drüber geschrieben werden, das tut´s aber nicht , stattdessen 0.00 Liter !

Was mache ich hier noch falsch ?

Danke für Deine Geduld.

PS:
Eins ist mir auch noch aufgefallen, die Darstellung im Floorplan scheint nicht zu funktionieren  :-[

kvo1
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#12
05 April 2015, 05:44:37 Letzte Bearbeitung: 05 April 2015, 05:46:16 von Prof. Dr. Peter Henning
Hm, kann evtl. am Integer-Wert des raw liegen. Bitte mal probieren, den Parameterwert für p2 durch die Zahl 266.0 zu ersetzen.

Betreffend Floorplan: Habe ich derzeit noch nicht auf der Agenda, kann ich nichts dazu sagen. Erst einmal die Widgets im FHEMWEB, dann kommen andere Frontends dran.

LG

pah

kvo1

#13
05 April 2015, 13:29:40
Zitat von: Prof. Dr. Peter Henning am 05 April 2015, 05:44:37
Hm, kann evtl. am Integer-Wert des raw liegen. Bitte mal probieren, den Parameterwert für p2 durch die Zahl 266.0 zu ersetzen.

Betreffend Floorplan: Habe ich derzeit noch nicht auf der Agenda, kann ich nichts dazu sagen. Erst einmal die Widgets im FHEMWEB, dann kommen andere Frontends dran.

LG

pah
266.0 geht !

LgKvo1
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#14
05 April 2015, 19:16:02
OK, Fehler gefunden.

In dem oben angebenen Code bitte

/\d*\.\d*/

durch

/\d*\.+\d*/

ersetzen.

LG

pah

kvo1

#15
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
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#16
06 April 2015, 12:58:49
OK, anderer Ansatz für den regulären Ausdruck: /[\.\d]*/

LG

pah

kvo1

#17
06 April 2015, 15:04:45
geht leider garnicht  :'(

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

RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Reinhart

#18
09 Juni 2015, 17:07:00 Letzte Bearbeitung: 09 Juni 2015, 18:10:45 von Reinhart
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.
FHEM auf Raspy4 mit Bullseye + SSD, Homematic, ESP8266, ESP32, Sonoff, eBus, NanoCUL, MapleCUL, , MQTT2, Alexa

kvo1

#19
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
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Reinhart

#20
09 Juni 2015, 18:05:44 Letzte Bearbeitung: 09 Juni 2015, 18:12:31 von Reinhart
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.
FHEM auf Raspy4 mit Bullseye + SSD, Homematic, ESP8266, ESP32, Sonoff, eBus, NanoCUL, MapleCUL, , MQTT2, Alexa

kvo1

#21
09 Juni 2015, 20:11:48
Danke nochmal für den Hinweis !

klaus
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Prof. Dr. Peter Henning

#22
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

#23
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
FHEM auf Raspy4 mit Bullseye + SSD, Homematic, ESP8266, ESP32, Sonoff, eBus, NanoCUL, MapleCUL, , MQTT2, Alexa

Hans Franz

#24
13 September 2016, 12:45:37 Letzte Bearbeitung: 14 September 2016, 18:46:32 von Hans Franz
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.
Raspi
CUL, Nano-CUL
FHT8V, FHT80B, S300TH
WM1000WZ, ELRO
LW12, LD382,DS18B20

mcfly71

#25
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
- HMLAN / Raspberry auf hmmode
- Homematic

Prof. Dr. Peter Henning

#26
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

#27
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

#28
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

#29
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

RAM5869

#30
30 November 2023, 18:33:36 Letzte Bearbeitung: 05 Dezember 2023, 18:08:06 von RAM5869
Hallo Zusammen,

ich versuche seit einiger Zeit SVG-Widgets in FHEM zu nutzen und habe dazu ein Beispiel aus pah FHEM-Buch verwendet. Leider wird mir in FHEM nicht das gewünschte SVG-Widget angezeigt, sondern stattdessen nur noch einmal die gesamte FHEM Website (siehe Anhang).
Hier mal der Code aus meiner 99_Utils.pm:

Code Auswählen
package main;
use strict;
use warnings;
use POSIX;

sub FW_p0(@);
use vars qw($FW_RET);
use vars qw($FW_RETTYPE);
use vars qw(%FW_webArgs);

sub
myUtils_Initialize($$)
{
  my ($hash) = @_;
  $data{FWEXT}{"/SVGX_widget"}{FUNC} = "SVGX_widget";
  $data{FWEXT}{"/SVGX_widget"}{FORKABLE} = 1;
}

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"));
  $FW_RETTYPE = "image/svg+xml";
  $FW_RET="";
  FW_p0 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 320 210" width="'.$size[0].'px" height="'.$size[1].'px">';
  if($type eq 'colorcircle')
  {
    my $p1 = $FW_webArgs{p1};
    my $raw1;
    if( $p1 =~ /\d*(\.\d*)?/ )
      {
      $raw1 = $p1;
      } else {
      $raw1 = ReadingsVal($FW_webArgs{dev},$p1,0);
      }
      my $color="#".Color::pahColor(14,20,27,$raw1,2);
      FW_p0 '<circle cx="115" cy="105" r="50" stroke="black" stroke-width="3" fill="'.$color.'"/>';
   }
  FW_p0 '</svg>';
  return ($FW_RETTYPE, $FW_RET);
}


Das stateFormat Attribut im Device habe ich so definiert:

Code Auswählen
attr Dachboden_Temperatur stateFormat <embed src='https://192.168.1.3:8083/fhem/SVGX_widget?type=colorcircle&p1=temperature&size=32x32'/>

Hat jemand eine Idee wo mein Fehler liegt?

Prof. Dr. Peter Henning

#31
28 Dezember 2023, 16:56:58
Ich bin nur durch Zufall auf diesen Post gestoßen, weil der Beginn des Threads ja nun wirklich ein paar Jährchen in der Vergangenheit liegt. Ich kann die Frage nicht sofort beantworten, weil ich selbst erst einmal wieder über das Thema nachdenken muss. Werde mir also das nicht funktionierende Beispiel gerne ansehen - aber vermutlich dieses Jahr nicht mehr ...

LG

pah

RAM5869

#32
12 Januar 2024, 17:13:06
Hallo pah,

das wäre toll wenn du dir das nochmal anschauen könntest.
Mein letzter Stand war, dass es wohl am verwendeten Browser liegt.
Mein Browser im Anhang falsch es hilft.

Gruß

betateilchen

#33
12 Januar 2024, 19:25:45
Die verwendete Funktion heißt nicht FW_p0(), sondern FW_pO() (das ist ein Großbuchstabe O, keine Null)

Eigentlich sollte es dazu aber auch eine entsprechende Fehlermeldung im FHEM-Log geben.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

Prof. Dr. Peter Henning

#34
14 Januar 2024, 04:36:52
So isses.

LG

pah
Drucken
Nach oben Seiten1 2 3 Alle
Benutzer-Aktionen