Nur Text | Text mit Bildern

FHEM Forum

FHEM => Anfängerfragen => Thema gestartet von: smile7779 am 19 Mai 2019, 18:55:57

Titel: Positionierung Temperatur Außen und WZ im TabletUi
Beitrag von: smile7779 am 19 Mai 2019, 18:55:57
Hallo zusammen,

ich stehe hier ein bisschen auf den Schlauch. Ich versuche gerade verschiedene Geräte auf dem TabletUI zu positionieren. Habe im Wiki schon geschaut und diverse Positionierungsbefehle versucht, aber ich bekomme einfach nicht die Außentemperatur und die Innentemperatur WZ nebeneinander positioniert. Komischerweise werden die beiden Geräte übereinander Positioniert. Kann mir da vielleicht jemand helfen?

Vielen Dank im Voraus und Beste Grüße

Code Auswählen
<!DOCTYPE html>
<html>

<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM</title>
    <!--
     /* FHEM tablet ui */
     /*
     * second page
     
     <li data-row="1" data-col="1" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Cam Garten</div></header>
       
     *
     load this page via widget pagebutton

     <div data-type="pagebutton"   data-url="#content_rooms.html"
          data-load="#content6"    data-off-background-color="transparent"
          data-off-color="#606060" data-on-background-color="#606060"
          data-on-color="#222222"  data-active-pattern=".*#content_cam.html"
          data-icon="fa-music"     class="prefetch top-space"></div>
    -->



<meta name="gridster_cols" content="21"/>
<meta name="gridster_rows" content="15"/>

</head>
<body>
<div class="page" id="1_wetter">

<li data-row="1" data-col="5" data-sizex="21" data-sizey="9">
        <header><div data-type="label" class="medium orange">Wetterdaten</div></header>



<div class="gridster">




<div class="row">

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-limits-get="WetterProplanta:fc0_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'>Heute</div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc0_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc0_date" data-limits-get="fc0_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc1_date" data-substitution="toDate().ee()"  data-limits-get="fc1_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc1_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc1_date" data-limits-get="fc1_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc2_date" data-substitution="toDate().ee()"  data-limits-get="fc2_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc2_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc2_date" data-limits-get="fc2_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc2_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc3_date" data-substitution="toDate().ee()"  data-limits-get="fc3_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc3_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc3_date" data-limits-get="fc3_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc3_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>
</div>
</div>

<div class="col-1-5">
<div class="cell small newline">&nbsp;</div>
<div data-type="label" class="cell small inline" data-device="WetterProplanta" data-get="fc4_date" data-substitution="toDate().ee()"  data-limits-get="fc4_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div class="small inline" data-type="symbol" data-device="WetterProplanta" data-hide="fc4_frost" data-icon="fa-snowflake-o" data-color="#5858FA" data-hide-on="0"></div>
<div data-type="label" class="cell small" data-device="WetterProplanta" data-get="fc4_date" data-limits-get="fc4_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc4_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_weatherDay" class="cell"></div>

<div class="row">
<div class="cell-20"></div>
<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMax" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; left: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_chOfRainDay" data-unit="%" class="cell small newline top-space-3x" style="position: relative; left: 10px"></div>
</div>

<div class="cell-20">
<div class="cell small compressed" data-type="symbol" data-icon="fa-thermometer-3" data-color="#6E6E6E"></div>
<div class="cell small compressed" data-type="symbol" data-icon="fa-umbrella" data-color="#6E6E6E" style="position: relative; top: 10px"></div>
</div>

<div class="cell-20 top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMin" data-unit="%B0C%0A" class="cell small" data-limits='[-50,0]' data-colors='["#5858FA","white"]' style="position: relative; right: 10px"></div>
<div class="cell small newline">&nbsp;</div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_rain" data-unit="mm" data-fix="0" class="cell small" style="position: relative; right: 10px"></div>
</div>
<div class="cell-20"></div>

</div>

</div>

<li data-row="6" data-col="1" data-sizex="21" data-sizey="5">
        <header><div data-type="label" class="medium orange">Muellabfuhrplan und Benzinpreis Tankstelle Schoenberg</div></header>

<div class="sheet">
                    <div class="row">

                       
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="BlaueTonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#4286f4"></div>
                        </div>
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="Wertstofftonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#efef15"></div>
                        </div>
                        <div class="cell">
                            <div data-type="symbol" data-device="Muelltonnen" data-get="Abfalltonne_days" data-background-icon="fa-circle" class="bigger"
                                 data-states='["0","1","2"]' data-icons='["fa-trash warn fa-spin", "fa-trash warn fa-spin", "fa-trash warn"]' data-background-colors='["#262626"]' data-warn-background-color="#262626" data-color="#8c8c8c"></div>

</div>
                        <div class="cell">

<img src="/fhem/www/tablet/img/Tankstelle/logohem.jpg" alt="HEM" width="70" height="70" />
                            <div data-type="label" data-device="OUT.Spritpreis" data-get="SuperE5" class="big" data-post-text=" EUR l/E5" data-substitution="s/\./,/g" data-limits='[0,1.25,1.48]' data-colors='["#6699FF","green","firebrick"]'></div>



</div>
<div class="cell">
<div class="">
<div data-type="label"  class="yellow">Aussentemperatur</div>


<div class="cell">
<div class="">
Temperatur
</div>
<div data-type="label"
data-device="Terrasse_Temp_Hum"
data-get="SI7021_Temperature"
data-unit="°C"
data-limits='[0,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
<div class="cell">
<div class="">
Luftfeuchtigkeit
</div>
<div data-type="label"
data-device="Terrasse_Temp_Hum"
data-get="SI7021_Humidity"
data-unit="%"
data-limits='[0,20,55]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>

<div class="cell">
<div class="">
<div data-type="label"  class="yellow">WZtemperatur</div>


<div class="cell">
<div class="">
Temperatur
</div>
<div data-type="label"
data-device="Temp_Humi_WZ"
data-get="SI7021_Temperature"
data-unit="°C"
data-limits='[0,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
<div class="cell">
<div class="">
Luftfeuchtigkeit
</div>
<div data-type="label"
data-device="Temp_Humi_WZ"
data-get="SI7021_Humidity"
data-unit="%"
data-limits='[0,20,55]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>

</div>

<li data-row="7" data-col="1" data-sizex="21" data-sizey="5">
<header><div data-type="label" class="medium orange">An.- und Abwesenheit</div></header>

<div class="sheet">
                    <div class="row">
<td>
<div class="top-space inline">
<div data-type="symbol"
data-device="Presence_Claudi"
data-get-on='["present","absent"]'
data-icons='["fa-female","oa-status_away_1"]'
data-on-colors='["green","red"]'>
</div>
<div data-type="label" class="cell">Claudi</div>
</div>
</td>

<td>
<div class="top-space inline">
<div data-type="symbol"
data-device="Presence_Jessi"
data-get-on='["present","absent"]'
data-icons='["fa-female","oa-status_away_1"]'
data-on-colors='["green","red"]'>
</div>
<div data-type="label" class="cell">Jessi</div>
</div>
</td>

<td>
<div class="top-space inline">
<div data-type="symbol"
data-device="Presence_Christian"
data-get-on='["present","absent"]'
data-icons='["fa-male","oa-status_away_1"]'
data-on-colors='["green","red"]'>
</div>
<div data-type="label" class="cell">Chrischi Firma</div>
</div>
</td>

<td>
<div class="top-space inline">
<div data-type="symbol"
data-device="Presence_Chrischi_privat"
data-get-on='["present","absent"]'
data-icons='["fa-male","oa-status_away_1"]'
data-on-colors='["green","red"]'>
</div>
<div data-type="label" class="cell">Chrischi privat</div>
</div>
</td>

</div>
</li>

</div>

</div> </ul>
</div>
</body>
</html>
Titel: Antw:Positionierung Temperatur Außen und WZ im TabletUi
Beitrag von: OdfFhem am 19 Mai 2019, 19:29:13
Hallo,

auf die Schnelle würde ich sagen, liegt es daran, dass die div-Tags nicht korrekt abgeschlossen werden.

Eine neue cell fängt bereits an, wenn die alte noch nicht beendet ist.

Einfach mal den Temperaturblock isolieren und korrekt formatieren ...
Titel: Antw:Positionierung Temperatur Außen und WZ im TabletUi
Beitrag von: smile7779 am 22 Mai 2019, 06:29:03
Hallo OdFehm,

Vielen Dank für die Antwort. Ich habe es jetzt so einigermaßen hinbekommen. Für mich wäre es sehr hilfreich wenn Du mir einige Beispiele aus meiner Datei geben könntest. Man kann ja jeden Tag etwas dazulernen  ;)

Beste Grüße

Christian
Titel: Antw:Positionierung Temperatur Außen und WZ im TabletUi
Beitrag von: devil77 am 22 Mai 2019, 10:12:24
Als erstes würde ich mal versuchen einen "sauberen" html Code zu erstellen.
Zum Teil sind dein div's, li usw. gar nicht geschlossen.
Da ist vollkommen klar das Sachen rauskommen die Keiner möchte.
Alles was "geöffnet" wird muß auch wieder "geschlossen werden.
Am besten für soetwas notepad++ verwenden. Da bekommt man das schnell angezeigt.
Z. Bsp. in deinem Code gleich schon am Anfang

Code Auswählen
</head>
<body>
<div class="page" id="1_wetter"> ---------------------------------------->OHNE </div>!!

<li data-row="1" data-col="5" data-sizex="21" data-sizey="9"> -------------------------------------------------->OHNE </li>!!
        <header><div data-type="label" class="medium orange">Wetterdaten</div></header>



<div class="gridster">-------------------------------->OHNE </div>!!

Titel: Antw:Positionierung Temperatur Außen und WZ im TabletUi
Beitrag von: smile7779 am 22 Mai 2019, 14:54:49
Vielen Dank!  :)

Werde mich der Sache mal annehmen. So komme ich weiter

Danke nochmals

Gruß Christian
Nur Text | Text mit Bildern