Anzeige im Firefox richtig auf dem Tablet abgeschnitten

Begonnen von moonsorrox, 14 März 2018, 16:21:32

Vorheriges Thema - Nächstes Thema

moonsorrox

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:&nbsp;&nbsp;" data-get="wind_chill" data-unit="°" style="font-size:110%;"></div>
                            <div class="left-space" style="font-size:110%;">Wind:&nbsp;&nbsp;</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="&nbsp;&nbsp;" 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:&nbsp;&nbsp;" 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:&nbsp;&nbsp;" data-device="MeinWetter" data-get="pressure" data-post-text=" mbar" style="font-size:110%;"></div>
                            <div data-type="label" data-pre-text="&nbsp;&nbsp;&nbsp;Luftfeuchtigkeit:&nbsp;&nbsp;" data-device="MeinWetter" data-get="humidity" data-post-text=" %" style="font-size:110%;"></div>
                            <div data-type="label" data-pre-text="&nbsp;&nbsp;&nbsp;Taupunkt:&nbsp;&nbsp;" 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,&nbsp;</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%;">&nbsp;|&nbsp;</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,&nbsp;</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%;">&nbsp;|&nbsp;</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=",&nbsp;"></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%;">&nbsp;|&nbsp;</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=",&nbsp;"></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%;">&nbsp;|&nbsp;</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&nbsp;&nbsp;" 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%">&nbsp;</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>
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

hier mal die Ansicht vom Firefox, da ist alles bestens
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Ulm32b

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.

moonsorrox

Nein, kommt von Yahoo...
Aber trotzdem hast du Recht, denn auch bei Yahoo ist diese ewig und immer auf gleichbleibend  ;)
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

@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>
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

setstate

Keine Ahnung. Man könnte mit Chrome probieren, was der anders macht und die Tablet-Auflösung in den Entwicklertools simulieren.

drhirn

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.

setstate

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.

moonsorrox

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  ;)
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

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
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

#10
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

Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

drhirn

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;

setstate

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.

moonsorrox

#13
@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.

Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

drhirn

Ich hab leider noch nicht ganz verstanden, wie dass dann schlussendlich ausschauen soll. Könntest du das vielleicht mal irgendwie zeichnen bitte?