New FHEM Tablet UI

update71 · 28 Mai 2015, 23:17:35

Nabend,

hab mal wie du beschrieben hast eine zusätzliche Definition erstellt:
gehe ich jetzt auf http://pi2:8083/fhem/ftui/ erhalte ich eine Seite ... aber nicht die index.html sondern die erste Seite die in der index.html durch das Menü geladen werden sollte: http://pi2:8083/fhem/ftui/#start.html ... is so ja auch nicht ganz richtig

Interessanterweise ist bei dem Test-PI (pi1) wo es nur eine index.html gibt (umbenannte index-example) das Verhalten wie erwartet. Dort gibts keine Pagetab. angezeigt wird in der Browserzeile aber auch nur: http://pi1:8083/fhem/ftui/

Meine Umgebung: Raspi (pi2) mit Fhem und Eigenbau CUL 433 ... HM-Gateway (LAN) und HUE Bridge (Lan)
Zum testen auch noch einen weiteren Raspi (pi1) beide per LAN im Netz.
Meine Rechner Macbook und iMAC, Safari und Firefox. (WLAN)
Trekstor Tablet mit WVC (WLAN)

Die Änderungen habe ich bei beiden Systemen durchgeführt und jeweils den FHEM durchgestartet.

Mein Netz: DNS auf 2 Synology NAS (NAS1 u. NAS2), DHCP auf Synology NAS (NAS2), Gateway ist ne Fritzbox, mehrere WLAN APs die das DHCP der NAS weitergeben, also nix geroutet oder so.

update71 · 28 Mai 2015, 23:22:12

Bei meinem pi2 funktionieren die Unterseiten mit deiner Definition auch alle inklusive reaload ... angezeigt wird aber nie index.html ... immer nur ./ftui/#seite1 ./ftui/#seite2 etc.

meyerpr · 29 Mai 2015, 08:21:25

Ich habe vor, die Tablet UI für ein altes Tablet zu nutzen und es irgendwo in der Küche fest zu installieren. Was ich mir bei den Widgets noch wünschen würde, wäre ein einfer 'Notizzettel'. Primär einfach erst einmal eine hübsche Anzeige, ähnlich den wohl bekannten 'Notes' in Windows. Füttern könte man ihn vorerst über fhem direkt, wobei eine komfortablere Variante (per Nachricht vom Handy?) durchaus wünschenswert wäre.

Ohne den gesamten Thread nun im Detail gelesen zu haben

bisher ist mir etwas in der Art noch nicht begegnet. Vielleicht hat auch jemand noch eine andere/bessere Idee, wie sich der altbekannte Notizzettel an der Pinwand in der Tablet UI abbilden lässt. Den WAF würde das jedenfalls stark erhöhen

Phil__ · 29 Mai 2015, 09:08:27

Zitat von: update71 am 27 Mai 2015, 20:34:13
Ich hab es so:
index.html
Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>  <title>FHEM-HC #index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="130">  <meta name="widget_base_height" content="140">  <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1">  <meta name="debug" content="0">  <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" /> <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" /> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script> <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script> <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />  <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script> <script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script> <script type="text/javascript">var wvcDevices = {'12345':'EG_Tab1'}; var wvcUserCssFile="webviewcontrol.css"</script>  </head> <body> <div data-type="clicksound" data-sound='["ion-button-tiny","ion-button-click-on","ion-tap"]' data-length='[200,300,400]' data-bind-to='["+button","+knob","+slider"]'></div>   <div class="gridster ready"> <ul style="height: 775px; width: 1270px; position: relative;"> <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="gs-w"> </li> </ul> </div> </body> </html>
menu.html
Code Auswählen Erweitern
<html> <body> <header>Räume</header> <div class="cell"> <div data-type="pagetab" data-url="start.html" data-icon="fa-home" class="cell"></div> <div data-type="pagetab" data-url="multimedia.html" data-icon="fa-sliders" class="cell"></div> <div data-type="pagetab" data-url="wetter.html" data-icon="fa-cloud" class="cell"></div> <div data-type="pagetab" data-url="heizung.html" data-icon="oa-sani_heating" class="cell"></div> </div> </body> </html>
start.html (gekürzt)
Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>  <title>FHEM-HC</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="130">  <meta name="widget_base_height" content="140">  <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1">  <meta name="debug" content="0">  <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" /> <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" /> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script> <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script> <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script> <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />  <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script> <script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script> <script type="text/javascript">var wvcDevices = {'12345':'EG_Tab1'}; var wvcUserCssFile="webviewcontrol.css"</script>  </head> <body> <div data-type="clicksound" data-sound='["ion-button-tiny","ion-button-click-on","ion-tap"]' data-length='[200,300,400]' data-bind-to='["+button","+knob","+slider"]'></div>   <div class="gridster ready"> <ul style="height: 775px; width: 1270px; position: relative;">  <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="gs-w"> </li>  ... ... ... </ul> </div> </body> </html>

Oben stehendes Bsp habe ich getestet:
Meine Definition in Fhem:

Code Auswählen

define TABLETUI_DEV HTTPSRV ftui_dev/ ./www/tablet_dev Tablet-DEV

den Code von oben und in der start.html, heizung.html ein paar widgets eingefügt.

Folgender Aufruf in Firefox/PC ergibt eine leer weisse Seite:

Code Auswählen

http://192.168.50.200:8086/fhem/ftui_dev/

Folgender Aufruf in Firefox/PC ergibt eine korrekte Darstellung der start.html,

Code Auswählen

http://192.168.50.200:8086/fhem/ftui_dev/index.html

alledings steht in der Browser url dann folgendes:

Code Auswählen

http://192.168.50.200:8086/fhem/ftui_dev/index.html#start.html

Navigiere ich jetzt über das Pagetab menü nach heizung.html bekomme ich nur das Pagetab Menü angezeigt ohne die eingefügten Widgets in der heizung.html.
Browser url zeigt folgendes:

Code Auswählen

http://192.168.50.200:8086/fhem/ftui_dev/index.html#heizung.html

wollte dies eigentlich nur Testweise ausprobieren nach den ganzen letzten Kommentaren hier... Aber nun...
Wo ist der Fehler??

Grüße

Phil__ · 29 Mai 2015, 09:42:40

Hallo setstate,
Hallo nesges,

ich habe in meinen .htmls die Größe der Widgets folgendermaßen angepasst, damit ich auf mein Nexus 7; 5 Zeilen und 7 Spalten bekomme.

Code Auswählen

	<meta name="widget_base_width" content="127">
	<meta name="widget_base_height" content="108">

Seite dem Update von gestern, hatte 5 Tage keine Updates gemacht, hat sich die Höhe meiner Widgets verändert. Jetzt passen 5 Zeilen untereinander mit der obigen Definition nicht mehr auf mein Display.
Wurde da irgendetwas verändert?
Was mir auffält, die Zeilenabstände scheinen größer geworden zu sein.
zB. zwischen Text auf muell.html oder zwischen Symbol und text label?

Siehe Screenshots!

nesges · 29 Mai 2015, 09:59:49

Ja, die Randabstände der CSS Klasse cell wurden geändert.SvenJust erklärt hier wie man's wieder auf den alten Stand bringt.

setstate · 29 Mai 2015, 10:00:42

Die Class 'cell' definiert einen spürbaren Abstand nach oben und zur Seite, damit Widgets innerhalb eines Containers nicht zusammen kleben. Wenn du die Gridster Elemente so minimiert hast, dass die zusätzlichen Abstände zuviel werden, musst du 'cell' rausnehmen und stattdessen z.B. nur left-space nutzen. 'cell' habe ich im letzten Update symmetrisch definiert, also gleiche Abstände vertikal und horizontal.

Phil__ · 29 Mai 2015, 10:23:46

Zitat von: nesges am 29 Mai 2015, 09:59:49
Ja, die Randabstände der CSS Klasse cell wurden geändert.SvenJust erklärt hier wie man's wieder auf den alten Stand bringt.

In den meisten Fällen hat der Hinweis von nesges Abhilfe geschaffen.
Aber in einzelfällen besteht immer noch ein Problem. (siehe Screenshots
Ist da setstates Vorschlag die Lösung des Problems?

nesges · 29 Mai 2015, 10:26:48

Zitat von: meyerpr am 29 Mai 2015, 08:21:25
Was ich mir bei den Widgets noch wünschen würde, wäre ein einfer 'Notizzettel'. Primär einfach erst einmal eine hübsche Anzeige, ähnlich den wohl bekannten 'Notes' in Windows. Füttern könte man ihn vorerst über fhem direkt, wobei eine komfortablere Variante (per Nachricht vom Handy?) durchaus wünschenswert wäre.

Die reine Anzeige ist mit den Wigets label oder joinedlabel bereits möglich. Letzteres ist etwas flexibler, hier mal ein Beispiel:

Code Auswählen

<div data-type="joinedlabel"
            data-device="NOTES"
            data-get='["NOTES:line1","NOTES:line2","NOTES:line3"]'
            data-mask="<div class='notes'>[<p>$1</p>][<p>$2</p>][<p>$3</p>]</div>"
            data-substitution="s/-BR-/<br>/g"
            ></div>

Vorausgesetzt wird ein Fhem-Device "NOTES", zB ein Dummy, mit den Readings line1, line2, etc. Wie du diese fütterst ist dir überlassen, Fhem bietet ja alle Möglichkeiten dazu. Per mask-Attribut werden die Zeilen jeweils in ein p-Element und gesamt in ein Container-Div mit der CSS Klasse "notes" gepackt. Dieser CSS-Klasse kannst du einen Rand mit Schattenwurf geben, sie gelb färben etc. Das substitution Attribut wird gebraucht, wenn die Readings Zeilenumbrüche enthalten sollen. Fhem entfernt diese leider, von daher müssen sie bereits beim einfügen durch einen Platzhalter, hier -BR-, ersetzt und durch substitution bei der Anzeige wieder zurück ersetzt werden.

Mir fehlt die Möglichkeit eines direkt editierbaren Notizzettels. Aber da warte ich ehrlich gesagt, dass Google ein Einsehen hat und Keep embedable macht

meyerpr · 29 Mai 2015, 11:55:39

Zitat von: nesges am 29 Mai 2015, 10:26:48
Die reine Anzeige ist mit den Wigets label oder joinedlabel bereits möglich. [...]
Mir fehlt die Möglichkeit eines direkt editierbaren Notizzettels. Aber da warte ich ehrlich gesagt, dass Google ein Einsehen hat und Keep embedable macht

Das kommt dem Ganzen schon recht nahe, werde ich so mal umsetzen. Zum füttern könnte ich mir eine kleine Android App vorstellen, die einfach die entsprechenden 'SET' Befehle an den fhem schickt. Mehrzeilig und von verschiedenen Geräten wird das aber auch schon beliebig komplex, mal sehen...

Aber vielen Dank erst einmal!

viegener · 29 Mai 2015, 13:32:46

Zitat von: update71 am 28 Mai 2015, 23:17:35
hab mal wie du beschrieben hast eine zusätzliche Definition erstellt:
gehe ich jetzt auf http://pi2:8083/fhem/ftui/ erhalte ich eine Seite ... aber nicht die index.html sondern die erste Seite die in der index.html durch das Menü geladen werden sollte: http://pi2:8083/fhem/ftui/#start.html ... is so ja auch nicht ganz richtig

Doch das ist ok so, da HTTPSRV so realisiert ist (wie auch viele andere Webserver) eine Default-Seite index.html zu lesen aber den URL im Browser unverändert zu lassen --> m.a.W. http://pi2:8083/fhem/ftui/ und http://pi2:8083/fhem/ftui/index.html liefern denselben Inhalt vom Server.

Das dann pagetab #start.html laedt ist auch so gewollt, denn wenn keine explizite Seite angegeben ist, wird der erste Pagetab geladen, da index.html selbst ja keine weiteren widgets ausser dem Menu enthält. Diese Seite wird dann hinter dem hash im URL angezeigt.

Eigentlich klingt das erstmal wie gewünscht (Also HTTPSRV liefert index.html auch wenns im URL nicht angezeigt ist und pagetab lädt den Content für den ersten pagetab). Ist Dein Problem nun, dass start.html falsch angezeigt wird also nicht im gridster oder doch noch eine weisse Seite?

Zitat von: update71 am 28 Mai 2015, 23:17:35
Interessanterweise ist bei dem Test-PI (pi1) wo es nur eine index.html gibt (umbenannte index-example) das Verhalten wie erwartet. Dort gibts keine Pagetab. angezeigt wird in der Browserzeile aber auch nur: http://pi1:8083/fhem/ftui/

Wie oben gesagt, das ist so korrekt und auch der Beleg dafür, dass der URL von HTTPSRV beident wird und nicht von FHEMWEB.

Phil__ · 29 Mai 2015, 13:54:14

Hänge ien wenig am Circlemenu
in einem circle des Menüs möchte ich eine Zahl stehen haben anstatt einem icon.
Leider ist folgendes ohne Erfolg:

Code Auswählen

<header>Wetter</header>
	<div data-type="circlemenu" class="cell circlemenu" data-direction="bottom">
    <ul class="menu">
      <li><div data-type="symbol" data-icon="fa-cloud" data-off-color="#aa6900" data-background-icon="fa-circle-thin"></div></li>
      <li><div data-type="button" data-url="wetter.html" data-icon="fa-cloud"></div></li>
      <li><div data-type="button" data-url="wetter10.html" data-icon="">10</div></li>
    </ul>
   </div>

jemand eine Idee?
Laut Bsp. im Git soll es so gehen...

viegener · 29 Mai 2015, 13:57:33

Zitat von: Phil__ am 29 Mai 2015, 09:08:27
Oben stehendes Bsp habe ich getestet:

Soweit ich sehen kann gibt es gleich mehrere potentielle Probleme:
1) Dein index.html verweist auf Dateien ausserhalb des ftui_dev-Pfades. Also z.B.

Code Auswählen

/fhem/tablet/lib/jquery.gridster.min.css. Das kann nur funktionieren wenn es entweder ein Pfad ist, der von FHEMWEB geliefert wird, weil sie unter www/tablet/. auf dem Rechner liegen, oder es eine weitere HTTPSRV-Definition gibt, die diese liefert
2) Sowohl index.html also auch start.html enthalten die Definition der Java-Skripte und CSS-Files. Das sollte nicht notwendig sein, da wenn start.html eingeblendet wird, immer noch die Skripte/CSS von index.html gültig und geladen sind. m.a.W es wird von pagetab nur ein Teil von index.html innerhalb von Gridster ausgetauscht nicht die ganze Seite. --> Vielleicht kannst Du die start.html mal analog zur menu.html reduzieren? Das gilt prinzipiell dann auch für heinzung.html

Zitat von: Phil__ am 29 Mai 2015, 09:08:27
Folgender Aufruf in Firefox/PC ergibt eine leer weisse Seite:
Code Auswählen Erweitern
http://192.168.50.200:8086/fhem/ftui_dev/

3) Dass lässt darauf schliessen, dass die Änderung von HTTPSRV, die in Antwort #1700 beschrieben ist nicht richtig bei Dir funktioniert. Kannst Du nochmal schauen, ob diese Änderung, so wie beschrieben, aktiv ist und einmal Browsercache leeren? Ich habe die Erfahrung gemacht, dass ich regelmässig in den Firefox-Einstellungen das Aching für http während der Entwicklung ausstellen muss, damit sich nicht alte gecachte Inhalte angezeigt werden, obwohl der Browser und fhem neu gestartet wurden

Gruss,
Johannes

mw_fhem · 29 Mai 2015, 14:58:58

Ich habe das Gefühl, dass die Probleme mit HTTPSRV nicht mit diesem Modul, sondern mit dem pagetab-Widget zu tun haben. Ich verwende dieses Widget aus einem einzigen Grund. Und zwar wegen des sanften Überblendeffekts. Ich wechsle meine Seiten damit, ohne data-template zu verwenden. Mit dem Button-Widget gibt es keine Probleme. Vielleicht liegt der Hund im pagetab-Widget begraben!?

nesges · 29 Mai 2015, 15:53:41

Ich habe grade einen noch unfertigen(!) "Nebenarm" der Live-Demo hochgeladen: http://fhem.nesg.es/demo/small/

Dort verwende ich pagetab ohne Probleme - aber auch ohne HTTPSRV. Ich weiss nicht ob's daran liegt, aber vielleicht hilft's euch ja beim eingrenzen der Ursachen. Die Sourcen dazu gibt's im Repository https://github.com/nesges/TabletUI-Demo-WOPR/tree/master/html/small