Evaluierungsversion 2.2

setstate · 30 März 2016, 19:32:13

Genau, man hat eine index.html mit den festen Bestandteilen, wie pagebutton, Uhr, Statuszeile usw.
Die Pagebuttons braucht man auch nicht mehr als Template anlegen, sie werden ja nur einmal gebraucht, auf der Hauptseite.
Auf der Hauptseite gibt es dann ein oder mehrere austauschbare Felder <div class="page" id="content1"></div>, die per Pagebutton geladen werden. Man kann ein Feld von allen Pagbuttons ändern lassen, dann muss der Content aber jedes mal neu initialisiert werden. Oder man gibt jeder Unterseite ein festes Feld, was dann nur aus/eingeblendet wird.

Platzhalter für austauschbaren Inhalt

Code Auswählen

    
    <div class="page" id="content1"></div>
    <div class="page" id="content2"></div>
    <div class="page" id="content3"></div>

Pagebutton

Code Auswählen

<div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" ...

Hier sagt man: ich will einen Inhalt laden data-load="#content1" <- ein DOM Element mit der ID "content1" und gibt mit data-url="#page_content1.html" an, nicht die Seite wechseln, nur als Hash anhängen. Aus dieser Attributt-Kombi load und url ergibt sich der Pagebutton-Mode: "Hole den Inhalt aus der Seite page_content1.html -> DOM Element "#content1" und füge ihn in die aktuelle Seite beim gleichnamigen DOM Element "#content1" ein"

Body Teil in der index.html

Code Auswählen


<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
            <div class="cell">
                <div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*index_page_demo.html|.*#page_content1.html)" data-icon="fa-home" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#page_content2.html" data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content2.html" data-icon="fa-music" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#page_content3.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content3.html" data-icon="fa-sliders" class="prefetch top-space"></div>
            </div>
            </li>
        </ul>
    </div>
    <div class="page" id="content1"></div>
    <div class="page" id="content2"></div>
    <div class="page" id="content3"></div>
</body>

Die Unterseite, aus der der Inhalt geladen wird muss dann so aussehen. Der Header-Teil kann leer bleiben, schadet aber nicht, wenn doch Styles oder JS Files genannt werden. Die werden zwar ignoriert, können aber nützlich sein, wenn man die Unterseite Standalone testen möchte.

Code Auswählen


<!DOCTYPE html>
<html>
<title>FHEM</title>
<head>
</head>
<body>
  <div class="page" id="content1">
    <!-- Inhalt ab hier -->
   </div>
</body>
</html>

Also der Teil <div class="page" id="content1"> wie in der Index.html muss wiederfindbar sein, alle Kindknoten daraus werden in die Hauptseite geladen. Man kann darin auch Gridster Elemente verbauen, siehe Beispiel:

Code Auswählen


<!DOCTYPE html>
<html>
<title>FHEM</title>
<head>
</head>
<body>
  <div class="page" id="content1">
    <div class="gridster">
      <ul>
        <li data-row="1" data-col="2" data-sizex="6" data-sizey="6">
             <header>PAGE ONE</header>
             <div class="left">
                <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                <div class="inline">
                   <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="large cell"></div>
                   <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="bigplus thin"></div>
                   min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                </div>
             </div><div class="row"></div>
             <div class="left">
                 <div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                 <div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                 <div data-type="example" data-device="dummy1" data-get="volume" class="colorfull">efe</div>
             </div>

        </li>
      </ul>
    </div>
   </div>
</body>
</html>

Damit der Pagebutton zeigt welcher gerade aktiv ist, gibt es data-active-pattern. Damit kann man mit RegEx vorgeben, wie die URL aussehen muss, damit der Pagebutton als aktiv gilt.

Code Auswählen

data-active-pattern=".*#page_content2.html"

Damit die Unterseite schon im Hintergrund vorgeladen wird, kann man mit "prefetch" einschalten. Sollte man aber nicht pauschal für alle Seiten machen, sonst dauert der Start zu lange.

Code Auswählen

class="prefetch"

Einmal angezeigte Unterseiten bleiben im Cache und werden beim nächsten Aufruf schnell angezeigt, weil kein erneutes Init passiert. Soll jedesmal ein Init gerufen werden, muss man "nocache" beim Pagebutton mitgeben

Code Auswählen

class="nocache"

ulli · 30 März 2016, 20:30:40

Vielen Dank. Die Erklärung ist sehr hilfreich.
Und die Geschwindigkeit ist der Hammer!!!

Bugs:
1)
wenn man z.B. in deiner Beispielkonfiguration die neue Seite in Zeile 2 laden lassen möchte geht das nicht.
Die neue Seite ist immer in Zeile 1.
Ändere mal in dem File "page_content1.html" die Zeile wie folgt ab

Code Auswählen

<li data-row="2" data-col="2" data-sizex="6" data-sizey="6">
2)
data-return-time="60" funktioniert nicht mit pagebutton
3)
Man kann durch wiederholtes klicken auf einen pagebutton diesen auch wieder abwählen...es ändert sich aber dann nichts auf der Seite...

Fehlende Widgets:
1) popup
2) klimatrend

Noch eine Frage:
Ist es von Nachteil in der 2.1, wenn man in der page_content1.html templates wie folgt verwendet?
Können die entsprechend vorgeladen werden? Das würde die Übersichtlichkeit verbessern...

Code Auswählen


<body>
  <div class="page" id="main">
    <div class="gridster">
      <ul>
				<li class="halbTransparent" data-template="inc_fahrzeiten.html" data-row="2" data-col="2" data-sizex="4" data-sizey="2"></li>
				<li class="halbTransparent" data-template="inc_RaumKlima.html" data-row="2" data-col="6" data-sizex="5" data-sizey="2"></li>
      </ul>
    </div>
   </div>
</body>

Andy89 · 30 März 2016, 21:09:27

Servus,
ich bin gerade dabei auch fleißig zu testen. Bisher hatte ich alles als Pagetab. Ist Pagebutton viel schneller? Das mit dem Cache und prefetch hat mich auf jeden Fall schon beeindruckt.
Ich wollte gerade mal meine Startseite einbinden, das hat auch bis auf Kleinigkeiten(clock ist noch nicht eingebunden) funktioniert. Eine Frage habe ich dennoch zu Pagebutton. Kann es sein, dass warn noch nicht mit Pagebutton funktioniert?

Ich wollte dies so einbinden:

Code Auswählen

<div data-type="pagebutton" data-url="#home.html" data-load="#home"
	data-off-background-color="transparent" data-off-color="#606060"
	data-on-background-color="#337ab7" data-on-color="#222222"
	data-get-on='["on","(?:[0-9]*[^1])","1"]' data-device="myAbfall"
	data-get="Muellkalender_GelberSack_tage"
	data-icons='["fa-home","fa-home","fa-home warn"]'
	data-active-pattern="(.*index2.1.html|.*#home.html)"
	class=""></div>

Habe dann extra das Reading Muellkalender_GelberSack_tage auf 1 gesetzt, was in meinem alten FTUI ein Warn mit 1 ausgegeben hat. Im neuen passiert leider nichts.

Beste Grüße
Andy

edit:
Habe meine Schlafzimmer Seite eingefügt und dabei einen weiteren Bug gefunden:

Code Auswählen

<div class="row">
	<div data-type="label" class="col-2-1">Weckzeit</div>
	<!-- <div data-type="select" data-list="setList:nextRun" data-device="rr_Andy_wakeuptimer1" class="cell w2x" ></div> -->
	<div data-type="select" data-device="rr_Andy_wakeuptimer1"
	data-items='["OFF","05:15","05:20","05:25","05:30","05:35","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","10:00"]'
	data-get="nextRun" data-get="nextRun" class="col-2-1"></div>
</div>

Dieser Code sollte eigentlich eine Liste ausgeben mit OFF und verschiedenen Uhrzeiten. Leider funktioniert das nicht mit den data-items. Ausgegeben wird nur OFF und 00. Mache ich hier etwas falsch?

setstate · 30 März 2016, 21:57:27

Hallo Andy,

guter Hinweise, das klappte wirklich noch nicht. Ist jetzt gefixed.

Änderung

Code Auswählen

--- a/www/tablet/js/widget_pagebutton.js
+++ b/www/tablet/js/widget_pagebutton.js
@@ -110,6 +110,7 @@ var Modul_pagebutton = function () {
     return $.extend(new Modul_famultibutton(), {
         //override or own public members
         widgetname: 'pagebutton',
+        update_cb:update_cb,
         init:init,
     });
 };

Das ist ein gutes Beispiel zur Erklärung der Wirkungsweise der Widgets.
Durch diese Zeile setzt man die innerhalb Pagebutton definierte function update_cb public und überschreibt dadurch die function update_cb der Basisklasse Modul_famultibutton

accessburn · 30 März 2016, 21:59:20

Wäre mal jemand so lieb den ein oder anderen Screen zu posten?

setstate · 30 März 2016, 22:12:21

Da gibt es nix zu sehen

Das Aussehen entspricht dem, der bekannten Seiten.
Hier aber mal ein Screenshot der Demoseite, wie ich sie bei Github hochgeladen haben. Links drei Pagebuttons und damit irgendein Inhalt rechts angezeigt wird, habe ich etwas Wetter-Stuff benutzt ...

Andy89 · 30 März 2016, 22:15:11

Zitat von: setstate am 30 März 2016, 21:57:27
Das ist ein gutes Beispiel zur Erklärung der Wirkungsweise der Widgets.
Durch diese Zeile setzt man die innerhalb Pagebutton definierte function update_cb public und überschreibt dadurch die function update_cb der Basisklasse Modul_famultibutton

Hey,
das ging ja fix. Funkioniert bestens.
Habe durch Zufall einen weiteren Bug gefunden. Wenn man auf einer Unterseite ist, zB (http://192.*.*.*/ftui/test/index2.1.html#wohnzimmer.html) und dann einen Seiten-Reload macht, ist nicht nur diese Unterseite markiert, sondern auch die home-Seite von mir. Also dann "leuchten" beide Pagebuttons.

@accessburn: bevor ich etwas zeigen kann, muss ich erst einmal alle Seiten auf Pagebutton wechseln und mich dann mal in widgets einlesen, um mal zB clock zum laufen zu bekommen. Aber wie setstate schon sagte... Ziel ist es, dass es so aussieht wie vorher bzw durch Veränderungen sogar besser^^

Beste Grüße
Andy

kvo1 · 30 März 2016, 22:39:01

N'Abend,

versuche mich grade hier einzudenken und würde gern mit testen, kurze Fragen dazu.

Das ZIP-File scheint ja nicht (immer) aktuell zu sein !

Habe von hier https://github.com/knowthelist/fhem-tablet-ui/tree/version2.1/www/tablet vor paar Tagen einen Stand kopiert.

Gibt es ein "update....." wie in der 1.* ?
(update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt)

Muss ich alles von Pagetab auf Pagebutton umstellen !?

setstate · 30 März 2016, 22:40:44

Dass bei Reload zwei Buttons leuchten, habe ich auch gerade gesehen und bin dran.

clock habe ich schon mal angepasst und hier für Testzwecke angehangen: https://forum.fhem.de/index.php/topic,50945.msg432122.html#msg432122

Andy89 · 30 März 2016, 22:49:22

Zitat von: setstate am 30 März 2016, 22:40:44
Dass bei Reload zwei Buttons leuchten, habe ich auch gerade gesehen und bin dran.

clock habe ich schon mal angepasst und hier für Testzwecke angehangen: https://forum.fhem.de/index.php/topic,50945.msg432122.html#msg432122

Mein Fehler... $:-\$
Was muss ich einstellen, damit mir deutsche Sonderzeiche nrichtig angezeigt werden? Also zum Beispiel in der Monatsanzeige von der Clock siehe Screenshot. Beim "Menü" hab ich das "ü" mit "ü" hergestellt, aber das musste ich im alten FTUI nicht..

Beste Grüße
Andy

HoTi · 31 März 2016, 07:15:01

Sorry für die zwischenfrage: Andy was zeigst du mit der 1 auf deinem Homebutton an?

Andy89 · 31 März 2016, 07:41:50

Dass morgen der gelbe Sack abgeholt wird => ich muss den heute rausstellen^^ das warn ist auch nur da, wenn Tage bis zu Abholung 1 ist. Bei allen anderen Tagen interessiert mich der gelbe Sack auch nicht

Die anderen Tonnen stehen eh an der Straße, deswegen sind die nur aus Spaß integriert.

Demnächst will ich aber in jedem Raum per Warn anzeigen lassen, wenn ein Fenster offen ist.

Gesendet von iPhone mit Tapatalk

HoTi · 31 März 2016, 07:44:40

Das interessiert mich mit warn, da muss ich mich schlau machen! Danke für die information.

Andy89 · 31 März 2016, 07:47:35

Zitat von: Andy89 am 30 März 2016, 21:09:27
Code Auswählen Erweitern
<div data-type="pagebutton" data-url="#home.html" data-load="#home" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#337ab7" data-on-color="#222222" data-get-on='["on","(?:[0-9]*[^1])","1"]' data-device="myAbfall" data-get="Muellkalender_GelberSack_tage" data-icons='["fa-home","fa-home","fa-home warn"]' data-active-pattern="(.*index2.1.html|.*#home.html)" class=""></div>

Hier nochmal der Code für Pagebutton mit warn

dadoc · 31 März 2016, 15:45:26

So, musste erst einmal "git" lernen. Jetzt läuft's. Bei mir mit Apache, bislang ohne Probleme. Was natürlich noch nicht geht ist das Chart Widget von Eki.
Zur Performance kann ich noch nichts sagen, da derzeit nur Remote per vpn.
Muss jetzt mal den Umbau der Seiten studieren, denn mehr Performance auf dem iPad wäre willkommen. Gefühlt hat sich diese nach dem Update auf iOS 9.3 verschlechtert.
Grüße
Martin