|
|
| Zeile 43: |
Zeile 43: |
| [[Datei:Nuvola apps ksirc.png|25px|link=Benutzer Diskussion:Ph1959de]] '''Hast du Fragen an mich?''' Schreib mir auf [[Benutzer Diskussion:Ph1959de|<u>meiner</u> Diskussionsseite]]! Viele Grüße, [[Benutzer:Ph1959de|Peter]] ([[Benutzer Diskussion:Ph1959de|Diskussion]]) 16:14, 13. Sep. 2014 (UTC) | | [[Datei:Nuvola apps ksirc.png|25px|link=Benutzer Diskussion:Ph1959de]] '''Hast du Fragen an mich?''' Schreib mir auf [[Benutzer Diskussion:Ph1959de|<u>meiner</u> Diskussionsseite]]! Viele Grüße, [[Benutzer:Ph1959de|Peter]] ([[Benutzer Diskussion:Ph1959de|Diskussion]]) 16:14, 13. Sep. 2014 (UTC) |
| |} | | |} |
|
| |
| == 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]]
| |
