FTUI Widget Image
Das Image Widget ist ein Widget für FHEM Tablet UI V2, 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>
data-part und data-substitution
Die URL des Bildes wird aus einem Readings gefiltert bzw. zusammengebaut.
<li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
<header>URL fromreading with part</header>
<div data-type="image" data-device="ftuitest" data-part=".*(http.*.jpg).*" data-get="imgurl"></div>
</li>
<li data-row="5" data-col="10" data-sizey="3" data-sizex="3">
<header>URL fromreading with substitution</header>
<div data-type="image" data-device="ftuitest" data-substitution="s/.*(http.*.jpg).*/$1" data-get="imgurl"></div>
</li>