Ich wundere mich immer das die Anzeige im Firefox alles richtig anzeigt und auf meinem 14" Tablet schneidet er immer etwas ab.
Woran kann das liegen, im Screenshot zu sehen mittlere Anzeige fehlt rechts alles und die Schrift scheint mir auch etwas zu groß zu sein.
Kann es sein das Android eine Tabelle anders anzeigt als z.B. eine vbox ? Obwohl ich der Meinung bin im FF wird die Schrift auch nicht so groß angezeigt in der vbox ich hänge mal die komplette Seite ran mit Screenshot
Hier mal der Code der Seite:
<!DOCTYPE html>
<html>
<head>FHEM-Tablet-UI</head>
<body>
<div class="page" id="flur_content2"><!-- Wetterseite -->
<div class="gridster">
<ul>
<!-- WetterBox Wetterdienst Windy mit PopUp oben groß (Icon groß, Temperatur) -->
<li data-row="4" data-col="1" data-sizex="6" data-sizey="4">
<div class="top-narrow" data-type="popup" id="windy" data-height="690px" data-mode="fade" data-width="1200px" data-return-time="300" data-draggable="false">
<div class="vbox" style="margin-top:6px;">
<div class="hbox">
<div data-type="weather" data-device="MeinWetter" data-get="condition" data-device-type="YahooCode" data-imageset="kleinklima" style="width:30%;"></div>
<div data-type="label" data-device="Proplanta" data-get="temperature" data-unit="°" class="grande unit-top" style="margin-left:25px;"></div>
</div>
</div>
<div class="dialog">
<header style="background-color:#202020;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:white;">WOLKEN</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>
<iframe style="margin-top:10px; overflow:hidden; overflow-x:hidden; overflow-Y:hidden;" width="1180" height="575" seamless="seamless" frameborder="0" scrolling="no" src="https://www.windy.com/52.504/9.631?clouds,51.735,9.631,7,m:e6Fagre"></iframe>
</div>
</div>
</li>
<!-- WetterBox Wetterdienst (condition Icon kleinklima) -->
<li data-row="8" data-col="1" data-sizex="6" data-sizey="1">
<div class="vbox">
<div class="hbox">
<div data-type="label" data-device="MeinWetter" data-get="condition" class="top-narrow" style="font-size:250%;"></div>
</div>
</div>
</li>
<!-- WetterBox Wetterdienst kleine Schrift (Gefühlte Temp., Wind, Sichtweite, Luftdruck, Luftfeuchte) -->
<li data-row="9" data-col="1" data-sizex="6" data-sizey="2">
<div class="vbox">
<div class="hbox">
<div data-type="label" data-device="MeinWetter" data-pre-text="Gefühlte Temperatur: " data-get="wind_chill" data-unit="°" style="font-size:110%;"></div>
<div class="left-space" style="font-size:110%;">Wind: </div>
<!--div style="margin-left:0px;" class="compressed grow-0" data-type="wind_direction" data-device="MeinWetter" data-direction="wind_direction" data-speed="wind_speed" data-calm="-"
data-tickstep="45" data-angleoffset="0" data-size="40"></div-->
<div data-type="weather" data-device="MeinWetter" data-get="wind_direction" data-device-type="WindDirection" data-imageset="weathericons" class="tiny"></div>
<div data-type="label" data-pre-text=" " data-device="MeinWetter" data-get="wind_speed" data-post-text=" km/h" style="font-size:110%;"></div>
<div data-type="label" data-pre-text="Fernsicht: " data-device="MeinWetter" data-get="visibility" data-post-text=" km" class="left-space" style="font-size:110%;"></div>
</div>
<div class="hbox top-narrow-2x">
<div data-type="label" data-pre-text="Luftdruck: " data-device="MeinWetter" data-get="pressure" data-post-text=" mbar" style="font-size:110%;"></div>
<div data-type="label" data-pre-text=" Luftfeuchtigkeit: " data-device="MeinWetter" data-get="humidity" data-post-text=" %" style="font-size:110%;"></div>
<div data-type="label" data-pre-text=" Taupunkt: " data-device="Proplanta" data-get="dewPoint" data-unit="°" data-fix="0" class="unit-top" style="font-size:110%;"></div>
</div>
</div>
</li>
<!-- WetterBox Wetterdienst (Heute und nächste 3 Tage) -->
<li data-row="11" data-col="1" data-sizex="6" data-sizey="9">
<div class="vbox" style="margin-top:10px !important;">
<div class="hbox" style="margin-bottom:15px !important;">
<div class="vbox">
<div class="hbox border">
<div class="large">Heute, </div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc0_date" data-substitution="toDate().ddmm()"></div>
</div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc0_weatherDay"></div>
<br>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" style="width:25%;"></div>
<div class="hbox" style="margin-top:10px !important;">
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc0_tempMin" data-unit=" °C"></div>
<div class="thin" style="font-size:250%;"> | </div>
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc0_tempMax" data-unit=" °C"></div>
</div>
</div>
<div class="vbox">
<div class="hbox">
<div class="large">Morgen, </div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc1_date" data-substitution="toDate().ddmm()"></div>
</div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc1_weatherDay"></div>
<br>
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" style="width:25%;"></div>
<div class="hbox" style="margin-top:10px !important;">
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc1_tempMin" data-unit=" °C"></div>
<div class="thin" style="font-size:250%;"> | </div>
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc1_tempMax" data-unit=" °C"></div>
</div>
</div>
</div>
<div class="hbox" style="margin-top:20px !important; margin-bottom:40px !important;">
<div class="vbox">
<div class="hbox">
<div class="large" data-type="label" data-device="Proplanta" data-get="fc2_date" data-substitution="toDate().eeee()" data-post-text=", "></div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc2_date" data-substitution="toDate().ddmm()"></div>
</div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc2_weatherDay"></div>
<br>
<div data-type="weather" data-device="Proplanta" data-get="fc2_weatherDay" data-imageset="kleinklima" style="width:25%;"></div>
<div class="hbox" style="margin-top:10px !important;">
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc2_tempMin" data-unit=" °C"></div>
<div class="thin" style="font-size:250%;"> | </div>
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc2_tempMax" data-unit=" °C"></div>
</div>
</div>
<div class="vbox">
<div class="hbox">
<div class="large" data-type="label" data-device="Proplanta" data-get="fc3_date" data-substitution="toDate().eeee()" data-post-text=", "></div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc3_date" data-substitution="toDate().ddmm()"></div>
</div>
<div class="large" data-type="label" data-device="Proplanta" data-get="fc3_weatherDay"></div>
<br>
<div data-type="weather" data-device="Proplanta" data-get="fc3_weatherDay" data-imageset="kleinklima" style="width:25%;"></div>
<div class="hbox" style="margin-top:10px !important;">
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc3_tempMin" data-unit=" °C"></div>
<div class="thin" style="font-size:250%;"> | </div>
<div style="font-size:200%;" data-type="label" data-device="Proplanta" data-get="fc3_tempMax" data-unit=" °C"></div>
</div>
</div>
</div>
</div>
</li>
<!-- WetterBox Ort -->
<li class="hbox" data-row="4" data-col="7" data-sizex="5" data-sizey="1">
<div style="margin-top:15px !important; font-size:200%;" data-type="label" data-device="MeinWetter" data-pre-text="TEMPERATUR in " data-get="city"></div>
</li>
<!-- WetterBox eigene Temperaturen -->
<li data-row="5" data-col="7" data-sizex="5" data-sizey="12">
<table style="font-size:140%; margin-top:15px; margin-left:25px; width:90%; height:95%; line-height:0.75em; align:center;">
<tr>
<td>
<div style="text-align:left; font-size:140%">Eingang Norden</div>
</td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="Temperatur_Norden" data-get="temperature" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit="%B0C%0A"></div>
</td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="Temperatur_Norden" data-get="humidity" data-limits="[0,40,60]" data-colors='["#9999ff","#aa6900","#ff6900"]' data-unit=" %"></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%">Terrasse Süden</div>
</td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="Temperatur_Terrasse" data-get="temperature" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit="%B0C%0A"></div>
</td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="Temperatur_Terrasse" data-get="humidity" data-limits="[0,40,60]" data-colors='["#9999ff","#aa6900","#ff6900"]' data-unit=" %"></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%">Luftdruck</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="Temperatur_Terrasse" data-get="pressure" data-unit=" hPa" data-limits="[0,950,1000]" data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%">Tendenz</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:140%" data-type="label" data-device="MeinWetter" data-get="pressure_trend_txt" data-limits='["steigend","gleichbleibend","fallend"]' data-colors='["#4169e1","#00FA9A","crimson"]' data-fix="1"></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%" data-type="label"><big>↑</big> Sonnenaufgang</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:160%; color:#00FA9A" data-type="label" data-device="myTwilight" data-get="sr_civil"></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%" data-type="label"><big>↓</big> Sonnenuntergang</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:160%; color:#2E64FE" data-type="label" data-device="myTwilight" data-get="ss_civil"></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%" data-type="label">UV-Index</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:160%; margin-right:0px" data-type="label" data-device="Proplanta" data-get="fc0_uv" data-limits="[0,2,10]" data-colors='["grey","orange","red"]'></div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; font-size:140%">Helligkeit</div>
</td>
<td></td>
<td>
<div style="text-align:right; font-size:160%;" data-type="label" data-device="Temperatur_Terrasse" data-get="luminosity" data-unit=" Lux" data-limits='[0,20,25]' data-colors='["crimson","cornflowerblue","lightgreen"]' data-fix="1"></div>
</td>
</tr>
</table>
</li>
<!-- WetterBox Temperaturen Windrichtung und Frost -->
<li class="" data-row="14" data-col="7" data-sizex="5" data-sizey="4">
<table style="font-size:140%; margin-top:-20px; margin-left:25px; width:90%; height:95%; line-height:0.75em; align:center;">
<tr>
<td>
<div style="text-align:left; font-size:140%">Windrichtung</div>
</td>
<td>
<div class="" data-type="wind_direction" data-device="MeinWetter" data-direction="wind_direction" data-speed="wind_speed" data-calm="-" data-tickstep="45" data-angleoffset="0" data-size="50"></div>
</td>
<td>
<div style="text-align:right; font-size:160%" data-type="label" data-device="MeinWetter" data-get="wind_speed" data-post-text=" km/h"></div>
</td>
</tr>
<tr>
<td>
<div class="top-narrow" style="text-align:left; font-size:140%">Frost</div>
</td>
<td>
<div class="top-narrow-2x" data-type="symbol" data-device="Proplanta" data-get="fc0_frost" data-get-off='0' data-get-on='1' data-off-color='transparent' data-on-color='#9999ff' data-icon="fs-frost" data-size="100"></div>
</td>
<td>
<div style="font-size:160%"> </div>
</td>
</tr>
</table>
</li>
<!-- Frei -->
<li class="border" data-row="4" data-col="12" data-sizex="5" data-sizey="2">
</li>
<li class="border" data-row="6" data-col="12" data-sizex="5" data-sizey="14">
</li>
</ul>
</div>
</div>
</body>
</html>
hier mal die Ansicht vom Firefox, da ist alles bestens
Mal so am Rande: Kommt die Luftdrucktendenz aus Proplanta? Nach einiger Zeit der Beobachtung kam ich zu der Einschätzung, dass diese dort stets und ständig auf "gleichbleibend" steht.
Nein, kommt von Yahoo...
Aber trotzdem hast du Recht, denn auch bei Yahoo ist diese ewig und immer auf gleichbleibend ;)
@setstate
ich brauche mal dein Hilfe, weil ich mir hier sonst den Wolf formatiere und gar nicht weiter komme..!!
Ich habe mich mal nach der Vorlage aus dem Wiki "FTUI Layout FLEX orientiert.
Ich nutze diese Vorlage
Zitat"Positionierung von Widgets
Es können auch einzelne oder mehrere Widgets mit dem Flex-Layout positioniert werden. Hier zu sehen an den Symbol-Widgets in Kachel 5 und 9."
Ich habe sie original erstellt und habe die Boxen 02, 03, 04 weggenommen und in Box 01 meine Einträge gemacht.
Was ich gar nicht verstehe...
1. warum ist meine Box 01 ( auch mit Box 02, 03, 04) so breit siehe Screenshot
2. die Inhalte der Box 01 sehe ich auf dem Firefox, aber in Android sehe ich gar nichts, da ist die Box leer und blau
3. der Screenshot ist aus dem Firefox hier habe ich mal den Hintergrund in Blau dargestellt aber warum sind meine "div's" schwarz unterlegt und warum zeigt mir Android diese gar nicht an, heißt ich sehe nichts keine Status Anzeigen der Geräte
Anbei der Screenshot und der Code von der Flex Box:
<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="page" id="flur_content3">
<div class="gridster">
<!--ul-->
<li data-row="4" data-col="1" data-sizex="16" data-sizey="16" style="background-color:#3d445c">
<div class="hbox">
<div class="vbox">
<div class="card"><!--header>Box 01</header--><!--div data-type="symbol">
</div-->
<!-- Status der Geräte -->
<div class="sheet bg-ligthblue" style="margin-top:10px; margin-left:10px; width:97%; height:95%; line-height:1.75em; align:center; background-color:#transparent">
<!-- ==== Türkontakt - Terrasse ==== -->
<div class="hbox">
<div class="vbox">
<div style="text-align:left; margin-top:0px; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Terrassen Tür","closed","Terrassen Tür"]'
data-classes='["white","white"]'
data-limits='[open,closed]'>
</div>
</div>
<div class="hbox">
<div style="margin-top:0px; text-align:right; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["crimson","lightgreen"]'
data-limits='[open,closed]'>
</div>
</div>
</div>
<!-- ========== Garagentor ========== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div style="font-size:150%" data-type="label">Garagen Tor</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="closed"
data-device="Garagentorsensor"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["lightgreen","crimson"]'
data-limits='[open,closed]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Wohnzimmer links ==== -->
<div class="hbox">
<div class="card grow-2 ">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Links</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="WZ_Rollladen_O"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Wohnzimmer rechts ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Rechts</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZ"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - WZ - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Terrasse</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZT"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Schlafzimmer</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-device="RollladenSZ"
data-get="level"
data-map-get='{"0":"Geschlossen","25":"Beschattung 25%","50":"Beschattung 50%","75":"Home 75%","100":"Oben - Offen"}'
data-limits='[0,25,50,75,100]'
data-colors='["crimson","#00bfff","darkorange","royalblue","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg vorn & Schuppen</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg hinten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_02"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Beleuchtung Garten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="AU_Garten"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Licht Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Terrasse</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtTerrasse"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== LED TV - Lampe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED TV - Lampe</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WZ_Lampe_TV"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["white","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== LED Schrank und Vitrine ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED Schrank & Vitrine</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="WZ_Schrank"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["white","crimson"]'
data-limits='[ON,OFF]'>
</div>
</div>
</div>
<!-- ==== 3x LED Eingang ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">3x LED Eingang</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="AussenLampe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht - OG ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung OG Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="OG_Licht_Buero"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Tablet Flur Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Flur Oben</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_FlurOben"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Tablet Küche Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Küche</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_Kueche"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Schlafzimmer Uhr</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ====== Türklingel ====== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Türklingel</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Klingel"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Gardena Pumpe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Gardena Pumpe</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="GardenaPumpe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht Garage ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garage</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtGarage"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Schlafzimmer</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtSZ"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Netzwerkdrucker Büro ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_1" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Netzwerkdrucker Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="BU_Sonoff_1"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Proxmox Server ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_2" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Proxmox Server</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="BU_Sonoff_2"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Licht Weihnachten Busch ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Licht Weihnachten Busch</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtEG"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
</div>
</div>
<!--div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div-->
</div>
<div class="vbox bg-lightgray">
<div class="hbox">
<div class="card">
<header>Box 05</header>
<div class="vbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-mint">
<div class="card grow-2">
<header>Box 09</header>
<div class="hbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card grow-0"><header>Box 10</header><div data-type="symbol"></div></div>
<div class="card grow-0"><header>Box 11</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-red">
<div class="card grow-1"><header>Box 12</header><div data-type="symbol"></div></div>
<div class="card grow-1"><header>Box 13</header><div data-type="symbol"></div></div>
</div>
</div>
<div class="vbox grow-0 bg-orange">
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
</div>
</div>
</li>
<!--/ul-->
</div>
</div>
</body>
</html>
Keine Ahnung. Man könnte mit Chrome probieren, was der anders macht und die Tablet-Auflösung in den Entwicklertools simulieren.
Ja, das ist zu viel Code (und zu unübersichtlich formatiert), als dass man ihn beim Durchsehen "debuggen" könnte.
Wenn ich so ein Problem habe, kommentiere ich zuerst mal alle Inhalte (Widgets, etc.) aus und arbeite mich strategisch Schicht für Schicht durch. Zuerst schaue ich, dass die "großen Hintergrundcontainer" passen. Dann die weiteren Unterteilungen. Und am Schluss kümmere ich mich um das richtige Positionieren der Inhalte.
Das alles immer mit geöffneten Entwicklungstools, wie setstate auch schon geschrieben hat. An die kommst du z.B. in Firefox mit F12. Da hast du den "Inspector" mit dem du HTML-Tags genau betrachten kannst. Gewisse HTML-/CSS-Kenntnisse vorausgesetzt.
In Firefox hast du mit STRG+SHIFT+M die Möglichkeit, in einen Mobilansicht umzuschalten, in der du dann die jeweilige Bildschirmgröße festlegen kannst.
Die Container temporär mit einer Hintergrundfarbe hervorheben, ist aber ein guter Ansatz. class="bg-green"
So mache ich das auch oft. Man kann auch direkt im DOM Inspektor einzelne Knoten löschen und mit Strg+z wieder herholen, ohne Code aus zukommentieren.
also ich mache das oft so mit Backgroundfarbe und auch Rahmen damit ich weiß welcher Container was ist und so erkenne ich eigentlich gut wohin was muss...
Also ich mache jetzt mal folgendes, ich nutze den Code aus dem Wiki "Kombination von hbox und vbox" denn der war meine Grundkonfiguration.
Dann gebe ich mal eine einzige Zeile von meinem Template in die Box 01 rein und melde mich wieder mit Screenshots falls es das gleiche Ergebnis ist wie oben.
Wobei mich erst einmal die Breite der Boxen wenig interessiert (das bekomme ich auch mit Prozentangaben hin), sondern meine beiden Punkte 2. und 3.
Zitat2. die Inhalte der Box 01 sehe ich auf dem Firefox, aber in Android sehe ich gar nichts, da ist die Box leer und blau
3. der Screenshot ist aus dem Firefox hier habe ich mal den Hintergrund in Blau dargestellt aber warum sind meine "div's" schwarz unterlegt und warum zeigt mir Android diese gar nicht an, heißt ich sehe nichts keine Status Anzeigen der Geräte.
bis gleich ;)
Folgende Erkenntnis, FF und Chrome sehen vollkommen gleich aus und auf dem Android sieht es genauso aus
1. Screenshot FF 59 und auch Google Chrome (*.png)
2. Screenshot Android (*.jpg)
Es ist also die linke blaue Spalte mit den Boxen 01 bis 04 auf allen Geräten sehr breit. Der Code ist 1zu 1 aus dem Wiki übernommen es ist nur die template ID und das Gridster Tag dazu gekommen weil sonst gar nichts sehe ;)
Hier die Codezeilen:
<div class="page" id="flur_content3">
<div class="gridster">
<!-- ANFANG - Code aus dem Wiki -->
<div class="hbox bg-red">
<div class="vbox bg-ligthblue">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div>
</div>
<div class="vbox bg-lightgray">
<div class="hbox">
<div class="card">
<header>Box 05</header>
<div class="vbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-mint">
<div class="card grow-2">
<header>Box 09</header>
<div class="hbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card grow-0"><header>Box 10</header><div data-type="symbol"></div></div>
<div class="card grow-0"><header>Box 11</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-red">
<div class="card grow-1"><header>Box 12</header><div data-type="symbol"></div></div>
<div class="card grow-1"><header>Box 13</header><div data-type="symbol"></div></div>
</div>
</div>
<div class="vbox grow-0 bg-orange">
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
</div>
</div>
<!-- ENDE - Code aus dem Wiki -->
</div>
</div>
Nun werde ich das gleiche machen mit einer einzigen Codezeile von meinem "div Container" und den setze ich in die Box 01
Hier der Screenshot es bleibt alles beim alten, soll heißen die Boxen verändern ihre Größen nicht
Meine Codezeilen verändern das Aussehen auch nicht, also habe ich eigentlich gar nichts falsch gemacht.
Warum nun die linken blau unterlegten Boxen so groß sind... keine Ahnung, bekomme ich aber evtl. hin über die <li></li> Angaben.
hier der Code nur verändert in der Box01:
<div class="page" id="flur_content3">
<div class="gridster">
<li data-row="4" data-col="1" data-sizex="16" data-sizey="16">
<!-- ANFANG - Code aus dem Wiki -->
<div class="hbox bg-red">
<div class="vbox bg-ligthblue">
<div class="card"><header>Box 01</header>
<div class="vbox bg-ligthblue">
<!-- ANFANG - mein Code -->
<!-- ==== Rollladen - Wohnzimmer links ==== -->
<div class="hbox">
<div class="card grow-2 ">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Links</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="WZ_Rollladen_O"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ====== Türklingel ====== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Türklingel</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Klingel"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ENDE - mein Code -->
</div>
</div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div>
</div>
<div class="vbox bg-lightgray">
<div class="hbox">
<div class="card">
<header>Box 05</header>
<div class="vbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-mint">
<div class="card grow-2">
<header>Box 09</header>
<div class="hbox">
<div data-type="symbol"></div>
<div data-type="symbol"></div>
</div>
</div>
<div class="card grow-0"><header>Box 10</header><div data-type="symbol"></div></div>
<div class="card grow-0"><header>Box 11</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-red">
<div class="card grow-1"><header>Box 12</header><div data-type="symbol"></div></div>
<div class="card grow-1"><header>Box 13</header><div data-type="symbol"></div></div>
</div>
</div>
<div class="vbox grow-0 bg-orange">
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
</div>
</div>
<!-- ENDE - Code aus dem Wiki -->
</li>
</div>
</div> Was die schwarzen Streifen betrifft die bei mir unter jeder angezeigten Zeile meiner Geräte gezeigt werden, dazu folgendes...
Die werden durch die <div> Container dargestellt, diese muß ich also in der css Datei ändern damit ich transparente <div> Container erhalte.
Transparent deshalb weil ich die verschiedenen hboxen oder vboxen evtl. mit einem Hintergrundbild anzeigen möchte.
Mit einer Farbe wäre das kein Problem da bräuchte ich nur das entsprechende <div> mit der Farbe versehen da geht das, nur eben bei einem Bild nicht.
An einer anderen Stelle in meinem Tablet UI habe ich eine Tabelle eingefügt, diese zeigt das Hintergrundbild natürlich an und die Schrift darüber, da funktioniert das...!
Der Nachteil einer Farbe wiederum ist alle <div> bekommen dann diese Farbe, also wäre wieder ein transparentes <div> von Vorteil wo dann eben der Background für alles zu sehen ist und der kann ja Schwarz sein.
Nun weiß ich nur noch nicht wie ich das transparent bekomme, denn so funktioniert es nicht in der css Datei:
.card div {
background: #transparent;
}
.hbox div {
background: #transparent;
}
.vbox div {
background: #transparent;
}hatte auch "background-color: #transparent;" probiert geht auch nicht...!
Mir wäre es auch lieber immer das entsprechende <div> mit style="transparent" oder auch einer class="transparent" zu formatieren, dann würde der Rest so bleiben...!
Habe dazu schon im Internet gesucht da wird so etwas oft mit "opacity" gemacht, aber das kenne ich zu wenig, habe nur von gehört
Es ist leider so verwirrend, was du da schreibst.
Aber, Flex-Boxen teilen sich immer den verfügbaren Platz untereinander auf. Solange du das nicht irgendwie reglementierst (grow-x bzw. flex-grow). Lies mal: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Die "Farbe" heißt nur "transparent": background: transparent;
Opacity ist etwas anderes als Transparenz. Bei dem einen sieht man den Hintergrund durch, beim anderen nicht.
Transparenz erreicht man mit
color: rgba(123,123,123,0.3);
Der letzte Wert ist alpha 0.0-1.0 für Transparent.
Es gibt auch Browser, die können das auch gleich in der Hex Schreibweise.
color: #dd881133
Also 8 Stellen, 2 hinten dran für den Alphawert.
@setstate
ja das kenne ich (nur vergessen) :-\ ich werde es mal in einer Box probieren
OK werde ich mal schauen... was die breite der Boxen betrifft...! ;)
@drhirn
ich glaube ich bin etwas geschädigt schon, du hast natürlich Recht, aber... was ich dachte
im <div> Container direkt und das geht so nicht es muss in der css Datei gemacht werden ;)
OK hätte ich vllt dazu schreiben sollen.
Ich hab leider noch nicht ganz verstanden, wie dass dann schlussendlich ausschauen soll. Könntest du das vielleicht mal irgendwie zeichnen bitte?
Zitat von: drhirn am 15 März 2018, 17:28:48
Ich hab leider noch nicht ganz verstanden, wie dass dann schlussendlich ausschauen soll. Könntest du das vielleicht mal irgendwie zeichnen bitte?
Aber na klar, ich zeige es mal am Screenshot auf dem FF59 ;)
Aber nochmal ein Erklärung dazu.
1. hatte mir das auf dem Tablet in der mittleren Box immer alles verschoben so das rechts nichts zu sehen war, dass funktioniert jetzt
2. konnte ich kein Bild als Hintergrund einsetzen, da waren immer die schwarzen <div> Container zu sehen und auch die vbox und die hbox war davor es waren eigentlich nur die Bildränder zu sehen, dass funktioniert jetzt auch
Was immer noch nicht geht, ist das die Abstände nicht stimmen im FF, im Chrome und auf dem Android Tablet (hier am schlimmsten)
Da hatte ich von setstate schon das mit dem "classchanger" benutzt so das er alles was nicht aktiv ist ausblendet
Das Bild ist jetzt mal nur irgend eines welches ich hier eingesetzt habe, trotzdem ist alles gut zu sehen
1. Screenshot Firefox
2. Screenshot Android Tablet
In Original ist das auf dem Android Tablet besser zu sehen, dass Bild macht es etwas schlechter
code:
<div class="page" id="flur_content3">
<div class="gridster">
<ul><!-- ANFANG - 1. Block links -->
<li data-row="5" data-col="1" data-sizex="5" data-sizey="16">
<div class="vbox bg-black">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
</div>
</li>
<!-- ENDE - 1. Block links -->
<!-- ANFANG - 2. Block mitte -->
<li class="" data-row="5" data-col="6" data-sizex="6" data-sizey="16">
<div id="background2" class="vbox bg-black">
<div class="card" style="margin-top:0px; margin-left:20px; width:97%; height:95%; line-height:1.75em; align:center">
<div class="vbox">
<!-- ANFANG - mein Code -->
<!-- Status der Geräte -->
<!-- ==== Türkontakt - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_TK_Terrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Terrassen Tür</div>
</div>
</div>
<div class="hbox">
<div style="margin-top:0px; text-align:right; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["crimson","lightgreen"]'
data-limits='[open,closed]'>
</div>
</div>
</div>
<!-- ========== Garagentor ========== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div style="font-size:150%" data-type="label">Garagen Tor</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="closed"
data-device="Garagentorsensor"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["lightgreen","crimson"]'
data-limits='[open,closed]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Wohnzimmer links ==== -->
<div class="hbox">
<div class="card grow-2 ">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Links</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="WZ_Rollladen_O"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Wohnzimmer rechts ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Rechts</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZ"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - WZ - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Terrasse</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZT"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Rollladen - Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Schlafzimmer</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-device="RollladenSZ"
data-get="level"
data-map-get='{"0":"Geschlossen","25":"Beschattung 25%","50":"Beschattung 50%","75":"Home 75%","100":"Oben - Offen"}'
data-limits='[0,25,50,75,100]'
data-colors='["crimson","#00bfff","darkorange","royalblue","lightgreen"]'>
</div>
</div>
</div>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg vorn & Schuppen</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg hinten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_02"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Beleuchtung Garten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="AU_Garten"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Licht Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Terrasse</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtTerrasse"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== LED TV - Lampe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED TV - Lampe</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WZ_Lampe_TV"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["white","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== LED Schrank und Vitrine ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED Schrank & Vitrine</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="WZ_Schrank"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["white","crimson"]'
data-limits='[ON,OFF]'>
</div>
</div>
</div>
<!-- ==== 3x LED Eingang ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">3x LED Eingang</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="AussenLampe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht - OG ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung OG Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="OG_Licht_Buero"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Tablet Flur Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Flur Oben</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_FlurOben"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Tablet Küche Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Küche</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_Kueche"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Schlafzimmer Uhr</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ====== Türklingel ====== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Türklingel</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Klingel"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Gardena Pumpe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Gardena Pumpe</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="GardenaPumpe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht Garage ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garage</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtGarage"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Licht Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Schlafzimmer</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtSZ"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ==== Netzwerkdrucker Büro ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_1" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Netzwerkdrucker Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="BU_Sonoff_1"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Proxmox Server ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="BU_Sonoff_2" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Proxmox Server</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="BU_Sonoff_2"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>
<!-- ==== Licht Weihnachten Busch ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Licht Weihnachten Busch</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtEG"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
<!-- ENDE - mein Code -->
</div>
</div>
<!--div class="card"><div ></div></div>
<div class="card"><div ></div></div-->
<div class="card"><div ></div></div>
</div>
</li>
<!-- ENDE - 2. Block mitte -->
<!-- ANFANG - 3. Block rechts -->
<li data-row="5" data-col="12" data-sizex="5" data-sizey="16">
<div class="vbox bg-black">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
</div>
</li>
<!-- ENDE - 3. Block rechts -->
</ul>
</div>
</div>
Nun wollte ich nach einem Update mal schauen ob sich etwas verändert, ja es hat sich was verändert :-\
Die Anzeigen für den Status der Geräte die ich in "Rot" hatte sind jetzt alle "weiß" ist da was schief gelaufen
Als Beispiel hier mal ein div, bei mir ist es die Farbe "crimson"
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
Müsste "lightgreen","crimson" nicht als data-colors definiert sein? Oder in deinem User-CSS File müsste .lightgreen und .crimson angelegt sein.
bisher ging es alles so... deshalb habe ich mir keine Gedanken darüber gemacht, ist mir nur eben gestern aufgefallen
Ja ich habe diese Farben schon immer in der *.css definiert, ich schaue mal
also es liegt nicht an meinen Farben...! die sind drin in der css
Wie muss ich denn nun ein Label erstellen damit es wieder so funktioniert wie gestern vor dem Update, das wenn data-device auf on oder off steht es auch die Farbe wechselt :-\
Auf jeden Fall ging das gestern vor dem Update ohne Probleme :-\
Mit !important ????
.lightgreen {
color: #33ff55 !important;
}
Nein, dass meine ich nicht...!
Es funktioniert egal mit welcher Farbe nicht mehr... So wie meine Label Definition von oben, damit geht das nicht mehr wenn ich mit on, off arbeiten will...
Und ich meinte, nur wenn die Farbendefinition so aussieht (mit important), funktioniert es.