FTUI Widget Video - Versionsgeschichte

Pahenning am 3. August 2024 um 08:36 Uhr

2024-08-03T08:36:39Z

← Nächstältere Version		Version vom 3. August 2024, 10:36 Uhr
Zeile 1:		Zeile 1:
	== FTUI Widget Video ==		== FTUI Widget Video ==

	Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.		Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.
	Das Widget ist eine Ableitung aus dem [[FTUI Widget Image\|Image Widget]] und generiert eine URL mit dem HTML "<video>" Tag		Das Widget ist eine Ableitung aus dem [[FTUI Widget Image\|Image Widget]] und generiert eine URL mit dem HTML "<video>" Tag

Zeile 128:		Zeile 128:
	Die aktuelle Version des Widgets muss von Hand in ein bestimmtes Verzeichnis des eigenen FHEM-Servers kopiert und mit korrektem Eigentümer sowie Zugriffsrechten versehen werden. Das konkrete Vorgehen wird hier beschrieben: {{Link2Forum\|Topic=95374}}		Die aktuelle Version des Widgets muss von Hand in ein bestimmtes Verzeichnis des eigenen FHEM-Servers kopiert und mit korrektem Eigentümer sowie Zugriffsrechten versehen werden. Das konkrete Vorgehen wird hier beschrieben: {{Link2Forum\|Topic=95374}}

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

Markusbloch: Nutzung von Link2Forum Vorlage

2019-11-16T10:38:39Z

Nutzung von Link2Forum Vorlage

← Nächstältere Version		Version vom 16. November 2019, 12:38 Uhr
Zeile 126:		Zeile 126:

	==Installation==		==Installation==
	Die aktuelle Version des Widgets muss von Hand in ein bestimmtes Verzeichnis des eigenen FHEM-Servers kopiert und mit korrektem Eigentümer sowie Zugriffsrechten versehen werden. Das konkrete Vorgehen wird hier beschrieben: ~~https://forum.fhem.de/index.php/topic,~~95374~~.0.html~~		Die aktuelle Version des Widgets muss von Hand in ein bestimmtes Verzeichnis des eigenen FHEM-Servers kopiert und mit korrektem Eigentümer sowie Zugriffsrechten versehen werden. Das konkrete Vorgehen wird hier beschrieben: {{Link2Forum\|Topic=95374}}

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

Curt: Auf Wunsch im Forenthread - Link wohl verbesserungswürdig

2019-11-16T04:28:43Z

Auf Wunsch im Forenthread - Link wohl verbesserungswürdig

← Nächstältere Version		Version vom 16. November 2019, 06:28 Uhr
Zeile 124:		Zeile 124:
	</li>		</li>
	</syntaxhighlight>		</syntaxhighlight>

			==Installation==
			Die aktuelle Version des Widgets muss von Hand in ein bestimmtes Verzeichnis des eigenen FHEM-Servers kopiert und mit korrektem Eigentümer sowie Zugriffsrechten versehen werden. Das konkrete Vorgehen wird hier beschrieben: https://forum.fhem.de/index.php/topic,95374.0.html

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

Ph1959de: KatSort korrigiert

2019-01-06T10:03:40Z

KatSort korrigiert

← Nächstältere Version		Version vom 6. Januar 2019, 12:03 Uhr
Zeile 1:		Zeile 1:

	== FTUI Widget Video ==		== FTUI Widget Video ==

	Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.		Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.
	Das Widget ist eine ~~ableitung~~ aus dem Image Widget und generiert eine URL mit dem HTML "<video>" Tag		Das Widget ist eine Ableitung aus dem [[FTUI Widget Image\|Image Widget]] und generiert eine URL mit dem HTML "<video>" Tag


	==Attribute==		==Attribute==
Zeile 96:		Zeile 94:

	===Dynamische URL===		===Dynamische URL===
	In diesem Beispiel wird die URL zu einem Video anhand eines Readings ~~zusammen gebaut~~.		In diesem Beispiel wird die URL zu einem Video anhand eines Readings zusammengebaut.

	Das entsprechende FHEM-Device liefert z.B. folgende Readings:		Das entsprechende FHEM-Device liefert z.B. folgende Readings:
Zeile 127:		Zeile 125:
	</syntaxhighlight>		</syntaxhighlight>

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

Tommy82: /* Dynamische URL */

2019-01-05T18:53:32Z

Dynamische URL

← Nächstältere Version		Version vom 5. Januar 2019, 20:53 Uhr
Zeile 103:		Zeile 103:
	\|-		\|-
	\|channels_01_video\|\|Video.mp4\|\|2017-02-12 09:50:50		\|channels_01_video\|\|Video.mp4\|\|2017-02-12 09:50:50
	\|-
	~~\|channels_01_name\|\|ORF eins\|\|2017-02-12 09:50:50~~
	\|}		\|}

Tommy82: /* Hinweise */

2019-01-05T18:52:38Z

Hinweise

← Nächstältere Version		Version vom 5. Januar 2019, 20:52 Uhr
Zeile 63:		Zeile 63:

	==Hinweise==		==Hinweise==
	* 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 Videos 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.


	==Beispiele==		==Beispiele==

Tommy82 am 5. Januar 2019 um 18:51 Uhr

2019-01-05T18:51:33Z

← Nächstältere Version		Version vom 5. Januar 2019, 20:51 Uhr
Zeile 3:		Zeile 3:

	Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.		Das [[{{PAGENAME}}\|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.
			Das Widget ist eine ableitung aus dem Image Widget und generiert eine URL mit dem HTML "<video>" Tag

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

	==Attribute==		==Attribute==
Zeile 52:		Zeile 50:
	\|-		\|-
	\|'''data-hide-off'''\|\|Wert, bei dem das Video angezeigt wird\|\|!on\|\|data-hide-on="an"		\|'''data-hide-off'''\|\|Wert, bei dem das Video angezeigt wird\|\|!on\|\|data-hide-on="an"
			\|-
			\|'''data-controls'''\|\|Kann True und False sein, bei "True"werden die Video Controls eingeblendet\|\|\|\|data-controls="True"
	\|-		\|-
	\|'''data-hide-parents'''\|\|Soll das HTML-Eltern-Element auch versteckt werden, ist hier der jQuery-Selektor einzugeben.\|\|\|\|data-hide-parents="#VideoDiv"		\|'''data-hide-parents'''\|\|Soll das HTML-Eltern-Element auch versteckt werden, ist hier der jQuery-Selektor einzugeben.\|\|\|\|data-hide-parents="#VideoDiv"

Tommy82: Beschreibung des Video Widget für FTUI

2019-01-05T18:45:10Z

Beschreibung des Video Widget für FTUI

Neue Seite

== FTUI Widget Video ==

Das [[{{PAGENAME}}|Video Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden.

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

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading eine Video-URL enthält||||
|-
|'''data-get'''||Name des Readings, das die zu verwendende Video-URL enthält||STATE||data-get="Video-URL"
|-
|'''data-path'''||Erster Teil der URL des anzuzeigenden Videos||||<nowiki>data-path="https://www.example.com/Videos/"</nowiki>
|-
|'''data-suffix'''||Letzter Teil der URL des anzuzeigenden Videos||||data-suffix=".mp4"
|-
|'''data-part'''||Mittels RegEx gefiltertes Reading (data-get) mit der URL des anzuzeigenden Videos||||data-part=".*(http.*.mp4).*"
|-
|'''data-substitution'''||Mittels RegEx ersetztes Reading (data-get) mit der URL des anzuzeigenden Videos||||data-substitution="s/.*(http.*.mp4).*/$1"
|-
|'''data-url'''||URL des anzuzeigenden Videos||||<nowiki>data-url="https://example.com/Video.mp4"</nowiki>
|-
|'''data-fhem-cmd'''||Befehl, der bei einem Klick auf das Bild des Videos an FHEM gesendet werden soll (Problematisch in Verbindung mit aktiven "controls"||||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 Videos in Pixel oder Prozent. Die Höhe wird proportional skaliert||50%||data-size="248px"
|-
|'''data-width'''||Gewünschte Breite des Videos in Pixel oder Prozent.||100%||data-size="248px"
|-
|'''data-height'''||Gewünschte Höhe des Videos in Pixel oder Prozent.||auto||data-height="248px"
|-
|'''data-opacity'''||Durchsichtigkeit des Videos (opacity)||1.0||data-opacity="1"
|-
|'''data-refresh'''||Interval in Sekunden, nachdem das Video aktualisiert werden soll||900||data-refresh="3600"
|-
|'''data-hide'''||Reading, nach dessen Wert entschieden wird, ob das Video angezeigt wird, oder nicht.||STATE||data-hide="STATE"
|-
|'''data-hide-on'''||Wert, bei dem das Video nicht angezeigt wird||true,1,on||data-hide-on="aus"
|-
|'''data-hide-off'''||Wert, bei dem das Video 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="#VideoDiv"
|}

==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==
===Video aus dem Internet anzeigen===
Dieses einfache Beispiel zeigt die Verwendung des [[FTUI Widget Video|Video-Widgets]] mit einer fest vorgegebenen Internetadresse.
<syntaxhighlight lang="html">
<div data-type="video"
data-url="https://fhem.de/www/tablet/videos/Video.mp4"
data-size="100px"></div>
</syntaxhighlight>

Soll verhindert werden, dass Browser das Video aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse ''nocache'' verwendet werden:
<syntaxhighlight lang="html">
<div data-type="video"
data-url="https://fhem.de/www/tablet/videos/Video.mp4"
data-size="100px"></div>
<div data-type="video"
data-url="https://fhem.de/www/tablet/videos/Video.mp4"
data-size="100px"
class="nocache"></div>
</syntaxhighlight>

===URL aus einem Reading===
Hier wird die URL zum anzuzeigenden Video aus dem STATE eines FHEM-Devices ausgelesen.
<syntaxhighlight lang="html">
<div data-type="video"
data-device="dDummy"
data-get="STATE"
data-size="100px"></div>
</syntaxhighlight>

===Dynamische URL===
In diesem Beispiel wird die URL zu einem Video 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_video||Video.mp4||2017-02-12 09:50:50
|-
|channels_01_name||ORF eins||2017-02-12 09:50:50
|}

<syntaxhighlight lang="html">
<div data-type="video"
data-device="jnTVSender"
data-get="channels_01_video"
data-path="https://fhem.de/www/tablet/videos/"
data-size="80px"></div>
</syntaxhighlight>

===data-part und data-substitution===
Die URL des Videos wird aus einem Readings gefiltert bzw. zusammengebaut.
<syntaxhighlight lang="html">
<li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
<header>URL fromreading with part</header>
<div data-type="video" data-device="ftuitest" data-part=".*(http.*.mp4).*" data-get="videourl"></div>
</li>
<li data-row="5" data-col="10" data-sizey="3" data-sizex="3">
<header>URL fromreading with substitution</header>
<div data-type="video" data-device="ftuitest" data-substitution="s/.*(http.*.mp4).*/$1" data-get="videourl"></div>
</li>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Image]]