Aktualisierungs- und Bedienungsprobleme mit TABLETUI

dt2510 · 22 März 2018, 13:36:52

Ich stelle bei meiner TABLETUI Umsetzung ein Paar seltsame Phänomene fest. Hier erst mal ein Paar Definitionen, damit man nachvollziehen kann worum es geht:

Code Auswählen

define WEB FHEMWEB 8083 global
attr WEB HTTPS 1
attr WEB JavaScripts codemirror/fhem_codemirror.js
attr WEB codemirrorParam { "lineWrapping":true }
attr WEB csrfToken none
attr WEB editConfig 1
attr WEB mainInputLength 80
attr WEB stylesheetPrefix ios6touchpad

define allowed_WEB allowed
attr allowed_WEB basicAuth xxxxxxxxxxxxxx
attr allowed_WEB validFor WEB

define TABLET FHEMWEB 8084 global
attr TABLET JavaScripts codemirror/fhem_codemirror.js
attr TABLET allowfrom 192.168.220.*
attr TABLET codemirrorParam { "lineWrapping":true }
attr TABLET csrfToken none
attr TABLET editConfig 1
attr TABLET mainInputLength 80
attr TABLET room _FHEM
attr TABLET stylesheetPrefix ios6touchpad

define PHONE FHEMWEB 8085 global
attr PHONE JavaScripts codemirror/fhem_codemirror.js
attr PHONE codemirrorParam { "lineWrapping":true }
attr PHONE csrfToken none
attr PHONE editConfig 1
attr PHONE mainInputLength 80
attr PHONE room _FHEM
attr PHONE stylesheetPrefix ios7smallscreen

Ich habe hier also 3 FHEMWEB Instanzen:

1) Port 8083 Zugriff per HTTPS mit Benutzer/Passwort für den Zugriff über eine VPN Verbindung von der Arbeit aus
2) Port 8084 Zugriff nur aus meinem lokalen Netzwerk
3) Port 8085 Zugriff ohne weitere Einschränkungen für Testzwecke

In meiner index.html sieht der Header folgendermaßen aus:

Code Auswählen

<head>
      <title>TabletUI</title>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="gridster_disable" content="1">
      <meta name="gridster_cols" content="10">
      <meta name="gridster_rows" content="7">   
      <meta name="widget_margin" content="0">
      <meta name="longpoll" content="1">
      <meta name="debug" content="0">
      <meta http-equiv="refresh" content="600; URL=index.html">
    </head>

Longpoll ist aktiviert, Inhalte sollten also sofort aktualisiert werden.
Momentan kann ich leider nur von der Arbeit aus über VPN testen, aber auch dort gibt es Abweichungen (siehe Bilder).

Die Probleme treten hier z.B. bei der Anruferliste auf:

1) über Port 8083 werden 3 Anrufe angezeigt (das Warning rechts beim Hörer zeigt die korrekte Zahl 1 an)
2) über Port 8085 wird nur ein Anruf (korrekt !) angezeigt (der Hörer blinkt, war beim Screenshot also gerade nicht zu sehen)

Die CallList in FHEMWEB (sowohl Port 8083 als auch 8085) zeigt korrekt nur 1 Anruf an - es gibt auch keine Readings für weitere Anrufe

Lokal über Port 8084 wurde gestern Abend alles korrekt angezeigt (teste ich später nochmal von Zuhause aus)

Weiterhin habe ich das Problem, dass ich über Port 8085 wohl "onclick" Ereignisse bekomme, diese aber von TABLETUI nicht direkt angezeigt werden, sondern erst nach neu laden der Seite. Hier im Beispiel clicke ich auf den Hörer, das Popup wird aber erst nach dem Neuladen angezeigt - ebenso beim Schliessen des Popups.

Dazu hier der HTML Code des Popups

Code Auswählen

<div id="popupFRITZ7490_CallList" 
     class="interlock"
     data-type="popup"
     data-width="80%" 
     data-height="68%" 
     data-left="10%"
     data-top="16%"
     data-draggable="false"
     data-mode="fade"
     data-device="FRITZ7490_CallList" 
     data-get="Popup"
     data-get-on="on" 
     data-get-off="off">
  <div class="dialog" 
       style="background-color: rgba(0,0,0,0.9);font-family: Arial">
    <header><div class="large thin bg-gray" style="color:Linen">Anruferliste</div></header>
    <table class="top-space" style="border-spacing:0px;width:100%;height:80%" border="0">
      <tr>
        <td class="big left-align" style="height:10%;width:5%">&nbsp;</td>
        <td class="small" style="width:10%">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="1-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big" style="width:40%">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="1-timestamp">
          </div>
        </td>
        <td class="big" style="width:40%">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="1-number">
          </div>
        </td>
        <td class="normal" style="width:5%"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="2-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="2-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="2-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="3-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="3-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="3-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="4-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="4-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="4-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="5-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="5-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="5-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="6-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="6-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="6-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="7-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="7-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="7-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="8-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="8-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="8-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
      <tr>
        <td class="big left-align" style="height:10%">&nbsp;</td>
        <td class="small">
          <div data-type="symbol" 
               data-device="FRITZ7490_CallList"
               data-get="9-state" 
               data-icon=""
               data-color="Transparent"
               data-states='["=> X","=> O_O"]'
               data-icons='["oa-phone_missed_in","oa-phone_answering"]'
               data-colors='["Orange","DeepSkyBlue"]'>
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="9-timestamp">
          </div>
        </td>
        <td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="9-number">
          </div>
        </td>
        <td class="normal"></td>
      </tr>
    </table>
    <table style="border-spacing:0px;width:100%;height:10%" border="0">
      <tr>
        <td class="big" style="height:10%;width:20%">&nbsp;</td>
        <td class="big" style="background-color:Firebrick;border-radius:5px;width:20%" onclick='ftui.setFhemStatus("set FRITZ7490_CallList clear")'>Liste leeren</td>
        <td class="big" style="width:20%">&nbsp;</td>
        <td class="big" style="background-color:DarkSeaGreen;border-radius:5px;width:20%" onclick='ftui.setFhemStatus("setReading FRITZ7490_CallList Popup off")'>Schlie&szlig;en</td>
        <td class="big" style="width:20%">&nbsp;</td>
      </tr>
    </table>
  </div>
</div>

und des aufrufenden Symbols

Code Auswählen

<div class="cell warn"
     data-type="symbol"
     data-device="FRITZ7490_CallList" 
     data-get="numberOfCalls" 
     data-get-on='["0","([1-9])|([1-9][0-9])"]'
     data-classes=["","blink"]
     data-icon=""
     data-background-icon=""
     data-icons='["fa-phone","fa-phone"]'
     data-background-icons='["",""]'
     data-colors='["Linen","Yellow"]'
     data-background-colors='["transparent","transparent"]'
     onclick='ftui.setFhemStatus("setReading FRITZ7490_CallList Popup on")'>
</div>

2 weitere Probleme kommen noch hinzu:

1) es kommt häufig vor, das eine Aktion (Aktor schalten usw). ausgeführt wird, aber der Status nicht korrekt aktualisiert wird (Beispiel: Homestatus von"Home" auf "Away" wechseln zeigt häufig beide Symbole als aktiv an)
2) Anzeige des Kamerabildes (SSCam) per VPN oft erst nach 1 Minute aber generell ein Paar Sekunden Versatz zum Originalbild auf der Diskstation und geringe Bildrate - das scheint allerdings andere Ursachen als der Rest zu haben ...

Fall mehr Infos benötigt werden einfach kurz nachfragen ... bin für jede Hilfe dankbar, da die zuverlässige Bedienung sehr eingeschränkt bzw. die Gewissheit über einen Schaltzustand (weshalb man ja Bidirektionale Aktoren hat) nicht immer gegeben ist.

dt2510 · 22 März 2018, 14:30:44

Ich habe den FHEMWEB Instanzen noch das Attribut "longpoll" = 1 hinzugefügt, mal sehen ob die Widgets dadurch schneller (und vor Allem korrekt) aktualisiert werden (das Problem war auch im LAN vorhanden).

Die restlichen Probleme scheinen irgendwie am VPN oder an der Kombination https/VPN zu liegen.

1) Falsche Anruferliste (https über VPN - Port 8083)

Legt man TABLETUI auf den linken und die CallList in FHEMWEB auf den rechten Monitor und drückt links im Popop "Liste leeren" (set CallList clear wird ausgeführt) passiert folgendes:

- links: Anrufzeiten und Rufnummern verschwinden, die Icons bleiben stehen, Anzahl Anrufe wird mit "0" im Warning angezeigt
- rechts: List wird geleert, alle Readings 1-state usw. werden gelöscht - numberOfCalls ist 0

Drücke ich jetzt links F5 zum Aktualisieren passiert folgendes:

- links: alle alten Icons, Anrufzeiten und Rufnummern werden wieder wie vor der Löschung angezeigt, Anzahl Anrufe wird mit "0" im Warning angezeigt
- rechts: keine Veränderung

Erst nach dem Neustart des Browsers wird eine leere Liste angezeigt.

2) onclick/Popup (http über VPN kein https - Port 8085)

Auch hier wieder linker Monitor TABLETUI und rechts die CallList in FHEMWEB (dort ist das UserReading "Popup"). Beim clicken auf den Hörer passiert folgendes:

- links: keine Veränderung
- rechts: Popup wird auf "on" gesetzt

Drückt man jetzt F5 passiert folgendes:

- links: Popup wird angezeigt
- rechts: keine Veränderung

3) Das Kamerabild braucht über VPN (http oder https) 80 Sekunden bis zur Anzeige - lokal ist es sofort da

update:

ich habe longpoll auf websocket gesetzt - ohne Veränderung.
Selbst nach "update restart" wird noch die falsche Liste angezeigt

Browser: Google Chrom aktuellste Version 65.0.3325.181 (Offizieller Build) (64-Bit)

der Internet Explorer 11 unter Windows 10 (11.309.16299.0) zeigt genau das gleiche Verhalten - Edge lässt sogar die Anzahl Anrufe unverändert in der Anzeige .... wenn überhaupt alle Icons angezeigt werden

n4rrOx · 22 März 2018, 16:26:33

Hi,

hast du in allen deinen labels class="autohide" gesetzt?
Wenn nicht, versuch das mal ... sollte helfen.

Gruß
Mathias

dt2510 · 22 März 2018, 16:38:47

macht leider keinen Unterschied

dt2510 · 22 März 2018, 17:43:56

Auch lokal über Port 8084 hab' ich das gleiche Problem ... selbst nach Neustart des Fully Browsers wird dort noch der Inhalt der Liste angezeigt

dt2510 · 23 März 2018, 09:31:45

Ich hab' gestern mein komplettes System auf einem NUC statt Raspberry Pi3 neu aufgesetzt (Konfiguration, 99_myUtils.pm, Logs und mein TabletUI Verzeichnis wurden natürlich kopiert).
Nachdem alle Passwörter für Kameras Fritzbox usw. gesetzt waren lief auch alles wieder.

Folgende Probleme bestehen weiterhin (lokal):

- Anruferliste (FB_CALLLIST) zeigt immer noch Anrufe an, die aus der Liste gelöscht wurden (mit set CallList clear) ... überlebt sogar Fully Browser Neustart und FHEM Neustart
- Kamerabild (SSCam) mit 2-4 Sekunden Versatz und Diashow, Vorschaubild wird in 99% der Fälle angezeigt - großes Bild im Popup fehlt häufig (obwohl die Vorschau noch aktiv ist)

Gelöst zu sein scheint:

- Aktualisierung der Schaltzustände ... longpoll websocket scheint hier geholfen zu haben

Wie es mit dem NUC über VPN/https aussieht muss ich noch testen ... aktuell hat mein ISP leider Probleme mit der Leitung, so dass die VPN nicht aufgebaut werden kann.

setstate · 23 März 2018, 09:45:13

Für die Anruferliste funktioniert class="autohide"

Das lässt remote gelöschte, aber lokal gecachte Einträge verstecken.

dt2510 · 23 März 2018, 10:13:01

autohide hab' ich bereits drin ... wie gesagt überlebt die Anzeige sogar einen Browser und FHEM Neustart !?
Irgendwo ist mit Sicherheit noch etwas gecacht aber ich habe keine Ahnung wo ...

setstate · 23 März 2018, 10:30:26

Die Daten sind im JS localStorage und überleben damit Neustart und Empty Cache. Wie sieht die Stelle genau aus, wo dub autohide drin hast? Zeige mal den Code Teil.

dt2510 · 23 März 2018, 10:42:25

hier mal ein Beispiel:

Code Auswählen


        <td class="big autohide">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="3-timestamp">
          </div>
        </td>

ich könnte es auch direkt im <DIV> angeben, aber das sollte keinen Unterschied machen oder ? Soll autohide auch für die Icons funktionieren ?

setstate · 23 März 2018, 10:47:21

Jepp, autohide muss genau beim entsprechenden data-device und data-get platziert sein

Code Auswählen


<td class="big">
          <div data-type="label" 
               data-device="FRITZ7490_CallList" 
               data-get="3-timestamp"
               class="autohide">
          </div>
        </td>

dt2510 · 23 März 2018, 10:50:03

ok ... das werd' ich dann mal testen ...

Ich hab' mir mal gerade noch das logfile angesehen (nach dem Wechsel Pi ->NUC) und vielleicht gibt es ja da noch Hinweise ...

Ich hätte folgende Meldungen, die vorher nicht da waren:

Code Auswählen

FRITZBOX FRITZ7490: Define.254 Modul functionality limited because of missing perl modules: Net::Telnet

Code Auswählen

PERL WARNING: can't getattr: Input/output error at ./FHEM/DevIo.pm line 394.

Code Auswählen

Probing CUL device /dev/ttyS0
CUL: Can't open /dev/ttyS0: Input/output error

usw. bis ttyS31 (ich habe keinen CUL ... kann ich das abschalten ??)

dt2510 · 23 März 2018, 11:21:06

Die CUL Meldungen konnte ich abschalten (seitdem kommt auch die DevIo.pm Meldung nicht mehr), ~~aber das missing perl module verwirrt mich. Ich hatte Telnet doch mit~~

Code Auswählen

sudo apt-get install libnet-telnet-perl

~~installiert ... oder brauche ich noch ein anderes Modul ?~~ einfach nochmal ausgeführt, schon klappt es

autohide scheint zu funktionieren (brauche über VPN zwar einen reload, hoffe aber dass es lokal jetzt klappt ... teste ich heute Abend)

~~Probleme bereitet mir aktuell noch der https Zugriff - der fliegt mit Fehler "FHEMWEB SSL/HTTPS error: No such file or directory" einfach raus - aber das versuche ich im Bereich FHEMWEB zu klären ...~~

edit

VPN über https reagiert genauso wie ohne https - auch die Probleme mit onclick/Popup Widget scheinen mit dem Wechsel zum NUC verschwunden zu sein