New FHEM Tablet UI

[Marst]

Hallo,

ich bin neu in dieses Thema eingestiegen und bin begeistert.
Vielen dank für die tolle Arbeit die ihr hier leistet.
Nun möchte ich für meine Rollos nur den Befehl auf und ab verwenden, funktioniert auch.

Code Auswählen Erweitern

<div data-type="push" data-device="Jalousie_1"
             data-icon="fa-chevron-up" data-background-icon="fa-square-o"
             data-set="off">
        </div>
        <div data-type="push" data-device="Jalousie_1"
            data-icon="fa-chevron-down" data-background-icon="fa-square-o"
            data-set="on">
        </div>


Jetzt meine Frage, wie kann ich es machen damit das Icon nach betätigen den Status (Farbe) ändert um zu sehen ob es oben oder unten ist?
Bin schon seit gestern am probieren und bekomme es nicht hin.

Danke im Voraus

Gruß
Mario

[viegener]

Der Ansatz wäre hier einen Switch zu verwenden, denn nur der kann den Status an/aus wirklich darstellen.
Das Ergebnis könnte dann so ähnlich wie hier sein:

Code Auswählen Erweitern

    <div data-type="switch" data-device="Jalousie_1"
             data-icon="fa-chevron-up" data-background-icon="fa-square-o"
             data-set="off"  data-get-on="open" data-get-off="closed" data-get="state">
        </div>
        <div data-type="switch" data-device="Jalousie_1"
            data-icon="fa-chevron-down" data-background-icon="fa-square-o"
            data-set="on" data-get-on="closed" data-get-off="open"  data-get="state">
        </div>


[setstate]

So sehe ich das auch

Code Auswählen Erweitern

<div data-type="switch" data-device="dummy1"
   data-icon="fa-chevron-up" data-background-icon="fa-square-o"
   data-set-on="off" data-set-off=""
   data-get-on="off" data-get-off="on"
   data-on-color="orange"
   data-off-color="#222"
   data-on-background-color="#505050"
   data-off-background-color="#505050">
</div>
<div data-type="switch" data-device="dummy1"
  data-icon="fa-chevron-down" data-background-icon="fa-square-o"
  data-set-on="on" data-set-off=""
  data-get-on="on" data-get-off="off"
  data-on-color="orange"
  data-off-color="#222"
  data-on-background-color="#505050"
  data-off-background-color="#505050">
</div>


[viegener]

Ich habe schon seit einiger Zeit das Problem, das die Slider nicht korrekt initialisieren beim ersten Laden bzw. beim Reload (über Browserbutton). Nachvollziehbar unter Windows Firefox (42) und Windows Chrome

Nichtinitialisieren heisst bei mir die Slider stehen ganz unten im negated fall (also ganz oben im Normalfall) und das Label zeigt "NaN" also "Not a number".

Es löst sich sofort, wenn ich zwischen verschiedenen Räumen umschalte (pagetabs) also ist es nur im ersten Fall falsch, danach tritt es erst wieder auf, wenn ich einen reload anstosse.

Verschiedene Debugausgaben im widget_slider.js haben mich nicht weitergebracht.
Ich weiss schon, dass der Text und Wert im update richtig gesetzt wird, aber dann scheint noch irgendetwas den Wert zu überschreiben...

[setstate]

Im letzten Update gab es einen Fix dazu. Hast du die Version im Einsatz?

[Marst]

Danke euch Beiden für die Ansätze, ich werde noch viel lernen müssen

Leider ändert sich der Status des Runterbotton nicht beim öffnen und umgekehrt, gibt es dafür eine Möglichkeit?

Immer diese Newbies mit ihren Problemen.

Gruß
Mario

[viegener]

Ja die Version ist von gestern (über update all) - die Änderungen aus dem commit vongestern (Improved refresh behaviour of level and slider) sind drin.

Ich habe inzwischen noch mehr debugs eingebaut und stelle interessanterweise fest, dass der "NaN"-Wert im callback des Powerange gesetzt wird.

Aus meinen Debugs ergibt sich folgendes Bild:

Code Auswählen Erweitern


in update slival : 0                                            jquery.... > eval (line 64)
in update slival : NaN                                       jquery.... > eval (line 64)
Current lstate : open for device roll_wz_1       jquery.... > eval (line 155)
Current nstate : open for device roll_wz_1      jquery.... > eval (line 156)
Checked nstate : 0 for device roll_wz_1          jquery.... > eval (line 161)
set text tstate : open for device roll_wz_1      jquery.... > eval (line 177)

..... dann nach weiteren Anfragen an fhem kommt:

in update slival : NaN                                      jquery.... > eval (line 64)



Der letzte Aufruf mit dem "NaN" steht im callback (Achtung Zeilennummern passen natürlich wg. debug-Ausgaben nicht)

ich vermute fast es hängt mit dem Einblenden des pagetabs zusammen (damit gab es schonmal Probleme)
Trotzdem ist mir unklar, wo der Wert NaN in slival herkommt...

[viegener]

Danke euch Beiden für die Ansätze, ich werde noch viel lernen müssen

Leider ändert sich der Status des Runterbotton nicht beim öffnen und umgekehrt, gibt es dafür eine Möglichkeit?

Immer diese Newbies mit ihren Problemen.

Gruß
Mario

Das sollte gehen, wenn Du in data-get-off den Zustand angibst, der gültig ist, wenn das Rollo nicht mehr in dem Zustand ist. Möglicherweise musst Du da mit regular expressions arbeiten, damit Du alle Zustände erfasst, die den Button deaktivieren sollen also z.B.

Code Auswählen Erweitern

data-get-off="open|moving|sonstwas"

Nur wenn das auf den Zustand passt wird der Button deaktiviert, ansonsten bleibt einfach der aktuelle Zustand erhalten.
Daselbe gilt natürlich auch für den anderen Switch...

Johannes

[setstate]

@viegener: Das Problem ist, dass pwrng.slider.offsetHeight 0 ist, weil das Control noch nicht gezeichnet ist, bzw. noch hidden ist.

Code Auswählen Erweitern


console.log('offsetHeight',pwrng.slider.offsetHeight);
                    setTimeout(function(){
                        pwrng.setStart(parseInt(v));
                    }, 50);


setze mal die Zeit auf 10000, ob es dann immer klappt

[viegener]

@viegener: Das Problem ist, dass pwrng.slider.offsetHeight 0 ist, weil das Control noch nicht gezeichnet ist, bzw. noch hidden ist.

Code Auswählen Erweitern


console.log('offsetHeight',pwrng.slider.offsetHeight);
                    setTimeout(function(){
                        pwrng.setStart(parseInt(v));
                    }, 50);


setze mal die Zeit auf 10000, ob es dann immer klappt

Ja ich hatte den "Hack" gesehen, und mit 10000 klappt es prinzipiell auch, das hatte mir aber nicht gefallen, denn ich habe auch zusätzlich ein recht altes Tablet, auf dem ich FTUI benutze und da müsste ich dann wirklich 10000 verwenden 

Wäre es nicht denkbar die Veränderung der Sichtbarkeit zu verwenden, um den Wert nochmals zu setzen?

[setstate]

sauber wäre, auf die richtige Höhe zu warten, bevor das erste Mal der Wert gesetzt wird. Das ist aber mit JS nicht so easy.
so etwa müsste man es machen.

Code Auswählen Erweitern


function checkHeight()
{
    if ( pwrng.slider.offsetHeight > 0 )
    {
            pwrng.setStart(parseInt(v));
    }
    else
    {
            window.setTimeout("checkHeight();",100);
    }
}


Am besten noch mit einem Zähler der max. Wartezeit

[viegener]

Ich habe noch eine andere Lösung, statt fadeIn und fadeOut wird fadeTo(0) bzw. fadeTo(1) verwendet (in pagetab).
Dadurch wird verhindert, dass jquery das "hide" durchführt, das wohl die Probleme auslöst, denn hidden-Elemente haben keine "sichtbare" grösse, ich habe mal einen ganz kurzen Test gemacht und könnte das noch sauber ziehen.

Was meinst Du

Johannes

[viegener]

Ich habe gerade einen Pull-request  #124 mit der Änderung (pagetab und slider) reingestellt. Vielleicht ist das ja eine dauerhaftere Lösung...

[dadoc]

Hi,

Das schaue ich mir noch an. Ich denke, es wird ein neues Widget werden müssen

Das bezog sich darauf, dass Wifilight beim Farbwechsel im Tablet UI (im Gegensatz zum WEBui) die Helligkeit immer auf 100% zurücksetzt, anstatt sie beizubehalten.
Gibt es dafür schon eine Lösung?
Grüße
Martin

[PatrickR]

Hi!

ich gebe es zu, Pagetab ist sehr kompliziert und verwirrend, wo was hin muss 
Vllt. können wir das noch optimieren, um es einfacher nutzen/aufbauen zu können.

Aber ich versuche nochmal die Nutzung von Pagetab und die Seiten zu erklären:
- Die index.html (Startseite) ist minimal und beinhaltet nur das Menu mit den 1-n Pagetabs
- die per Template eingebundene menu.html enthält die Pagetabs mit den Links zu den Unterseiten
- Ganz oben ist die index_main.html, die zuerst angezeigt wird und die Widgets hat
- Jede Unterseite hat wieder eine Menü-Leiste dabei, die per Template eingebunden wird. Aber, die Unterseiten  enthalten keine Header Dateien / CSS links mehr.
index.html -> Header-Files (css/js), Nur ein Gridster-Element zum Import des Templates "menu.html"
menu-html ->  eine Liste von Pagetab Widgets mit Links zu den Unterseiten
index_*.html -> Unterseiten mit den eigentlichen Widgets, keine Header-Files, ein Gridster-Element für die menu.html

So, habe das jetzt mal so umgesetzt und es ist wesentlich aufgeräumter. Allerdings habe ich jetzt das Problem, dass beim Anklicken, des Links im FHEM-GUI bzw. beim Aufruf von

Code Auswählen Erweitern


http://fhem:8083/fhem/ftui

die Seite eine angeknabberte Version meiner Standard-Oberfläche anzeigt (s. Screenshot). Beim Aufruf über

Code Auswählen Erweitern


http://fhem:8083/fhem/ftui/index.html

sieht alles wie gewünscht aus.

Patrick