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

[setstate]

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

Das war nicht so einfach und bringt einige Umbauten mit. Es läuft jetzt bei mir, aber ich teste noch etwas ...

[setstate]

@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

Habe ich jetzt eingebaut. Einzuschalten mit class="circulate"

[setstate]

Das war nicht so einfach und bringt einige Umbauten mit. Es läuft jetzt bei mir, aber ich teste noch etwas ...

Das Update ist jetzt durch. Man kann jetzt data-device="#sendDev" data-get="#sendParam" auch beim Input Widget auf andere Elemente verweisen.
Damit ändert sich das Reading des Input mit dem Ändern des Select Wertes und der aktuelle Wert des Readings wird geholt.

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='["STATE","warn1","warn2","webCmd","room"]' id="sendParam" class="notransmit w3x"></div>
    <div data-type="input" data-device="#sendDev" data-get="#sendParam" 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>


[Haecksler]

Habe ich jetzt eingebaut. Einzuschalten mit class="circulate"

Funktioniert perfekt. Danke!

[bmwfan]

Hallo setstate,
Danke für die schnelle Umsetzung. Bekomme beim Update allerdings die Meldung:

Code Auswählen Erweitern

2016.02.19 20:54:05 1 : UPD www/tablet/js/widget_famultibutton.js
2016.02.19 20:54:06 1 : UPD www/tablet/js/widget_input.js
2016.02.19 20:54:06 1 : open ./www/tablet/js/widget_input.js failed: Permission denied, trying to restore the previous version and aborting the update.

Hast Du eine Vermutung, woran das liegt?

Die Daten werden daher auch nicht ausgelesen. Speichern geht.

Gruß Jürgen

[setstate]

Dann hast du die Datei /www/tablet/js/widget_input.js mit einem anderen User hin kopiert, und der fhem User ist nicht in der gleichen Gruppe, bzw. die Rechteeinstellung für den Ordner erlaubt das nicht.

Lösche die /www/tablet/js/widget_input.js einfach weg und starte das Update nochmal

[bmwfan]

Hallo setstate,

geht alles wie gewünscht. Sogar das Eingabefenster schließt nach Betätigen der Return-Taste. Super.

Finde ich ein sehr nützliches Widget.

Gruß Jürgen

[bmwfan]

Jetzt muss ich den Thread noch einmal ausgraben.

Folgendes Problem: Wenn ich in FHEM einen Jalousiefahrzeit ändere, wird es auf dem tablet erst angezeigt, wenn ich Tablet-UI neu aufrufe (reload). Selbst ein Wechsel der angezeigten Seite reicht nicht aus. Wenn ich im Widget die Zeit ändere, wird sie sofort in FHEM angezeigt.

Wie kann ich erreichen, dass nicht nur nach FHEM geschrieben wird, sondern auch Änderungen in FHEM angezeigt werden, ohne TabletUI neu zu starten?

Der Code:

Code Auswählen Erweitern

<header>JALOUSIEN FAHRZEITEN</header>
<div data-type="select"
data-items='["du_Jal_time_KU_Ost","du_Jal_time_KU_Fenster","du_Jal_time_KU_Sued","du_Jal_time_WZ_Fest_Ost","du_Jal_time_WZ_Fest_Sued","du_Jal_time_WZ_Schiebetuer","du_Jal_time_WZ_Fest_SuedWest","du_Jal_time_WZ_Fest_West"]'
data-alias='["Küche Ostterasse","Küche Fenster","Küche Südterasse","WZ Fest Ost","WZ Fest Süd","WZ Schiebetür","WZ Fest Garten","WZ Fest Straße"]'
id="sendDev"
class="notransmit w3x">
</div>
<div data-type="select"
data-items='["Zeit_auf_Arbeit","Zeit_auf_WE","Zeit_ab"]'
data-alias='["Hoch Arbeiten Petra","Hoch Zuhause Petra","Schliessen"]'
id="sendParam"
class="notransmit w3x">
</div>
<div data-type="input"
data-device="#sendDev"
data-get="#sendParam"
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>

Gruß Jürgen

[setstate]

Ich habe mal das Inputwidget verbessert, dass bei Änderung sofort ein Update geholt wird

[bmwfan]

Sehr schön. Danke für die schnelle Reaktion. Geht.

Gruß Jürgen

[firefoxx123]

Hi, ich habe noch ein Problem zu diesem Thema. Wenn ich versuche eine Zeit zu setzen, wird in fhem nichts geschrieben, d.h. im log steht auch nix.
Wo mach ich den Fehler?

Code Auswählen Erweitern

<div data-type="select"
data-items='["EG_Jalousie_runter","EG_Jalousie_rauf","dummy1","dummy2"]'
id="sendDev"
class="notransmit w3x">
</div>
<div data-type="select"
                        data-items='["STATE","dummy11","dumm12"]'
id="sendParam"
class="notransmit w3x">
</div>
<div data-type="input"
data-device="#sendDev"
data-get="#sendParam"
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>

VG
Thomas

[moonsorrox]

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

wie schreibst du es in FHEM, in ein Dummy...
Ich habe dies nämlich auch, nur bekommt die Weboberfläche es nicht mit und zeigt den Wert nicht an, aber in der Ausführung übernimmt er die Zeit.... Ich hoffe du verstehst was ich meine...

Hier mal der Code eines dummy aus dem defmod:

Code Auswählen Erweitern

defmod du_RolloZeitWZ_hoch dummy
attr du_RolloZeitWZ_hoch alias Rollläden WZ - Zeit Öffnen - Wochentag
attr du_RolloZeitWZ_hoch devStateIcon .*:rc_BLANK
attr du_RolloZeitWZ_hoch group Rollläden EG
attr du_RolloZeitWZ_hoch icon time_clock@#FF6D00
attr du_RolloZeitWZ_hoch room Automation,Wohnzimmer
attr du_RolloZeitWZ_hoch setList state:time
attr du_RolloZeitWZ_hoch sortby 10
attr du_RolloZeitWZ_hoch stateFormat Stunde:Minute
attr du_RolloZeitWZ_hoch webCmd state

setstate du_RolloZeitWZ_hoch 7:55
setstate du_RolloZeitWZ_hoch 2017-10-20 18:00:06 Minute 55
setstate du_RolloZeitWZ_hoch 2017-10-20 18:18:38 Stunde 7
setstate du_RolloZeitWZ_hoch 2017-10-20 18:19:29 state 07:55

[firefoxx123]

hi, ich schreibe direkt in den Timer (at). Ich werde mal deine Variante ausprobieren.

Danke
thomas