New FHEM Tablet UI

[setstate]

Wenn ich multistatebutton richtig verstanden habe, sollte der folgende demo-code bei jedem click zwischen den 4 stati durchwechseln?

Code Auswählen Erweitern


<div data-type="multistatebutton"
       data-device="TEST"
       data-get-on='["on","off","unknown","uninteresting"]'
       data-icons='["fa-bolt", "fa-power-off", "fa-question", "fa-ban"]'
       data-colors='["green", "red", "orange", "blue"]'
       data-background-colors='["red", "green", "blue", "orange"]'
></div>


Irgendwie funktioniert das bei mir nicht.
Wenn ich auf den button klicke, sendet er immer den gleichen Befehl (z.B. "on").
Erst wenn ich einen Reload der Webpage mache, sendet er den nächsten Befehl - und dann das ganze Spiel wieder von vorne. 
Verhält sich übrigens am iPad genau gleich.

Hab ich da was übersehen zu konfigurieren?
Danke

Gibt es das Device TEST und ist longpoll beim FTUI an? Nur wenn das Device seinen Status sofort melden kann, funktioniert der Statuswechsel des Multistatebutton.

Ohne Feedback von FHEM kommt des Push Widget aus

Code Auswählen Erweitern


      <div data-type="push"
             data-device="HUEDevice1"
             data-set-on='["0","25","50","75","100"]'
      ></div>


[chunter1]

Gibt es das Device TEST und ist longpoll beim FTUI an? Nur wenn das Device seinen Status sofort melden kann, funktioniert der Statuswechsel des Multistatebutton.

Danke für die Hilfe!
Nachdem kein Device sondern ein dummy dahinter steckt, gabs auch keine Status Rückmeldung.
Was ich allerdings erreichen wollte war, dass sich auch das icon ändert.
Sollte das beim "push" nicht auch mit einem "data-icon" array funktionieren?

[setstate]

Ein Dummy ist auch normales Device für FTUI, das sollte auch funktionen. Der Beispielscode funktioniert bei mir auch sofort, nachdem ich ein passendes Dummy von mir eingetragen habe.
Push kann das Icon nicht wechseln.

[chunter1]

Ok, ich hab jetzt folgenden Code am iPad und am PC (Firefox) getestet.
Das komische ist, dass es nach einem webpage-reload immer 10 Sekunden dauert bis die icons sich beim Tastendruck tatsächlich mit ändern.
longpoll ist auf '1' gesetzt.
Die data-set-on Werte werden allerdings sofort richtig übermittelt.

Code Auswählen Erweitern


<div data-type="switch"
   class="cell big"
   data-device="dummyA"
   data-set-on='["on","off"]'
   data-get-on='["on","off"]'
   data-icons='["fa-bolt", "fa-power-off"]'>
</div>


[setstate]

Das komische ist, dass es nach einem webpage-reload immer 10 Sekunden dauert bis die icons sich beim Tastendruck tatsächlich mit ändern.
longpoll ist auf '1' gesetzt.

Longpoll startet gewollt erst nach 10 Sekunden, nur dann ist bei mir das Android Webviewcontrol erst bereit.

Ihr könnt das beim fhem-tablet-ui.js Zeile 85 ändern. Evtl. mache ich das in der nächsten Version änderbar per <meta name="longpoll".
0= aus
1= nach 1 Sekunde
10= nach 10 Sekunden usw.

Ich habe eine neue Version hochgeladen, die longpoll automatisch nach dem init der widgets startet. Dann sollte das für alle Varianten passen.

[ChrisW]

hm also egal ob ich das frisch Installierte nehme oder die Demo sachen ich habe immer das Problem das einiges nicht sauber aufgebaut wird Mal gehts mal nicht F5 zeigt quasi immer was anderes mal mehr mal komplett mal fehlen icons ..
Laut FAQ soll es an den HTML Dateien liegen .. aber kann doch nicht alles fehlerhaft sein.

Vielleicht liegt es daran das nicht in den Demos verfügbar ist bei mir ?

[setstate]

Ich kann nur immer wieder empfehlen, nicht einfach die Demos / Beispielsseiten einfach zu übernehmen.
Ich würde  immer nur Teile übernehmen und mit den eigenen Devices einfügen. Ohne reelle  Devices, die auch Updates im Widget auslösen, ist das Verhalten eher unvorhersehbar. Bestimmt gibt es auch unerwartete Fehler in der Webconsole ...

[ChrisW]

okay werd ich mal versuchen und berichten

[dadoc]

Update ist da. Dimmer, Slider und Volume kann man jetzt dafür benutzen.

Erst einmal vielen Dank fürs Kümmern um die alten FS20-Schätzchen.
Kann es sein, dass es da noch ein Problem mit den Dimmstufen gibt? Die FS20-Dimmer scheinen nicht jeden beliebigen dimx% Wert zu verarbeiten, sondern nur ganz bestimmte. Sieht man, wenn man einen davon abweichenden Wert absetzt wie etwa

Code Auswählen Erweitern

set Dimmer_1 dim95%
Dann weist fhem darauf hin:

Code Auswählen Erweitern

Unknown argument dim95%, choose one of dim06% dim100% dim12% dim18% dim25% dim31% dim37% dim43% dim50% dim56% dim62% dim68% dim75% dim81% dim87% dim93% dimdown dimup dimupdown off off-for-timer on on-100-for-timer-prev on-for-timer on-old-for-timer on-old-for-timer-prev ramp-off-time ramp-on-time reset sendstate timer toggle dim on-till on-till-overnight blink off-till-overnight intervals off-till
Daher schaltet auch das Hochschieben des Sliders auf 100% den Dimmer zwar ein, das Herunterschieben auf 0% aber nicht aus.
Grüße
Martin

[dadoc]

Kann es sein, dass es da noch ein Problem mit den Dimmstufen gibt? Die FS20-Dimmer scheinen nicht jeden beliebigen dimx% Wert zu verarbeiten, sondern nur ganz bestimmte.

Habe mal einen Workaround gebastelt, der funktioniert, wenn auch sicherlich nicht optimal formuliert und performant:
Das Beispiel geht davon aus, dass die FS20-Dimmer als Dimmer_xx benannt, wobei xx Zahlen von 01 bis 99 sein können.
1. Für jeden Dimmer einen minimalistischen Dummy anlegen mit dem Namen D_xx:

Code Auswählen Erweitern

define D_01 dummy
2. In der index.html die Dimmer-Slider so einbinden:

Code Auswählen Erweitern


<div data-type="dimmer" data-device='D_01'
       data-set-on="dim$v%"
       data-set-off="off"
       data-set-value="dim$v%"
       data-get-on="dim([1-9]\d?)?%"
       data-get-off="dim0%">
</div>
<div data-type="label" class="cell">Dimmer 1</div>
3. Ein notifiy anlegen, das die diskreten Werte des Sliders auf die festen Stufen matched, auf die die FS20-Dimmer reagieren (d.h. ein einziges notify für Dimmer_01 bis Dimmer_99):

Code Auswählen Erweitern

define Dimmer_n notify D_.*:(dim.*|off|on)  {\
        my $Dimmer_Nr = substr($NAME,2,2);;\
my $Dimmer_real = "Dimmer_".$Dimmer_Nr;;\
my $tablet_value = $EVENT;;\
$tablet_value =~ s/dim//;;\
$tablet_value =~ s/%//;;\
    if ($$tablet_value "off"){ fhem("set $Dimmer_real off")}\
    elsif ($tablet_value "on"){ fhem("set $Dimmer_real on")}\
    elsif ($tablet_value == 0){ fhem("set $Dimmer_real off")}\
    elsif ($tablet_value > 0 && $tablet_value <= 6){ fhem("set $Dimmer_real dim6%")}\
    elsif ($tablet_value > 6 && $tablet_value <= 12){ fhem("set $Dimmer_real dim12%")}\
    elsif ($tablet_value > 12 && $tablet_value <= 18){ fhem("set $Dimmer_real dim18%")}\
    elsif ($tablet_value > 18 && $tablet_value <= 25){ fhem("set $Dimmer_real dim25%")}\
    elsif ($tablet_value > 25 && $tablet_value <= 31){ fhem("set $Dimmer_real dim31%")}\
    elsif ($tablet_value > 31 && $tablet_value <= 37){ fhem("set $Dimmer_real dim37%")}\
    elsif ($tablet_value > 37 && $tablet_value <= 43){ fhem("set $Dimmer_real dim43%")}\
    elsif ($tablet_value > 43 && $tablet_value <= 50){ fhem("set $Dimmer_real dim50%")}\
    elsif ($tablet_value > 50 && $tablet_value <= 56){ fhem("set $Dimmer_real dim56%")}\
    elsif ($tablet_value > 56 && $tablet_value <= 62){ fhem("set $Dimmer_real dim62%")}\
    elsif ($tablet_value > 62 && $tablet_value <= 68){ fhem("set $Dimmer_real dim68%")}\
    elsif ($tablet_value > 68 && $tablet_value <= 75){ fhem("set $Dimmer_real dim75%")}\
    elsif ($tablet_value > 75 && $tablet_value <= 81){ fhem("set $Dimmer_real dim81%")}\
    elsif ($tablet_value > 81 && $tablet_value <= 87){ fhem("set $Dimmer_real dim87%")}\
    elsif ($tablet_value > 87 && $tablet_value <= 93){ fhem("set $Dimmer_real dim93%")}\
    elsif ($tablet_value > 93 && $tablet_value <= 100){ fhem("set $Dimmer_real dim100%")}\
    }
Grüße
Martin

[xxsteffenxx]

Guten Abend,
ich habe soeben versucht das simpleChart einzubauen, leider ohne Erfolgt.

Hier die Eckdaten
FileLog_AZ_Thermostat
AZ_Thermostat-2015.log

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="4" data-sizey="3"> <!-- 928*655 -->
    <header>Chart</header>
    <div class="cell">
        <div data-type="simplechart" data-device="AZ_Thermostat"
        data-logfile="SVG_FileLog_AZ_Thermostat_1"
        data-logdevice="FileLog_AZ_Thermostat">
    </div>


leider bekomme ich nur ein Raster angezeigt ohne Werte....

[chunter1]

Gibt es eine Möglichkeit den vertikalen scroll-bounce auf einem iPad zu verhindern?
Ideal wäre, wenn die Webpage vollkommen unbeweglich wird.
Hab leider keine Infos über die unteren Befehle und zusätzliche Optionen gefunden.

Code Auswählen Erweitern


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


Ich denke, dass das folgende hier helfen sollte, aber wo muss ich das einbauen?

Code Auswählen Erweitern


function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );


[chunter1]

Habs jetzt hinbekommen.
Einfach in der Datei ".../fhem/www/tablet/js/fhem-tablet-ui.min.js" den folgenden code hinten anfügen.

Code Auswählen Erweitern


function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchmove' , stopScrolling , false );


Der scroll-bounce am iPad ist damit disabled.

[Nobby1805]

Guten Abend,
ich habe soeben versucht das simpleChart einzubauen, leider ohne Erfolgt.

Hier die Eckdaten
FileLog_AZ_Thermostat
AZ_Thermostat-2015.log

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="4" data-sizey="3"> <!-- 928*655 -->
    <header>Chart</header>
    <div class="cell">
        <div data-type="simplechart" data-device="AZ_Thermostat"
        data-logfile="SVG_FileLog_AZ_Thermostat_1"
        data-logdevice="FileLog_AZ_Thermostat">
    </div>


leider bekomme ich nur ein Raster angezeigt ohne Werte....

data-columnspec fehlt

[xxsteffenxx]

Super!!!
So klappt es bei mir

Code Auswählen Erweitern

<li data-row="4" data-col="1" data-sizex="3" data-sizey="2">
<header>4/1</header>
        <div data-type="simplechart"
data-device="WZ_Thermostat"
        data-logfile="WZ_Thermostat-2015.log"
        data-logdevice="FileLog_WZ_Thermostat"
data-columnspec="4:WZ_Thermostat.temperature:1:int"
data-minvalue="15"
        data-maxvalue="25"
        data-yticks="1"
data-caption="Wohnzimmer"
class="fullsize">
    </div>
Danke