Neues FTUI Widget - loading - (FTUI 2.2!)

Begonnen von roman1528, 29 April 2016, 20:49:39

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

roman1528

29 April 2016, 20:49:39
Wie ich bereits (irgendwo) Vorgeschlagen hatte, stellt dieses Widget ein Icon dar, welches während des initialen ShortPoll und beim nachladen von Seiten welche nicht per .prefetch geholt werden (link und pagebutton), angezeigt wird.

Man kann es beliebig positionieren. Per Einbindung des <div data-type=""> und/oder per CSS. Es wird aber immer im Vordergrund dargestellt (z-index:2).
Ich habe es z.B. direkt nach <body> eingefügt und die Positionierung per style="" (CSS) vorgenommen.

Parameter:
data-icon -> sollte klar sein. Standard: fa-cog

data-color -> selbsterklärend. z.B. "#aa6900" oder "gold"

data-effect -> einer der FA-Effekte (fa-spin, fa-pulse, fa-blink) oder leer lassen für keinen Effekt (data-effect=""). Standard: fa-spin

data-shade -> true oder false. Das bekannte abgedunkelte Overlay mit einblenden. Hier wird der z-index des Icons auf 1002 geändert sodass es sichtbar bleibt. Das Overlay wird bei einem klick/touch darauf weiterhin ausgeblendet. Standard: false

Getestet mit FTUI_EVAL Version 2.2!

Einbindung wie gewohnt.

Beispiele:
Code Auswählen
<div data-type="loading"></div>

Code Auswählen

<div data-type="loading"
    data-icon="fa-hourglass"
    data-color="#FF00FF"
    data-effect="fa-blink"
    data-shade="true"
    class="gigantic"
    style="position:absolute; top:50%; left:50%;">
</div>

In Absprache mit setstate und den nötigen Änderungen (siehe weiter unter) welche setstate auch übernehmen würde, wird dieses Widget auch bald im Eval-Repo vertreten sein.

Für versierte Tüftler, Tester und Code-Experten gilt nun Folgendes:

Anpassung widget_link.js:
die Zeile:
Code Auswählen
        $(document).trigger("loadPage");

einfügen bei ca. Zeile 40 nach:
Code Auswählen
    function loadPage(elem){

Anpassung widget_pagebutton.js:
die Zeile:
Code Auswählen
        $(document).trigger("loadPage");

einfügen bei ca. Zeile 10 nach:
Code Auswählen
    function loadPage(elem){

Bitte testet es ein wenig und gebt mir Feedback oder Verbesserungs/Erweiterungsvorschläge.

Grüße^^

Versionen vom 29.04.2016
widget_link.js
widget_pagebutton.js
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

setstate

#1
29 April 2016, 21:46:52
ist jetzt im Eval Repo verfügbar

Code Auswählen
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/eval/controls_fhemtabletui_eval.txt

mrbreil

#2
09 März 2018, 08:05:58
Sehe ich das richtig das die Seite als geladen gilt, dieses Widget "verschwindet". Die Seite ist ja schnell geladen, mein Problem ist das bei über 400 Devices das Abfragen der Readings so extrem lange dauert. Habe meine UI natürlich am PC geschrieben und immer wieder in Chrome kontrolliert. Da wurde sie schnell geladen. Jetzt auf dem Lenovo tb2-x30f dauert das abfragen aller Devices schon mal 15 Sekunden. Ich möchte verhindern dass das Tablet schon bedient wird wenn die Werte noch nicht aktuell sind.
Oder habt ihr ne Idee wie ich die Abfrage beschleunigen kann?
Was machen andere Oberflächen da anders / besser? Z.B. beim Node Red Dashboard empfinde ich auch bei vielen Devices keinen Unterschied ob PC oder Tablet. Ist es im Prinzip möglich die Widget nach Angular zu portieren, damit diese durch NodeRed nutzbar sind?
Ästhetisch ist Tablet UI ja unschlagbar, aber mit der Performance?
Ist dieses Widget eigentlich noch aktuell und kann produktiv eingesetzt werden?

Gruß Christian

setstate

#3
09 März 2018, 09:15:51
Wie hier https://forum.fhem.de/index.php/topic,85380.0.html gerade diskutiert, vermute ich ein Problem mit dem Caching. Wenn das Tablet die Files nicht immer wieder neu laden muss, sollte das viel Performance bringen.

mrbreil

#4
09 März 2018, 11:33:38
Ne da haben wir uns falsch falsch verstanden mein "Problem" ist nicht das laden der Seite. Die Abfrage der Devices dauert so ewig lange. Der Code ist schon lange geladen.

ZitatIch möchte verhindern dass das Tablet schon bedient wird wenn die Werte noch nicht aktuell sind.

Möchte das der "graue Schleier des Ladens" erst verschwindet wenn der longpoll fertig abgeschlossen ist.

ZitatWas machen andere Oberflächen da anders / besser? Z.B. beim Node Red Dashboard empfinde ich auch bei vielen Devices keinen Unterschied ob PC oder Tablet. Ist es im Prinzip möglich die Widget nach Angular zu portieren, damit diese durch NodeRed nutzbar sind?

Es scheint für mich Noob ja an der Abfrage/Verarbeitung der Readings zu liegen.

setstate

#5
09 März 2018, 23:52:29
Du meinst bestimmt Shortpoll, das volle Update aller Readings. Das müsste schneller gehen.
Was sagt das ftui_check.html in einem anderen Tab geöffnet?
Unter Shortpoll steht die Abfrage und Verarbeitungszeit. Wie hoch ist die?

Wenn man den darunter angezeigten Filter-String in FHEMWEB (Commandline) jsonlist2 übergibt, was passiert dann? Wie schnell kommt die Antwort?

Code Auswählen
jsonlist <Filter>

Drucken
Nach oben Seiten1
Benutzer-Aktionen