FTUI Widget Image - Versionsgeschichte

Pahenning am 2. August 2024 um 15:00 Uhr

2024-08-02T15:00:55Z

← Nächstältere Version		Version vom 2. August 2024, 17:00 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|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.		Das [[{{PAGENAME}}\|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.

	<gallery>		<gallery>
Zeile 131:		Zeile 131:
	</syntaxhighlight>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI\|Image]]		[[Kategorie:FHEM Tablet UI V2\|Image]]

Baumbuwe: catsort

2018-01-26T14:05:31Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 16:05 Uhr
Zeile 131:		Zeile 131:
	</syntaxhighlight>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI\|Image]]

Ulm32b: /* Beispiele */ Beispiel data-part und data-substitution eingefügt.

2017-11-12T16:09:54Z

Beispiele: Beispiel data-part und data-substitution eingefügt.

@@ Zeile 117: / Zeile 117: @@
 </syntaxhighlight>
 [[File:FTUI_Widget_Image_02.png]]
 [[Kategorie:FHEM Tablet UI]]

Ulm32b: /* Attribute */ data-part und data-substitution eingefügt.

2017-11-12T16:02:50Z

Attribute: data-part und data-substitution eingefügt.

← Nächstältere Version		Version vom 12. November 2017, 18:02 Uhr
Zeile 20:		Zeile 20:
	\|-		\|-
	\|'''data-suffix'''\|\|Letzter Teil der URL des anzuzeigenden Bildes\|\|\|\|data-suffix=".png"		\|'''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>		\|'''data-url'''\|\|URL des anzuzeigenden Bildes\|\|\|\|<nowiki>data-url="https://example.com/bild.jpg"</nowiki>

Standarduser: /* Hinweise */ Hinweis zu blassen Bildern hinzugefügt

2017-11-06T19:02:37Z

Hinweise: Hinweis zu blassen Bildern hinzugefügt

← Nächstältere Version		Version vom 6. November 2017, 21:02 Uhr
Zeile 59:		Zeile 59:
	* Wenn ''data-url'' nicht definiert ist, wird die URL des Bildes aus ''data-path'' + ''data-get'' + ''data-suffix'' zusammengesetzt.		* 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.		* 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==		==Beispiele==

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:58Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 63:		Zeile 63:
	===Bild aus dem Internet anzeigen===		===Bild aus dem Internet anzeigen===
	Dieses einfache Beispiel zeigt die Verwendung des [[FTUI Widget Image\|Image-Widgets]] mit einer fest vorgegebenen Internetadresse.		Dieses einfache Beispiel zeigt die Verwendung des [[FTUI Widget Image\|Image-Widgets]] mit einer fest vorgegebenen Internetadresse.
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="image"		<div data-type="image"
	data-url="https://fhem.de/www/images/default/fhemicon.png"		data-url="https://fhem.de/www/images/default/fhemicon.png"
	data-size="100px"></div>		data-size="100px"></div>
	</~~source~~>		</syntaxhighlight>

	Soll verhindert werden, dass Browser das Bild aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse ''nocache'' verwendet werden:		Soll verhindert werden, dass Browser das Bild aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse ''nocache'' verwendet werden:
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="image"		<div data-type="image"
	data-url="https://fhem.de/www/images/default/Eventuell_im_Cache_gespeichertes_Bild.png"		data-url="https://fhem.de/www/images/default/Eventuell_im_Cache_gespeichertes_Bild.png"
Zeile 78:		Zeile 78:
	data-size="100px"		data-size="100px"
	class="nocache"></div>		class="nocache"></div>
	</~~source~~>		</syntaxhighlight>

	[[File:FTUI_Widget_Image_01.png]]		[[File:FTUI_Widget_Image_01.png]]
Zeile 84:		Zeile 84:
	===URL aus einem Reading===		===URL aus einem Reading===
	Hier wird die URL zum anzuzeigenden Bild aus dem STATE eines FHEM-Devices ausgelesen.		Hier wird die URL zum anzuzeigenden Bild aus dem STATE eines FHEM-Devices ausgelesen.
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="image"		<div data-type="image"
	data-device="dDummy"		data-device="dDummy"
	data-get="STATE"		data-get="STATE"
	data-size="100px"></div>		data-size="100px"></div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Image_01.png]]		[[File:FTUI_Widget_Image_01.png]]

Zeile 104:		Zeile 104:
	\|}		\|}

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="image"		<div data-type="image"
	data-device="jnTVSender"		data-device="jnTVSender"
Zeile 110:		Zeile 110:
	data-path="/fhem/images/TVSender/"		data-path="/fhem/images/TVSender/"
	data-size="80px"></div>		data-size="80px"></div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Image_02.png]]		[[File:FTUI_Widget_Image_02.png]]

	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI]]

Standarduser: /* Attribute */ data-device hinzugefügt

2017-02-26T15:45:40Z

Attribute: data-device hinzugefügt

← Nächstältere Version		Version vom 26. Februar 2017, 17:45 Uhr
Zeile 12:		Zeile 12:
	!Standard-Wert		!Standard-Wert
	!Beispiel		!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-get'''\|\|Name des Readings, das die zu verwendende Bild-URL enthält\|\|STATE\|\|data-get="Image-URL"

Drhirn: /* Bild aus dem Internet anzeigen */

2017-02-15T15:03:32Z

Bild aus dem Internet anzeigen

← Nächstältere Version		Version vom 15. Februar 2017, 17:03 Uhr
Zeile 63:		Zeile 63:
	<source lang="html">		<source lang="html">
	<div data-type="image"		<div data-type="image"
	data-url="https://fhem.de/www/images/default/fhemicon.png"		data-url="https://fhem.de/www/images/default/fhemicon.png"
	data-size="100px"></div>		data-size="100px"></div>
	</source>		</source>

			Soll verhindert werden, dass Browser das Bild aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse ''nocache'' verwendet werden:
			<source lang="html">
			<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>
			</source>

	[[File:FTUI_Widget_Image_01.png]]		[[File:FTUI_Widget_Image_01.png]]

Standarduser: Seitentitel in Einleitung korrigiert

2017-02-12T10:54:02Z

Seitentitel in Einleitung korrigiert

← Nächstältere Version		Version vom 12. Februar 2017, 12:54 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|~~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.		Das [[{{PAGENAME}}\|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.

	<gallery>		<gallery>

Drhirn: Die Seite wurde neu angelegt: „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 vorg…“

2017-02-12T09:36:32Z

Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|Progress Widget]] ist ein Widget für FHEM Tablet UI, mit dem ein Bild angezeigt werden kann. Die URL des Bildes kann entweder fest vorg…“

Neue Seite

Das [[{{PAGENAME}}|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.

<gallery>
File:FTUI_Widget_Image_01.png
File:FTUI_Widget_Image_02.png
</gallery>

==Attribute==
{|class="wikitable"
!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||||<nowiki>data-path="https://www.example.com/images/"</nowiki>
|-
|'''data-suffix'''||Letzter Teil der URL des anzuzeigenden Bildes||||data-suffix=".png"
|-
|'''data-url'''||URL des anzuzeigenden Bildes||||<nowiki>data-url="https://example.com/bild.jpg"</nowiki>
|-
|'''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==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|nocache}}
|}

==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 [[FTUI Widget Image|Image-Widgets]] mit einer fest vorgegebenen Internetadresse.
<source lang="html">
<div data-type="image"
data-url="https://fhem.de/www/images/default/fhemicon.png"
data-size="100px"></div>
</source>
[[File:FTUI_Widget_Image_01.png]]

===URL aus einem Reading===
Hier wird die URL zum anzuzeigenden Bild aus dem STATE eines FHEM-Devices ausgelesen.
<source lang="html">
<div data-type="image"
data-device="dDummy"
data-get="STATE"
data-size="100px"></div>
</source>
[[File: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:
{|class="wikitable"
|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
|}

<source lang="html">
<div data-type="image"
data-device="jnTVSender"
data-get="channels_01_image"
data-path="/fhem/images/TVSender/"
data-size="80px"></div>
</source>
[[File:FTUI_Widget_Image_02.png]]

[[Kategorie:FHEM Tablet UI]]