SVG-uiTable-Funktionen (DOIF-Web-Interface)

[Damian]

Die Dokumentation der neuen  skalierbaren SVG-uiTable-Funktionen ist fertiggestellt: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#SVG-uiTable-Funktionen

letzter Dokueintrag: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#3d-Balkendarstellung_mehrerer_Zahlenwerten_mit_Hilfe_der_universellen_SVG-Funktion_cylinder

Hier beginnt die Dokumentation zum DOIF-Web-Interface: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg

Anregungen, Fragen, Probleme zu den SVG-Funktionen können hier gepostet werden.

Hier geht es zum alten Thread: https://forum.fhem.de/index.php/topic,106059.msg1050870.html#msg1050870

Im Anhang aktueller Statusbildschirm:

[Benjamin50]

Hallo,
Dank  für die die neuen SVG-uiTable-Funktionen.
Ich habe jetzt ein Beispiel für mich Nachvollzogen, doch bei mir schauen die Symbole von der Größe alle gleich aus.
Ich komme einfach nicht drauf warum das so ist.
Kann mir da jemand bitte weiterhelfen ?

Vielen Dank

mfg wolfgang

Code Auswählen Erweitern



Internals:
   CFGFN     
   DEF        ##
   FUUID      5eb3df0a-f33f-1bf6-c30d-aceef1db741da346
   MODEL      FHEM
   NAME       di_temp_hum_ring
   NOTIFYDEV  global,HM_Garten
   NR         1001
   NTFY_ORDER 50-di_temp_hum_ring
   STATE      initialized
   TYPE       DOIF
   VERSION    21842 2020-05-02 16:00:20
   .attraggr:
   .attrminint:
   READINGS:
     2020-05-07 12:12:26   cmd             0
     2020-05-07 12:12:26   mode            enabled
     2020-05-07 12:12:26   state           initialized
   Regex:
     accu:
     uiTable:
       HM_Garten:
         di_temp_hum_ring_uiTable_c_0_1_0_0:
           humidity   ^HM_Garten$:^humidity:
           temperature ^HM_Garten$:^temperature:
         di_temp_hum_ring_uiTable_c_1_1_0_0:
           humidity   ^HM_Garten$:^humidity:
           temperature ^HM_Garten$:^temperature:
         di_temp_hum_ring_uiTable_c_2_1_0_0:
           humidity   ^HM_Garten$:^humidity:
           temperature ^HM_Garten$:^temperature:
   condition:
   do:
     0:
   helper:
     DEVFILTER  ^global$|^HM_Garten$
     NOTIFYDEV  global|HM_Garten
     globalinit 1
     last_timer 0
     sleeptimer -1
   uiTable:
     dev        HM_Garten
     package    package ui_Table;
     reading    humidity
     table:
       0:
         0:
           0:
             0          package ui_Table;"klein"
         1:
           0:
             0          package ui_Table;::DOIF_Widget($hash,$reg,'di_temp_hum_ring_uiTable_c_0_1_0_0',temp_hum_ring(::ReadingValDoIf($hash,'HM_Garten','temperature'),::ReadingValDoIf($hash,'HM_Garten','humidity'),undef,undef,60),"")
       1:
         0:
           0:
             0          package ui_Table;"normal"
         1:
           0:
             0          package ui_Table;::DOIF_Widget($hash,$reg,'di_temp_hum_ring_uiTable_c_1_1_0_0',temp_hum_ring(::ReadingValDoIf($hash,'HM_Garten','temperature'),::ReadingValDoIf($hash,'HM_Garten','humidity')),"")
       2:
         0:
           0:
             0          package ui_Table;"groß"
         1:
           0:
             0          package ui_Table;::DOIF_Widget($hash,$reg,'di_temp_hum_ring_uiTable_c_2_1_0_0',temp_hum_ring(::ReadingValDoIf($hash,'HM_Garten','temperature'),::ReadingValDoIf($hash,'HM_Garten','humidity'),undef,undef,100),"")
     tc:
     td:
       0:
       1:
       2:
     tr:
Attributes:
   group      Aussentemperatur
   room       Entwicklung
   uiTable    {package ui_Table}

"klein"|temp_hum_ring([HM_Garten:temperature],[HM_Garten:humidity],undef,undef,60)
"normal"|temp_hum_ring([HM_Garten:temperature],[HM_Garten:humidity])
"groß"|temp_hum_ring([HM_Garten:temperature],[HM_Garten:humidity],undef,undef,100)



[Damian]

Evtl. liegt es am Browser oder FHEM-Style.

Ich benutze den f18-Style und den Chrome-Browser

[KernSani]

Dark+Safari funktioniert z.B. auch, aber flex (wenn ich das richtig sehe) skaliert die SVGs offensichtlich nochmal selbst.


Kurz, weil mobil....

[Damian]

Hier noch ein Beispiel für die Nutzung der SVG-Funktionen in fremden Devices.

Im Device zaehler wird der Status mit devStateIcon umdefiniert:

Code Auswählen Erweitern

defmod zaehler SMLUSB /dev/serial/by-id/usb-Prolific_Technology_Inc._USB-Serial_Controller_C-if00-port0@9600 1234
attr zaehler T_Device CUL_WZ
attr zaehler devStateIcon {ui_Table::bar(ReadingsVal($name,"l-Produktion",0),0,4,"Prod.",0,120,"kW",70,undef,100)." ".ui_Table::bar(ReadingsVal($name,"l-Lieferung",0),0,4,"Einsp.",0,120,"kW",70,undef,100)." ".ui_Table::bar(ReadingsVal($name,"l-Bezug",0),0,4,"Bezug",120,0,"kW",70,undef,100)." ".ui_Table::bar(ReadingsVal($name,"l-Verbrauch",0),0,4,"Verbrauch",120,0,"kW",70,undef,100)}
attr zaehler event-on-change-reading .*
attr zaehler room Info

setstate zaehler P: 1.4 L: 0.8 V: 2.3 B: 1.7
setstate zaehler 2020-05-09 08:47:05 Aktuell P: 1.164 L: 0.971 V: 0.189 B: 0.000 E: 0.189
setstate zaehler 2020-05-09 08:47:05 Bezug 1.7
setstate zaehler 2020-05-09 08:47:05 Lieferung 0.8
setstate zaehler 2020-05-01 14:31:49 Monat B: 12419.900 -156.075 L: 20936.530 542.107 P: 1452.624 698.772 V: -7064.006 312.740
setstate zaehler 2020-05-09 08:47:05 Produktion 1.4
setstate zaehler 2020-05-09 00:01:22 Tag B: 12450.233 -3.230 L: 21069.720 23.335 P: 1619.288 28.092 V: -7000.199 7.987 E: 5450.033 4.757
setstate zaehler 2020-05-09 08:47:05 Verbrauch 2.3
setstate zaehler 2020-05-09 08:47:05 l-Bezug -0.000
setstate zaehler 2020-05-09 08:47:05 l-Lieferung 0.971
setstate zaehler 2020-05-09 08:47:05 l-Produktion 1.164
setstate zaehler 2020-05-09 08:47:05 l-Verbrauch 0.189
setstate zaehler 2020-05-09 08:47:05 l-momentan -0.8349
setstate zaehler 2020-05-09 08:47:05 state P: 1.4 L: 0.8 V: 2.3 B: 1.7
setstate zaehler 2020-05-09 08:47:05 time 1589006825
setstate zaehler 2020-05-09 08:47:05 z-Bezug 12451.9562
setstate zaehler 2020-05-09 08:47:05 z-Lieferung 21070.5616
setstate zaehler 2020-05-09 08:47:05 z-Produktion 1620.6900
setstate zaehler 2020-05-09 08:47:05 z-Verbrauch -6997.9154


[Benjamin50]

Hallo,
Danke für den Hinweis.

Es liegt am Flex-Style, Firefox, Chrome und Edge ist das gleich Bild

Beim f18-style ist mit  Firefox, Chrome und Edge alles in Ordnung.

[Damian]

Spritpreisdarstellung im HTTPMOD-Modul:

Code Auswählen Erweitern

defmod Tankstelle HTTPMOD http://www.clever-tanken.de/tankstelle_details/24198 300
attr Tankstelle userattr reading01Name reading01Regex reading02Name reading02Regex
attr Tankstelle devStateIcon {ui_Table::ring(ReadingsVal("$name","Diesel",0),0.90,1.40,120,0,"Diesel",100,undef,2)." ".ui_Table::ring(ReadingsVal("$name","SuperE5",0),0.90,1.40,120,0,"E5",100,undef,2)}
attr Tankstelle enableControlSet 1
attr Tankstelle event-on-change-reading .*
attr Tankstelle group Spritpreise
attr Tankstelle reading01Name Diesel
attr Tankstelle reading01Regex "current-price-1">(\d.\d{2})
attr Tankstelle reading02Name SuperE5
attr Tankstelle reading02Regex "current-price-2">(\d.\d{2})
attr Tankstelle room Spritpreise
attr Tankstelle stateFormat Liter_Diesel: Diesel
attr Tankstelle timeout 10

[mumpitzstuff]

Ist es möglich z.B. bei der Abfalldarstellung 2 Kreise mit den Tagen darzustellen? Im ersten Kreis die Tage bis zur nächsten Abholung und danach die der Übernächsten? Macht z.B. dann Sinn, wenn die Tonne bei der nächsten Abholung nur halb voll ist, kann man entscheiden, ob man bis zur folgenden Abholung wartet oder die Tonne halbvoll raus stellen will.

https://forum.fhem.de/index.php?action=dlattach;topic=77502.0;attach=130623

[Damian]

Ist es möglich z.B. bei der Abfalldarstellung 2 Kreise mit den Tagen darzustellen? Im ersten Kreis die Tage bis zur nächsten Abholung und danach die der Übernächsten? Macht z.B. dann Sinn, wenn die Tonne bei der nächsten Abholung nur halb voll ist, kann man entscheiden, ob man bis zur folgenden Abholung wartet oder die Tonne halbvoll raus stellen will.

https://forum.fhem.de/index.php?action=dlattach;topic=77502.0;attach=130623

Möglich ist alles, wenn man es programmiert
Über welche Funktion möchtest du es darstellen?

icon_label-Funktion: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Icon-Darstellung_mit_Text_mit_Hilfe_der_Funktion_icon_label

kann immer nur ein Label darstellen.

Der Anwendungsfall: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Anzahl_der_Tage_bis_zur_Abfall-Entsorgung

könnte mit einem Label zwei Zahlen so darstellen:

Code Auswählen Erweitern

ic ("Abfalltonne-Recycling-Logo\@yellow",[$SELF:gelbe_tonne]." ".[$SELF:gelbe_tonne_next])|\

[mumpitzstuff]

Ah okay stimmt. Man kann in das Label ja beliebigen Text rein packen, also auch mehrere Zahlen. Danke.

[Damian]

Ah okay stimmt. Man kann in das Label ja beliebigen Text rein packen, also auch mehrere Zahlen. Danke.

oder man passt sich hier die Funktion für seine Bedürfnisse an und speichert sie unter einem anderen Namen ab:

Code Auswählen Erweitern

sub icon_label
{
   my ($icon,$text,$color,$color_bg,$pos_left,$pos_top) = @_;
   $color = "" if (!defined ($color));
   $color_bg = "" if (!defined ($color_bg));
   $pos_left = -3 if (!defined ($pos_left));
   $pos_top = -8 if (!defined ($pos_top));
   my $pad = (length($text) > 1) ? 2 : 5;
   return '<div style="display:inline-table;">'.::FW_makeImage($icon).'<div style="display:inline;border-radius:20px;color:'.$color.';background-color:'.
          $color_bg.
          ';font-size:14px;font-weight:bold;text-align:center;position:relative;padding-top: 1px;padding-left: '.$pad.'px; padding-right: '.$pad.'px;padding-bottom: 1px;'.
          'left:'.$pos_left.'px;top:'.$pos_top.'px;">'.$text.'</div></div>'
}

Es wird hier lediglich HTML-Code produziert.

[Damian]

mit:

Code Auswählen Erweitern

attr Abfall uiTable {\
  package ui_Table;;\
  $TC{0..4}="align='center'";;\
  $SHOWNOSTATE=1;;\
\
  sub ic\
  {\
    my ($icon,$days,$days2)=@_;;\
    icon_label2($icon,$days,$days2,"white",$days > 1 ? "green":"red",$days2 > 1 ? "green":"red")\
  }\
  \
sub icon_label2\
{\
   my ($icon,$text,$text2,$color,$color_bg,$color_bg2,$pos_left,$pos_top) = @_;;\
   $color = "" if (!defined ($color));;\
   $color_bg = "" if (!defined ($color_bg));;\
   $pos_left = -3 if (!defined ($pos_left));;\
   $pos_top = -8 if (!defined ($pos_top));;\
   my $pad = (length($text) > 1) ? 2 : 5;;\
   my $pad2 = (length($text2) > 1) ? 2 : 5;;\
   return '<div style="display:inline-table;;">'.::FW_makeImage($icon).'<div style="display:inline;;border-radius:20px;;color:'.$color.';;background-color:'.\
          $color_bg.\
          ';;font-size:14px;;font-weight:bold;;text-align:center;;position:relative;;padding-top: 1px;;padding-left: '.$pad.'px;; padding-right: '.$pad.'px;;padding-bottom: 1px;;'.\
          'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text.'</div><div style="display:inline;;border-radius:20px;;color:'.$color.';;background-color:'.\
          $color_bg2.\
          ';;font-size:14px;;font-weight:bold;;text-align:center;;position:relative;;padding-top: 1px;;padding-left: '.$pad2.'px;; padding-right: '.$pad2.'px;;padding-bottom: 1px;;'.\
          'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text2.'</div></div>'\
} \
}



sieht es so aus:

[mumpitzstuff]

Wow super danke. Das ist perfekt.

In dem Bespiel oben fehlt noch die Defaultinitialisierung für bg2.

[mumpitzstuff]

Ich habe mal gestern etwas gespielt und es sieht jetzt schon fast genauso aus wie meine Readingsgroup, auch wenn der Code noch Kraut und Rüben ist. Auf dem Bild ist oben das DOIF und unten die Readingsgroup.

BTW gibts eigentlich die Möglichkeit die Device Gruppierung der DOIFs aufzuheben? Der doppelte Rahmen sie nicht so toll aus.

Code Auswählen Erweitern

defmod doif_Abfall DOIF ##
attr doif_Abfall room KALENDER
attr doif_Abfall uiTable {\
  package ui_Table;;\
\
  $SHOWNOSTATE=1;;\
\
  sub ic\
  {\
    my ($icon, $days, $days2) = @_;;\
    \
    icon_label2($icon, $days, $days2, 'white', (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'green'));;\
  }\
  \
  sub icon_label2\
  {\
    my ($icon, $text, $text2, $color, $color_bg, $pos_left, $pos_top) = @_;;\
    my $pad = ((length($text) > 1) ? 2 : 5);;\
    my $pad2 = ((length($text2) > 1) ? 2 : 5);;\
    \
    $color = "" if (!defined ($color));;\
    $color_bg = "" if (!defined ($color_bg));;\
    $pos_left = -5 if (!defined ($pos_left));;\
    $pos_top = -10 if (!defined ($pos_top));;\
   \
    return '<div style="display:inline-table;;">'.::FW_makeImage($icon).\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;background-color:'.$color_bg.\
           ';;font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad.'px;;padding-right:'.$pad.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text.'</div>'.\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;border:1px solid white;;'.\
           'font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad2.'px;;padding-right:'.$pad2.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text2.'</div></div>';;\
  }\
\
  sub convDate\
  {\
    my ($date, $days) = @_;;\
\
    if (0 == $days)\
    {\
      return 'Heute';;\
    }\
    elsif (1 == $days)\
    {\
      return 'Morgen';;\
    }\
    elsif (2 == $days)\
    {\
      return 'Übermorgen';;\
    }\
    else\
    {\
      # the following line strips the year of the date (remove it if needed)\
      #return substr($date, 0, 5);;\
      return $date;;\
    }\
  }\
\
  sub textColor\
  {\
    my $days = shift;;\
    \
    return (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'white');;\
  }\
}\
style([ABFALL_LEERUNG:Restmuell_weekday], textColor([ABFALL_LEERUNG:Restmuell_days]))|\
style(convDate([ABFALL_LEERUNG:Restmuell_date], [ABFALL_LEERUNG:Restmuell_days]), textColor([ABFALL_LEERUNG:Restmuell_days]))|\
style([ABFALL_LEERUNG:Restmuell_text], textColor([ABFALL_LEERUNG:Restmuell_days]))|\
ic("dustbin\@red", [ABFALL_LEERUNG:Restmuell_days], [ABFALL_LEERUNG:Restmuell_daysnext])\
style([ABFALL_LEERUNG:Rund_weekday], textColor([ABFALL_LEERUNG:Rund_days]))|\
style(convDate([ABFALL_LEERUNG:Rund_date], [ABFALL_LEERUNG:Rund_days]), textColor([ABFALL_LEERUNG:Rund_days]))|\
style([ABFALL_LEERUNG:Rund_text], textColor([ABFALL_LEERUNG:Rund_days]))|\
ic("dustbin\@green", [ABFALL_LEERUNG:Rund_days], [ABFALL_LEERUNG:Rund_daysnext])\
style([ABFALL_LEERUNG:Flach_weekday], textColor([ABFALL_LEERUNG:Flach_days]))|\
style(convDate([ABFALL_LEERUNG:Flach_date], [ABFALL_LEERUNG:Flach_days]), textColor([ABFALL_LEERUNG:Flach_days]))|\
style([ABFALL_LEERUNG:Flach_text], textColor([ABFALL_LEERUNG:Flach_days]))|\
ic("dustbin\@limegreen", [ABFALL_LEERUNG:Flach_days], [ABFALL_LEERUNG:Flach_daysnext])\
style([ABFALL_LEERUNG:Biogut_weekday], textColor([ABFALL_LEERUNG:Biogut_days]))|\
style(convDate([ABFALL_LEERUNG:Biogut_date], [ABFALL_LEERUNG:Biogut_days]), textColor([ABFALL_LEERUNG:Biogut_days]))|\
style([ABFALL_LEERUNG:Biogut_text], textColor([ABFALL_LEERUNG:Biogut_days]))|\
ic("dustbin\@yellow", [ABFALL_LEERUNG:Biogut_days], [ABFALL_LEERUNG:Biogut_daysnext])\


[Damian]

Der Rahmen kommt von deinem Style, da habe ich keinen Einfluss drauf. Ich arbeite mit f18, der Dark-Modus passt da besser.

Frage zur Motivation:

Aus welchem Grund stellst du deine Readingsgroup auf DOIF um, wenn du eigentlich das gleiche Ergebnis erzielen willst?