Pagebutton - Springen zu Unterseiten

[ekur]

Hallo,

ich habe ein zweistufiges Pagebutton Design (5 Haupmenüpunkte A - E mit jeweils 5 Unterpunkten 1 -5). Dabei dient die Hauptseite A1 als Sammelanzeige für verschiedene Stati aus den andere Seiten, z.B. ein Symbol, das anzeigt das ein Fenster geöffnet ist, auf der entsprechenden Unterseite (z.B. C3) sind dann alle Fenster aufgeführt und dort kann gesehen werden welches Fenster offen ist.

Ich würde jetzt gerne das Symbol gegen ein Widget tauschen das bei Anklicken dann direkt in die Unterseite C3 gesprungen wird und nicht über das Menü erst auf C und dann auf 3 geklickt werden muss.
Ich habe versucht das über einen Pushbutton zu machen, habe aber nicht geschafft hier die passende Url zum Aufruf zu basteln, da ein Aufruf der Seite weder mit # am Anfang noch ohne # funktioniert, ein Link Widget ohne # ruft zwar die Unterseite auf, da aber die Header auf der Unterseite fehlen (pagebuttonmenü) wird die Seite natürlich nicht richtig dargestellt.

Ist es überhaupt möglich in einem Pagebuttonmenü direkt zwischen Unterseiten zu springen?

[setstate]

Das wäre schon sehr sinnvoll. Ich arbeite dran ...

[ekur]

Hallo, das wäre super. Wenn was fertig ist teste ich es gerne.

[Gunther]

Ich teste auch gerne

[setstate]

Das Update ist jetzt hochgeladen.

Demoseiten sind hier dabei: https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/pagebutton

Startseite: index_main_sub_demo.html

neu ist jetzt: bei Seiten die direkt angesprungen werden sollen, muss die Parent-Seite mit angegeben werden, damit diese vorher geladen werden kann.

Code Auswählen Erweitern

data-parent="main2"
Man kann das aber auch weglassen, wenn die Parent-Seite schon mit class="prefetch" vorgeladen wird.

[paul79]

Hallo,

bei mir geht jetzt nichts mehr, was für ein Mist wieder.

Ich habe links eine Reihe Pagebutton und eine Reihe rechts, links gehen Buttons rechts nur noch die 2. oberen.
Wenn ich noch welche in einer Unterseite habe geht keine Pagebutton mehr.

Nachtrag:
bei mir macht der Eintrag in der fhem-tablet-ui.css Probleme, nehme ich das height: 100%; wieder raus funktioniert alles wieder.

Code Auswählen Erweitern


.gridster {
    width: 100%;
    height: 100%;
}

Gruß Paul

[ekur]

Hallo setstate,

es funktioniert. Gute Arbeit. Nur eine Frage habe ich noch zu Pagebutton:

Im Wiki steht das für pagebutton alle Attribute von Switch gelten. Das beißt sich aber mit den States und get-On Arrays um Hintergrund und Icons je nach Reading über data-get verschieden zu färben, oder? Zumindest funktioniert das bei mir nicht mit einer Drei-Status Abfrage.

[Ulm32b]

Ich möchte ebenfalls in aller Bescheidenheit mein Interesse anmelden für die ganze Klaviatur

• data-get; data-states; data-icons; data-colors

• data-hide; data-hide-on

für pagebutton.

Damit eröffnet sich die Möglichkeit, bisher mit dem Symbol-Widget dargestellte Zustände mit vertiefenden Informationen auf einer Pagebutton-Unterseite zu verlinken.

[setstate]

Und die Versuche das zu benutzen schlagen fehl?
Was klappt nicht?

[Eisix]

Hallo,

kann es sein das class="default" bei pagebutton nicht mehr greift? Es werden keine defaultpages mehr geladen.

Gruß
Eisix

[Ulm32b]

Und die Versuche das zu benutzen schlagen fehl?
Was klappt nicht?

Gerne beschreibe ich meine Konstellation:

In der index.html werden anstehende Abfuhrtermine angezeigt. Ich beschränke mich nachfolgend auf den Gelben Sack.

Code Auswählen Erweitern

<div data-type="symbol" data-device="Entsorgung" data-get="GelberSack_days" data-states='["0","1"]' data-icons='["fs-bag blink","fs-bag"]' data-hide="GelberSack_Anzeige" data-hide-on="false" data-color="#FFFF7A" class="bigger compressed autohide"></div>

GelberSack_days liefert die Tage bis zur nächsten Abholung.
GelberSack_Anzeige (User-Reading) wird true zwischen 15:00 Uhr am Vortag und 9:00 Uhr am Tag der Abholung.
Im Ergebnis wird das Symbol vom Nachmittag der Vortages bis zum Morgen des Abholtages angezeigt und blinkt am Abholtag.
Das funktioniert supergut.

Unabhängig hiervon gibt es eine Pagebutton-Struktur, in welcher die Seite page_content6_4.html eine Übersicht zu den nächsten Abholterminen aller Abfallkategorien bereithält. Über Pagebutton kann man dort hinnavigieren.

Die Idee ist nun, dass auch durch Klick auf das ggf. in index.html angezeigte Symbol direkt page_content6_4.html aufgerufen wird.

Hierzu habe ich den oben genannten Code ersetzt durch

Code Auswählen Erweitern

<div data-type="pagebutton" data-url="#page_content6_4.html" data-load="#content6_4" data-off-background-color="transparent" data-off-color="#FFFF7A" data-on-background-color="transparent" data-on-color="#FFFF7A" data-active-pattern=".*#page_content6_4.html" class="prefetch top-space big" data-device="Entsorgung" data-get="GelberSack_days" data-states='["0","1"]' data-icons='["fs-bag blink","fs-bag"]' data-hide="GelberSack_Anzeige" data-hide-on="false"></div>

Angezeigt wird nichts. Die "nackte Version" (ohne Ausblenden und Animation)

Code Auswählen Erweitern

<div data-type="pagebutton" data-url="#page_content6_4.html" data-load="#content6_4" data-off-background-color="transparent" data-off-color="#FFFF7A" data-on-background-color="transparent" data-on-color="#FFFF7A" data-active-pattern=".*#page_content6_4.html" data-icon="fs-bag" class="prefetch top-space big"></div>

funktioniert. Die gewünschte Unterseite wird korrekt aufgerufen. Pagebutton an sich funktioniert also, aber nicht die Beeinflussung der Anzeige über readings.

Neuestes Update ist eingespielt.

P.S. Der Rücksprung auf default (vgl. Hinweis Eisix) funktioniert bei mir nach wie vor. Das andere von mir geschilderte Phänomen https://forum.fhem.de/index.php/topic,83043.0.html (Rücksprung aus Unterseiten) ist noch vorhanden. Es lässt sich übrigens auch in den Beispieldateien index_main_sub_demo.html etc. nachvollziehen.

[Ulm32b]

Seit einem der jüngeren Updates funktionieren in Pagebutton

• data-device,
• data-get,
• data-states,
• data-icons und data-hide.

Weil mehrere Pagebutton-Widgets auf dieselbe Seite verweisen dürfen, kann Pagebutton neben der Anwendung in Menüleisten auch als Querverweis in der Menüstruktur auftauchen. Die äußere Gestalt lässt sich wie beim Symbol-Widget steuern; zusätzlich wird bei Betätigung die Unterseite aufgerufen.

Diese Errungenschaft ist jetzt auch im Wiki niedergelegt.

[Clyde]

Hallo,

kann es sein das class="default" bei pagebutton nicht mehr greift? Es werden keine defaultpages mehr geladen.

Gruß
Eisix

Habe das gleiche Problem im Opera Browser.
Im Fully auf dem Tablet funktioniert default noch.

[Eisix]

Hallo,

ich konnte es bei mir lösen. Bei data-active-pattern müssen die ganzen sub - Seiten mit eingetragen werden.

index.html

Code Auswählen Erweitern


<div data-type="pagebutton" data-url="#1_heating.html" data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="top-space"></div>


1_heating.html

Code Auswählen Erweitern


<div data-type="pagebutton" data-url="#2_heating_Haus.html"       data-load="#heating_Haus" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#1_heating.html||.*#2_heating_Haus.html)"                                                                          data-icon="oa-control_building_2_s_all"                         class="default prefetch top-space"></div>


Dann hat es bei mir funktioniert.

Gruß
Eisix