FTUI 2.6

setstate · 12 Februar 2017, 00:56:17

Um auf AJAX longpoll umzustellen musst man das im HEADER setzen

<meta name="longpoll_type" content="ajax">

Wo FHEM erreicht werden kann, setzt man hiermit

<meta name='fhemweb_url' content='http://fhemserver.local:8083/fhem/'>

Kannst du testweise auch auf http anstatt https umstellen?

octek0815 · 12 Februar 2017, 01:31:45

Hi,

die Umstellung hat bis auf eine kleine Verschiebung geklappt, jedoch funktioniert bei einem meiner Tablets Longpol nicht mehr.
Ich habe zwei Tablets, eins mit Android 4.4 und eins mit 6.0. Beim 4.4er wird im Fully Browser klappt Longpol nicht.
Sowohl mit WEB > Longpol 1 oder websockets. Beides klappt nicht. Im normalen Chrome Browser klappt es.
Auf dem 6.0er Tablet ist wiederum alles Ok.
Hat einer ne Idee?

Grüße
Olli

Markus. · 12 Februar 2017, 05:55:53

mal ne blöde Fage bezüglich der Index.html...

Wenn man

Code Auswählen


<meta name="longpoll_type" content="websocket">

verwendet,muss dann die Zeile

Code Auswählen

 
<meta name="longpoll" content="1">

raus ?

Gruß

Markus

Brause · 12 Februar 2017, 08:24:45

Guten Morgen

Ja wer lesen kann ist klar im Vorteil.

Das es in den meta's nicht mehr "longpoll" sondern "longpoll_type" heißt, habe ich komplett überlesen.
Jetzt sind auch die Fehler-Meldungen in der Console weg.
So wohl http als auch https.

Das mit der url Einstellung ist in meinem Fall nicht nötig, bzw kontra produktiv.
Es gibt ja 2 Wege über die der Zugriff erfolg. Entweder für "inHouse" "http://192.168...." und zum anderen für extern "https://www...."
und ohne Angabe findet er ja den richtigen Weg.

Jetzt braucht es nur noch eine Lösung für den Proxy, damit der auch websocket-Anfragen weiterleitet.
Bisher schlugen leider alle Versuche fehl.

Gruss Brause

Markus. · 12 Februar 2017, 08:56:46

jetzt noch eine Frage zum verständis...

Ich habe eine Index.html mit dem kompletten Header. Ansonsten beinhalten die Seiten im Templates (htm). Alle Seiten blenden die
Navigation.html ein. Was ich jetzt gesehen habe ist, das eine Werte-Aktualisierung nur auf der Index.html erfolgt und nicht auf den Seiten, die über die Navigation mit pagetab erreicht werden. Muss der komplette Header auf allen Unterseiten vorhanden sein oder reicht es wenn er in der Startseite (index.html) vorhanden ist?
Vor der Änderung des Longpoll hat es soweit funktioniert mit der Aktualisierung auf allen "Unterseiten"...

Mein Header sieht wie folgt aus...

Code Auswählen


<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="154">
    <meta name="widget_base_height" content="142">
	<meta name="widget_margin" content="3">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="0">
      <!--<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="longpoll_type" content="websocket">
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

     <!--
	<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
	/ -->

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
   

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>TabletUI-Automation</title>
</head>

Gruß

Markus

ext23 · 12 Februar 2017, 10:11:06

Zitat von: Brause am 12 Februar 2017, 00:11:42
zum Thema longpoll kann ich nicht auf websocket umstellen, da ich über einen Apache-Proxy arbeite
und ich dann schon im FHEMWEB ständig die Meldung
Code Auswählen Erweitern
Connection lost, trying a reconnect every 5 seconds
bekomme.

OK, das erklärt warum das bei mir auch so ist, ich nutze auch den Apache als Proxy weil ich es anders nicht hin bekomme mit dem SSL und LetsEncrypt Zertifikaten.

Btw. bei mir sieht alles gleich aus nach dem Update.

Jojo11 · 12 Februar 2017, 10:41:07

Danke setstate! Bei mir läuft nach minimalen Änderungen alles. Die css-Anpassungen hier und da machen in meinem Fall absolut Sinn.

schöne Grüße
Jo

Markus. · 12 Februar 2017, 11:24:22

Also das mit dem disconect hab ich weiterhin ab und zu mal umd das halt mit dem automatischen aktualiseren der Werte. Habs ach mal auf ajax umgestellt aber da ist das selbe...😱

Garbsen · 12 Februar 2017, 14:23:56

Zitat von: Det20 am 11 Februar 2017, 21:08:59
Wenn es es mal zusammenfassen darf:

- In FHEM.CFG muss "attr WEB longpoll websocket" definiert sein
- In der INDEX muss "<script src="js/fhem-tablet-ui.js" defer></script>" stehen statt "<script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>"
- "bigger thin" muss gegen "great thin" getauscht werden

Tja, habe ich alles so gemacht, bekomme permanent folgende Toast Meldungen
Longpoll wegsocket started
Disconnected from FHEM
Retry To connect in 10 seconds
Disconnected from FHEM
Retry to connect in 10 seconds

Das wiederholt sich, zwischendurch meldet es auch mal (aber selten) Full refresh, dann aber wieder obiges.
FHEM und Tabletui läuft alles auf dem gleichen NUC

setstate · 12 Februar 2017, 14:27:28

wenn du in der fhem.cfg das eingetragen hast "attr WEB longpoll websocket"
musst du "shutdown restart" rufen.

Im FHEMWEB kannst du es adhoc umstellen und es müsste sofort eine Verbindung hergestellt werden

setstate · 12 Februar 2017, 14:32:50

Ich werde noch eine kleine Abfrage einbauen, ob websocket überhaupt aktiviert ist auf FHEM-Seite. Wenn nicht dann Fallback auf AJAX.

Update: ist jetzt integriert und hochgeladen

Ich hoffe das heißt bei allen "WEB"

Anzeige im HTML

Code Auswählen


<div data-bind="ftui.deviceStates['WEB'].longpoll.val"></div>

Garbsen · 12 Februar 2017, 14:47:15

Zitat von: setstate am 12 Februar 2017, 14:27:28
wenn du in der fhem.cfg das eingetragen hast "attr WEB longpoll websocket"
musst du "shutdown restart" rufen.

Im FHEMWEB kannst du es adhoc umstellen und es müsste sofort eine Verbindung hergestellt werden

Habe es in FHEM bei web als Attr. gesetzt, wird dort auch so angezeigt

Garbsen · 12 Februar 2017, 14:50:13

Zitat von: Garbsen am 12 Februar 2017, 14:47:15
Habe es in FHEM bei web als Attr. gesetzt, wird dort auch so angezeigt

Vorsichtshalber trotzdem nochmal Neustart gemacht, ändert aber nichts

Garbsen · 12 Februar 2017, 14:52:32

Hier einmal der Header meiner Start.html, vielleicht ist da ja etwas anderes falsch

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=yes" />
    <meta name="widget_base_width" content="75">
    <meta name="widget_base_height" content="90">
    <meta name="widget_margin" content="1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll_type" content="websocket">
    <!--<meta name="longpoll" content="1">--> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/fhemSVG.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />

    <link rel="stylesheet" href="/fhem/tablet_eval/fonts/roman/style.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/fonts/material/style.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css"/>

    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>



    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>
<body>

Rudy · 12 Februar 2017, 15:03:48

Bekomme seit dem Update auf 2.6 folgende Fehlermeldung:

Code Auswählen

Error

fhem-tablet-ui.js:494
TypeError: $(...).gridster is not a function

Habe wie oben beschrieben auf "Websocket" umgestellt und nutze Gridster nicht (Seite basiert auf Flexbox), daher dazu auch keine Angaben im Header.