FTUI Widget Image

Aus FHEMWiki
Version vom 12. November 2017, 17:02 Uhr von Ulm32b (Diskussion | Beiträge) (→‎Attribute: data-part und data-substitution eingefügt.)
Zur Navigation springen Zur Suche springen

Das Image Widget ist ein Widget für FHEM Tablet UI, mit dem ein Bild angezeigt werden kann. Die URL des Bildes kann entweder fest vorgegeben oder aus einem Reading gelesen werden.

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-device FHEM-Device, dessen Reading eine Bild-URL enthält
data-get Name des Readings, das die zu verwendende Bild-URL enthält STATE data-get="Image-URL"
data-path Erster Teil der URL des anzuzeigenden Bildes data-path="https://www.example.com/images/"
data-suffix Letzter Teil der URL des anzuzeigenden Bildes data-suffix=".png"
data-part Mittels RegEx gefiltertes Reading (data-get) mit der URL des anzuzeigenden Bildes (ab Update 12.11.2017) data-part=".*(http.*.jpg).*"
data-substitution Mittels RegEx ersetztes Reading (data-get) mit der URL des anzuzeigenden Bildes (ab Update 12.11.2017) data-substitution="s/.*(http.*.jpg).*/$1"
data-url URL des anzuzeigenden Bildes data-url="https://example.com/bild.jpg"
data-fhem-cmd Befehl, der bei einem Klick auf das Bild an FHEM gesendet werden soll data-fhem-cmd="set Bulp01 off"
data-state-get Name des Parameters, der den Status-Wert enthält data-state-get="STATE"
data-states Ein Array an möglichen Status-Werten data-states='["on","off","pending"]'
data-classes Ein Array von CSS-Klassen. Welche Klasse zusätzlich hinzugefügt wird, entscheidet sich durch das data-states-Array data-classes='["bg-green","bg-red","bg-yellow"]'
data-size Gewünschte Breite des Bildes in Pixel oder Prozent. Die Höhe wird proportional skaliert 50% data-size="248px"
data-width Gewünschte Breite des Bildes in Pixel oder Prozent. 100% data-size="248px"
data-height Gewünschte Höhe des Bildes in Pixel oder Prozent. auto data-height="248px"
data-opacity Durchsichtigkeit des Bildes (opacity) 0.8 data-opacity="1"
data-refresh Interval in Sekunden, nachdem das Bild aktualisiert werden soll 900 data-refresh="3600"
data-hide Reading, nach dessen Wert entschieden wird, ob das Bild angezeigt wird, oder nicht. STATE data-hide="STATE"
data-hide-on Wert, bei dem das Bild nicht angezeigt wird true,1,on data-hide-on="aus"
data-hide-off Wert, bei dem das Bild angezeigt wird !on data-hide-on="an"
data-hide-parents Soll das HTML-Eltern-Element auch versteckt werden, ist hier der jQuery-Selektor einzugeben. data-hide-parents="#BildDiv"

CSS Klassen

Klasse Beschreibung
nocache Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache

Hinweise

  • Wenn data-url nicht definiert ist, wird die URL des Bildes aus data-path + data-get + data-suffix zusammengesetzt.
  • Es kann nur data-url + data-refresh oder data-device + data-get verwendet werden, nicht beides gleichzeitig.
  • Wenn die Farben von Bildern etwas blass erscheinen, liegt das an einer leichten Transparenz, mit der die Bilder dargestellt werden. Um das zu verhindern sollte data-opacity="1" gesetzt werden.

Beispiele

Bild aus dem Internet anzeigen

Dieses einfache Beispiel zeigt die Verwendung des Image-Widgets mit einer fest vorgegebenen Internetadresse.

<div data-type="image"
     data-url="https://fhem.de/www/images/default/fhemicon.png"
     data-size="100px"></div>

Soll verhindert werden, dass Browser das Bild aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse nocache verwendet werden:

<div data-type="image"
     data-url="https://fhem.de/www/images/default/Eventuell_im_Cache_gespeichertes_Bild.png"
     data-size="100px"></div>
<div data-type="image"
     data-url="https://fhem.de/www/images/default/OriginalBild.png"
     data-size="100px"
     class="nocache"></div>

FTUI Widget Image 01.png

URL aus einem Reading

Hier wird die URL zum anzuzeigenden Bild aus dem STATE eines FHEM-Devices ausgelesen.

<div data-type="image"
	 data-device="dDummy"
	 data-get="STATE"
	 data-size="100px"></div>

FTUI Widget Image 01.png

Dynamische URL

In diesem Beispiel wird die URL zu einem Bild anhand eines Readings zusammen gebaut.

Das entsprechende FHEM-Device liefert z.B. folgende Readings:

channels_01_channel 201 2017-02-12 09:50:50
channels_01_image orf-1-hd.png 2017-02-12 09:50:50
channels_01_name ORF eins 2017-02-12 09:50:50
<div data-type="image"
	 data-device="jnTVSender"
	 data-get="channels_01_image"
	 data-path="/fhem/images/TVSender/"
	 data-size="80px"></div>

FTUI Widget Image 02.png