Hi,
wie's scheint bin ich zu ungeschickt, um auf einem 7'' Tablet ein Level- bzw. Knob-Widget richtig bedienen zu können.
Habe mir daher überlegt, dass es super wäre, wenn es Level-Up und Level-Down Buttons geben würde. Analog zum Push-Button-Widget.
Problem ist halt, dass ich den aktuellen Wert der (z.B.) Lautstärke kennen muss, um FHEM einen Befehl zum Erhöhen schicken zu können.
Und dann wär's natürlich noch schön, wenn man die Lautstärke durch kurzen Klick um ein bißchen, durch langen Klick um viel verändert könnte.
Habe da in den Möglichkeiten von Tablet-UI nichts gefunden und mir eine JavaScript-Lösung gebaut die zwar funktioniert, aber noch nicht ganz zufriedenstellend ist.
Deshalb habe ich mir die Zeit genommen um Herauszufinden, wie man selber Widgets programmieren kann. Sieht aber wohl so aus, als ob meine JavaScript-/jQuery-Kenntnisse dafür leider nicht ausreichen und Dokumentation habe ich keine gefunden.
Könnte mir gut vorstellen, dass schon mal jemand von euch den selben Wunsch hatte. Wenn ja, wie habt ihr das umgesetzt? Oder wie könnte man es machen?
Bzw. gibt's irgendwo Hinweise, wie man selber Tablet-UI-Widgets erstellen kann?
Danke!
Stefan
P.S.: Wen's interessiert, ich hab's folgendermaßen umgesetzt:
In der index.html
<div style="padding: .5em 0 0 0;">
<div style="display: inline-block;">
<div class="changeValue-h fa fa-stack fa-2x" onmousedown="shStartLevel($('#shLevel'),'up');" onmouseup="shStopTimer($('#shLevel'));" onmouseout="shStopTimer($('#shLevel'));"></div>
</div>
<div style="display: inline-block; vertical-align: top; font-size: 2em; line-height: 2; width: 3em;">
<div data-type="label" data-device="RXV777" data-get="volumeStraight" data-unit="dB" id="shLevel"></div>
</div>
<div style="display: inline-block;">
<div class="changeValue-h fa fa-stack fa-2x" onmousedown="shStartLevel($('#shLevel'),'down');" onmouseup="shStopTimer($('#shLevel'));" onmouseout="shStopTimer($('#shLevel'));"></div>
</div>
</div>
In einer neuen fhem-tablet-user.js
var shInterval;
function sendVolume(vol){
setFhemStatus('set RXV777 volumeStraight '+vol);
};
function shStartLevel(obj,act){
switch (act) {
case 'up':
obj.text(parseFloat(obj.text())+0.5);
shInterval = window.setInterval(function(){
obj.text(parseFloat(obj.text())+0.5);
}, 300);
break;
case 'down':
obj.text(parseFloat(obj.text())-0.5);
shInterval = window.setInterval(function(){
obj.text(parseFloat(obj.text())-0.5);
}, 300);
break;
};
};
function shStopTimer(obj){
window.clearInterval(shInterval);
sendVolume(obj.text());
};
So etwas habe ich schon auf dem Schirm. Ich war letzten bei einem großen Elektronikriesen und habe etwas an der iWatch rumgespielt. Dabei kam mir die Idee zum nächsten Widget. So ein Volume Control mit + - Tasten
Kann man noch prima für anderes erweitern/nutzen.
Ahhh, sehr gut :)
Und ja, für eine Heizungssteuerung z.B.
Nichts desto trotz hätte es mich interessiert, ob's Infos zur Erstellung eigener Widgets gibt. Wenn ich schon mit dem Wissenden persönlich spreche ;).
Nö, Anleitung gibt es leider noch nicht. Du kannst dir aber das widget_range.js als Vorlage ansehen. Funktion update und init müssen Public sein. Alles andere steht dir frei.
Gut gut, ich such mal meine jQuery-Bücher und spiel ein bißchen rum ;)
Danke!
Ich habe mal schnell eine widget_example.js zusammengebaut.
Es wird ein Text erzeugt, der farblich geändert werden kann.
Alles wo "example" vorkommt, muss den eigenen Widgetnamen umbenannt werden inkl. Filename.
Anwendung:
<div data-type="example" data-device="dummy3" data-text="Inhalt" data-color="Farbe"></div>
Oder Farbe per Fremd-Reading:
<div data-type="example" data-device="dummy3" data-text="STATE" data-color="dummy1:color"></div>
Danke!
Könnte man in widget_template.js umbenennen und mit verteilen. Falls es andere mal brauchen.
Soeben hat das neuen Spinner Widget die Alpha Phase erreicht.
Es wird bestimmt noch vorm WE verfügbar werden ;D
Ja Coool , da fallen mir gleich paar Dinge ein ;)
klaus
Zitat von: kvo1 am 15 Januar 2016, 00:44:20
Ja Coool , da fallen mir gleich paar Dinge ein ;)
Jep, mir auch :)
Ist hübsch geworden! Freu mich schon auf den Einsatz.
Das neue Widget ist jetzt verfügbar.
Siehe Post hier: http://forum.fhem.de/index.php/topic,34233.msg392882.html#msg392882