[gelöst Link] FTUI: Alle Widgets anklickbar?

[curt]

Pagebutton als primäre Navigation habe ich in Griff. Leider habe ich noch ein Verständnisproblem:

Auf meiner -ich nenne es mal Homepage- (man könnte es auch Taktik-Bildschirm nennen) sind die wichtigsten Dinge: Mehrere Temperaturen (thermostat), Zusammenfassung der Fensteröffnungen (structure), Wetter usw.

Nun wäre es ja ganz schön, wenn man jedes einzelne Widget anklicken könnte: Wenn ich die structure Fensteröffnung anklicke, kommt via pagebutton eine neue Seite - mit dem Zustand aller Fenster. Oder wenn ich die Temperatur im Arbeitszimmer (realisiert mit dem Thermaostat-Widget) anklicke, kommt das Chat mit dem Temperaturverlauf.

Also mit dem Popup-Widget scheint sowas zu gehen - habe ich noch nicht probiert.

Aber geht das auch mit Pagebutton?

Oder gibt es noch eine dritte Möglichkeit, die ich noch gar nicht kenne?

[Ulm32b]

Nun wäre es ja ganz schön, wenn man jedes einzelne Widget anklicken könnte: Wenn ich die structure Fensteröffnung anklicke, kommt via pagebutton eine neue Seite - mit dem Zustand aller Fenster. Oder wenn ich die Temperatur im Arbeitszimmer (realisiert mit dem Thermaostat-Widget) anklicke, kommt das Chat mit dem Temperaturverlauf.
[...]
Aber geht das auch mit Pagebutton?

Sofern das anzuklickende Element aus einem (beliebig in Gestalt und Farbe formatierbaren Icon) besteht, kann dies ohne Umwege über Pagebutton realisiert werden. Das ist im Wiki zu Pagebutton auch genau (genug?) erklärt ("Querverweis auf eine Pagebutton-Seite"); ausdrücklich wird dort auch das Anwendungsfeld Fenster-Status erwähnt.

Ein etwas allgemeinerer Ansatz könnte lauten: Sofern es einen in FHEM auswertbaren Event gibt, könnte man über diesen mit NOTIFY oder DOIF ein device beeinflussen, welches dann die gewünschte Pagebuttonseite aktiviert.

[curt]

Sofern das anzuklickende Element aus einem (beliebig in Gestalt und Farbe formatierbaren Icon) besteht, kann dies ohne Umwege über Pagebutton realisiert werden.

Ja genau. Pagebutton funktioniert nur bei symbol. Und auch da nur schlecht: Da kommt dann ein runder Knubbel, den ich weder will noch das er sauber zentriert wäre.

Das ist im Wiki zu Pagebutton auch genau (genug?) erklärt ("Querverweis auf eine Pagebutton-Seite"); ausdrücklich wird dort auch das Anwendungsfeld Fenster-Status erwähnt.

Schon wenn das aus einer structure (alle Fenster des Hauses zu?) gespeist wird, scheitert pagebutton, zumindest bei mir: Nach einiger Zeit schaltet er ungefragt in die Zielseite.

Meine Frage war aber viel allgemeiner gemeint: Jedes Dings anklicken, also auch Wetter, Kalender usw.

Inzwischen habe ich herausgefunden, dass das tatsächlich geht: Mit dem Widget "Link", https://wiki.fhem.de/wiki/FTUI_Widget_Link . Und das kommt sich auch nicht mit dem Pagebutton-Konzept der Navigation ins Gehege. Auf den ersten Blick ist das der Weg.

Leider gibt es einen unschönen Seiteneffekt, da komme ich nicht weiter - ich beschreibe mal:

Gegeben sei die klassische Pagebutton-Navigation, linke Spalte ist Navi-Spalte. Das alles wird in index.html organisiert. Der zweite Knopf der Navi führt zu page2.html, dort sind alle Fenster einzeln aufgeführt, rot oder grün. Ich möchte nun, dass bei Klick auf das Fenster "Arbeitszimmer" eine Seite raum_az.html innerhalb des Konzepts (links die Navi!) aufgerufen wird. Dabei soll diese Teil-Seite raum_az aber nicht in der Navi-Leiste auftauchen. Begründung: Was will ich denn mit 30 Navi-Knöpfen, von denen ich 25 konzeptionell gar nicht brauche?

In index.html packe ich also

Code Auswählen Erweitern

<div class="page" id="raum_az"></div>
Nun müsste der Link gehen - geht aber nicht.

Ok, packe ich also weiter vorn in der Abteilung "Navi" noch

Code Auswählen Erweitern


  <div data-type="pagebutton"
       data-url="#raum_az.html"
       data-load="#raum_az"
       </div>
rein - in der Hoffnung, dass wegen fehlendem "data-icon" das nicht angezeigt wird ... die Hoffnung war vergebens:

Jetzt funktioniert der Link tatsächlich wunschgemäß, sieht wirklich klasse aus. Aber leider habe ich nun ungefragt ein weiteres Icon in der Navi-Leiste. Das brauche ich nicht, das will ich nicht: Was soll das denn werden, wenn ich alle Fenster, Temperaturen, drei Maps, vier Wetter so integiere?

Vielleicht geht das noch anders. Oder man kann dieses Verhalten (Navi drängt sich in die Anzeige? irgendwie unterdrücken.

Hast Du eine Idee? Hat jemand anders eine Idee?

[curt]

Ich habe noch keine Lösung.
Vielleicht habe ich mein Problem auch nicht gut beschreiben können.

Ich habe mir die klassische FTUI-Oberfläche mit Pagebutton aufgebaut: Links fünf "Knöpfe" für Home und vier Seiten. Rechts daneben dann 7x5 Kacheln. Funktioniert.

Nun möchte ich viele Kacheln anklickbar machen - das ergibt deutlich mehr Seiten als diese vier direkt verlinkten Seiten. Es geht nicht nur um "symbol"-Kacheln, es geht auch um unterschiedlichste Widget-Kacheln, die anklickbar werden sollen. (Ich weiß, dass popup wohl geht, aber es sollen neue Seiten in gleicher Struktur werden.)

Das funktioniert mit dem Widget  "Link", allerdings muss die neue Zielseite "raum_az" wie folgt in index.html definiert sein:

Code Auswählen Erweitern


<div class="page" id="raum_az"></div>

<div data-type="pagebutton"
        data-url="#raum_az.html"
        data-load="#raum_az"
</div>


Genau dann funktioniert die Sache: Ich klicke auf die Kachel, eine neue Unterseite wird geladen.

Problem:
In der linken Navigationsspalte (in der nur 5 Links [Home + 4 Unterseiten-Links] stehen sollen) - taucht nun ein 6. Link auf. Wenn ich also 15 weitere Unterseiten baue, habe ich 15 weitere Navigationslinks in der linken Spalte. Das bricht das Design - und die geplante Funktionalität.

Frage:
Kann ich Navi-Links (Pagebutton) verstecken? Oder gibt es einen ganz anderen Trick - den ich nur nicht kenne?

[moonsorrox]

baue sie doch alle in einem PopUp ein dann geht das auf und du klickst dort ein Link

[curt]

Das ist nicht das Ziel der Veranstaltung und zudem nicht nutzerfreundlich.

Inzwischen dachte ich an data-parent, aber das tut auch nicht. Die Frage ist, ob das bei Pagebutton (im Gegensatz zu Pagelink) geht - also 12 Pagebutton auf einer Seite, aber nur 5 links in der Navigation.

Und falls das nicht geht, müsste ich wohl @setstate fragen, ob er machen kann, dass man einzelne Pagebutton in der index.html (siehe unten) zwar verarbeitbar stehen, aber NICHT angezeigt werden.

Also so ein Konstrukt soll in index.html stehen und auch verarbeitet werden, aber nicht angezeigt werden:

Code Auswählen Erweitern


  <div data-type="pagebutton"
       data-url="#raum_az.html"
       data-load="#raum_az"
       </div>


[curt]

Ich habe nochmal ein wenig herumgespielt und einen nicht dokumentierten (?) class-Parameter gefunden: hide

Mit folgendem Konstrukt in index.html "versteckt" man einzelne Pagebutton - die dann aber auf Unterseiten mittels PageLink trotzdem ansteuerbar (anklickbar) sind:

Code Auswählen Erweitern


  <div data-type="pagebutton"
       data-url="#raum_az.html"
       data-load="#raum_az"
       class="hide">
       </div>
[code]


[Eisix]

Hallo,

wenn ich dich richtig verstanden habe willst du die pagebuttons in deinem Auswahlmenue tauschen.
Ich mache sowas für meinen ganzen Multimedia-Kram. Je nach aktiver Einstellung am Harmony Hub wird die entsprechende Fernbedienung,... angezeigt.

Code Auswählen Erweitern


<div class="gridster">
<ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="15">
<div class="">
                <div class="tiny left top inline">FTUI :</div>
                <div class="tiny left top inline" data-bind="ftui.version"></div>
</div>
            <div class="cell">
                <div data-type="pagebutton" data-url="#main.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="(.*/||.*#main.html)" data-icon="fa-home" class="default prefetch top-space"></div>

                        <div data-type="pagebutton"
                                data-url="#Multimedia_Fernsehen.html"
                                data-load="#Fernsehen"
                                data-active-pattern=".*#Multimedia_Fernsehen.html"
data-on-color="#222222"
data-off-color="#606060"
data-on-background-color="#606060"
class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!Fernsehen"
                                data-hide-off="Fernsehen">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Fernsehen.html"
                                data-load="#Fernsehen"
                                data-active-pattern=".*#Multimedia_Fernsehen.html"
                                data-on-color="#222222"
                                data-off-color="#606060"
                                data-on-background-color="#606060"
                                class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!PowerOff"
                                data-hide-off="PowerOff">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Fernsehen.html"
                                data-load="#Fernsehen"
                                data-active-pattern=".*#Multimedia_Fernsehen.html"
                                data-on-color="#222222"
                                data-off-color="#606060"
                                data-on-background-color="#606060"
                                class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!Musik"
                                data-hide-off="Musik">
                        </div>

                        <div data-type="pagebutton"
                                data-url="#Multimedia_AmazonPrime.html"
                                data-load="#AmazonPrime"
                                data-active-pattern=".*#Multimedia_AmazonPrime.html"
data-on-color="#222222"
data-off-color="#606060"
data-on-background-color="#606060"
class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!AmazonPrime"
                                data-hide-off="AmazonPrime">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Filme.html"
                                data-load="#Filme"
                                data-active-pattern=".*#Multimedia_Filme.html"
data-on-color="#222222"
data-off-color="#606060"
data-on-background-color="#606060"
class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!Filme"
                                data-hide-off="Filme">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Zocken.html"
                                data-load="#Zocken"
                                data-active-pattern=".*#Multimedia_Zocken.html"
data-on-color="#222222"
data-off-color="#606060"
data-on-background-color="#606060"
class="top-space"
                                data-device="hub"
                                data-icon="fa-tv"
                                data-hide="activity"
                                data-hide-on="!Zocken"
                                data-hide-off="Zocken">
                        </div>
                <div data-type="pagebutton" data-url="#1_Musik.html"    data-load="#1_Musik" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#1_Musik.html" data-icon="fa-music" class="top-space"></div>

                <div data-type="pagebutton" data-url="#Wetter.html"    data-load="#content4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#Wetter.html" data-icon="oa-weather_cloudy_light" class="top-space"></div>

                <div data-type="pagebutton" data-url="#Rolladen.html"    data-load="#content5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#Rolladen.html" data-icon="oa-fts_shutter_50" class="top-space"></div>


Das ist eine Variante mit Pagebutton die ich so an Tablets nutze.

Für Handy's mache ich es ohne Pagebutton.

Code Auswählen Erweitern



<div data-type="html" data-class="hub:activity" data-map-class='{"Fernsehen":"show", ".*":"myhidden"}'>
        <div data-type="include" data-url="templates/tmp_Fernsehen_mob.htm"></div>
</div>
<div data-type="html" data-class="hub:activity" data-map-class='{"AmazonPrime":"show", ".*":"myhidden"}'>
         <div data-type="include" data-url="templates/tmp_AmazonPrime_mob.htm"></div>
</div>
<div data-type="html" data-class="hub:activity" data-map-class='{"Musik":"show", ".*":"myhidden"}'>
         <div data-type="include" data-url="templates/tmp_Onkyo_Player_mob.htm"></div>
</div>
<div data-type="html" data-class="hub:activity" data-map-class='{"Filme":"show", ".*":"myhidden"}'>
         <div data-type="include" data-url="templates/tmp_Filme_mob.htm"></div>
</div>
<div data-type="html" data-class="hub:activity" data-map-class='{"Zocken":"show", ".*":"myhidden"}'>
         <div data-type="include" data-url="templates/tmp_Zocken_mob.htm"></div>
</div>
<div data-type="html" data-class="hub:activity" data-map-class='{"PowerOff":"show", ".*":"myhidden"}'>
         <div data-type="include" data-url="templates/tmp_PowerOff_mob.htm"></div>
</div>




Gruß
Eisix

[curt]

wenn ich dich richtig verstanden habe willst du die pagebuttons in deinem Auswahlmenue tauschen.

Ich kann leider nicht immer gut beschreiben. Nein - ich will sie verstecken, einige sollen nicht angezeigt werden. Hintergrund ist, dass ich mit PageLink viele Kacheln anklickbar mache, das funktioniert aber nur, wenn die ca. 20 Zielseiten in der PageButton-Struktur auch bestehen. Aber 20 Knöpfe in der Navi-Struktur sind halt zu viel. Also verstecken.

Um es mal zu illustrieren: Ich möchte jede Kachel mit einer Temperaturanzeige anklicken - und es wird eine neue Seite mit dem Temperaturdiagramm geladen.

Inzwischen habe ich die Lösung gefunden, siehe meinen Beitrag #6.

Natürlich möchte ich Dir trotzdem dafür danken, dass Du Deinen interessanten Ansatz mit Beispiel vorgestellt hast.