Hauptmenü

Update 2.7.2.

Begonnen von setstate, 01 September 2018, 00:24:54

Vorheriges Thema - Nächstes Thema

octek0815

Zitat von: setstate am 05 September 2018, 08:37:38
Ach, ich vermute: die background Farbe soll sich anhand des active-pattern ändern und die Icons anhand der States. Muss ich nochmal checken ...

Genau.

Eisix

Hallo setstate,

ich habe mir bei mir das mit dem aktiv anzeigen des pagebuttons angeschaut und denke ich weiß jetzt wo mein Verständnisproblem ist.

Normale Anwendung von pagebutton ist, bei mir auf der linken Seite eine Auswahlleiste wo ich die verschiedenen Unterseiten auswähle und dann über die Hintergrundfarbe anzeige welche Unterseite aktiv ist. --> Pagebutton zeigt Seite sichtbar oder nicht

Zweite Anwendung von pagebutton ist immer noch in der linken Auswahlleiste aber ich habe ein hide das auf ein device Bezug nimmt --> Pagebutton zeigt den devicestatus und nicht mehr Seite sichtbar oder nicht.

Gibt es eine Möglichkeit dieses Verhalten zu verändern?

Gruß
Eisix


setstate

Soll der "missbrauchte" Pagebutton aber noch Content umschalten? Wenn ja: soll er dann trotzdem anzeigen, dass sein Content gerade angezeigt wird? IsActive?

Eisix

Content muss über das device (data-device="hub") umgeschaltet werden und der Pagebutton signalisiert das er gerade aktiv ist. Eigentlich sind es bei mir ja 5 Pagebuttons. Weis nicht ob das nicht den Rahmen von Pagebutton sprengt  ::)


                        <div data-type="pagebutton"
                                data-url="#Multimedia_Fernsehen.html"
                                data-load="#Fernsehen"
                                data-active-pattern=".*#Multimedia_Fernsehen.html"
                                data-background-colors='["#606060","transparent","transparent","transparent","transparent","transparent"]'
                                data-colors='["#222222","#606060","transparent","transparent","transparent","transparent"]'
                                data-icons='["fa-tv","fa-tv","fa-tv","fa-tv","fa-tv","fa-tv"]'
                                class="prefetch top-space autohide"
                                data-device="hub"
                                data-get="activity"
                                data-states='["Fernsehen","PowerOff","AmazonPrime","Musik","Filme","Zocken"]'
                                data-hide="activity"
                                data-hide-on="AmazonPrime|Musik|Filme|Zocken">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Musik.html"
                                data-load="#Musik"
                                data-active-pattern=".*#Multimedia_Musik.html"
                                data-background-colors='["transparent","transparent","transparent","#606060","transparent","transparent"]'
                                data-colors='["transparent","transparent","transparent",#222222"","transparent","transparent"]'
                                data-icons='["fa-tv","fa-tv","fa-tv","fa-tv","fa-tv","fa-tv"]'
                                class="top-space autohide"
                                data-device="hub"
                                data-get="activity"
                                data-states='["Fernsehen","PowerOff","AmazonPrime","Musik","Filme","Zocken"]'
                                data-hide="activity"
                                data-hide-on="Fernsehen|AmazonPrime|PowerOff|Filme|Zocken">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_AmazonPrime.html"
                                data-load="#AmazonPrime"
                                data-active-pattern=".*#Multimedia_AmazonPrime.html"
                                data-background-colors='["transparent","transparent","#606060","transparent","transparent","transparent"]'
                                data-colors='["transparent","transparent","#222222","transparent","transparent","transparent"]'
                                data-icons='["fa-tv","fa-tv","fa-tv","fa-tv","fa-tv","fa-tv"]'
                                class="top-space autohide"
                                data-device="hub"
                                data-get="activity"
                                data-states='["Fernsehen","PowerOff","AmazonPrime","Musik","Filme","Zocken"]'
                                data-hide="activity"
                                data-hide-on="Fernsehen|PowerOff|Musik|Filme|Zocken">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Filme.html"
                                data-load="#Filme"
                                data-active-pattern=".*#Multimedia_Filme.html"
                                data-background-colors='["transparent","transparent","transparent","transparent","#606060","transparent"]'
                                data-colors='["transparent","transparent","transparent","transparent","#222222","transparent"]'
                                data-icons='["fa-tv","fa-tv","fa-tv","fa-tv","fa-tv","fa-tv"]'
                                class="top-space autohide"
                                data-device="hub"
                                data-get="activity"
                                data-states='["Fernsehen","PowerOff","AmazonPrime","Musik","Filme","Zocken"]'
                                data-hide="activity"
                                data-hide-on="Fernsehen|AmazonPrime|Musik|PowerOff|Zocken">
                        </div>
                        <div data-type="pagebutton"
                                data-url="#Multimedia_Zocken.html"
                                data-load="#Zocken"
                                data-active-pattern=".*#Multimedia_Zocken.html"
                                data-background-colors='["transparent","transparent","transparent","transparent","transparent","#606060"]'
                                data-colors='["transparent","transparent","transparent","transparent","transparent","#222222"]'
                                data-icons='["fa-tv","fa-tv","fa-tv","fa-tv","fa-tv","fa-tv"]'
                                class="prefetch top-space autohide"
                                data-device="hub"
                                data-get="activity"
                                data-states='["Fernsehen","PowerOff","AmazonPrime","Musik","Filme","Zocken"]'
                                data-hide="activity"
                                data-hide-on="Fernsehen|AmazonPrime|Musik|Filme|PowerOff">
                        </div>



setstate

Das sieht mir sehr überfrachtet aus  :D
Wofür das das alles sein?

- data-hide=
- class="autohide"
- data-states=
- "transparent"

Soll nur der aktive sichtbar sein?
Wo drücke ich dann drauf, wenn ich etwas anders will?

Wenn ich nur normale Pagebutton will, die zusätzlich remote per FHEM-Device umschaltbar sein sollen, reicht es, wie im Wiki Beitrag https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton unter "Steuerung über ein Device"

Eisix

#35
Bin  für jede andere elegantere Lösung offen  ;)

Das device kann an verschiedenen Stellen über circlemenue umgeschaltet werden. Was dann den hub,
Rolladen, Beleuchtung ,... umschaltet.  Im Endeffekt tausche ich den pagebutton je nach device-stellung aus und genauso die jeweilige Unterseite.
Bei Fernsehen kommt eine Seite mit einer Senderauswahl, Navigationselemente der Fernbedienung, aktuelles Programm,..
Bei Amazonprime wird die Fernbedienung eines FireTv sticks angezeigt
usw.

Bei meiner mobilen Seite habe ich es ohne pagebutton  über data-type="html" gemacht da ich da keine Menueleiste habe sondern nur seitlich wische.

Wie gesagt wenn es eine simplere Lösung gibt her damit. ;D

Gruß
Eisix
 

setstate

Ich vermute, der Denkfehler liegt bei der Anzahl der States pro Button.
Sind es nicht nur 2?
Aktiv und Nicht-Aktiv

Man startet mit einem Basis-Pagebutton:

<div data-type="pagebutton"
     data-url="#content_main2.html"
     data-load="#content1"
     data-active-pattern="(.*index2.html||.*#content_main2.html)" 
</div>


Die Umschaltung per Remote-Device funktioniert dann mit zusätzlichen data-device und data-get-on

     data-device="ftuitest"
     data-get-on="0" 


Wenn er im Nicht-Aktiv Zustand verschwinden soll:

     data-hide="state"
     data-hide-on="!0"
     data-hide-off="0"


Zusammen:


<div data-type="pagebutton"
     data-url="#content_main2.html"
     data-load="#content1"
     data-active-pattern="(.*index2.html||.*#content_main2.html)" 
     data-icon="fa-tv"
     data-device="ftuitest"
     data-get-on="0"
     data-hide="state"
     data-hide-on="!0"
     data-hide-off="0">
</div>
<div data-type="pagebutton"
     data-url="#content_music2.html"
     data-load="#content2"
     data-active-pattern=".*#content_music2.html"
     data-icon="fa-tv"
     data-device="ftuitest"
     data-get-on="1"
     data-hide="state"
     data-hide-on="!1"
     data-hide-off="1">
</div>
<div data-type="pagebutton"
     data-url="#content_settings.html"
     data-load="#content3"
     data-active-pattern=".*#content_settings.html"
     data-icon="fa-tv"
     data-device="ftuitest"
     data-get-on="2"
     data-hide="state"
     data-hide-on="!2"
     data-hide-off="2">
</div>
<div data-type="pagebutton"
     data-url="#content_set.html"
     data-load="#content4"
     data-active-pattern=".*#content_set.html"
     data-icon="fa-tv"
     data-device="ftuitest"
     data-get-on="3"
     data-hide="state"
     data-hide-on="!3"
     data-hide-off="3">
</div>

Eisix

Hallo setstate,

funktioniert. Merci!

Gruß
Eisix

Eisix

Hallo setstate,

zu früh gefreut. Habe duchgetestet und beim reload der page wird der zweite pagebutton sichtbar. Liegt das an der oder Abfrage beim ersten Pagebutton
                               data-hide-on="!Fernsehen|!PowerOff|!Musik"
                               data-hide-off="Fernsehen|PowerOff|Musik">



                      <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|!PowerOff|!Musik"
                                data-hide-off="Fernsehen|PowerOff|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>


Gruß
Eisix

Eisix

Funktioniert jetzt, nachdem ich einen Pagebutton pro device-state angelegt habe.

Gruß
Eisix

setstate

schwerer Kampf  ;) Sehr schön, wenn es jetzt funktioniert.

Aber tröste dich, ich probiere auch sehr viel mit Try&Fail. Mein Ansatz ist dabei immer, dass man sich sehr leicht über die Semantik an die erwarteten Ziele heranzutasten können sollte. Erst wenn das zu holprig wird, ändere ich auch spontan mal die Parameter und deren Zusammenspiel innerhalb der Widgets.
Deshalb funktionieren so manche Codebeispiele aus der Anfangszeit nicht mehr neueren Versionen.

Ulm32b

Zitat von: setstate am 06 September 2018, 21:39:07
schwerer Kampf  ;) Sehr schön, wenn es jetzt funktioniert.

Nach dem Kampf ist vor dem Kampf. Der Brennpunkt auf Pagebutton könnte Anlass sein, zwei andere dort bekannte Unregelmäßigkeiten mit mehrstufigen Strukturen ins Visier zu nehmen: Der teilweise ausbleibende automatische Rücksprung und das active pattern. Beschrieben unter

https://forum.fhem.de/index.php/topic,83043.msg752633.html#msg752633

Betroffen von diesem Issue sind vermutlich viele.

octek0815

#42
Zitat von: setstate am 05 September 2018, 08:37:38
Woran machst du "aktiv" fest? Was soll sich ändern?

Nur die Icons? Die ändern sich nicht?

Exit:
Ach, ich vermute: die background Farbe soll sich anhand des active-pattern ändern und die Icons anhand der States. Muss ich nochmal checken ...

Und weiterhin diese Problematik.

juemuc

Hallo setstate,

ich habe auch noch einen Darstellungsfehler.
https://forum.fhem.de/index.php/topic,48106.msg832705.html#msg832705 Die "Rauf/Runter"-Pfeile werden nicht dargestellt.

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

ext23

Sind die neuen icons bei euch auch so furchtbar dick und gar nicht mehr mittig im Kreis?!?

/Daniel
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)