- für schwache Geräte oder für flotteres Umschalten kann man jetzt die Fade-Time in der index.html im header per meta Tag ändern
<meta name='fade_time' content='0'>
- Umstellung auf Font Awesome 5 Free
https://fontawesome.com/icons?d=gallery
Achtung: es kann durchaus sein, dass sich die Icons gegenüber Version 4 etwas unterscheiden. Ich habe versucht, den Kompatibilitätmodus zu aktivieren, damit die alten fa-NAMEN weiterhin funktionieren.
Einige Icons bieten jetzt invertierte Darstellung. Mit einem zusätzlichem "invert" im data-icon kann man diesen aktivieren.
<div class="vbox row-50">
<div class="hbox">
<div data-type="push" data-background-icon="fa-square-o"></div>
<div data-type="push" data-background-icon="fa-circle-o"></div>
<div data-type="symbol" data-icon="fa-clock"></div>
<div data-type="symbol" data-icon="fa-clock invert"></div>
</div>
<div class="hbox bg-white">
<div data-type="push" data-background-icon="fa-square-o"></div>
<div data-type="push" data-background-icon="fa-circle-o"></div>
<div data-type="symbol" data-icon="fa-clock"></div>
<div data-type="symbol" data-icon="fa-clock invert"></div>
</div>
</div>
Ich habe mal in meiner Testumgebung das Update gemacht, eigentlich alles super. Eine kleine Änderung gab es, wohl im Style.
Dazu meine Frage ich nutze im
data-background-icon="fa-square-o"
das Icon ist jetzt eckig geworden. Ist das jetzt einstellbar evtl. oder heißt es nun anders, ich hänge mal ein Screenshot ran.
Es sind die grün Umrandeten fa-square-o Icons
Die schalter sind:
data-type="push"
Hi,
Zitat von: moonsorrox am 01 September 2018, 14:43:46
data-background-icon="fa-square-o"
das Icon ist jetzt eckig geworden.
Welche Form hatte es denn vorher? fa-
square-o klingt für mich ziemlich nach
eckig 8). Vielleicht war es vorher ein Bug und wurde komplett ignoriert?
LG
Christian
Hallo,
kann ich bestätigen beim Widget symbol werden FA Icons teilweise anders dargestellt.
z.B.
data-icons='["fa-unlink","fa-link"]'
War vorher 3 Kettenglieder jetzt nur noch 2. Macht aber nichts.
Beim Chart Widget werden die Navigationsbuttons nicht richtig dargestellt, sind jetzt kleine Boxen in denen z.B. FO R8 steht.
Habe mit Firefox probiert und wollte parallel diese Nachricht schreiben was fast nicht möglich war solange mein Demo System aktiv war. (habe fade_time an)
Gruß
Eisix
Wenn anstatt des Icons nur diese rechteckige Box erscheint, kann es daran liegen, dass ein font-weight="xyz" gesetzt ist.
Die meisten FA-5 Icons funktionieren nur mit font-weight=900. Einige haben auch eine invertierte Version, die dann über font-weight=100 angezeigt werden kann.
Zitat von: choenig am 01 September 2018, 16:55:41
Welche Form hatte es denn vorher? fa-square-o klingt für mich ziemlich nach eckig 8). Vielleicht war es vorher ein Bug und wurde komplett ignoriert?
nein kein Bug, schau mal auf das Bild
Auf jeden Fall waren sie wesentlich abgerundeter was etwas schöner aus sah und die Pfeile und das minus Zeichen sind nach oben gerutscht, aber kein Problem dann ist das wohl so.
Ich habe mit den Größen schon herum gespielt, aber an der eckigen From ändert sich nichts
Hallo setstate,
das font-weight=900 wird wo gesetzt?
Die Icons sind alle minimal kleiner und werden leicht nach unten versetzt zum background Icon angezeigt. Gibt es eine Möglichkeit das wieder zu zentrieren?
Gruß
Eisix
Das wird wohl nicht etwa genau meine Korrektur verursachen?
Bei mir waren alle icons in einem Circle zu groß und versetzt. Deshalb habe ich etwas gedreht.
Wo passiert das bei dir? Hast du mal etwas Beispielscode und einen Screenshot (nur von dem einen Element in groß)
Hallo,
da es bei allen ist vermute ich es liegt an deiner Korrektur.
<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>
Gruß
Eisix
Das ist klar: wenn es keine fa- Icons sind, darf die Kortektur nicht greifen.
Das muss ich noch korrigieren.
<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>
Hallo setstate,
genau das würde mich auch interessieren.
Zitat von: Eisix am 03 September 2018, 07:47:29
Hallo setstate,
das font-weight=900 wird wo gesetzt?
...
Gruß
Eisix
grüße
pflock_y
Wurde das folgende Problem auch mit diesem Update gefixt?
https://forum.fhem.de/index.php/topic,84302.0.html (https://forum.fhem.de/index.php/topic,84302.0.html)
Das liegt am Mix von Multistate- und Dual-State-Definitionen. Bitte entweder oder benutzen.
Zitat von: Eisix am 03 September 2018, 07:47:29
das font-weight=900 wird wo gesetzt?
im CSS unter .famultibutton .fa-stack-1x {}
Aber, das muss man nicht machen. Das war nur als Hinweis gedacht, wenn man in einem eigene Widget fa-Icons benutzt und font-weight=normal gesetzt hat und sich wundert, warum anstatt des Icons nur ein Viereck angezeigt wird.
Im Html Code braucht man nur "invert" zum Icon hinzufügen
data-icon="fa-cloud invert" oder weglassen
data-icon="fa-cloud"Das mit dem Verschieben und der Größe korrigiere ich gerade.
Zitat von: Eisix am 03 September 2018, 08:51:58
da es bei allen ist vermute ich es liegt an deiner Korrektur.
habe ich jetzt etwas optimiert
<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="green" data-off-background-color="green" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>
<div data-type="button" data-icon="fa-cloud" data-on-background-color="blue" data-off-background-color="blue" class=""></div>
<div data-type="button" data-on-background-color="red" data-off-background-color="red" class=""></div>
<div data-type="switch" data-on-background-color="yellow" data-off-background-color="yellow" class=""></div>
Danke, teste morgen früh.
Gruß
Eisix
Hallo setstate,
der Versatz bei den Icons ist immer noch. Er kommt aber vom background Icon. (siehe screenshot mit dem Rahmen).
Beim widget Graph und Homestatus habe ich noch die boxen anstatt der Icons. Invert anzuhängen hat bei Homestatus nichts gebracht und bei Graph habe ich keine Möglichkeit.
Gruß
Eisix
Den Versatz der Icons kann ich bestätigen, bei mir sieht es so aus als wenn bei meinen "Square-o" Icons der Bachground nach unten rutscht und die chevron-up und down teile gleich bleiben. Damit sind sie also nicht mehr zentriert sondern so als wenn sie hoch rutschen. Auch bei mir hat invert nichts gebracht.
Wenn gewünscht hänge ich auch Screenshots ran, sollte aber bei meinem ersten Screenshot zu erkennen sein.
Nur zur Info: invert ändert nichts an der Lage. Nur bei manchen Icons (siehe Fontawesome Webpage) gibt es zwei Varianten: normal und invertiert (wie beim Post#1: Uhr schwarze Zeiger / weiße Zeiger)
Zur Positionierung vom Hintergrund: schaue ich mir heute Abend an. Gut wäre eurer Code mit vielleicht 1-2 Parent-div drum herum, um zu sehen, ob die Verschiebung nur bei bestimmten Container-Konstellationen auftritt.
Zitat von: setstate am 04 September 2018, 10:16:10
Nur zur Info: invert ändert nichts an der Lage. Nur bei manchen Icons (siehe Fontawesome Webpage) gibt es zwei Varianten: normal und invertiert (wie beim Post#1: Uhr schwarze Zeiger / weiße Zeiger)
hätte mich auch gewundert... ;) war sicher nicht im Zusammenhang mit dem Versatz.
Wie schon geschrieben bei mir sieht es so aus als wenn
data-background-icon="fa-square-o" nach unten rutscht und
data-icon="fa-chevron-up" deshalb aus der Mitte raus ist und noch oben rutscht und eben nicht mehr so abgerundet ist in den Ecken...!
Zum Code ich hänge mal meine kompletten Code für einen Rollläden mit ran, der Screenshot (https://forum.fhem.de/index.php/topic,90739.msg832310.html#msg832310) dazu im Post ganz vorn von mir
<li data-row="4" data-col="1" data-sizex="16" data-sizey="16" style="height:98%; background-color:#3d445c">
<!-- ANFANG - Rollläden - ALLE -->
<div class="vbox" style="height:98%; background-color:#1f222e">
<div class="hbox grow-1">
<div class="hbox" style="height:75%; background-color:#3d445c">
<div class="card grow-2"><div class="left-align darkorange" style="margin-left:10px; font-size:150%">RAUM --- ZIMMER</div></div>
<div class="card"><div class="" style="font-size:150%">POSITION</div></div>
<div class="card"><div class="" style="font-size:150%">ZEITEN</div></div>
<div class="card"><div class="" style="font-size:150%">MODUS</div></div>
<div class="card left-space-2x"> </div><!--Box 02-->
<div class="card grow-2"><div class="darkorange" style="margin-left:-20px !important;font-size:150%">STEUERUNG --- BESCHATTUNG</div></div>
</div>
</div>
<div class="hbox">
<div class="card grow-2"><div class="left-align" style="margin-left:10px !important; margin-top:0px !important; font-size:150%;">Wohnzimmer Garten - Osten</div></div>
<div class="card">
<div class="" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="WZ_Rollladen_O" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="WZ_Rollladen_O"></div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="">35</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<!--Box 09-->
<div class="card">
<div data-type="popup" data-height="400px" data-width="600px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-time_clock","oa-time_clock","oa-time_clock","oa-time_clock"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Zeiten WZ alle</div>
<div class="dialog" style="overflow:hidden;">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Zeiten - Wohnzimmer - Alle Rollläden</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<!-- Öffnungszeiten Morgens -->
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Tag</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Ende</div>
</div>
<!-- Beschattungszeiten -->
<div class="cell">
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Zeit - Beschattung - 90%</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Beschattung - ENDE</div>
</div>
</div>
</div>
</div>
<div class="card">
<div data-type="popup" data-height="200px" data-width="400px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-fts_shutter_automatic","fs-fts_shutter_updown","oa-fts_shutter_automatic","oa-fts_shutter_manual"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Wohnzimmer</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Modus - Wohnzimmer</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow" data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
</div>
</div>
<div class="card left-space-2x"> </div><!--Box 11-->
<div class="card grow-2">
<div class="center">
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">35</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
</div>
.
.
.
.
.
.
<!--hier gehts dann weiter mit den anderen Rollläden-->
</li>
Kann dieses Problem auch nochmal angeschaut werden?
https://forum.fhem.de/index.php/topic,87241.msg814761.html
Zitat von: octek0815 am 04 September 2018, 15:21:15
Kann dieses Problem auch nochmal angeschaut werden?
https://forum.fhem.de/index.php/topic,87241.msg814761.html
Spontan aus der Ferne betrachtet sieht das wieder nach Definitionsmix aus
Siehe meine Antwort von gestern hier: https://forum.fhem.de/index.php/topic,84302.msg832970.html#msg832970
Hallo. Bei mir auch im Homestatus, bei den Batterie Symbol und bei anderen Symbolen ist was falsch.
Homestatus Viereck
<div data-type="homestatus" data-device="rr_Manuel"
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["ZuHause","Bett","Unterwegs","Urlaub","bettfertig"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase","fa-child"]'
data-version="roommate" class="top-space">
</div>
Batterie zu klein und leicht versetzt
<div class="inline">
<div data-type="symbol"
data-device="HZG_EG_WZ"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0 fa-blink"]'
data-colors='["green","yellow","orange","red","firebrick"]'
class="small">
</div>
<div data-type="label" data-device="HZG_EG_WZ" data-get="actuator" data-unit="%" class=""></div>
</div>
und die 2 Symbole in sich zu weit unten
<div class="container inline left-space">
<div data-type="push" data-device="str_EG_Lampen" data-cmd="set" data-set-on="off" class="cell"></div>
<div data-type="label">EG Lichter aus</div>
</div>
<div class="container inline left-space">
<div data-type="switch" data-icon="fa-lightbulb-o" data-device='Licht_OG_Bad'
data-get-on="on" data-get-off="off" class="cell"></div>
<div data-type="label">Bad OG</div>
</div>
Zitat von: setstate am 04 September 2018, 15:49:30
Spontan aus der Ferne betrachtet sieht das wieder nach Definitionsmix aus
Siehe meine Antwort von gestern hier: https://forum.fhem.de/index.php/topic,84302.msg832970.html#msg832970
Das ist es leider nicht.
Zitat von: Tabularasa am 04 September 2018, 17:49:19
Hallo. Bei mir auch im Homestatus, bei den Batterie Symbol und bei anderen Symbolen ist was falsch.
Homestatus Viereck
<div data-type="homestatus" data-device="rr_Manuel"
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["ZuHause","Bett","Unterwegs","Urlaub","bettfertig"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase","fa-child"]'
data-version="roommate" class="top-space">
</div>
okay, das war browserabhängig. Konnte ich nur im FF nachvollziehen. Es war wieder das Font-Weight Thema.
Ist jetzt gefixed
Zitat von: setstate am 05 September 2018, 07:31:01
doch, ist es 8)
Wo ist der fehler? Das Icon (bzw. die Seite) wird nicht als aktiv angezeigt.
<div data-type="pagebutton"
data-url="#flur_content1.html"
data-load="#flur_content1"
data-active-pattern="(.*/||.*index_flur.html||.*#flur_content1.html)"
data-device="Flur_EG_Haustuerschloss"
data-get="state"
data-states='["locked","unlocked","locked (uncertain)","unlocked (uncertain)"]'
data-icons='["mf1-home-locked","mf1-home-unlocked","mf1-home-locked-uncertain","mf1-home-unlocked-uncertain"]'
data-colors='["white","white","white","white"]'
data-fade-duration="fast"
data-background-icons='["fa-square","fa-square","fa-square","fa-square"]'
class="default"></div>
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 ...
Genau das meint er. Tritt bei mir auch auf, die Hintergrundfarbe ändert sich nicht wenn aktiv. Bei meiner index.html Auswahlmenü der TV Button hat verschiedene subpages.
Gruß
Eisix
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.
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
Soll der "missbrauchte" Pagebutton aber noch Content umschalten? Wenn ja: soll er dann trotzdem anzeigen, dass sein Content gerade angezeigt wird? IsActive?
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>
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"
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
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>
Hallo setstate,
funktioniert. Merci!
Gruß
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
Funktioniert jetzt, nachdem ich einen Pagebutton pro device-state angelegt habe.
Gruß
Eisix
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.
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 (https://forum.fhem.de/index.php/topic,83043.msg752633.html#msg752633)
Betroffen von diesem Issue sind vermutlich viele.
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.
Hallo setstate,
ich habe auch noch einen Darstellungsfehler.
https://forum.fhem.de/index.php/topic,48106.msg832705.html#msg832705 (https://forum.fhem.de/index.php/topic,48106.msg832705.html#msg832705) Die "Rauf/Runter"-Pfeile werden nicht dargestellt.
Viele Grüße
Jürgen
Sind die neuen icons bei euch auch so furchtbar dick und gar nicht mehr mittig im Kreis?!?
/Daniel
Zitat von: ext23 am 08 September 2018, 08:46:27
Sind die neuen icons bei euch auch so furchtbar dick und gar nicht mehr mittig im Kreis?!?
genau darum geht es ja gerade hier... ;)
Hallo,
ich nutze eigentlich fast ausschließlich openautomation icons und die sind leider seit dem Update sehr fett (s. Anhang). Wie kann ich denn nun die Dicke auf den ursprünglichen Wert ändern?
schöne Grüße
Jo
toll wäre es, wenn man das einstellen könnte, geht aber zur Zeit wohl nur über die bekannten Größenangaben small, tiny, mini, aber dann werden sie zu klein. Evtl. gehe noch data-size="" in px oder prozent.. mal ausprobieren...
Die bekannten Größenangaben small, tiny, mini skalieren zwar wie gewohnt das gesamte icon. An der Lesbarkeit ändern sie aber nichts. Die Strichstärke ist gefühlt doppelt so groß wie vorher.
Nachtrag: Ein
font-weight: lighter !important;
im css bringt die ursprüngliche "Dicke" der Linien zurück.
schöne Grüße
Jo
Bitte ein konkretes Beispiel posten. Ich kann nicht nachvollziehen, was gemeint ist.
Dies hier ist bei mir nicht fett
<div data-type="symbol" data-icon="oa-fts_garage"></div>
Naja, die Einbindung des icons ist nichts Besonderes:
<div data-type="switch" data-icon="oa2-light_ceiling_light" data-device="xyz"></div>
"oa2" weil ich damals eine eigene iconfont in einem Unterordner des Ordners "font" eingebunden habe. Die ist aber zu 98% identisch mit oa. Erstellt wurde die damals mit icomoon. Irgendwann ab Version 2.5 musste mal ein
font-size: 200% !important;
Dazu, weil die icons auf einmal sehr klein waren. Alles andere (weight, style, ...) war bisher "normal" gesetzt.
Ich bin eigentlich davon ausgegangen, dass sich insofern bei Updates nichts ändert, als dass diese icon-fonts wie bisher skaliert/interpretiert werden. Das scheint aber ja nicht der Fall zu sein. Denn ansonsten (bis auf das update) habe ich nichts geändert. Was im Moment hilft, ist wie gesagt in der font-css ein
font-weight: lighter !important;
Das deutet aber ja darauf hin, dass an anderer Stelle das font-weight neuerdings überschrieben wird. Kann das sein?
schöne Grüße
Jo
Zitat von: setstate am 09 September 2018, 10:21:44
Bitte ein konkretes Beispiel posten. Ich kann nicht nachvollziehen, was gemeint ist.
Dies hier ist bei mir nicht fett
<div data-type="symbol" data-icon="oa-fts_garage"></div>
Ich habe das selbe Problem. Es tritt in der tat nur auf mit selbst erstellten Fonts.
Beispiel (Die beiden ersten Icons sind aus dem "oa" Font und das Rechte Icon Icon aus einem eigene Font)
Okay, verstanden. Dann hilft tatsächlich der Fix aus #50
Bei fa- ist font-weight="900" Standard
Super, danke!
Schöne Grüße
Jo
Zitat von: Jojo11 am 09 September 2018, 11:29:47
font-weight: lighter !important;
Das deutet aber ja darauf hin, dass an anderer Stelle das font-weight neuerdings überschrieben wird. Kann das sein?
Bei mir sind die Icons auch etwas "fetter" geworden. Wo genau kann ich es denn "lighter" machen.
Ich habe schon verschiedene Stelle in der fhem-tablet-ui-user.css getestet, hat aber alles nichts gebracht.
Gibt es auch schon eine Lösung für den Versatz des Icon-Backgrounds?
Gruß LuGu
Habe seit dem Update Probleme mit dem "widget_chart", dass keine Navigationsicons mehr angezeigt werden. Ist das bei euch auch so?
Siehe hier: https://forum.fhem.de/index.php/topic,48450.msg836874.html#msg836874 (https://forum.fhem.de/index.php/topic,48450.msg836874.html#msg836874)
@setstate,
hast du einen Fix?
Danke vorab,
Andreas
Zitat von: somansch am 16 September 2018, 22:31:25
@setstate,
hast du einen Fix?
Ich nicht, das muss direkt im widget_chat geändert werden. Ich vermute, wenn fa-Icons benutzt werden, ist ein font-weight="normal" im js-Code oder css zuviel, oder ein explizites font-weight="900" muss in den Style des Symbols.
Zitat von: setstate am 17 September 2018, 07:55:08
Ich nicht, das muss direkt im widget_chat geändert werden. Ich vermute, wenn fa-Icons benutzt werden, ist ein font-weight="normal" im js-Code oder css zuviel, oder ein explizites font-weight="900" muss in den Style des Symbols.
Danke, habe @eki bzgl. dem update des widgets in dem anderen Thread informiert.
Zitat von: Eisix am 05 September 2018, 09:33:31
Genau das meint er. Tritt bei mir auch auf, die Hintergrundfarbe ändert sich nicht wenn aktiv. Bei meiner index.html Auswahlmenü der TV Button hat verschiedene subpages.
Gruß
Eisix
Mit dem neuen Update sollte das jetzt besser funktionieren
Nabend,
wieso geht bei mir der pagebutton nicht mehr um auf die FHEM default Seite zu kommen? Auch wird das Icon jetzt immer als "on" dargestellt.
<div data-type="pagebutton"
data-url="/fhem/"
data-off-color="#393939"
data-on-background-color="#aa6900"
data-off-background-color="#337ab7"
data-icon="fa-sign-out" >
</div>
Und eine anderen Frage, seit dem die Icon auf die neuen eher hässlichen dicken umgestellt wurden sind diese bei mir teilweise nicht mehr mittig im Kreis, was kann das sein?
/Daniel
Ich kann den Fehler leider nicht nachvollziehen. Bei mir geht dieser Button so.
Wie sehen die anderen aus? kannst du mal ein minimal Beispiel für mich bauen.
Sowas wie hier: https://forum.fhem.de/index.php/topic,83043.0.html
Nur die Seiten und die Buttons. Damit konnte ich den Anwendungsfall nachvollziehen und Pagebutton dahingehend ändern.
Das hat vermutlich eure Anwendungsart "zerstört".
Ich pack dir mal den ganzen Ordner ein, ist vielleicht besser oder?
/Daniel
Bei mir geht seit dem letzten Update die Navigation nicht mehr. Auf der Startseite (index.html mit aktivem ersten Untermenü content_home), also "Home" ist der Pagebutton aktiv. Wenn ich jetzt in eine Unterseite der content_home.html navigiere, z.B. (weather_now.html), bleibt der Home-Button aktiv und man kann ihn nicht mehr zum zurück navigieren nutzen.
"data-active-pattern" scheint nicht mehr zu gehen.......
Hier der Code des pagebutton aus der index.html: ....... <li>
<div data-type="pagebutton" data-url="#content_home.html"
data-fade-duration="100"
data-off-color="white"
data-off-background-color="transparent"
data-on-color="blue"
data-on-background-color="transparent"
data-load="#content_home"
data-active-pattern="(.*index2.html|.*#content_home.html)"
data-icon="fa-home" class="bigger compressed left-space-2x"></div>
</li>.......
...und der Code aus der content_home.html, wo das weather_now aufgerufen wird: ...... <section>
<div class="hdm-flexbox-container">
<div class="hdm-flexbox-item-10">
<div class="tall compressed top-space"
data-type="symbol"
data-device="Wetter_WW"
data-get="MinutenSeitAbgleich"
data-icons='["wi wi-thermometer","wi wi-thermometer shake"]'
data-limits="[0,15]"
data-colors='["blue","red"]'></div>
</div>
<div class="hdm-flexbox-item">
<div class="grande"
data-type="label"
data-device="Wetter_WW"
data-get="temp_c"
data-limits="[-50,-10,0,10,20,25,30]"
data-colors='["#0000ff","#9999ff","#ffbdff","#FAA460","#ff6900","#ff3333","#ff0000"]'
data-fix="1"
data-unit="°C" ></div>
<div data-type="klimatrend" data-device="Wetter_WW" data-get="statTemp_cTendency" data-refperiod="1" class="inline bigger top-space readonly"></div>
<div data-type="klimatrend" data-device="Wetter_WW" data-get="statTemp_cTendency" data-refperiod="2" class="inline bigger top-space readonly"></div>
<div data-type="klimatrend" data-device="Wetter_WW" data-get="statTemp_cTendency" data-refperiod="3" class="inline bigger top-space readonly"></div>
<div class="bigger"
data-type="label"
data-device="Wetter_WW"
data-get="temperature_at"
data-limits="[-50,-10,0,10,20,25,30]"
data-colors='["#0000ff","#9999ff","#ffbdff","#FAA460","#ff6900","#ff3333","#ff0000"]'
data-pre-text="Gefühlt: "
data-fix="1"
data-unit="°C" ></div>
</div>
<div class="hdm-flexbox-item-20 right-align">
<div data-type="link" data-url="#content_weather_now.html" data-load="#content_weather_now" data-fade-duration="0">
<div class="big inline white">Außen</div>
<div data-type="symbol" data-color="gray" data-icon="mi-chevron_right" class="compressed inline"></div>
</div>
</div>
</div>
</section>...
Zitatwieso geht bei mir der pagebutton nicht mehr um auf die FHEM default Seite zu kommen? Auch wird das Icon jetzt immer als "on" dargestellt.
Der simple Fall (nur url aufrufen) hatte ich für Pagebutton garnicht mehr auf dem Schirm. Das hätte aber auch nur mit einem
<div data-type="switch"
data-url="/fhem/"
...funktioniert.
Ist aber jetzt im Pagebutton gefixt.
Zitat von: setstate am 21 September 2018, 23:23:33
Der simple Fall (nur url aufrufen) hatte ich für Pagebutton garnicht mehr auf dem Schirm. Das hätte aber auch nur mit einem
<div data-type="switch"
data-url="/fhem/"
...
funktioniert.
Ist aber jetzt im Pagebutton gefixt.
Habe gerade die neuste Version getestet. Mein Problem (siehe Post vor 5 Minuten) ist leider damit nicht behoben.
jetzt muss'es aber ...
Zitat von: setstate am 22 September 2018, 00:11:51
jetzt muss'es aber ...
Perfekt!
Vielen Dank für deinen ultraschnellen Support :)
Jo super, läuft wieder!
/Daniel
Seit dem Update habe ich das Problem, dass im Symbol Widget die Farbangaben ignoriert werden und alles in grau angezeigt wird.
Gibt es dafür eine Lösung???
Guten Abend,
Ich habe soeben ein update gemacht und habe das gleiche Problem wie Frank77 über mir. Vorher waren orangene Kreise um die einzelnen Rolläden.
Wo muss man zur Untersuchung ansetzen?
Viee Grüße
Fabian
Gib uns mal den Code vom Rolladen-Teil
Bei mir werden die aktuellen Positionen von den Rollo s nicht mehr angezeigt. Sie sind immer unten laut Abbildung. Morgen kann ich dazu auch noch code liefern...
Zitat von: setstate am 01 Oktober 2018, 19:58:18
Gib uns mal den Code vom Rolladen-Teil
<div data-type="symbol" class="cell small left" data-device="wc_froll_klein" data-get="state" data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80", "oa-fts_shutter_90","oa-fts_shutter_100"]'
data-states='["0","10","20","30","40","50","60","70","80","90","100"]'
data-colors='["#2A2A2A"]'
data-background-colors='["#aa6900"]'
data-background-icons='["fa-square"]'> </div> Viele Grüße
Fabian :)
die Anzahl der items in data-background-colors muss zur Anzahl in data-states passen. Sinnvoll, wenn sich die Farben ändern sollen, je nach Status.
data-states='["0","10","20","30","40","50","60","70","80","90","100"]'
data-colors='["#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A","#2A2A2A"]'
data-background-colors='["#aa6900","#aa6900","#aa6900","#aa6900","#aa6900","#aa6900","#aa6900","#aa6900","#aa6900","#aa6900"]'
Wenn die Farben sich nicht ändern, wie bei dir, kann man sie auch nur statisch angeben (Achtung: color ohne s)
data-color='#2A2A2A'
data-background-color='#aa6900'
data-background-icon='fa-square'
Hintergrund: das automatische Ergänzen der fehlenden Items in den Arrays habe ich rausgeschmissen. Die mehrfache for-loop aus Bequemlichkeit fand ich Performanceverschwendung.
Zitat von: Tabularasa am 01 Oktober 2018, 22:02:42
Bei mir werden die aktuellen Positionen von den Rollo s nicht mehr angezeigt. Sie sind immer unten laut Abbildung. Morgen kann ich dazu auch noch code liefern...
So hier mal mein Code, hab es jedoch wahrscheinlich auch schon gefunden. Anzahl states und icons war auch unterschiedlich. Es gibt bloß kein
oa-fts_shutter_0... um auf die gleiche Anzahl zu kommen
<div data-type="symbol" data-device="Rollo_EG_WZ" data-get="pct" data-states='[0,10,20,30,40,50,60,70,80,90,100]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60",
"oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10"]'></div>
Zitat von: FabJoe am 01 Oktober 2018, 23:18:52
<div data-type="symbol" class="cell small left" data-device="wc_froll_klein" data-get="state" data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80", "oa-fts_shutter_90","oa-fts_shutter_100"]'
data-states='["0","10","20","30","40","50","60","70","80","90","100"]'
data-colors='["#2A2A2A"]'
data-background-colors='["#aa6900"]'
data-background-icons='["fa-square"]'> </div>
Viele Grüße
Fabian :)
Genau das wars, super. Jetzt muss ich nur noch kleine Feinheiten bereinigen, z.B.: Beschriftung "WC" oder das Gridster-Gerüst, damit keine Scrollbalken mehr angezeigt werden.
Hallo zusammen,
nachdem ich gestern wieder mal ein update durchgeführt habe, habe ich nun folgendes Problem.
Wenn ich das Widget Chart benutze wird das Aussehen des gesamten UI verändert (andere Schriftart, größe der Schrift)
Wo könnte das Problem liegen?
Das Problem besteht auch bei meine tablet_prod instans welche durch das Update nicht verändert wird
MfG Ingo
ich denke das ist deine komplette Icon Anpassung, soll heißen das du evtl. eine Größe runter gehen solltest...! Nur eine Vermutung
Ein herzerfrischendes "MoinMoin" vom hintern-Deich vorweg
seit dem ich gestern ein Update der "fhem-tablet-ui.css" vorgenommen habe, fällt mir beim Thermostat Widget die Soll-Temperatur aus dem Rahmen.
Allerdings nur im Chrome Version 69.0.3497.100 (Offizieller Build) (64-Bit) Browser.
Im Firefox 62.0.3 (64-Bit) ist alles ok.
Was ist denn seit gestern geändert worden?
Anfang der index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
*/
-->
<!-- Basic Stylesheet with Darkblue AddOn -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<!-- Different Stylesheet depending on daylight conditions calculated by the twilight module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Twilight" data-get="light" data-get-on="6" data-get-off="!6" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Sailor's Home</title>
</head>
<meta http-equiv="Cache-Control" content = "no-cache, no-store, must-revalidate" />
<meta name = "longpoll_type" content = "websocket" />
<meta name = "GoogleMapsApiKey" content = "AIzaSyAqjYRFJUa7Kc_VUsyDOXj_Ny5gnQQEotQ" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta name = "gridster_disable" content = "1" />
<meta name = "gridster_cols" content = "10" />
<meta name = "gridster_rows" content = "6" />
<meta name = "widget_margin" content = "5" />
<!-- <div data-type="reload"
data-device="UI_ReloadFtui"
data-get-on="1"
data-set-off="0">
</div> -->
<body style="overflow:hidden;" onload="createImageLayer();" >
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" class="semitransparent">
Thermostat Kitchen:
<!-- ******* Kitchen ********************************************************************************************* -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="3" class="semitransparent">
<header><div data-type="label" class="large">Kitchen</div></header>
<br>
<div class="table top">
<div class="row center">
<div class="cell big">
T =
</div>
<div class="cell bigger">
<div data-type = "label"
data-device = "KT_Thermostat_Climate" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits = '[-20,20,24,29]' data-colors='["skyblue","darkorange","orangered","red"]'>
</div>
</div>
<div class="cell big">
</div>
<div class="cell big">
φ =
</div>
<div class="cell bigger">
<div data-type = "label"
data-device = "KT_Thermostat_Climate" data-get="humidity" data-unit="%rel%0A" data-fix="0"
data-limits = '[0,40,60,80]' data-colors='["skyblue","darkorange","orangered","red"]'>
</div>
</div>
</div>
</div>
<br>
<div class="table top">
<div class="row center">
<div class="cell top-center">
<div class="row top-center">
<div data-type = "switch"
data-device = "KT_Thermostat_Climate"
data-get = "controlMode"
data-get-on = '["auto","manual"]'
data-icons = '["oa-sani_heating_automatic","oa-sani_heating_manual"]'
data-colors = '["darkgreen","darkblue"]'
data-set-states = '["controlMode manual","controlMode auto"]'
data-background-icon = "fa-square"
data-background-colors = '["dimgrey","dimgrey"]'>
</div>
</div>
<div class="row top-center">
<br>
<br>
<br>
</div>
<div class="row top-center">
<div data-type = "switch"
data-device = "KT_Thermostat"
data-get = "R-btnLock"
data-get-on = '["on|set_on","off|set_off"]'
data-icons = '["oa-secur_locked","oa-secur_open"]'
data-colors = '["darkred","darkblue"]'
data-set-states = '["regSet btnLock off","regSet btnLock on"]'
data-background-icons = '["fa-square","fa-square"]'
data-background-colors = '["dimgrey","dimgrey"]'>
</div>
</div>
</div>
<div class="cell center big">
<div data-type = "thermostat"
data-device = "KT_Thermostat_Climate"
data-height = "150"
data-width = "150"
data-get = "desired-temp"
data-set = "desired-temp"
data-temp = "measured-temp"
data-valve = "ValvePosition"
data-min = "0"
data-max = "30"
data-step = "0.5"
data-mode = "controlMode"
data-off = "controlManu off"
data-boost = "controlMode boost">
</div>
</div>
<div class = "cell top-center">
<div class = "row top-center">
<div data-type = "push"
data-device = "KT_Thermostat_Climate"
data-set = "controlMode"
data-set-off = ""
data-on-color = "darkred"
data-off-color = "black"
data-icon = "fs-sani_heating_boost"
data-background-icon = "fa-square"
data-on-background-color = "dimgrey"
data-off-background-color = "dimgrey"
data-set-on = "boost"
data-countdown = "300">
</div>
</div>
<div class = "row top-center">
</div>
<div class = "row top-center">
<br>
<br>
<br>
</div>
<div class = "row top-center">
<div data-type = "symbol"
data-device = "KT_Window"
data-get = "state"
data-states = '["closed","open"]'
data-icons = '["oa-fts_window_1w","oa-fts_window_1w_open"]'
data-colors = '["darkgreen","#ff0000"]'
data-background-icon = "fa-square"
data-on-background-color = "dimgrey"
data-off-background-color = "dimgrey">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="table">
<div class="row center">
<div class="cell">
<div data-type = "label" class="cell">
Roller Shutter
</div>
</div>
<div class="cell">
<div data-type = "label" class="cell">
Ceiling Light
</div>
</div>
</div>
<div class="row center">
<!-- ******* Blind ******************************************************************************************** -->
<div class="cell">
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li>
<div data-type = "symbol"
data-device = "KT_Blind"
data-get = "state"
data-states = '["on","off","100","9[0-9]","8[0-9]","7[0-9]","6[0-9]","5[0-9]","4[0-9]","3[0-9]","2[0-9]","1[0-9]","[0-9]"]'
data-icons = '["oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
data-colors = '["#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "stop"
data-icon = "fa-hand-stop-o"
data-off-color = "red"
data-on-color = "red">
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "off"
data-icon = "fa-angle-up"
data-off-color = "green"
data-on-color = "green">
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "100"
data-icon = "oa-fts_window_2w">
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "80"
data-icon = ""><FONT SIZE=3>80%</FONT>
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "60"
data-icon = ""><FONT SIZE=3>60%</FONT>
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "40"
data-icon = ""><FONT SIZE=3>40%</FONT>
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "20"
data-icon = ""><FONT SIZE=3>20%</FONT>
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "0"
data-icon = "oa-fts_shutter_100">
</div>
</li>
<li>
<div data-type = "push"
data-device = "KT_Blind"
data-set-on = "on"
data-icon = "fa-angle-down"
data-off-color = "green"
data-on-color = "green">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- ******* Ceiling Light ************************************************************************************ -->
<div class="cell center ">
<div data-type = "switch"
data-device = "KT_Light_Sw"
data-get = "state"
data-get-on = "[0-9]{1,3}|on"
data-get-off = "off"
data-set-on = "on"
data-set-off = "off">
</div>
</div>
</div>
</div>
</li>
Gruss
Sailor
Das passiert immer, wenn Thermostat zu sehr gequetscht wird.
In deiner Anordnung bekommt der mittlere Teil 33,3% width. Das Thermostat soll aber laut deiner Definition 150px breit sein.
Wenn die 33,3% keine 150px hergeben, schwuppt die innere Zahl raus.
Du musst das Thermostat kleiner machen: z.B.
data-height = "138"
data-width = "138"
Hallo setstate
Zitat von: setstate am 04 Oktober 2018, 20:06:56
Das passiert immer, wenn Thermostat zu sehr gequetscht wird.
In deiner Anordnung bekommt der mittlere Teil 33,3% width. Das Thermostat soll aber laut deiner Definition 150px breit sein.
Wenn die 33,3% keine 150px hergeben, schwuppt die innere Zahl raus.
Du musst das Thermostat kleiner machen: z.B.
data-height = "138"
data-width = "138"
Habe es auf 124 verkleinert und hat geklappt.
Sind jetzt zwar merklich kleiner, aber ich werde mal daran nachforschen, wie ich die Spaltenmits der Buttons links und rechts neben dem Thermostat auf 20 - 25% limitiert bekomme.
Dann kann ich die Thermostate auch wieder vergrößern.
DANKE!
Gruss
Sailor
das kann man mit cell-25 oder cell-1-4
Hallo setstate
Zitat von: setstate am 05 Oktober 2018, 00:37:30
das kann man mit cell-25 oder cell-1-4
Danke, auch der Tipp hat geklappt!
Gruss
Sailor
Mir ist gestern noch etwas aufgefallen.
Leider ist die on-for-timer Anzeige bei meinem Pushbutton fehlerhaft.
Kann ich in Chrom bestätigen.
Ausserdem ist sie bei mir Amber statt blau...
Gruss
Sailor
Das blaue kommt bei mir von der css, habe ich so eingestellt.
Servus. Ich glaube seitdem ich das Update gemacht hatte, dauert es an meinem Tablet ewig bis sich alles aktualisiert hat. Wenn ich zB um 22 Uhr den Bildschirm aus mache und morgens wieder an dann geht er alles durch was seitdem passiert ist. Also zB der Homestatus ändert sich mehrmals auf absent, sleep wieder home usw... Die letzte Aktualisierung hat bis zum aktuellen Stand über 60 Sekunden gedauert. Das ging vorher unter 10 Sekunden weil es da nicht alles durchgegangen ist. Habe auch schon fade_time' content='0' ausprobiert aber da ändert sich nix. Gibt es da einen Vorschlag woran es liegen kann, bzw was ich noch probieren kann? Danke
Edit
Von gestern um 20 Uhr bis eben um 8 habe ich sieben Zustandswechsel gezählt mit einer Aktualisierungszeit von 74 Sekunden :-\
Hallo Vaddi
Zitat von: Vaddi am 06 Oktober 2018, 10:39:22
Das blaue kommt bei mir von der css, habe ich so eingestellt.
Ich habe auch die "css/fhem-darkblue-ui.css" im Einsatz.
Trotzdem ist der Ring bei mir Amber.
Hast du noch was individuell nachgebessert?
Gruss
Sailor
Ja, habe ich. Kann das nachher hier mal posten, wenn ich Zuhause bin.
Moin setstate,
möchte kein Thread extra aufmachen, da das Problem scheinbar nur mich betrifft.
Bekomme auf jeden Fall seit dem Update 2.7.6 folgende Fehlermeldung beim Aufruf von FTUI angezeigt:
Uncaught SyntaxError: Unexpected token (
at Object.substitution (fhem-tablet-ui.js:176)
at update_value (widget_label.js:34)
at HTMLDivElement.<anonymous> (widget_label.js:149)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at Object.update (widget_label.js:143)
at Object.<anonymous> (fhem-tablet-ui.js:440)
at Function.each (jquery.min.js:2)
at Object.update (fhem-tablet-ui.js:437)
at checkReading (fhem-tablet-ui.js:1070)
Liegt, wie ich herausgefunden habe, an Zeile 175 der fhem-tablet-ui.js:
≤ v2.7.5 (funktioniert):
else if (subst.match(/.*\(\)/))
v2.7.6 (Problem s. o.):
else if (subst.match(/.*\(.*\)/))
Vielleicht kannst du damit ja was anfangen.
Zitat von: Sailor am 10 Oktober 2018, 14:13:29
Hast du noch was individuell nachgebessert?
data-on-color="blue"
Moin Vaddi
Zitat von: Vaddi am 10 Oktober 2018, 17:23:39
data-on-color="blue"
Ja siehste - von wegen "css". ;)
@setstate: Ist in der css-Datei "fhem-darkblue-ui.css" versehentlich ein Standard - Wert nicht definiert worden?
Gruss
Sailor
ich habe nach dem Update nach wie vor das Problem mit dem Homestatus.
Es werden statt der fa Symbole nur Rechtecke mit kryptischen Zahlen/Buchstaben angezeigt, wie auch z.B. schon Eisi bemerkt hat.
Kann mir jmd. nochmal auf die Spur helfen? Code ist unten angehängt, die Version ohne "invert" Zusatz hat das gleiche unschöne Ergebnis gezeigt.
<li class="" data-row="5" data-col="1" data-sizex="3" data-sizey="7">
<header class="">Anwesenheit</header>
<div class=""
data-type="homestatus"
data-device="du_homestatus"
data-get-on='["H","S","A","U"]'
data-alias='["Home","Schlaf","Abwesend","Urlaub"]'
data-icon='["fa-home invert","fa-bed invert","fa-car invert","fa-absent invert"]'>
</div>
</li>
VG,
Chris
Zitat von: Ingo298 am 03 Oktober 2018, 12:50:54
Hallo zusammen,
nachdem ich gestern wieder mal ein update durchgeführt habe, habe ich nun folgendes Problem.
Wenn ich das Widget Chart benutze wird das Aussehen des gesamten UI verändert (andere Schriftart, größe der Schrift)
Wo könnte das Problem liegen?
Das Problem besteht auch bei meine tablet_prod instans welche durch das Update nicht verändert wird
MfG Ingo
Hallo Ingo,
das Thema hatte ich auch, versuch mal aus der ftui_chart.css folgende Zeile rauszuwerfen:
@import "../../pgm2/svg_style.css";
Danach war bei mir alles ok.
Leider muss man diese Anpassung eben nach jedem Update wieder machen...
VG,
Chris
dann lege das in eine eigene von dir genutzte user.css an und schon brauchst es bei einem Update nicht mehr erneuern...!
Geht allerdings auch nicht immer zuverlässig, ich habe da ein Beispiel bei dem es nicht funktioniert z.B. der Hintergrund der Beschriftung eines Charts...
Zitat von: moonsorrox am 17 Oktober 2018, 12:47:40
dann lege das in eine eigene von dir genutzte user.css an und schon brauchst es bei einem Update nicht mehr erneuern...!
Geht allerdings auch nicht immer zuverlässig, ich habe da ein Beispiel bei dem es nicht funktioniert z.B. der Hintergrund der Beschriftung eines Charts...
der tipp klingt interessant, allerdings habe ich ihn nicht verstanden...die ftui_chart.css wird ja mit dem update immer überbügelt und enthält den störenden
Befehl (@import "../../pgm2/svg_style.css";) ja immer wieder drin. wie soll ich den über eine user.css datei rausbekommen?
bzgl. der fehlerhaften darstellungen nach dem update habe ich sogar noch probleme die über das mit homestatus hinausgehen.
sowohl die seitliche navileiste als auch einfache lampensymbole (type="switch") und push-buttons vom icon type fa sind zerschossen und zeigen nur noch undefinierte rechtecke.
ich habe keinen schimmer was da sein könnte. hat irgend jemand einen tipp?
Zitat von: MCh76 am 17 Oktober 2018, 12:19:33
ich habe nach dem Update nach wie vor das Problem mit dem Homestatus.
Es werden statt der fa Symbole nur Rechtecke mit kryptischen Zahlen/Buchstaben angezeigt, wie auch z.B. schon Eisi bemerkt hat.
Kann mir jmd. nochmal auf die Spur helfen? Code ist unten angehängt, die Version ohne "invert" Zusatz hat das gleiche unschöne Ergebnis gezeigt.
<li class="" data-row="5" data-col="1" data-sizex="3" data-sizey="7">
<header class="">Anwesenheit</header>
<div class=""
data-type="homestatus"
data-device="du_homestatus"
data-get-on='["H","S","A","U"]'
data-alias='["Home","Schlaf","Abwesend","Urlaub"]'
data-icon='["fa-home invert","fa-bed invert","fa-car invert","fa-absent invert"]'>
</div>
</li>
VG,
Chris
kann evtl. nochmal jemand nen tipp geben wie der homestatus gefixed werden kann? hab jetzt alles mögliche versucht und aktualisiert, aber die symbole werden nach wie vor nicht dargestellt...danke im Voraus!
Mit einem Update von FHEM heute alle Darstellungsprobleme behoben. Besten Dank
Hallo,
ich habe heute auch nach langer Zeit ein update von Fhem und ftui gemacht. (Shit, never change ....)
Habe jetzt auch Probleme mit der Anzeige von Symbol und Switch widgets.
Habe mal ein Bildschirmfoto und einen Teil des Codes vom Multimediateil eingefügt.
Vielleicht kann jemand helfen.
<li data-row="3" data-col="4" data-sizey="2" data-sizex="4">
<header>MULTIMEDIA</header>
<div class="sheet">
<div class="row-60">
<div class="cell">
<div class="sheet">
<div class="row">
<div class=cell>
<div data-type="switch" data-device="HUB" data-get="activity" data-set-off="activity PowerOff" data-get-on="Radio" data-set-on="activity Radio" data-get-off="!on"data-icon="fa-music"></div>
<div>Radio</div>
</div>
<div class="cell">
<div data-type="switch" data-device="HUB" data-get="activity" data-get-on="FERNSEHER" data-set-off="activity PowerOff" data-set-on="activity FERNSEHER" data-get-off="!on" data-icon="fa-film"></div>
<div>TV</div>
</div>
</div><div class="row">
<div class="cell">
<div data-type="switch" data-device="HUB" data-get="activity" data-get-on="Amazon" data-set-off="activity PowerOff" data-set-on="activity Amazon" data-get-off="!on" data-icon="fa-film"></div>
<div>Amazon</div>
</div>
<div class="cell-25x"> <div data-type="switch" data-device="HUB" data-get="activity" data-get-on="Player" data-set-off="activity PowerOff" data-set-on="activity Player" data-get-off="!on" data-icon="fa-music"></div><div>SB Player</div></div>
<div class="cell-50" data-type="select" data-device="HIFIAnlage" data-list="FAVSTR" data-set="favorites" data-get="favorites"></div> </div>
</div>
</div>
<div class="sheet">
<div class="row-40">
<div class="large top-space" data-type="volume" data-device='PIONEER' data-get='volume' data-set='volume'></div>
</div>
</div></div>
</div>
</li>
Ich glaube ich bin der fehlenden Icons auf der Spur-
Wenn ich unter http://<fhem-rechner>:8083/fhem/ftui/icons_table.html mir die Icons anschaue,
werden mir keine fa_.. Icons angezeigt.
Werden diese nicht mehr unterstützt?
ich habe jetzt auch mal das Update gemacht und irgendwie nimmt er den von mir definierten Grün-Ton aus der custom.css nicht mehr an:
.green {
color: #32a054 !important;
}
muss man da etwas ändern?
edit: jetzt haben sich noch zwei weitere Probleme ergeben die ich trotz intensiver Forumssuche nicht lösen konnte..
1. von meinen "Switch"en sind die Kreise Minimal größer geworden. Wenn ich in der Class die Größe runter setze sind sie aber zu klein
2. meine Slider haben den Wert bisher immer unten drunter stehen gehabt. Jetzt wird der Wert rechts vom Slider angezeigt
konnte das Thema mit dem Grünton beheben indem ich es direkt in der Tablet-css geändert habe. ABer die anderen beiden Punkte sind noch offen.
Gerade das mit der Value-Position neben dem Slider nervt sehr und bringt das ganze Erscheinungsbild durcheinander.
Hat da keiner eine Lösung für? Kann darüber auch echt nichts im Forum finden...
ich hab vor ner Weile das Update gemacht und danach hat es mir mein Flex Layout zerlegt.
Nach einigem hin und her scheint das Problem diese hbox zu sein:
<div class="hbox" style="height:12%" >
Chrome rendert die mit ca. 50% des viewport (auf dem Screenshot in gelb), Firefox macht es ein bisschen besser aber auch nicht mit 18%.
Im gelben Screenshot ist zu sehen, dass das "height: 100%" css Property des .hbox elements zwar durchgestrichen ist, aber erst, wenn ich es explizit deaktiviere wird die Höhe korrekt angezeigt. Grundsätzlich scheint aber Chrome die vbox/hbox elemente ganz anders zu interpretieren bzw. zu berechnen, als FF das tut.
Für Anregungen wäre ich dankbar.
Grüße
pj
Ich push mal mein Anliegen ein bisschen, für Anregungen wäre ich immer noch dankbar.
Chrome und Firefox rendern mein Layout komplett unterschiedlich, Firefox macht es korrekt.
Leider hilft mir das nichts, weil ich FF auf meinem Tablet, dass als Bedienschnittstelle an der Wand hängt nicht im Vollbild-Modus betreiben kann.
Für Vollbild-Modus an Wandtablets kann ich dir Fully empfehlen. Das hat zusätzlich viele sinnvolle Funktionen und kann auch kostenlos genutzt werde (wenn man Plus-Funktionen wie Remote Admin oder Motiondetection aktiviert, hat man im Bild ein kaum störendes Wasserzeichen).
Zitat von: StephanFHEM am 20 April 2019, 17:34:42
Für Vollbild-Modus an Wandtablets kann ich dir Fully empfehlen. Das hat zusätzlich viele sinnvolle Funktionen und kann auch kostenlos genutzt werde (wenn man Plus-Funktionen wie Remote Admin oder Motiondetection aktiviert, hat man im Bild ein kaum störendes Wasserzeichen).
Hab ich schon getestet, ist leider auch Chromium basiert, render meine Seite also genau wie Chrome
Gesendet von meinem HTC U11 mit Tapatalk
Ich habe bei mir keinen Unterschied zwischen Firefox und Chrome. Vielleicht kopierst du mal einen Auszug aus deinem Header/index.html
Zitat von: StephanFHEM am 20 April 2019, 18:41:01
Ich habe bei mir keinen Unterschied zwischen Firefox und Chrome. Vielleicht kopierst du mal einen Auszug aus deinem Header/index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />
<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">
<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->
<div class="hbox bg-orange items-top grow-0" style="height:12%">
<div class="card">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
</div>
<div class="hbox bg-green" >
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue" style="height:50%" >
<!-- Homestatus -->
<div class="card lift phone-width" style="height:98%">
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width" style="height:98%">
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>
</div>das dürfte alles Relevante sein.
Wie gesagt: was mich wundert ist, dass Firefox die erste hbox korrekt rendert, chrome deren Höhe aber ignoriert bzw. sie überschreibt.
pj
@pjakobs, gleiches Problem auch wenn das Inline-CSS korrekt (https://www.w3schools.com/html/html_css.asp) (Semikolon nach der height Angabe) gesetzt wird?
<div class="hbox bg-orange items-top grow-0" style="height:12%;">
Zitat von: yersinia am 23 April 2019, 15:36:50
@pjakobs, gleiches Problem auch wenn das Inline-CSS korrekt (https://www.w3schools.com/html/html_css.asp) (Semikolon nach der height Angabe) gesetzt wird?
<div class="hbox bg-orange items-top grow-0" style="height:12%;">
hmm... hab ich gerade mal getestet, leider keine Veränderung.
pj
Hab mir deinen Code gerade genauer angeschaut und vermute, neben den nicht abschließenden Inline CSS (fehlende Semikolon), ungenaue height-Angaben.
Die erste hbox hat eine height von 12%, die zweite (Zeile 79: <div class="hbox bg-green" >) hat keine height Angabe. MWn beziehen sich die Höhenangaben hier auf das umschließende <div> (Zeile 48).
In Zeile 82 gibt es eine height-Angabe (50%), die sich aber auf den div-Container in Zeile 80 bezieht. In diesen 50% (hbox!) kommt der Homestatus mit 98% (Zeile 84) und der Abfallkalender mit 98% (Zeile 94 Höhe in Bezug auf die 50% übereinander (!) - du überschreitest quasi die maximale Höhe von 100%.
Ich würde alle Höhen rausnehmen und neu anfangen und es sukzessive setzen. Bei Prozentangaben sollte die Gesamtsumme 100% nicht überschreiten.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />
<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">
<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->
<div class="hbox bg-orange items-top grow-0" style="height:12%;">
<div class="card">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
</div>
<div class="hbox bg-green" style="height:98%;"> <!-- HIER -->
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue" style="height:50%;" >
<!-- Homestatus -->
<div class="card lift phone-width" style="height:98%;"> <!-- HIER -->
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width" style="height:98%;"> <!-- HIER -->
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- FEHLTE / vbox -->
</div> <!-- FEHLTE / hbox -->
</div> <!-- FEHLTE / vbox -->
Weiterhin fehlten drei Abschließende </div> am Ende aber dies kommt wahrscheinlich vom kopieren.
hmmm...
ich hatte mal eine ganze Version ohne Höhenangaben.
Aber mal ne grundsätzliche Frage:
Bezieht sich die Prozentangabe auf die Gesamthöhe oder auf die Höhe des nächsthöheren Containers? Von letzterem bin ich ausgegangen. Die Idee war: 12% des Fensters der ersten HBOX, die restlichen 78% teile ich dann auf, daher die 98% darunter (eine VBOX die die gesamte verbliebene Höhe, also etwas unter 78% Prozent bekommt) und darin jeweils 50% für die eingebauten VBOXen.
css war mir immer suspekt ;-)
pj
Zitat von: pjakobs am 24 April 2019, 17:09:11Aber mal ne grundsätzliche Frage:
Bezieht sich die Prozentangabe auf die Gesamthöhe oder auf die Höhe des nächsthöheren Containers? Von letzterem bin ich ausgegangen. Die Idee war: 12% des Fensters der ersten HBOX, die restlichen 78% teile ich dann auf, daher die 98% darunter (eine VBOX die die gesamte verbliebene Höhe, also etwas unter 78% Prozent bekommt) und darin jeweils 50% für die eingebauten VBOXen
Deine Annahme ist korrekt: das
height bezieht sich immer auf das Elternelement (jedenfalls verstehe ich das hier so (https://www.w3schools.com/cssref/pr_dim_height.asp)). Wichtig ist aber auch diese Aussage:
ZitatThe height of an element does not include padding, borders, or margins!
Die erste
hbox hat 12% Höhe, dann kann der Rest nur noch maximal 88% haben, was hier falsch wäre:
<div class="hbox bg-green" style="height:98%;"> <!-- HIER -->Da müssten doch 88% stehen (100 - 12 = 88), möglicherweise reicht schon ein
height:auto; um den Restplatz zu konsumieren.
Darunterliegende div Container haben dann mit
<div class="hbox bg-blue" style="height:50%;" > 50% der Höhe des 88% Restes - hier beziehen sich die
height:50% auf die
height:88%; der umschließenden hbox (also des Elternelements) - dies entspricht dann 44% der Gesamtbildschirmhöhe.
Möglicherweise klappt es besser, alle
height-Angaben auf
auto zu setzen und dann sukzessive im Baum von oben die Höhen verändern.
puh, jetzt hab ich alles ordentlich durcheinander gewürfelt :o
hier mal die gesamte Seite "neu" - ich hab die hbox ganz oben rausgeworfen und die "card" darin hochgezogen. Jetzt hat die das gleiche Problem. Sigh.
Es sieht so aus, als ob Chrome die erste flexbox einfach nicht in der definierten Höhe anzeigen möchte - Firefox aber schon.
pj
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />
<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">
<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->
<!--<div class="hbox"-->
<div class="card bg-orange" style="height:auto;"">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
<!--</div>-->
<div class="hbox bg-green" >
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue">
<!-- Homestatus -->
<div class="card lift phone-width">
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width">
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>
</div>
<!--
<header>TV</header>
<div data-type="circlemenu" class="cell circlemeu">
<ul class="menu">
<li><div data-type="symbol" data-icon="fa-television"></div></li>
<li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32"></div></li>
<li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">osmc</div></li>
<li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">fire</div></li>
<li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">dvd</div></li>
</ul>
</div>
-->
<div class='hbox bg-red items-top'>
<!-- alarm state -->
<div class="card lift" style="width:140px">
<header>Alarmstatus</header>
<div class="vbox flex-start" style="width:120px" >
<div class="hbox flex-start">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="disarm"
data-get-off="!disarm">
</div>
<div>Disarm</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="confirm"
data-get-off="!confirm">
</div>
<div>Confirm</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armaway"
data-get-off="!armaway">
</div>
<div>Armaway</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armnight"
data-get-off="!armnight">
</div>
<div>armnight</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armnhome"
data-get-off="!armnhome">
</div>
<div>Armhome</div>
</div>
</div>
</div>
<!-- Schalter innen -->
<div class='card lift' >
<header>innen</header>
<div class='hbox'>
<div class='vbox'>
<!-- Kaffemaschine -->
<div class="card lift">
<header>Kaffemaschine</header>
<div data-type="switch"
data-device="SW_Kaffee"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
<!-- Lüfter Büro -->
<div class="card lift">
<header>Lüfter Büro</header>
<div data-type="switch"
data-device="SW_FAN"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class="card lift">
<!-- Lötstation -->
<header>Lötstation</header>
<div data-type="switch"
data-device="SW_Loetstation"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
<div class="card lift">
<!-- <div class="vbox"> -->
<!-- Gäste WLAN -->
<header>Gäste WLAN</header>
<div data-type="switch"
data-device="FritzBox"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-get="box_guestWlan"
data-set="guestWlan"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
<!-- <div class="level horizontal mini" data-device="FritzBox" data-get="box_guestWlanRemain" ></div>-->
<!-- </div> -->
</div>
</div>
</div>
</div>
<!-- Schalter außen -->
<div class="card lift" >
<header>außen</header>
<div class='hbox'>
<div class='vbox'>
<div class='card'>
<header>Carport 1</header>
<div data-type="switch"
data-device="ST_Carport_1"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<div class='card'>
<header>Carport 2</header>
<div data-type="switch"
data-device="ST_Carport_2"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class='card'>
<header>Carport 3</header>
<div data-type="switch"
data-device="ST_Carport_3"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<div class='card'>
<header>Garten</header>
<div data-type="switch"
data-device="ST_Garten"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class='card'>
<header>Lampions</header>
<div data-type="switch"
data-device="SW_Lichterkette"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<!-- Markise -->
<div class="card">
<header>Markise</header>
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol" data-device="Markise_Te" data-icon="oa-fts_sunblind" data-get="state"></div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="10" data-set-on="0">0</div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="10" data-set-on="10">10</div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="25" data-set-on="25">25</div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="50" data-set-on="50">50</div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="75" data-set-on="75">75</div></li>
<li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="100" data-set-on="100">100</div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AV Stuff -->
<div class="card lift phone-width" >
<header>Stereoanlage</header>
<div class="vbox">
<!-- on / off für Geräte -->
<div class="hbox" >
<div class="card" >
<header>Verstärker</header>
<div class="vbox">
<div class="hbox">
<div data-type="switch"
data-device="SW_Amp"
data-get-on="ON"
data-get-off="!ON"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
<div data-type="push" data-icon="fa-volume-off" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,281,12"></div>
</div>
<div class="hbox">
<div data-type="push" data-icon="fa-volume-down" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,c81,12"></div>
<div data-type="push" data-icon="fa-volume-up" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,481,12"></div>
</div>
<div data-type="select" data-device="Verstaerker" data-items='["CD","OSMC","TV"]' class="cell wide"></div>
</div>
</div>
<div class="vbox" >
<div class="card">
<header>CD Player</header>
<div data-type="switch"
data-device="SW_CD"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050"/>
</div>
<div class="card">
<header>DVD Player</header>
<div data-type="switch"
data-device="SW_DVD"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050"/>
</div>
</div>
</div>
<!-- kodi -->
<div class="card" >
<header>
<div class="inline" data-type="label" data-device="OSMC" data-get="label"></div>
(
<div class="inline" data-type="label" data-device="OSMC" data-get="playStatus"></div>
<!--<div class="inline" "level" data-device="OSMC" data-get="utime" data-max="utotaltime"></div>-->
<div class="inline" data-type="label" data-device="OSMC" data-get="time"></div>
)
</header>
<div class="hbox">
<div data-type="image" data-device="OSMC" data-get="http_thumbnail" style="width:200px;display:block;margin-left:auto;margin-right:auto"></div>
<!-- minimal kodi kontrols -->
<div class="vbox">
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="playing" data-get-off="paused|stopped" data-set-on="play all" data-icon="fa-play"></div>
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="paused" data-get-off="playing|stopped" data-set-on="pause all" data-icon="fa-pause"></div>
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="stopped" data-get-off="playing|paused" data-set-on="stop all" data-icon="fa-stop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
<!--
<header>Ambilight</header>
<div data-type="switch"
data-device="ambilight"
data-get="last_type"
data-get-on="((?!off))"
data-get-off="off"
data-set-on="effect Cinema_brighten_lights 30 750"
data-set-off="off"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
-->
<!--
<header>Terasse - Steckdose</header>
<div data-type="switch"
data-device="SW_Aussen"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-color="#505050">
</div>
-->
<!--
<header>Terasse - Webcam</header>
<div data-type="switch"
data-device="SW_Webcam"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-color="#505050">
</div>
-->
<!--
<header>Terasse - Licht</header>
<div data-type="switch"
data-device="LED_Te"
data-get="state"
data-get-on="!rgb 000000"
data-get-off="rgb 000000"
data-set-on="hsv 0,0,100"
data-set-off="hsv 0,0,0"
data-color="#505050">
</div>
-->
<!--
<li data-row="4" data-col="2" data-sizex="2" data-sizey="2">
<header>LIGHTS</header>
<div class="container round bg-gray">
<div class="hbox narrow inline row-40">
<div data-type="switch" data-device='LED_Sc' data-on-background-color="LED_Sc:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
<div class="col-60 center-align" >Schreibtisch</div>
<div data-type="symbol" id="ST_Sc1" data-device='LED_Sc' data-get="" data-off-color="LED_Sc:rgb" data-off-background-color="LED_Sc:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>
<div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Sc1" class="col-1-6">
<div class="dialog">
<header>RBG COLOR</header>
<div data-type="colorwheel" data-device='LED_Sc' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
</div>
</div>
</div>
<div class="hbox narrow inline row-40">
<div data-type="switch" data-device='LED_Bu' data-on-background-color="LED_Bu:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
<div class="col-60 center-align">Büro</div>
<div data-type="symbol" id="ST_Bu" data-device='LED_Bu' data-get="" data-off-color="LED_Bu:rgb" data-off-background-color="LED_Bu:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>
<div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Bu">
<div class="dialog">
<header>RBG COLOR</header>
<div data-type="colorwheel" data-device='LED_Bu' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
</div>
</div>
</div>
</div>
<div class="container round bg-gray">
<div class="hbox narrow inline row-40">
<div data-type="switch" data-device='LED_Wo' data-on-background-color="LED_Wo:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small"> </div>
<div class="col-60 center-align">Wohnzimmer Couch</div>
<div data-type="symbol" id="ST_Wo" data-device='LED_Wo' data-get="" data-off-color="LED_Wo:rgb" data-off-background-color="LED_Wo:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small"> </div>
<div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Wo" >
<div class="dialog">
<header>RBG COLOR</header>
<div data-type="colorwheel" data-device='LED_Wo' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
</div>
</div>
</div>
</div>
<div class="row container round bg-gray">
<div class="hbox narrow inline row-40">
<div data-type="switch" data-device='LED_Tr' data-on-background-color="LED_Tr:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align">
</div>
<div class="col-60 center-align">
Treppe
</div>
<div data-type="symbol" id="ST_Tr" data-device='LED_Tr' data-get="" data-off-color="LED_Tr:rgb" data-off-background-color="LED_Tr:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align">
</div>
<div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Tr">
<div class="dialog">
<header>
RBG COLOR
</header>
<div data-type="colorwheel" data-device='LED_Tr' data-get="rgb" data-set="rgb" class="big roundIndicator">
</div>
</div>
</div>
</div>
</div>
<div class="row container round bg-gray">
<div class="hbox narrow inline row-30">
<div data-type="switch" data-device='LED_Ku' data-on-background-color="LED_Ku:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
<div class="col-60 center-align">Küche</div>
<div data-type="symbol" id="ST_Ku" data-device='LED_Ku' data-get="" data-off-color="LED_Ku:rgb" data-off-background-color="LED_Ku:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>
<div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Ku">
<div class="dialog">
<header>RBG COLOR</header>
<div data-type="colorwheel" data-device='LED_Ku' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
</div>
</div>
</div>
</div>
</li>
-->
Versuche es doch erstmal so:
<div class="card bg-orange" style="height:12%;">
anstelle von
<div class="card bg-orange" style="height:auto;"">
(doppeltes Hochkommata am Ende ist sowieso falsch)
Dann hast du die Höhe dieses einen Containers (und der Kind-Elemente) definiert.
Dann bei der nächsten hbox die height:auto hinzufügen damit du die Resthöhe (durch den Browser berechnet) ausnutzt:
<div class="hbox bg-green" style="height:auto;">
doppelte Anführungszeichen. Wie oft mich Editoren, die automatisch öffnende und schließende Anführungszeichen setzen schon genarrt haben, ich kann es nicht mehr zählen.
Ich hab jetzt mal folgendes versucht:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />
<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content5">
<div class="vbox items-top">
<!-- outer vbox -->
<div class="hbox items-top bg-orange" style="height:12%;">
<!-- slim top box -->
</div>
<div class="hbox items-top" style="height:auto;">
<!-- large rest -->
<div class="vbox items-top" style="widht:60%;">
<!-- left side -->
<div class="card bg-blue" style="height:50%;">
<!-- left side top -->
</div>
<div class="card bg-red" style="height:auto;">
<!-- left side bottom -->
</div>
</div>
<div class="card bg-green" style="height:auto;">
<!-- right side -->
</div>
</div>
</div>
</main>
</body>
</html>
was gut ist: das wird von Chrome und FF gleich gerendert.
was schlecht ist: es entspricht in beiden Fällen nicht dem, was ich erwartet hätte.
so wirklich falsch kann doch da jetzt nix mehr sein, oder?
hier mal mit den berechneten Werten.
Seltsam, dass die 12% zwar angezeigt werden, aber tatsächlich werden 50% des Parentcontainers berechnet.
Ja, CSS ist manchmal grausam. -.-
Für den FF hängt die Berechnung in Meinem Verständnis von der definierten Höhe des Elternelements ab (https://developer.mozilla.org/de/docs/Web/CSS/height):
ZitatProzentwerte
Der Prozentwert wird unter Berücksichtigung der Höhe des die generierte Box beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde (d. h. sie hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, ist der berechnete Wert auto. Eine prozentuale Höhe beim Wurzelelement ist relativ zum ursprünglichen beinhaltenden Block.
Ich habe das mal versucht nachzustellen und der umschließenden vbox fehlt mMn eine vernünftige Höhenangabe. Hier mein Code und das Ergebnis ist angehängt (FF 60.5.2esr).
<!DOCTYPE html>
<html>
<head>
<title>Home-Tablet-UI</title>
<style>
</style>
</head>
<body>
<div class="" style="height:100vh;">
<!-- outer vbox -->
<div class="" style="height:12%;background-color:#c18181;">
<!-- slim top box -->
</div>
<div class="" style="height: 88%; background-color: red;">
<!-- large rest -->
<div class="" style="width:60%;height:88%;background-color:grey;">
<!-- left side -->
<div class="" style="height:50%;background-color:orange;">
<!-- left side top -->
</div>
<div class="" style="height:50%;background-color:green;">
<!-- left side bottom -->
</div>
</div>
<div class="" style="height:12%; background-color:blue;">
<!-- right side -->
</div>
</div>
</div>
</body>
</html>Demnach würde ich mal in der umschließenden vbox die
height: 100vh; hinzufügen und dann alle Kind-, Enkel-, Urenkel- usw Elemente explizit ausprägen:
<div class="vbox items-top" style="height: 100vh;">(src (https://stackoverflow.com/questions/7357818/how-can-an-html-element-fill-out-100-of-the-remaining-screen-height-using-css))