FTUI Widget Bar: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Das [[{{PAGENAME}}|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens angezeigt wird.
Das [[{{PAGENAME}}|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird. Für die entsprechende Darstellung in FTUI3, siehe [[FTUI3 Widget Bar]].


Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde  
Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in
<ref>P.A.Henning: <i>Smart Home mit FHEM</i>, Carl Hanser Verlag München 2019, 341 Seiten, ISBN 978-3-446-45873-4</ref> veröffentlicht. Zur Benutzung bitte den Anweisungen unter [[#Installation|Installation]] folgen.


<gallery>
<gallery>
File:FTUI_Widget_Label_01.png
File:Widget_bar_1.png
File:FTUI_Widget_Label_02.png
File:Widget_bar_2.png
File:FTUI_Widget_Label_03.png
File:Widget_bar_3.png
File:FTUI_Widget_Label_04.png
File:FTUI_Widget_Label_05.png
</gallery>
</gallery>


Zeile 18: Zeile 17:
!Beispiel
!Beispiel
|-
|-
|'''data-get'''||Name des Readings, dessen Wert angezeigt werden soll||||data-get="measured-temp"
|'''data-device'''||Name des Device, dessen Reading angezeigt werden soll||||data-get="G.Verb"
|-
|'''data-get'''||Name des Readings, dessen Wert angezeigt werden soll||||data-get="power"
|-
|-
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||
Zeile 24: Zeile 25:
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||
|-
|-
|'''data-factor'''||Multipliziert Wert des Readings mit angegebener Zahl||1||data-factor="3.6"
|'''data-max'''||Zahlenwert, bei welchem der Balken zu 100% gefüllt ist||1||data-max="20.0"
|-
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"
|-
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'
|-
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' <br>
data-classes='["blink","blurry","shake"]'
|-
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'
|-
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"
|-
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||
|-
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"
|-
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]
|-
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "
|-
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"
|-
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"
|-
|-
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"
|'''data-color'''||Fester Wert für die Farbe des Balkens. Erlaubte Werte hängen von den Definitionen im SVG-Teil ab, siehe unten. Mit dem unten gegebenem Beispiel sind erlaubte Farben "red", "green", "bue", "pink", "orange" ||||data-color="pink"
|-
|-
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="m³"
|-
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|'''data-interval'''||Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-interval="5000"
|-
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"
|}
 
==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}{{FTUI Klasse|blink}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}
|}
|}
<references/>


=Installation=
=Installation=
==Widget-Datei widget_bar.js==
Dazu muss im ersten Schritt eine Widget-Datei widget_­bar.­js erstellt werden, die (mit
Dazu muss im ersten Schritt eine Widget-Datei widget_­bar.­js erstellt werden, die (mit
den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
 
<div class="mw-collapsible mw-collapsed">
Code:<div class="mw-collapsible-content">
<pre>
<pre>
/* FTUI Plugin
/* FTUI Plugin
Zeile 192: Zeile 165:
};
};
</pre>
</pre>
</div></div>
==Auf der FTUI-Seite==
Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden.
Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag.
<pre>
  <div style="visibility:hidden">
      <svg id="svg200x150" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 300 225" width="200px" height="150px"> </svg>
    </div>
</pre>
Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:
<div class="mw-collapsible mw-collapsed">
Code:<div class="mw-collapsible-content">
<pre>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 10 10" width="0px" height="0px">
      <defs>
        <!-- white-snowwhite -->
        <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>
        <!-- lightsalmon/red and lightsalmon/lightsalmon3 -->
        <linearGradient id="grad1r" 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>
        <linearGradient id="grad2r" 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>
        <!-- LightGoldenrod1/DarkOrange and LightGoldenrod1/DarkGoldenrod3 -->
        <linearGradient id="grad1o" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb( 255, 236, 139);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb( 205, 149, 12);stop-opacity:1"/>
        </linearGradient>
        <linearGradient id="grad2o" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb( 255, 236, 139);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb( 205, 149, 12);stop-opacity:1"/>
        </linearGradient>
        <!-- pink/deeppink and pink/hotpink3 -->
        <linearGradient id="grad1p" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb( 255, 192, 203);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb( 255, 20, 147);stop-opacity:1"/>
        </linearGradient>
        <linearGradient id="grad2p" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb( 255, 192, 203);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb( 205, 96, 144);stop-opacity:1"/>
        </linearGradient>
        <!-- chartreuse/green and chartreuse/chartreuse3  -->
        <linearGradient id="grad1g" 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>
        <linearGradient id="grad2g" 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>
        <!-- cyan/blue and cyan/cyan3 -->
        <linearGradient id="grad1b" 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>
        <linearGradient id="grad2b" 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>
        <!-- ++++++++++++++++++++++++++++++++++++ Bar Widget ++++++++++++++++++++++++++++++++++++++ -->
        <g id="barwidget">
          <g transform="translate(0,65)">
            <rect x="24" y="5" width="40" height="80" rx="20" ry="40" fill="url(grad0)"/>
            <rect x="252" y="5" width="40" height="80" rx="20" ry="40" fill="rgb(250,250,250)"/>
            <rect class="side" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="gray"/>
            <rect class="top" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="gray"/>
            <rect x="252" y="5" width="40" height="80" rx="20" ry="40" fill="none"
              stroke="rgb(139, 137, 137)" stroke-width="2"/>
            <rect class="topline" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="none"
              stroke="rgb(139, 137, 137)" stroke-width="2"/>
            <rect x="24" y="5" width="268" height="80" rx="20" ry="40" fill="none"
              stroke="rgb(139, 137, 137)" stroke-width="2"/>
            <text class="labele" x="28" y="52" fill="rgb(75, 75, 75)"
              style="font-family:Helvetica;font-size:24px;font-weight:bold;"/>
          </g>
        </g>
      <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
      </defs>
    </svg>
</pre>
</div></div>
[[Kategorie:FHEM Tablet UI V2|Bar]]

Aktuelle Version vom 4. Juni 2025, 17:43 Uhr

Das Bar Widget ist ein Widget für FHEM Tablet UI V2, mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird. Für die entsprechende Darstellung in FTUI3, siehe FTUI3 Widget Bar.

Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in [1] veröffentlicht. Zur Benutzung bitte den Anweisungen unter Installation folgen.

  • Widget bar 1.png
  • Widget bar 2.png
  • Widget bar 3.png

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-device Name des Device, dessen Reading angezeigt werden soll data-get="G.Verb"
data-get Name des Readings, dessen Wert angezeigt werden soll data-get="power"
data-part RegEx oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll
data-fix Angegebene Anzahl an Dezimalstellen einhalten (-1 -> nicht numerisch)
data-max Zahlenwert, bei welchem der Balken zu 100% gefüllt ist 1 data-max="20.0"
data-color Fester Wert für die Farbe des Balkens. Erlaubte Werte hängen von den Definitionen im SVG-Teil ab, siehe unten. Mit dem unten gegebenem Beispiel sind erlaubte Farben "red", "green", "bue", "pink", "orange" data-color="pink"
data-unit Einheit nach Zahl hinzufügen data-unit="m³"
data-interval Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll 0 -> kein Auto-Refresh data-interval="5000"
  1. ↑ P.A.Henning: Smart Home mit FHEM, Carl Hanser Verlag München 2019, 341 Seiten, ISBN 978-3-446-45873-4

Installation

Widget-Datei widget_bar.js

Dazu muss im ersten Schritt eine Widget-Datei widget_­bar.­js erstellt werden, die (mit den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.

Code:

Auf der FTUI-Seite

Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden. Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag. 

  <div style="visibility:hidden">
      <svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" 
           viewBox="0 0 300 225" width="200px" height="150px"> </svg>
    </div>

Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:

Code:
Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Bar&oldid=40216“