FTUI Widget Image: Unterschied zwischen den Versionen

Version vom 12. November 2017, 17:02 Uhr

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>

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>

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>

@@ Zeile 20: / Zeile 20: @@
 |-
 |'''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||||<nowiki>data-url="https://example.com/bild.jpg"</nowiki>