New FHEM Tablet UI

nesges · 29 Mai 2015, 16:07:18

Zitat von: Phil__ am 29 Mai 2015, 13:54:14
in einem circle des Menüs möchte ich eine Zahl stehen haben anstatt einem icon.

Zahlen, bzw. der Inhalt des Widget-Divs, werden auf unterster Ebene angezeigt. Vereinfacht sieht das Modell so aus:

content
background-icon
icon

Das Button-Widget hat standardmässig fa-circle als background-icon. Das füllt den Kreis aus und überdeckt die unterste Ebene. Lösung: fa-circle durch fa-circle-thin ersetzen:

Code Auswählen

<li><div data-type="button" data-background-icon="fa-circle-thin" data-url="wetter10.html" data-icon="">10</div></li>

viegener · 29 Mai 2015, 18:55:49

Zitat von: mw_fhem am 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!?

Hi,
ja das ist gut möglich, deshalb versuche ich die Ursache zu finden, warum bei mir sowohl HTTPSRV als auch pagetab mit verschiedenen Browsern und Plattformen und URLs laufen, aber nicht bei allen. Grundvermutung: Weisse Seite beim Aufruf hängt vermutlich an URLs/HTTPSRV, da sonst zumindest der Hintergrund geladen werden sollte. Andere Effekte eher an pagetab.

Bei der Button-Lösung die ganze Seite ausgetauscht wie bei einem normalen Link, dass sieht anders aus und lädt wieder eine komplett neue Seite.

Kannst Du beschreiben, ob und welches Problem mit (dem neuen) pagetab bei Dir auftritt, dann kann ich dem weiter auf den Grund gehen?

harway2007 · 30 Mai 2015, 15:20:33

toll toll - echt gut - aber den Beispielen fehlen teilweise die Schriften und data-devices .. so macht das ausprobieren nicht so recht spass ..
es ist immer nur der html code dabei ...
trotzdem ein Lob ..

MFG Harway

setstate · 30 Mai 2015, 15:31:54

Zitat von: harway2007 am 30 Mai 2015, 15:20:33
toll toll - echt gut - aber den Beispielen fehlen teilweise die Schriften und data-devices .. so macht das ausprobieren nicht so recht spass ..
es ist immer nur der html code dabei ...
trotzdem ein Lob ..
MFG Harway

Hallo harway2007,

danke dir fürs Lob und die Verbesserungsvorschläge.
Kannst du mir aber genauer erklären, was du mit "fehlen teilweise die Schriften und data-devices ..." meinst?
Evtl. an Hand eines Beispiels, wie für dich bessere Beispiele aussehen.

mw_fhem · 31 Mai 2015, 10:32:47

Zitat von: viegener am 29 Mai 2015, 18:55:49
Kannst Du beschreiben, ob und welches Problem mit (dem neuen) pagetab bei Dir auftritt, dann kann ich dem weiter auf den Grund gehen?

Also...
Meine cfg-Definition sieht so aus wie im wiki:

Code Auswählen

define tablet_ui HTTPSRV tablet/index.html ./www/tablet Tablet Frontend

Ich verwende das pagetab-Widget nur wegen den sanften Übergangs, also ohne template-Funktion. Ich rufe das UI auch nicht über die fhem-Seite auf, sondern über die URL im Browser. Da das ganze später mal auf einem Tablet dauerhaft laufen soll, ist das für mich kein Problem. Ich brauche also den Link nicht.
Meine "Startseite" heißt home_eg.html. Dort habe ich (über pagetab) Verlinkungen zu den anderen Seiten. Diese wiederum haben ein "Home-pagetab", das zu home_eg.html zurück führt.
Hier ein Ausschnitt aus home_eg.html:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- 
	 /* FHEM tablet ui */
	 /*
	 * Just another dashboard for FHEM
	 *
	 * Version: 1.3.5
	 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
	 * URL: https://github.com/knowthelist/fhem-tablet-ui
	 *
	 * Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
	 * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
	 */
	-->
	<title>FHEM-Tablet-UI</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="57">
	<meta name="widget_base_height" content="70">
	<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"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	
	<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" />
	<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/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>
	
	<!-- Enable this lines for usage with WebViewControl --><!--
	<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': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	--><!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,small -->
<!-- available data-type: contact,dimmer,homestatus,label,push,slider,switch,thermostat,volume -->

<div class="gridster">
<ul>

<!-- Kopfleiste -->
<!-- Uhr -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
	<header></header>
	<div class="cell bigger">
		<div data-type="clock" data-format="H:i"></div>
		<!-- <div data-type="clock" data-format="d.m.Y"></div> -->
	</div>
</li>

<!-- Platzhalter -->
<li data-row="1" data-col="3" data-sizex="11" data-sizey="1"></li>

<!-- Status rechts oben -->
<li data-row="1" data-col="14" data-sizex="2" data-sizey="1">
	<header></header>
	<div class="cell bigger">EG</div>
	
</li>
<!-- Kopfleiste Ende -->


<!-- Räume-Button -->
<li data-row="2" data-col="1" data-sizex="2" data-sizey="2">
	<header><font size="+1" color="747474">Räume</font></header>
	<div class="cell big">
		<div data-type="pagetab" data-url="raeume_eg.html" data-icon="fa-th-large"
			data-off-color="#2a2a2a" data-background-icon="fa-circle" 
			data-off-background-color="#aa6900"></div>
	</div>
</li>

<!-- Licht-Button -->
<li data-row="4" data-col="1" data-sizex="2" data-sizey="2">
	<header><font size="+1" color="747474">Licht</font></header>
	<div class="cell big">
		<div data-type="pagetab" data-url="licht_eg.html" data-icon="fa-lightbulb-o"
			data-off-color="#2a2a2a" data-background-icon="fa-circle" 
			data-off-background-color="#aa6900"></div>
	</div>
</li>
.......

Im Browser gebe ich folgendes ein:

Code Auswählen

http://<IP>:8083/fhem/tablet/home_eg.html Für den Bruchteil einer Sekunde ist die Home-Seite zu sehen, um dann zu raume.html zu gehen (einer der Links). Im Adressfeld steht dann

Code Auswählen

http://<IP>:8083/fhem/tablet/home_eg.html#raeume_eg.html

Es wird also zur Räume-Unterseite weitergeleitet. Auf dieser Unterseite, die wie alle anderen gleich aufgebaut ist, ist bisher nur das Home-pagetab (screenshot). Das lässt sich aber nun nicht mehr anklicken. Umgekehrt, wenn ich raume.html aufrufe, komme ich zu home_eg.html.
Wenn ich statt pagetab wieder button benutze, kalppt wieder alles.

Es steckt der Wurm drin $:-\$

viegener · 31 Mai 2015, 15:50:47

Zitat von: mw_fhem am 31 Mai 2015, 10:32:47
Also...
Meine cfg-Definition sieht so aus wie im wiki:
Code Auswählen Erweitern
define tablet_ui HTTPSRV tablet/index.html ./www/tablet Tablet Frontend

Das ist schon das erste Problem, denn in diesem Fall werden die URLs nicht über HTTPSRV abgerufen, denn
der tablet Teil von

Code Auswählen

http://<IP>:8083/fhem/tablet/home_eg.html

wird zu

Code Auswählen

tablet/home_eg.html

und das passt nicht zu Deiner HTTPSRV-Definition, bei der ja URLs mit

Code Auswählen

tablet/index.html

beginnen müssen.

Zur Erklärung in FHEMWEB wird auf den Beginn des übergebenen URLs (nach dem /fhem/) auf einen Match mit der HTTPSRV-Definition überprüft.

Was passiert also, wie bereits gesaagt, dieser URL wird über FHEMWEB und NICHT HTTPSRV behandelt.

Einfache Überprüfung, wie oben beschrieben: Weitere HTTPSRV-Definition anlegen, bei der das Verzeichnis ind er HTTPSRV Definition nicht dasselbe ist, wie im www-Verzeichnis. Also z.B.

Code Auswählen

define tablet_ui HTTPSRV tablettest/index.html ./www/tablet Tablet Frontend

Ergebnis es kommt nur eine FHEMWEB_Seite...

Danach ist mir nicht klar, ob Du gar keine index.html-Seite hast (sondern nur eine home_eg.html ?). Die index.html wird normalerweise benötigt, da bei Fehlen eines Dateinamens im URL diese Seite geladen wird.

Wenn Du home_eg.html angibst, so wird diese statt index.html geladen, das Verhalten danach ist aber so wie es gedacht ist. Also wird home_eg.html nur als Einstiegsseite verwendet und in der Einstiegsseite wird der erste pagetab geladen. Man könnte das noch konfigurierbar machen, aber das ist jetzt erstmal zweitrangig.

Ich glaube das zentrale Missverständnis ist immer noch die Rolle von index.html:

- index.html sollte als Einstiegsseite mit den CSS, JS und Gridster-Definitionen da sein
- index.html sollte auch die Pagetab definitionen beinhalten (die erste wird automatisch geladen)
- alle anderen pagetab-Seiten müssen keine JS/CSS-links mehr enthalten

Also mein Vorschlag:
- HTTPSRV patchen
- HTTPSRV-Definition in fhem.cfg anpassen
- index.html statt home_eg
- Inhalt von raeume_eg sollten der gridster und die pagetabs sein (am einfachsten als include über template) UND die für den raum anzuzeigenden widgets ebenfalls im gridster

Das jetzt nur mal ganz knapp, bei Bedarf gerne in mehr Detail, aber das ist schon wieder mehr Text als geplant.

Gruss,
Johannes

PS: Leider kann ich im wiki nichts änern, will das aber auch erst tun, wenn ich sicher bin, dass es auch bei (allen) anderen sauber funktioniert

mw_fhem · 31 Mai 2015, 18:54:42

Danke Johannes für die ausführliche Antwort. Ich werde versuchen deine Ausführungen zu verstehen und zu testen.
Aber wahrscheinlich ist es das einfachste, wenn ich von pagetab auf button zurückgehe, sieht zwar nicht so schön aus, funktioniert aber. Und ich muss nicht so viel umkrempeln. Und nochmal: Bis zu diesem Update vor ein paar Tagen hat alles korrekt funktioniert. Es muss also irgendetwas mit dem Widget passiert sein.

setstate · 31 Mai 2015, 19:37:35

ich denke, wir müssen das pagetab nur etwas flexibler machen, auf die verschiedenen Möglichkeiten, die auftreten können. Nicht der User muss muss sich auf das widget einstellen ...
Ich denke an etwa so was:

var url = document.location.href;
// Remove fragment identifiers from the URL.
url = url.replace(/#.*$/, '');
// Remove an optional (redundant) filename from the URL.
url = url.replace(/index\.html$/, '');
...

viegener · 31 Mai 2015, 19:53:19

Das könnte man sicher angehen, in dem man verschiedene Konfigurationsparameter hinzufügt und auch mehr Flexibilität einfügt.

Es sollte allerdings auch das Wiki und die Commandref korrigieren, da die jetzige (auch von mw_fhem) verwendete Definition so nicht wirklich funktioniert (eigentlich kann die sogar komplett entfallen, denn es geht auch ohne solange URL_Teil und Pfad identisch sind).

Ich kann auch anbieten einen Text dazuzuschreiben, wenn Ihn jemand in die Readme/ins Wiki hochlädt?
(Eigentlich habe ich die Texte ja sowieso schon hier imm Thread geschrieben

)

setstate · 31 Mai 2015, 20:50:07

@viegener: konntest du schon den Maintainer des HTTPSRV erreichen, bezüglich deines Patches?

viegener · 31 Mai 2015, 21:14:44

Zitat von: setstate am 31 Mai 2015, 20:50:07
@viegener: konntest du schon den Maintainer des HTTPSRV erreichen, bezüglich deines Patches?

Leider noch nicht auf den Forumseintrag, ich habe ihm mal eine Email geschickt.
Gruss,
Johannes

mw_fhem · 31 Mai 2015, 21:33:53

Zitat von: setstate am 31 Mai 2015, 19:37:35
ich denke, wir müssen das pagetab nur etwas flexibler machen, auf die verschiedenen Möglichkeiten, die auftreten können. Nicht der User muss muss sich auf das widget einstellen ...

Je mehr Möglichkeiten eine Software/ein Software-Modul bietet, umso mehr Schwierigkeiten treten auf. Trotzdem bin ich immer wieder begeistert, wie die Fachleute hier Updates raushauen

Und ein Stück weit müssen sich auch die User an die Widgets anpassen - was nicht geht, geht eben nicht.

OliS. · 01 Juni 2015, 00:32:28

Hallo zusammen,

wollte mich nur mal für dieses wirklich gelungene Projekt bedanken. Ich komme demnächst bestimmt mit der einen oder anderen Frage um die Ecke.

Gruß und gute Nacht!

Oli

viegener · 01 Juni 2015, 01:55:12

Zitat von: mw_fhem am 31 Mai 2015, 18:54:42
Danke Johannes für die ausführliche Antwort. Ich werde versuchen deine Ausführungen zu verstehen und zu testen.
Aber wahrscheinlich ist es das einfachste, wenn ich von pagetab auf button zurückgehe, sieht zwar nicht so schön aus, funktioniert aber. Und ich muss nicht so viel umkrempeln. Und nochmal: Bis zu diesem Update vor ein paar Tagen hat alles korrekt funktioniert. Es muss also irgendetwas mit dem Widget passiert sein.

Ich habe heute Abend mal verschiedene Szenarien durchgespielt und stelle fest und inzwischen kann ich die Probleme zum Teil nachstellen. Irgendwo läuft im Zusammenspiel von JS, Browser, Caches, HTML, Perl und meinem Kopf noch etwas schief.

Ich muss daran diese Woche noch weitermachen...

Sorry,
Johannes

johannes1984 · 01 Juni 2015, 12:16:12

Hallo,

Ich nutze das UI als Ersatz für eine App auf dem iPhone, da ich so einfach selbst bestimmen kann, wie es aussieht.

Dabei ist mir aufgefallen, dass das Widget für den Home Status etwas schief aussieht. Soll das so sein?

Außerdem muss ich ganz oft die Seite mehrmals aktualisieren, damit sie vollständig angezeigt wird. Manchmal ist nur der Text sichtbar und der Hintergrund weiß, nach 2x neuladen funktioniert es dann.

LG Jo