Welches Widget für Eingabe einer Uhrzeit?

[bmwfan]

Hallo,
ich suche nach einem Widget, mit dem ich komfortabel eine Uhrzeit für meine Jalousiensteuerung eingeben kann. Im Moment verwende ich "settimer", aber das ist auf meinem Tablet zu unkomfortabel zu bedienen. Die Uhrzeiteinstellung ist recht schwierig, da die Zeitübernahme ja vom nachlassenden Druck auf das Display abhängt und da scheint mein Tablet zu unempfindlich zu sein.

Am liebsten wäre mir ein Widget, bei dem auf Betätigen entweder die Tastatur des Tablets oder ein Zahlenblock zur digitalen Eingabe der Uhrzeit eingeblendet wird und über Taste RETURN oder eine OK-Taste übernommen wird und sich das Fenster wieder schließt. Ist so oder ein ähnliches Widget vorhanden?

Im Zuge der Suche nach einem Widget ist mir aufgefallen, dass im Wiki nicht alle existierenden Widgets gelistet sind. Gibt es noch eine andere Zusammenfassung der existierenden Widgets und deren Möglichkeiten / Konfiguration?

Viele Grüße Jürgen

[setstate]

ich könnte dies hier anbieten: https://github.com/knowthelist/fhem-tablet-ui#datetimepicker

[bmwfan]

Hallo setstate,

auf das bin ich auch gestossen und habe es ausprobiert, aber ich konnte die Skalierung nicht so einstellen, dass das Raster eine Minute ist. Mit der Zeitauflösung des Beispieles [H:i] konnte ich die Zeiten nicht genau genug einstellen, vlt. auch wieder durch den TouchScreen des Tablets behindert. Habe auch keine weiterführende Anleitung gefunden und es deswegen aufgegeben.

Wie kann man so ein Widget denn selber erstellen? Da müßte es doch möglich sein, einen Tastaturblock einzublenden.

Gruß Jürgen

[setstate]

Wie kann man so ein Widget denn selber erstellen? Da müßte es doch möglich sein, einen Tastaturblock einzublenden.

Ja, ganz easy. So etwa (widget_input.js)

Code Auswählen Erweitern


if(typeof widget_widget == 'undefined') {
    loadplugin('widget_widget');
}

var widget_input = $.extend({}, widget_widget, {
    widgetname:"input",
    init_attr: function(elem) {
        elem.initData('get' ,'STATE');
        elem.initData('set' ,'');
        elem.initData('cmd' ,'set');
        elem.addReading('get');
    },
    init_ui : function(elem) {
        var base = this;
        // prepare level element
        var elemInput = jQuery('<input/>', {
            class: 'textinput',
        }).attr({
              type: 'text',
        }).css({visibility:'visible'})
        .appendTo(elem);

        elem.bind("enterKey",function(e){
            elem.data('value', elem.find('.textinput').val());
            elem.transmitCommand();
        });
        elemInput.keyup(function(e){
            if(e.keyCode === 13)
                elem.trigger("enterKey");
        });
    },
    init: function () {
        var base = this;
        this.elements = $('div[data-type="'+this.widgetname+'"]');
        this.elements.each(function(index) {
            base.init_attr($(this));
            base.init_ui($(this));
        });
    },
    update: function (dev,par) {
        var base = this;
        // update from normal state reading
        this.elements.filterDeviceReading('get',dev,par)
        .each(function(index) {
            var elem = $(this);
            var value = elem.getReading('get').val;
            if (value){
                elem.find('.textinput').val(value);
            }
        });
    }
});


Senden müsste man noch einbauen und etwas per CSS stylen

[Haecksler]

Ich benutze das Spinner-Widget, funktioniert eigentlich ganz gut.
DateTimePicker war mir auch viel zu fummelig am Touchscreen.

[bmwfan]

@setstate:
Respekt, wenn man weis wie scheints ganz easy zu sein.
Ich vermute die Datei ins Verzeichnis /www\tablet\js kopieren und mit "input" aufrufen. Parameter brauchen keine übergeben zu werden, da STATE verwendet wird.

Versuche ich gleich.

@Haecksler: Wenn das nicht geht versuche ich Deine Lösung.

Gruß Jürgen

[bmwfan]

@setstate:
Geht im Prinzip auf Anhieb. Plötzlich sind aber die Reaktionszeiten des Tablet (Bildaufbau mit wvc, Tastatureingabe..) extrem langsam. Kann es sein, dass das Widget alles ausbremst?

Die Zeit kann ich eingeben, aber die "Return"-Taste bzw. am Tablet "Los" schließt das Fenster nicht. Ich muss es über da Symbol "x" schließen und dann bleibt die Tastatur eingeblendet. Läßt sich das optimieren?

Gruß Jürgen

[setstate]

Ich habe das widget_input jetzt gleich mal eingecheckt. Vielleicht braucht das noch jemand.
CSS Style ist jetzt auch angepasst.

usage:

Code Auswählen Erweitern


<div data-type="input" data-device="dummy1" class="w2x centered"></div>



Man kann das Ganze aber auch so nutzen, dass man den Input nur ändert, und dann später mit einen anderen Button sendet.

Code Auswählen Erweitern


<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
    <header>SELECT</header>
    <div data-type="select" data-items='["dummy1","dummy2","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>
    <div data-type="select" data-items='["param1","param2","param3","param4"]' id="sendParam" class="notransmit w3x"></div>
    <div data-type="input" id="sendValue" data-value="127" class="notransmit w3x centered"></div>
    <div data-type="link" class="round centered"
         data-width="80" data-height="40"
         data-color="white"
         data-background-color="green"
         data-icon="fa-feed"
         data-device="#sendDev"
         data-set="#sendParam"
         data-value="#sendValue">
        OK
    </div>
</li>


[bmwfan]

Da frage ich mich doch immer: wie kommt man auf solche Lösungen? Wäre mir nicht im Traum eingefallen, dass  so was geht.

Einen Punkt will ich noch anmerken, falls jemand anderes das neue Widget nutzt:
Nach Eingabe der Uhrzeit muss erst die "Return" bzw- "Enter" oder (bei mir) "Los"-Taste gedrückt werden, damit der eingestellte Wert übernommen wird. Über den Button "OK" wird er dann an FHEM abgesetzt. Ohne "Return", wird der Wert der letzten Eingabe als Uhrzeit übernommen!

@setstate: Besten Dank noch mal für die elegante und schnelle Lösung.

Gruß Jürgen

[bmwfan]

@setstate:
Ich habe recht kryptische Namen für die Jalousien verwendet, z.B.:

Code Auswählen Erweitern

<header>SELECT JALOUSIEZEITEN</header>
    <div data-type="select" data-items='["du_Jal_time_KU_Ost","du_Jal_time_WZ_Fest_Sued","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>
    <div data-type="select" data-items='["Zeit_auf_Arbeit","Zeit_auf_WE","Zeit_ab","param4"]' id="sendParam" class="notransmit w3x"></div>
    <div data-type="input" id="sendValue" data-value="0" class="notransmit w3x centered"></div>
    <div data-type="link" class="round centered"
         data-width="80" data-height="40"
         data-color="white"
         data-background-color="green"
         data-icon="fa-feed"
         data-device="#sendDev"
         data-set="#sendParam"
         data-value="#sendValue">
        OK
    </div>

So wird es mir jetzt auch im Menü angezeigt und, da der hintere Teil abgeschnitten wird, kann man teilweise gar nicht mehr lesen, welche Jalousie bearbeitet werden soll. Habe versucht, für die Jalousie ein Alias anzulegen der dann zwar auch angezeigt wird, aber in den auch geschrieben werden soll was dann nicht geht.

Kann ich in dem Konstrukt auch andere Anzeigenamen für die Jalousien eingeben? So wie in FHEM mit dem Alias?

Gruß Jürgen

[setstate]

Ja, data-alias als Array, wie bei data-items

[bmwfan]

Klappt auch. Sehr schön.

Jetzt würde ich noch gerne die schon eingegebenen Zeiten laden und das Feld nicht mit 0 vorbelegen. Das scheint mir aber nicht so einfach zu sein, da das widget "input" ja gar nicht weis, was beim Widget "select" ausgewählt (Jalousie, welche Zeit) wurde. Gibt es auch dafür eine Lösung?
Die einfache wäre, in einem Label-Feld die aktuelle Zeit anzuzeigen, aber auch da stellt sich die Farge wie die ausgewählte Jalousie und Zeit als Parameter dynamisch zu übergeben.

Gruß Jürgen

[outhouse]

Ich benutze das Spinner-Widget, funktioniert eigentlich ganz gut.

Hallo Haecksler

Die Lösung gefällt mir sehr gut. Ideal fürs Tablet. Wie hast du die Stunden und die Minuten extrahiert?

Gruss

Chris

[kvo1]

Hallo Haecksler,
Würstest Du ggf. den FTUI Code oder einen Teil bereitstellen ?
Danke.

[Haecksler]

Hallo zusammen,
ist eigentlich ganz einfach man legt bei dem Device wo man die Zeiteinstellen will z.B. einen Dummy die userReadings "Stunde" und "Minute" an. Diese müssen dann erst mittels setreading manuel befüllt werden, damit später die Spinner-Widgets einen Werten haben von dem sie rauf oder runter Zählen können.

Code Auswählen Erweitern


attr HeizungZ1Mo userReadings Stunde {()},Minute {()},

Dann trigger ich über eine notify eine Funktion die aus dem Stunden- und Minutenwert eine Uhrzeit zusammensetzt.    

Code Auswählen Erweitern


define ZeitEinstellung notify HeizungZ.* {ZeitenStateStundeMinute($NAME)}

Hier der Code der Funktion:

Code Auswählen Erweitern

sub ZeitenStateStundeMinute($) {
my ($HZ1) = @_;
my $Stunde1 = ReadingsVal($HZ1,"Stunde","");
my $Minute1 = ReadingsVal($HZ1,"Minute","");
$Stunde1 = sprintf("%02d",$Stunde1);
$Minute1 = sprintf("%02d",$Minute1);
my $zeiten1 = $Stunde1.":".$Minute1;
fhem ("set ".$HZ1." ".$zeiten1);
}

Abschließend definiert man noch Spinner-Widgets die die userReadings ändern (ich mache diese immer in ein Popup):

Code Auswählen Erweitern

<div data-type="popup" data-draggable="true" data-height="200px" data-width="450px">
  <div data-type="label" class="container round padding bg-gray semitransparent large orange">Zeiteinstellung</div>
<div class="dialog">
<header>Einstellung Heizzeit</header>
<div data-type="label" class="cell">Zeit 1</div>
<div class="inline"><div data-type="spinner" data-device="HeizungZ1Mo" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="0" data-max="23" data-step="1"  data-unit=" h" data-background-color="green" class="valueonly"></div></div>
<div class="inline"><div data-type="spinner" data-device="HeizungZ1Mo" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="59" data-step="1"  data-unit=" min" data-background-color="green" class="valueonly"></div></div>
</div></div>

@setstate: Zum einstellen der Zeit via Spinner-Widget wäre es schon, wenn diese im Kreislaufen würden, sprich wenn man z.B. bei der Minuteneinstellung von 59 wieder auf 0 springen könnte.
Siehst du da eine Möglichkeit dies ohne großen Aufwand zum implementieren?

Gruß,
Stefan