ich habe 2 fragen zum pagebutton in eval 2.2:
1) kann man pagebuttons verschachteln, d.h. auf einer unterseite von pagebutton eine weitere pagebuttonleiste mit unterseiten auf der unterseite anlegen?
2) kann man direkt per url auf pagebutton unterseiten springen? ich möchte gerne per webviewcontrol von fhem auf die kamera unterseite springen, wenn die haustuer klingelt...
Guten Morgen,
da würde ich gerne meine Frage hinzufügen. Das ganze funktioniert nur so wie in dem Beispiel, das ich also ein Bereich definiere den ich dann über pagebutton neu lade, richtig? Im Moment ist es so, das ich die komplette Seite neu lade, da funktioniert das aber nicht, oder doch?!? Sprich ich müsste doch einiges umstellen, damit das auch sauber klappt. Und wann wird der speicher gelöscht, wenn ich ein kompletten Refresh der Seite mache? Das ist nämlich nicht so einfach das bei bestimmten Unterseiten neue Menüs erscheinen mit denen ich wieder andere Seite aufrufe und mhh naja kompliziert kompliziert ;-) Aber es nützt alles nicht, auf meinem Tablet ist der Seitenaufbau so extram langsam, da gibt es leider keine Alternative also die neue Funktion zu nutzen.
/Daniel
Im eval habe ich zwei Beispiele für pagebutton mit dabei, einmal Menü oben und einmal rechts.
Das ist aber immer nur ein Menü auf der Hauptseite und viele Unterseiten. Unterseite heißt: auf der Hauptseite wird ein bestimmter Bereich nur ausgetauscht, ohne Neuladen der Hauptseite und auch mit automatischem Cache und optionalem Prefetch. Wenn man den Cache nicht möchte und bei jedem Umschalten die Subs neu laden möchte, muss class="nocache" gesetzt werden.
Pagebuttons auf der Unterseite, die andere Bereiche umschalten sollen, dürfte zur Zeit nicht gehen. Aktuell wird die Unterseite als # Hash in die URL aufgenommen. Zwei pagebutton Gruppen würden sich vermutlich gegenseitig behindern. Man könnte versuchen, bei einer Gruppe die Hash Funktionen zu unterdrücken und nur das Inhalt-Ändern benutzen. Das müsste ich mal austesten, was machbar ist.
ok, danke setstate.
und kann ich eine unterseite direkt aufrufen z.b. über "http...#page_content1.html" (frage 2 oben)? Es scheint zu gehen....
Hi,
gibt es hier etwas Neues?
ich habe nämlich gerade genau das Problem.
Ich baue gerade meine pagetabs nach pagebuttons um.
Habe eine linke Navigation wie die Demo von setstate, einige Unterseiten haben aber nochmal eine UnterNavigation - eine art erweitere Navigation
Zb. Linkes Menü: Living. Klicke ich drauf, erscheint die Unterseite die recht widerrum ein zusätzliches Menü hat: OG - EG - KG - DG
Wenn ich allerdings dieses rechte Menü in die Unterseite einbringe, spielt die komplette FTUI Seite verrückt, nichts geht mehr. Es entwickelt sozusagen ein Eigenleben ;)
Ev. kann man auf der Indexseite standardmäßig ein linkes und rechtes Meü vorsehen, allerdings ist das Rechte Menü von der jeweiligen unterseite abhängig und muss immer ausgetauscht werden.
Alle NaviSeiten ins linke Menü zu legen geht nicht, dafür sind es zu viele.
Was mache ich nun?
Zitat von: Tobias am 07 November 2016, 15:11:51
Alle NaviSeiten ins linke Menü zu legen geht nicht, dafür sind es zu viele.
Was mache ich nun?
das Problem hatte ich auch, deswegen habe ich das Problem umgangen, indem ich links CircleMenüs genutzt habe. Mit dem transparenten Hintergrund sehen die ähnlich aus wie PageButtons, nur dass man hinter einem Symbol mehrere PageButtons verstecken kann.
Beste Grüße
Andy
ich bereite ein paar Demo-Seiten vor ...
getan ...
unter https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_main_sub_demo.html ist ein kleines Demo für Menü in Menü.
Das Wichtigste war nur, die Namen für die Seiten und Abschnitte passend zu vergeben, damit es nicht zu Vermischungen kommt und die Pattern für die Is-Active Erkennung mit Wildcards zu versehen, damit es für das Main-Menü auch funktioniert, wenn das Sub-Menü benutzt wird, da der URL-Hash nur einmal existiert. Dieser muss also die Info für Main und Sub enthalten.
Hab mir es mal angeschaut, hab es aber noch nicht geschnallt...
Hast du etwas geändert? Oder nur ein Demo bereitgestellt?
Worauf muss ich genau auf welcher seite achten? Was sind die Key-facts?
Warum hat die erste page dieses Pattern, die anderen aber nur ein vereinfachtes?
data-active-pattern="(.*/||.*page_main1.html||.*#page_main1_sub1.html)"
data-active-pattern=".*#page_main1_sub2.html"
Es gehören nur die 9 Files dazu, die Main oder/und Sub im Namen haben.
Funktioniert out of the Box ohne Änderungen.
Ich hoffe, durch die Namensgebung ist der Aufbau selbsterklärend.
Danke, funktioniert jetzt :)
Kannst du dazu noch etwas sagen??
ZitatWarum hat die erste page dieses Pattern, die anderen aber nur ein vereinfachtes?
data-active-pattern="(.*/||.*page_main1.html||.*#page_main1_sub1.html)"
data-active-pattern=".*#page_main1_sub2.html"
Was macht die Class=prefetch genau?
Das data-active-pattern wird mit der aktuellen URL verglichen. Wenn es matched, wird dieser Button ON gesetzt.
Den ersten habe ich immer als Default gesetzt. D.h. er wird als activ gesetzt, wenn die URL noch ganz "jungfräulich" ist. Also kein Hash gesetzt -> kein Button wurde bis jetzt gedrückt.
Prefetch holt den Part schon im Hintergrund, zeigt ihn aber noch nicht. Beim Umschalten ist der Inhalt dann schneller da, weil nix mehr geladen werden muss.
Bei mir funktioniert das Beispiel leider nicht. Ist da etwas geändert worden?
nö, muss laufen.
Mit neuer fhem-tablet-ui-custom.css funktioniert es. ;D
Danke 8)
Sind die Dateien weg? Ich kann nur die eine Datei mit Klick auf RAW runterladen. Oder übersehe ich etwas?
Ich habe nun eine Testinstanz angelegt (Kopie meiner bisherigen). Diese läuft soweit.
Die pagebutton Dateien habe ich da reinkopiert. Leider kann ich die Seite nicht öffnen.
Bei Aufruf von .../index_main_sub_demo.html erscheint nur eine weisse Seite mit 2 "Spiegelpunkten".
Berechtigungen auf 777
Was kann ich tun?
Bei den Examples gibt es einen Ordner "Subpages", alles Files daraus, die zum index_main_sub_demo.html Beispiel gehören, müssen in den gleichen Ordner wie die index_main_sub_demo.html
Habe heute wieder getestet. Leider verändert sich nichts. Nur eine weisse Seite mit 2 Spiegelpunkten.
Brauche bitte nochmal Hilfe...
die html Dateien müssen unter www/tablet liegen parallel zum js und css Folder liegen. Die Seite bleibt weiß, wenn die css Files nicht gefunden werden. Sie müssen in dem Ordner liegen, die im Header angegeben sind. In den Developertools des Browsers kann man nachsehen wo die CSS Files gesucht werden und ob die Suche erfolgreich war.
geht, danke!
Ich komme leider noch nicht weiter. Meine heute mit pagetab abgebildete Menüstruktur habe ich mal graphisch versucht darzustellen (angehängt).
1.) Geht das so mit Pagebutton? Wenn ja, wäre ich für ein paar Tipps, Codeschnipsel dankbar.
2.) Ich habe man ganz einfach etwas versucht darzustellen (2 Dateien angehängt). Wenn ich auf den mittleren Button aus der index.html drücke, dauert es ca. 18 Sekunden bis die Unterseite geladen wird (RPI2). Woran liegt das? Ich dachte genau der Umbau von pagetab auf pagebutton beschleunigt.
3) Wenn ich auf den mittleren Button in der index.html drücke, kommt leider das Unter-Menü, das ich rechts angezeigt bekommen möchte links und ersetzt das Hauptmenü. Was mache ich falsch?
Freue mich über Eure Hilfe.
ich schieb das nochmal hoch in der Hoffnung, dass mir jemand von Euch hier weiterhelfen kann.
Respekt, schöne Layoutplanung. Aber ...
Ich kann nur immer wieder sagen, pagebutton und Link können den Inhalt für genau einen zusammenhängigen Bereich, über eine eindeutige ID selektiert, austauschen. Dabei muss dieser Selektor über die ID im Button, im von-Code und im zu-Code genau stimmen.
Im injezierten Codeteil können natürlich auch wieder neue Pagebuttons oder Links mitkommen. Man muss dann natürlich aufpassen, dass immer alle referenzierten DOM-Knoten noch da sind. Nicht das sie durch den neuen Teil überschrieben werden.
Leider kann ich mich aus Zeitgründen in dein spezifisches Thema nicht so sehr vertiefen.
Sorry
Hi,
kleiner Tipp .... alle Menüs mit Buttons bereits in der index einstellen, so dass nur eine "Pagebutton-Gruppe" vorhanden ist.... das, was nicht benötigt wird einfach mittels Hide-Funktion und dummys ausblenden lassen ..... relativ aufwändig, aber sollte machbar sein.