[FHEM-Tablet-UI] Level-Up / Level-Down Buttons statt Knob bzw. Level

[drhirn]

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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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());
};


[setstate]

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.

[drhirn]

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 .

[setstate]

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.

[drhirn]

Gut gut, ich such mal meine jQuery-Bücher und spiel ein bißchen rum

Danke!

[setstate]

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:

Code Auswählen Erweitern

   
<div data-type="example" data-device="dummy3" data-text="Inhalt" data-color="Farbe"></div>


Oder Farbe per Fremd-Reading:

Code Auswählen Erweitern

   
<div data-type="example" data-device="dummy3" data-text="STATE" data-color="dummy1:color"></div>


[drhirn]

Danke!

Könnte man in widget_template.js umbenennen und mit verteilen. Falls es andere mal brauchen.

[setstate]

Soeben hat das neuen Spinner Widget die Alpha Phase erreicht.
Es wird bestimmt noch vorm WE verfügbar werden 

[kvo1]

Ja Coool , da fallen mir gleich paar Dinge ein 

klaus

[drhirn]

Ja Coool , da fallen mir gleich paar Dinge ein 

Jep, mir auch

Ist hübsch geworden! Freu mich schon auf den Einsatz.

[setstate]

Das neue Widget ist jetzt verfügbar.
Siehe Post hier: http://forum.fhem.de/index.php/topic,34233.msg392882.html#msg392882