Hallo,
kann mir wer sagen warum sich hier das label nicht alleine aktualisiert und immer eine manuelle Aktualisierung vom Fully-Browser nötig ist ?
<div data-type="popup" data-height="200px" data-width="250px">
<div data-type="link" data-color="white">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
in
<header>Müllabfuhr</header>
<div class="vbox">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="popup" data-height="200px" data-width="250px">
<div data-type="link" data-color="white">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
<div class="dialog">
<header>Leerungen</header>
<div class="top-space inline">
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Restabfall/Wertstoffe" class="hbox"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div class="bold top-narrow">Bioabfall</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Bioabfall" class="top-narrow"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-set-off="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
</div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-set-off="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
</div>
</div>
</div>
</div>
Ohne link und popup klappt das ohne Probleme
<header>Müllabfuhr</header>
<div class="vbox">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
</div>
Gruß
Thomas
hast du es beim link mal mit "nocache" probiert?
https://wiki.fhem.de/wiki/FTUI_Widget_Link (https://wiki.fhem.de/wiki/FTUI_Widget_Link)
<div data-type="link" data-color="white" class="nocache">
Zitathast du es beim link mal mit "nocache" probiert?
Jetzt mal, Kalendereintrag geändert, Calendar reload gemacht -> das Icon aktualisiert sich weiterhin, das label nicht.
Gibt es aus dem FHEM Device überhaupt ein event (https://fhem.de/commandref_DE.html#readingFnAttributes) wenn sich nextWaste ändert?
Schon, das icon aktualisiert sich ja, wie du oben siehst holen sich das icon und label den Wert aus dem gleichen Reading.
Kann es sein, dass dir ein schließendes </div> fehlt?
<div data-type="link" data-color="white">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div> <!-- HIER -->
</div>
Ja ein schliessendes div hat gefehlt, es waren zuvor 20 öffnende und 19 schliessende.
Das merkwürdige ist jetzt das ich zweimal aktualisieren muss das label sich aktualisiert, ohne das fehlende </div> wars nur einmal, ob nun mit oder ohne nocache, mehrfach getestet.
<header>Müllabfuhr</header>
<div class="vbox">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="popup" data-height="200px" data-width="250px">
<div data-type="link" data-color="white" class="nocache">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
</div>
<div class="dialog">
<header>Leerungen</header>
<div class="top-space inline">
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Restabfall/Wertstoffe" class="hbox"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div class="bold top-narrow">Bioabfall</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Bioabfall" class="top-narrow"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
</div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
</div>
</div>
</div>
</div>
Warum nutzt du eigtl ein link-Widget um das label herum? Laut wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Popup#Struktur) ist die Struktur eher so:
[...]
<div data-type="popup" data-height="200px" data-width="250px">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
<div class="dialog">
[...]
Zitat von: yersinia am 26 Mai 2020, 13:24:57
Warum nutzt du eigtl ein link-Widget um das label herum?
Weiß nicht mehr, das schon einige Monate wieder her als ich die Abfallanzeige um das popup erweitert habe und dann die Lust daran verloren habe weils ohne nachzufragen nicht weiterging.
Mit deinem letzten Beispiel ist alles wie zuvor mit link, man muss zweimal aktualisieren.
<header>Müllabfuhr</header>
<div class="vbox">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div data-type="popup" data-height="200px" data-width="250px">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
<div class="dialog">
<header>Leerungen</header>
<div class="top-space inline">
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Restabfall/Wertstoffe" class="hbox"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div class="bold top-narrow">Bioabfall</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Bioabfall" class="top-narrow"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
</div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
</div>
</div>
</div>
</div>
Ein letzter Versuch, dann wüsste ich auch nicht mehr weiter - außer dass das popup widget das nicht unterstützt (kann ich mir aber nicht vorstellen, da es mit symbol und simplechart auch zu funktionieren scheint (https://wiki.fhem.de/wiki/FTUI_Widget_Popup#Chart_im_Popup_vergr.C3.B6.C3.9Fern)).
[...]
<div data-type="popup" data-height="200px" data-width="250px">
<div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow">
</div>
</div>
<div class="dialog">
[...]
Es klappt :), aber ;D:
Jetzt ist es Zufall das das popup auf geht beim tippen auf label, es ist auch nicht mehr genau das label auf das man tippen muss, habs aber noch nicht rausgefunden wo genau, kann tippeln wie ich will mal gehts mal gehts nicht, mal ist es weiter rechts mal weiter links, aber immer unter (sehr viel weiter) unter dem label, hab schon paarmal den Türöffner darunter betätigt. :P
Hab das popup auch mal über das icon gelegt, das klappt, man kann jetzt praktisch irgendwo tippen.
Nachteil das label rutscht weiter hoch. siehe 1. Bild i. A.
Das gleich ich (aber ob das so richtig ist ?) mit class="top-space" in dem div das wir hinzugefügt haben wieder aus. s. 2. Bild i. A.
<header>Müllabfuhr</header>
<div class="vbox">
<div data-type="popup" data-height="200px" data-width="250px">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div class="top-space">
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow" >
</div>
</div>
<div class="dialog">
<header>Leerungen</header>
<div class="top-space inline">
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Restabfall/Wertstoffe" class="hbox"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div class="bold top-narrow">Bioabfall</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Bioabfall" class="top-narrow"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
</div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
</div>
</div>
</div>
</div>
Nächste und letzte Frage, wieder label, im popup-Code:
In dem popup kann ich mit den push-Buttons von den Readings L_Bioabfall/L_Restabfall/Wertstoffe eins subtrahieren oder addieren.
Das klappt auch alles, nur aktualisiert sich auch hier der Wert nicht direkt, die Seite muss auch hier von Hand aktualisiert.
Woran kann das noch liegen oder geht das in einem popup nicht.
Die letzte Frage hat sich in Luft aufgelöst, hatte zwischenzeitlich nur noch data-return-time="60" ergänzt und mit der Höhe gespielt, plötzlich gehts 8)
<header>Müllabfuhr</header>
<div class="vbox">
<div data-type="popup" data-height="150px" data-width="250px" data-return-time="60">
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div class="top-space" >
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow" >
</div>
</div>
<div class="dialog">
<header>Leerungen</header>
<div class="top-space inline">
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Restabfall/Wertstoffe" class="hbox"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div class="bold top-narrow">Bioabfall</div>
</div>
<div class="top-space inline">
<div data-type="label" data-device="Google_Abfallkalender" data-get="L_Bioabfall" class="top-narrow"></div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
</div>
<div class="top-space inline">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
</div>
</div>
</div>
</div>
Danke noch für den Tipp aus #9
Zitat von: yersinia am 26 Mai 2020, 13:24:57
Warum nutzt du eigtl ein link-Widget um das label herum? Laut
Jetzt wieder entdeckt, weil ich mich wohl an folgendem, seit rd. 4 Jahren existierenden popup orientiert habe, welches ich damals in ähnlicher Form irgendwo abkupferte und es damit problemlos funzt.
Hat wohl was mit dem vbox-div zu tun, dass das zusätzliche div in Müllabfuhr gebraucht wird, aber nicht weiter mit beschäftigt.
<header>Rollladen</header>
<div data-type="symbol" data-device="Rollo_EG_Kueche" data-get="pct" data-states='[0,1]' data-colors='["red","green"]' data-icon="fa-align-justify" class="narrow"></div>
<div data-type="label" data-device="Rollo_EG_Kueche" data-get="pct" data-unit="%" class="narrow big thin"></div>
<div data-type="popup" data-height="190px" data-width="250px" data-return-time="60">
<div data-type="link" data-color="grey" data-border-color="grey" data-icon="fa-sort" class="top-space round">auf / ab</div>
<div class="dialog">
<header>Rollladen</header>
<div class="top-space inline">
<div data-type="switch"
data-device="Rollo_EG_Kueche"
data-get-on="down"
data-get-off="((?!down).)*"
data-set-on="down"
data-set-off="down"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
<div class="mini">10%</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="Rollo_EG_Kueche"
data-get="pct"
data-get-on="38"
data-get-off="((?!38).)*"
data-set="pct"
data-set-on="38"
data-set-off="38"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-bars">
</div>
<div class="mini">Mitte</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="Rollo_EG_Kueche"
data-get-on="up"
data-get-off="((?!up).)*"
data-set-on="up"
data-set-off="up"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
<div class="mini">10%</div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="switch"
data-device="Rollo_EG_Kueche"
data-get="pct"
data-get-on="0"
data-get-off="((?!0).)*"
data-set="pct"
data-set-on="0"
data-set-off="0"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
<div class="mini">zu</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="Rollo_EG_Kueche"
data-get="pct"
data-get-on="100"
data-get-off="((?!100).)*"
data-set="pct"
data-set-on="100"
data-set-off="100"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
<div class="mini">auf</div>
</div>
</div>
Vieles an deinem Code ist teilweise wirr. Ich denke, die vbox nutzt du um das Türöffner-Widget unter die Müllabfuhr zu platzieren. Von daher ist es ok, wenn es nicht geschlossen wird - Codefragment halt.
Aber das ist interessant:
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'>
</div>
<div class="top-space" >
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow" >
</div>
</div>
bottom-narrow gefolgt von top-space gefolgt von einem top-narrow ist irgendwie Sinnfrei imho. Generell hast du auch viele div-Container drin, die man mMn ersetzen könnte - indem man die class Definition in dem label selbst setzt.
Hier ein alternativer Vorschlag, der allerdings ungetestet ist. Wenns läuft und du zufrieden bist, dann lass es, wie es ist. ;)
<div data-type="popup" data-height="150px" data-width="250px" data-return-time="60">
<div> <!-- popuplink -->
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class=""></div>
</div> <!-- /popuplink -->
<div class="dialog">
<header>Leerungen</header>
<div class="vbox center-align">
<div class="hbox center-align items-top top-space">
<div class="bold">Restabfall/Wertstoffe</div>
<div data-type="label"
data-device="Google_Abfallkalender"
data-get="L_Restabfall/Wertstoffe"
class=""></div>
</div> <!-- /hbox -->
<div class="hbox center-align items-top top-narrow">
<div class="bold">Bioabfall</div>
<div data-type="label"
data-device="Google_Abfallkalender"
data-get="L_Bioabfall"
class="top-narrow"></div>
</div> <!-- /hbox -->
<div class="hbox center-align items-top top-space">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down"></div>
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up"></div>
</div> <!-- /hbox -->
</div> <!-- /vbox -->
</div><!-- /dialog -->
</div> <!-- /popup -->
Was ich immer gerne nutze sind die WebDeveloper Funktionen des Firefox, insbesondere die "Element untersuchen (Q)" Funktion - gibt gute aufschlüsse, wie sich eine HTML Element verteilt.
ZitatVieles an deinem Code ist teilweise wirr. Ich denke, die vbox nutzt du um das Türöffner-Widget unter die Müllabfuhr zu platzieren. Von daher ist es ok, wenn es nicht geschlossen wird - Codefragment halt.
Eventuell ist es nicht mehr so wirr, wenn du siehst das das keine Codefragmente sind, sondern eigene Dateien.
So hab ich halt damals angefangen und eigentlich nie wieder was geändert, weil das Interesse schwand und alles seinen Zweck erfüllt.
<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="140">
<meta name="widget_base_height" content="147">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll_type" content="websocket"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="widget_margin" content="1">
<link rel="stylesheet" href="./lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="./css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./lib/openautomation.css" />
<link rel="stylesheet" href="./lib/fhemSVG.css" />
<link rel="stylesheet" href="./lib/jquery.toast.min.css" />
<link rel="stylesheet" href="./lib/powerange.min.css" />
<script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js" defer></script>
<script type="text/javascript" src="/fhem/www/pgm2/jquery-ui.min.js" defer></script>
<script type="text/javascript" src="./lib/jquery.knob.mod.min.js" defer></script>
<script type="text/javascript" src="./lib/jquery.toast.min.js" defer></script>
<script type="text/javascript" src="./lib/jquery.circlemenu.js" defer></script>
<script type="text/javascript" src="./lib/powerange.min.js" defer></script>
<script type="text/javascript" src="./lib/jquery.gridster.min.js" defer></script>
<script type="text/javascript" src="./lib/fa-multi-button.min.js" defer></script>
<script type="text/javascript" src="./js/fhem-tablet-ui.js" defer></script>
</head>
<body>
<div class="gridster">
<ul>
<!-- ========= Linkes-Hauptmenü ========== -->
<!-- ====================================== -->
<li data-row="5"
data-col="1"
data-sizex="1"
data-sizey="1"
data-template="menu_pen.html">
</li>
<!-- ========= Uhr =========== -->
<!-- ====================================== -->
<li data-row="1"
data-col="3"
data-sizex="3"
data-sizey="1"
data-template="inc_uhr2.html">
</li>
<!-- ========= Termine ========== -->
<!-- ====================================== -->
<li data-row="4"
data-col="6"
data-sizex="2"
data-sizey="2"
data-template="inc_termine.html">
</li>
<!-- ========= Fritzbox =========== -->
<!-- ====================================== -->
<li data-row="3"
data-col="6"
data-sizex="2"
data-sizey="1"
data-template="inc_fritzbox.html">
</li>
<!-- ========= Haustür =========== -->
<!-- ====================================== -->
<li data-row="2"
data-col="6"
data-sizex="1"
data-sizey="1"
data-template="inc_haustuerkueche.html">
</li>
<!-- ========= Eieruhr =========== -->
<!-- ======================================= -->
<li data-row="1"
data-col="7"
data-sizex="1"
data-sizey="1"
data-template="inc_eieruhr.html">
</li>
<!-- ============= Müllplan ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="6"
data-sizex="2"
data-sizey="2"
data-template="inc_muellabfuhr.html">
</li>
<!-- ============= Rolladensteuerung Kueche ================ -->
<!-- ====================================== -->
<li data-row="2"
data-col="7"
data-sizex="1"
data-sizey="1"
data-template="inc_rollkueche.html">
</li>
<!-- ============= Einkaufsliste ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="5"
data-sizex="1"
data-sizey="1"
data-template="inc_einkaufsliste.html">
</li>
<!-- ============= ToDo Liste ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="4"
data-sizex="1"
data-sizey="1"
data-template="inc_todoliste.html">
</li>
<!-- ============= Spritpreise ================ -->
<!-- ====================================== -->
<li data-row="2"
data-col="1"
data-sizex="1"
data-sizey="3"
data-template="inc_spritpreise.html">
</li>
<!-- ============= Fernbedienung Echo Küche ================ -->
<!-- ====================================== -->
<li data-row="5"
data-col="2"
data-sizex="2"
data-sizey="1"
data-template="inc_echo_kueche.html">
</li>
<!-- ============= Flur Temperatur ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="2"
data-sizex="1"
data-sizey="1"
data-template="inc_eg_fk_temp.html">
</li>
<!-- ============= Hof Temperatur ============ -->
<!-- ====================================== -->
<li data-row="1"
data-col="1"
data-sizex="1"
data-sizey="1"
data-template="inc_hf_temp.html">
</li>
<!-- ============= Anrufliste ============= -->
<!-- ====================================== -->
<li data-row="2" data-col="2" data-sizex="4" data-sizey="3">
<header>Anruferliste</header>
<table border="0" width="100%">
<tr>
<td><div data-type="label" data-device="Calllist" data-get="1-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="1-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="1-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="1-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="1-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="1-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="2-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="2-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="2-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="2-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="2-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="2-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="3-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="3-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="3-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="3-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="3-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="3-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="4-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="4-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="4-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="4-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="4-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="4-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","=>","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="5-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="5-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="5-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="5-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="5-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","[<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="5-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="6-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="6-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="6-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="6-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="6-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="6-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="Calllist" data-get="7-timestamp"></div></td>
<td>
<div data-type="label" data-device="Calllist" data-get="7-number" style="font-size:x-large;color:#aa6900;"></div>
<div data-type="label" data-device="Calllist" data-get="7-name"></div>
</td>
<td class="r"><div data-type="label" data-device="Calllist" data-get="7-duration"></div></td>
<td class="r">
<div data-type="symbol" data-device="Calllist"
data-get="7-state"
data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div>
<div data-type="symbol" data-device="Calllist"
data-get="7-state"
data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
data-get-on='["=>","<=","=> X","<= X"]'
data-on-colors='["green","green","red","red"]'
class="inline"></div></td>
</tr>
</table>
</li>
</ul>
</div>
</body>
</html>
Zitatbottom-narrow gefolgt von top-space gefolgt von einem top-narrow ist irgendwie Sinnfrei imho.
Darum ja die Frage
Zitat(aber ob das so richtig ist ?)
Das div mit dem top-space kam ja dazu und das war erstmal ne Lösung label wieder höher zu bekommen, vorher war doch alles korrekt definiert oder nicht.
Deinen Vorschlag schau ich mir später an.
Zum Verständnis mit dem"Türöffner-Widget", das einfach nur ein switch der den Status der Haustür wiedergibt und die Tür öffnen kann bei Betätigung,
in der inc_haustuerkueche.html<header>Haustür</header>
<div class="wider">
<div data-type="switch"
data-device="MQTT2_EG_Flur_Kueche_Tuer"
data-get="POWER3"
data-states='["off","on"]'
data-icons='["ftui-door","ftui-door fa-lg"]'
data-background-icons='["fa-circle-thin","none"]'
data-colors='["green","firebrick"]'
data-background-colors='["#3D4C66","none"]'
class="bigger">
</div>
</div>
Zitat von: TomLee am 27 Mai 2020, 12:42:51So hab ich halt damals angefangen und eigentlich nie wieder was geändert, weil das Interesse schwand und alles seinen Zweck erfüllt.
Ja, deswegen sag ich ja auch: wenns läuft und du zufrieden bist, lass es wie es ist. :)
Der Code-Schönheit wegen tiefer eingreifen? mäh.
Allerdings dird deine
vbox aus #13 (https://forum.fhem.de/index.php/topic,111534.msg1057939.html#msg1057939) nicht geschlossen. Wennd as die komplette Datei in dem Code-Tag ist, dann solltest du die schließen - wirkt sich sonst auf die ganze Seite aus. Andererseits, du benötigst die
vbox hier eitl gar nicht. Was willst du vertikal geordnet darstellen?
Zitat von: TomLee am 27 Mai 2020, 12:42:51Das div mit dem top-space kam ja dazu und das war erstmal ne Lösung label wieder höher zu bekommen, vorher war doch alles korrekt definiert oder nicht.
Das kannst du mMn auch direkt in dem label machen. Sparst du dir einen div-container in diesem Fall.
Zum letzten Vorschlag:
Wenn ich im symbol div top-space entferne dann ragt das warn-icon etwas in den Header.
Mit der vbox Variante war alles perfekt ausgerichtet (siehe Bilder oben), auch wenn label mal zweizeilig ist.
Hast du dafür auch eine Lösung, aus diesem Beitrag (https://forum.fhem.de/index.php/topic,79990.msg720937.html#msg720937) ist übrigens die vbox-Variante entstanden (weil du oben gefragt hattest (und wieder rauseditiert) weshalb ich das so mache), meine das war doch schon alles korrekt so.
<header>Müllabfuhr</header>
<div data-type="popup" data-height="180px" data-width="250px">
<div> <!-- popuplink -->
<div class="bigger top-space"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow"></div>
</div> <!-- /popuplink -->
<div class="dialog">
<header>Leerungen</header>
<div class="vbox center-align">
<div class="hbox center-align items-top top-space">
<div class="bold">Restabfall/Wertstoffe</div>
<div data-type="label"
data-device="Google_Abfallkalender"
data-get="L_Restabfall/Wertstoffe"
class=""></div>
</div> <!-- /hbox -->
<div class="hbox center-align items-top top-narrow-3x">
<div class="bold">Bioabfall</div>
<div data-type="label"
data-device="Google_Abfallkalender"
data-get="L_Bioabfall"
class=""></div>
</div> <!-- /hbox -->
<div class="hbox center-align items-top top-narrow-3x">
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_2"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down"></div>
<div data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up"></div>
</div> <!-- /hbox -->
</div> <!-- /vbox -->
</div><!-- /dialog -->
</div> <!-- /popup -->
Zitat von: TomLee am 29 Mai 2020, 12:31:37Wenn ich im symbol div top-space entferne dann ragt das warn-icon etwas in den Header.
Mit der vbox Variante war alles perfekt ausgerichtet (siehe Bilder oben), auch wenn label mal zweizeilig ist.
Naja, es funktioniert ja erstmal, hübsch machen kann man danach.
Das Problem an der vbox-Variante war, dass die a) nicht geschlossen worden ist und b) aus einem ganz anderem Design herrührt:
Zitat von: TomLee am 29 Mai 2020, 12:31:37Hast du dafür auch eine Lösung, aus diesem Beitrag (https://forum.fhem.de/index.php/topic,79990.msg720937.html#msg720937) ist übrigens die vbox-Variante entstanden (weil du oben gefragt hattest (und wieder rauseditiert) weshalb ich das so mache), meine das war doch schon alles korrekt so.
Jetzt kannst du die Elemente entsprechend schrittweise (!) positionieren. Du könntest auch das popup-widget über das class Attribut mit einem
top-space positionieren, als Beispiel. Es spricht ja auch nichts dagegen,
vbox sinnvoll einzusetzen, zB beim
div des Links.
<div class="vbox"> <!-- popuplink -->
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow"></div>
</div> <!-- /popuplink -->Vielmehr geht es um Stückweises probieren.
Super, Danke. Jetzt sitzt alles wieder an der richtigen Stelle.
Die Darstellung der Leerungen hat mir noch nicht gepasst und die Positionierung der label und Text-Elemente hat mich jetzt einige Zeit gefesselt, aber die Erkenntnis war, alles Mist und brachte mich auf die Idee auch hier die Tonne mit warn-Icon zu verwenden.
Jetzt mit einer hbox und drei vbox.
Bei der Lösung ist das div um header entscheidend (hab ich lange gebraucht drauf zu kommen), mit dem div um header wird aber der Hintergrund dessen nicht mehr dunkler dargestellt, mit card in dem div sieht das wieder so ähnlich aus wie normal.
Sieht doch gut aus :)
Sagst du passt so oder würdest du es anders machen ?
<header>Müllabfuhr</header>
<div data-type="popup" data-height="152px" data-width="300px">
<div class="vbox"> <!-- popuplink vbox-->
<div class="bigger bottom-narrow"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="nextWaste"
data-get-warn=".*(\d+).*"
data-states='["R.*_([0|1])","B.*_([0|1])","H.*_([0|1])","S.*_([0|1])","R.*_.*","B.*_.*","H.*_.*","S.*_.*"]'
data-colors='["#87837D","#783C00","green","red","#87837D","#783C00","green","red"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn fa-spin","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn","fa-trash-o warn"]'></div>
<div data-type="label"
data-part="(.*)_.*"
data-device="Google_Abfallkalender"
data-get="nextWaste"
class="top-narrow"></div>
</div> <!-- /popuplink /vbox-->
<div class="dialog">
<div class="card">
<header>Leerungen</header>
<div class="hbox top-space">
<div class="vbox">
<div class="bigger"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="L_Bioabfall"
data-get-warn="(\d+)"
data-color="#783C00"
data-icon="fa-trash-o warn"></div>
<div class="bold top-narrow">Bioabfall</div>
</div> <!-- /vbox -->
<div class="vbox">
<div class="bigger"
data-device="Google_Abfallkalender"
data-type="symbol"
data-get="L_Restabfall/Wertstoffe"
data-get-warn="(\d+)"
data-color="#87837D"
data-icon="fa-trash-o warn"></div>
<div class="bold top-narrow">Restabfall/Wertstoffe</div>
</div> <!-- /vbox -->
<div class="vbox">
<div class=""
data-type="push"
data-device="doif_Muell_Count"
data-set-on="cmd_1"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-plus"
data-hide=""
data-hide-on=""
data-hide-off=""></div>
</div> <!-- /header -->
</div> <!-- /vbox -->
</div> <!-- /hbox -->
</div><!-- /dialog -->
</div> <!-- /popup -->
Nächstes Ziel ist den push-Button nach Betätigung bis zum nächsten passenden Abfall-Event (Bio oder Restabfall) zu verstecken, das sichergestellt ist das man immer nur einmal erhöhen kann, aber hab noch zu wenig darüber sinniert das mir klar wäre ob ich das jetzt über das DOIF oder einem userReadings lösen werde :P