FTUI Widget Image
Das Progress 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-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-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.
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>
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>
