FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ekur am 02 Januar 2018, 09:12:26

Titel: Pagebutton - Springen zu Unterseiten
Beitrag von: ekur am 02 Januar 2018, 09:12:26
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?
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: setstate am 04 Januar 2018, 02:35:45
Das wäre schon sehr sinnvoll. Ich arbeite dran ...
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: ekur am 04 Januar 2018, 07:39:54
Hallo, das wäre super. Wenn was fertig ist teste ich es gerne.
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Gunther am 05 Januar 2018, 08:09:22
Ich teste auch gerne
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: setstate am 09 Januar 2018, 20:34:14
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.
data-parent="main2"
Man kann das aber auch weglassen, wenn die Parent-Seite schon mit class="prefetch" vorgeladen wird.


Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: paul79 am 10 Januar 2018, 19:29:17
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.


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


Gruß Paul
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: ekur am 11 Januar 2018, 22:28:11
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.

Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Ulm32b am 07 Februar 2018, 00:48:49
Ich möchte ebenfalls in aller Bescheidenheit mein Interesse anmelden für die ganze Klaviatur
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.
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: setstate am 07 Februar 2018, 02:01:29
Und die Versuche das zu benutzen schlagen fehl?
Was klappt nicht?
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Eisix am 07 Februar 2018, 11:25:29
Hallo,

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

Gruß
Eisix
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Ulm32b am 07 Februar 2018, 23:59:22
Zitat von: setstate am 07 Februar 2018, 02:01:29
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.

<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

<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)

<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 (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.
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Ulm32b am 16 Februar 2018, 02:28:09
Seit einem der jüngeren Updates funktionieren in Pagebutton

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.
Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Clyde am 20 Februar 2018, 11:39:51
Zitat von: Eisix am 07 Februar 2018, 11:25:29
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.


Titel: Antw:Pagebutton - Springen zu Unterseiten
Beitrag von: Eisix am 20 Februar 2018, 12:08:14
Hallo,

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

index.html

<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

<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