[FHEM-Tablet-UI] Widgets for fhem-tablet-ui

bjoernbo · 25 April 2015, 19:31:09

ja ist möglich! Ich habe auf meinem UI gleich 4 Stück. Nebenbei kann ich diese auch steuern.
Anbei der Code.

Zitat
<script type="text/javascript">

//******* Edit This *******
var chrUser = 'admin' //User name
var chrPassword = 'XXXXXX' //Password
var chrURL = '192.xxx.xxx.xxx:PORT' // do not include "http://" in this line
//****** End of User Editing ******
function doCam1(arg, chrType) {
if(document.getElementById('ifrResult1')){
if(chrType == 1){ chrCGI = 'decoder_control'

}else if(chrType == 3){ chrCGI = 'snapshot'
}else if(chrType == 4){ chrCGI = 'set_alarm'
}else if(chrType == 9){ chrCGI = 'reboot'
}else{ chrCGI = 'camera_control'
}
document.getElementById('ifrResult1').src='http://'+chrURL+'/'+chrCGI+'.cgi?user='+chrUser+'&pwd='+chrPassword+'&'+arg;
}
}
</script>

<li data-row="3" data-col="3" data-sizex="4" data-sizey="3"> 
<header>KAMERA</header>
<div class="container">
<div class="center">
<div class="cell">Ben</div>
<div type="label" class="cell"><img src="http://xxx.xxx.xxx.xxx:[PORT]/videostream.cgi?user=xxxxx&pwd=xxxxxxx" height="320" wight="350" border="0">
</img src></div>
</div>
<div class="ontop">
<div class="cell circlemenu wider">
<ul class="menu keepopen">
<li><div data-type="push" onclick="doCam1('command=1',1)" data-icon="fa-stop"></div></li>
<li><div data-type="push" onclick="doCam1('command=0',1)" data-icon="fa-arrow-up"></div></li>
<li><div data-type="push" onclick="doCam1('command=4',1)" data-icon="fa-arrow-right"></div></li>
<li><div data-type="push" onclick="doCam1('command=2',1)" data-icon="fa-arrow-down"></div></li>
<li><div data-type="push" onclick="doCam1('command=6',1)" data-icon="fa-arrow-left"></div></li>
</ul>
</div>
</div>
</div>
<iframe id="ifrResult1" name="ifrResult1" style="border:1pt;width:1px;height:1px;"></iframe>
<iframe id="ifrResult" name="ifrResult" style="border:1pt;width:1px;height:1px;"></iframe>
</div>
</div>
</li>

nesges · 26 April 2015, 02:25:32

Zitat von: Hermann am 25 April 2015, 18:40:14
Ist es möglich mit dem widget iframe eine webcam anzeigen zu lassen ? Ich hab auf einen 2´ten Raspi zu Testzwecken "motion" mit ner Webcam laufen. Die wollte ich per iframe anzeigen lassen.
Mit data-src="http://192.168.2.5:8081" wollte ich das ganze einbinden. Klappt aber so nicht Wo liegt mein Denkfehler oder geht das ganze gar nicht ?

Grundsätzlich möglich ist es schon, problematisch ist wahrscheinlich die Same Origin Policy. Hast du Fehlermeldungen in der JS-Konsole?

nesges · 27 April 2015, 13:56:05

widget_iframe kann jetzt ein Fhem-Device überwachen und bei einer Zustandsänderung sich selbst aktualisieren. Dazu gibt es drei neue Attribute:

data-device
Name eines Fhem-Devices das überwacht werden soll. Bei Zustandsänderung kann ein Refresh des Widgets ausgelöst werden. Default: nicht gesetzt

data-get
Name eines Readings eines Fhem-Devices das überwacht werden soll. Bei Zustandsänderung kann ein Refresh des Widgets ausgelöst werden. Default: STATE

data-get-refresh
Wert des überwachten Zustands (siehe device/get) der einen Refresh des Widgets auslösen soll. Ist get-refresh nicht gesetzt, löst jede Zustandsänderung einen Refresh aus. Default: nicht gesetzt

bjoernbo · 28 April 2015, 17:54:44

hey nesges,

ich habe dein iframe-Widget ins JS Verzeichnis kopiert und folgenden Code verbaut:

Zitat<li data-row="1" data-col="2" data-sizex="8" data-sizey="5"> 
<header>Fernsehprogramm</header>
<div data-type="iframe"
data-src="http://192.168.178.60:5900/ajax/multiepg2"
data-icon-spinner="fa-spinner fa-spin"
data-color-spinner="#aa6900"
data-icon-error="fa-frown-o"
data-color-error="#505050"
data-scrolling="yes"
data-timeout="3000">
</div>
</li>

leider bleibt der Container leer und es wird nichts angezeigt, Egal welche externe Quelle ich angebe. Wo liegt mein Denkfehler?

nesges · 28 April 2015, 17:56:38

Zitat von: bjoernbo am 28 April 2015, 17:54:44
leider bleibt der Container leer und es wird nichts angezeigt, Egal welche externe Quelle ich angebe. Wo liegt mein Denkfehler?

Gibt's eine Fehlermeldung in der JS-Konsole?

bjoernbo · 28 April 2015, 18:01:37

negativ! keine Fehlermeldung!

mit folgendem Code funtzt es

Zitat.......
<header>Fernsehprogramm</header>
<iframe src="http://192.168.178.60:5900/ajax/multiepg2"></iframe>
</li>

dadurch verwende ich allerdings nicht das Widget. Mit dieser Variante habe ich aber auch kein Problem.

nesges · 28 April 2015, 20:09:23

Zitat von: bjoernbo am 28 April 2015, 17:54:44
leider bleibt der Container leer und es wird nichts angezeigt

Gar nichts? Mindestens das drehende Spinner Icon sollte angezeigt werden. Ich habe grade eine neue Version eingecheckt, die das Attribut data-check einführt. Versuch mal bitte mit data-check="true" und data-check="false". Mit "false" verzichtet das Widget auf die Verfügbarkeitsprüfung und hat nur noch die Reload-Funktion.

https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/www/tablet/js/widget_iframe.js

nesges · 30 April 2015, 17:14:51

Neues Widget im "testing": widget_clicksound

Code Auswählen

<div data-type="clicksound"
        data-sound="ion-button-tiny"
        data-volume="200"
        data-bind-to="[data-type=button]"></div>

Das Widget selbst ist nicht sichtbar. Es bindet das Abspielen eines Sounds an Click-Events von Elementen, die über den Selektor im Attribut data-bind-to gefunden werden. D.h. damit erreicht man, dass beim klicken/berühren eines Elementes ein Sound abgespielt wird.

Attribute:

data-sound: Name des abszuspielenenden Sounds. Die Sounds der Library ion.sound werden mit ausgeliefert und können mit dem Prefix "ion-" und ihrem Namen gesetzt werden. Bindstriche werden dabei in Unterstriche konvertiert. zB: data-sound="ion-camera-flashing" lädt den Sound "camery_flashing" aus der ion-Library. Wird das Prefix "ion-" nicht verwendet, wird data-sound als Pfad zu einer Datei auf dem Webserver interpretiert. Die Dateiendung (.mp3, .ogg...) muss nicht angegeben werden. zB: data-sound="../sound/button" spielt die Datei "button.mp3" aus dem Verzeichnis "../sound/" ab. Bevorzugt der Browser ein anderes Format, wird versucht eine Datei "button.(anderesformat)" zu laden.

data-volume: Lautstärke zwischen 0 und 100 (%). In manchen Browsern werden auch Werte über 100 akzeptiert, die Original-Lautstärke wird dann entsprechend angehoben.

data-length: Abspiellänge in Milisekunden. Default: 200

data-bind-play-to: jQuery-Selektor, der die Elemente angibt, die den Sound abspielen sollen, wenn sie geklickt werden. Um zB alle Buttons, die nicht class="readonly" gesetzt haben auszuwählen gibt man data-bind-to="[data-type=button]:not(.readonly),[data-type=switch]:not(.readonly),[data-type=push]:not(.readonly)" an. Zur Vereinfachung der Konfiguration gibt es einige Spezialselektoren:

+buttons: push,switch,button und famultibutton (ohne "readonly")
+knob: volume und thermostat
+circlemenu: Elemente innerhalb eines circlemenu
+widgets: alle Widgets
+everything: alles!

Beispiel: data-bind-play-to="+buttons,+circlemenu"

data-bind-to: Kurzform von data-bind-play-to

data-bind-pause-to: Wie data-bind-play-to, startet aber kein Abspielen, sondern pausiert es. Evtl. Interessant bei Sounddateien mit längerer Spieldauer

Installation:

Das Widget ist noch in der Testphase und wird deshalb noch nicht per Fhem-Update ausgeliefert. Es muss manuell installiert werden. Dazu widget_clicksound ins "js" Verzeichnis kopieren und das gesamte Verzeichnis ion.sound unterhalb von "lib" anlegen.

Bekannte Probleme:

Unter iOS und Android können Sounds im Browser nicht ohne Userinteraktion ausgelöst werden. Ausgenommen davon ist nur der über einen Homescreen-Button gestartete Fullscreen-Modus.

nesges · 06 Mai 2015, 11:28:38

Das Widget clicksound wird jetzt standardmässig mit dem Fhem-Update-Mechanismus ausgeliefert.

Die Dokumentation befindet sich im Wiki und die Livedemo zeigt wie's sich anhört.

Mitch · 06 Mai 2015, 17:51:32

Hallo,

habe das neue Sound-Widget gerade getestet, aber leider bleibt es stumm $:-\$

Folgendes habe ich in die index.html:

Code Auswählen

script type="text/javascript" src="/fhem/tablet/js/widget_clicksound.js"></script>

<div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-bell-ring","ion-tap"]'
    data-volume='[200,300,400]'
    data-bind-to='["+switch","+knob","+slider"]'></div>

und dann z.B. mit diesem Switch getestet:

Code Auswählen

<div data-type="switch" data-device="CUL_HM_FlurOben" class="cell"></div>

nesges · 06 Mai 2015, 18:23:04

Mach aus "+switch" mal "+button". "+switch" gibt es nicht. Wenn du nur switches binden willst, dann gib als Selektor [data-type=switch] an.

Den "<script>"-Teil musst du übrigens nicht ins HTML packen.

Mitch · 06 Mai 2015, 18:29:53

Oh sorry, der +switch war noch vom testen drinnen.
Habe auch +button getestet, aber auch da bleibt es stumm $:-\$

Wo genau muss denn das stehen in der html und muss ich am Device selber noch etwas machen?

nesges · 06 Mai 2015, 19:19:45

Wie hast du's installiert? Per Fhem-Update oder von Hand?
Ist das Verzeichnis <fhemdir>/www/tablet/lib/ion.sound/ vorhanden?
Gibt es Fehler in der JS-Konsole?

Im HTML brauchst du - wenn alles passt - nur.. ach, jetzt seh ich's. Fehler in der Doku: Das Attribut "volume" nimmt kein Array, an der Stelle müsste "length" stehen. So ist's richtig:

Code Auswählen

<div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-bell-ring","ion-tap"]'
    data-length='[200,300,400]'
    data-bind-to='["+button","+knob","+slider"]'></div>

Mitch · 06 Mai 2015, 22:14:02

Habe per Update installiert.

Auch mit Deinen Änderungen keinen Ton?

nesges · 06 Mai 2015, 22:46:07

Zitat von: Mitch am 06 Mai 2015, 22:14:02
Habe per Update installiert.
Auch mit Deinen Änderungen keinen Ton?

Das ion.sound-Verzeichnis ist da und es gibt keine Fehler in der JS-Konsole?

Es gibt ein bekanntes Problem auf iOS und Android:

Zitat von: nesges am 30 April 2015, 17:14:51
Bekannte Probleme:
Unter iOS und Android können Sounds im Browser nicht ohne Userinteraktion ausgelöst werden. Ausgenommen davon ist nur der über einen Homescreen-Button gestartete Fullscreen-Modus.

Liegt's evtl. daran? Welche Browser hast du versucht?