flexbox und grow-0 auf Chrome und Fully

Begonnen von sku, 09 September 2017, 14:28:58

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

sku

09 September 2017, 14:28:58 Letzte Bearbeitung: 09 September 2017, 14:43:50 von sku
Hallo

ich suche schon länger eine Lösung für einen Darstellungsfehler in Chrome und Fully. In Firefox ist alles tiptop.
Jetzt hab ich mal mit CSS herumgespielt... Ergebnis:
Vor meiner Änderung wurde die unterste card einer vbox nicht "groß gemacht" und deren Inhalt außerhalb des sichtbaren Bereichs dargestellt. Nach meiner Änderung passt das nun, jedoch sind die Charts kaputt...

Die Änderung in fhem-tablet-ui-user.css:
Code Auswählen
.vbox,
.card,
.box.vertical,
.has_vbox,
.has_center {
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
}

Im Anhang noch 2 Screenshots dazu.


index.html
Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="/fhem/icons/favicon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css">
    <link rel="stylesheet" href="lib/openautomation.css">

    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
<div data-type="loading" data-icon="fa-hourglass" data-color="firebrick" data-effect="fa-pulse" class="bigger" style="position:absolute;top:50%;left:50%;margin-left:-17.38px;"></div>
<main id="panel" class="">
  <header id="header-nav" class="darker row">
  <div class="hbox center">
    <div data-type="link" data-url="#sub_home.html"
        data-color="white"
        data-width=""
        data-load="#content1"
        data-active-pattern="(.*/||.*#sub_home.html)"
        data-icon="fa-home"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
    <div data-type="link" data-url="#sub_heizung.html"
        data-color="white"
        data-width=""
        data-load="#content2"
        data-active-pattern=".*#sub_heizung.html"
        data-icon="fa-fire"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
    <div data-type="link" data-url="#sub_wetter.html"
        data-color="white"
        data-width=""
        data-load="#content3"
        data-active-pattern=".*#sub_wetter.html"
        data-icon="fa-cloud"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
    <div data-type="link" data-url="#sub_residents.html"
        data-color="white"
        data-width=""
        data-load="#content4"
        data-active-pattern=".*#sub_residents.html"
        data-icon="fa-user"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
    <div data-type="link" data-url="#sub_verbrauch.html"
        data-color="white"
        data-width=""
        data-load="#content5"
        data-active-pattern=".*#sub_verbrauch.html"
        data-icon="fa-bolt"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
    <div data-type="link" data-url="#sub_system.html"
        data-color="white"
        data-width=""
        data-load="#content6"
        data-active-pattern=".*#sub_system.html"
        data-icon="fa-server"
        data-active-color="#00BA99"
        data-fade-duration="fast"
        class="large">
    </div>
  </div>
  </header>
  <div class="page" id="content1"></div>
  <div class="page" id="content2"></div>
  <div class="page" id="content3"></div>
  <div class="page" id="content4"></div>
  <div class="page" id="content5"></div>
  <div class="page" id="content6"></div>
</main>
</body>
</html>



sub_heizung.html (gekürzt):
Code Auswählen
<html>
<title>Heizung</title>
<head>
</head>
<body>
<main id="content2">
  <div class="box full-height">
    <div class="vbox phone-width">
      <div class="card">
        <header>ARBEITSZIMMER</header>
       
      </div>
      <div class="card">
        <header>WOHNZIMMER</header>
       
      </div>
      <div class="card grow-0">
        <header>Batterie</header>
        <div class="hbox">
          <table width="auto">
          <tr class="lightgray">
            <td>
              <div data-type="label" class="left-align">AZ ThstWand:</div>
            </td>
            <td>
              <div data-type="popup" data-height="95%" data-width="95%">
                <div data-type="symbol" data-device="az_ThstWand_cln" data-get="batteryLevel"
                  data-states='["0","2.3","2.5","2.7","3.0"]'
                  data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_100 fa-rotate-90"]'
                  data-colors='["firebrick","firebrick","#505050","#505050","#505050"]'
                  class="compressed left-space">
                </div>
                <div class="dialog">
                  <header>Batterie AZ ThstWand</header>
                  <div
                    class="fullsize"
                    data-type="chart"
                    data-logdevice="rasp3_DbLog"
                    data-logfile="HISTORY"
                    data-columnspec="az_ThstWand:batteryLevel"
                    data-style="ftui l2"
                    data-ptype="lines"
                    data-uaxis="primary"
                    data-legend="az_ThstWand"
                    data-showlegend="true"
                    data-daysago_start="2015-10-23"
                    data-nofulldays="true"
                    data-yunit="V"
                    data-ytext="V"
                    data-minvalue="auto"
                    data-maxvalue="auto"
                    data-height="95%"
                    data-yticks="auto"
                    data-xticks="auto"
                    data-timeformat="hh:mm\LF\dd.MM.yyyy"
                    data-crosshair="true">
                  </div>
                </div>
              </div>
            </td>
            <td width="30">
            </td>
            <td>
              <div data-type="label" class="left-align">AZ Thst1:</div>
            </td>
            <td>
             
            </td>
          </tr>
          <tr class="lightgray">
            <td>
              <div data-type="label" class="left-align">WZ ThstWand:</div>
            </td>
            <td>
             
            </td>
            <td width="30">
            </td>
            <td>
              <div data-type="label" class="left-align">WZ Thst1:</div>
            </td>
            <td>
             
            </td>
          </tr>
          </table>
          <div class="left-space-2x" data-type="popup" data-height="95%" data-width="95%">
            <div data-type="symbol" data-icon="fa-area-chart" data-color="grey"></div>
            <div class="dialog">
              <header>Betterieverbrauch Heizkörper</header>
             
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vbox phone-width">
      <div class="card">
        <header>BAD</header>
      </div>
      <div class="card">
        <header>SCHLAFZIMMER</header>
       
      </div>
      <div class="card grow-0">
        <header>Batterie</header>
        <div class="hbox">
         
        </div>
      </div>
    </div>
  </div>
</main>
</body>
</html>



Nachtrag: Die Änderung hat Auswirkungen in Firefox, die 2 unteren Charts haben nicht die volle Höhe. Siehe Anhang grow-0 nach patch in firefox.PNG

sku

#1
09 September 2017, 19:57:20
Das Thema lies mir keine Ruh, hab noch weiter gegoogled. Ich glaube, eine Lösung gefunden zu haben. Fully, Chrome und Firefox verhalten sich mMn korrekt:

Code Auswählen
.vbox,
.card,
.box.vertical,
.has_vbox,
.has_center {
    flex-direction: column;
    flex: 1;
    min-height: fit-content;
}

sku

#2
26 September 2017, 12:01:39
Leider werden die Graphen im Hochformat falsch dargestellt, siehe Anhang. Als Workaround habe ich innerhalb des "div" des Graphen das eingefügt:
Code Auswählen
<div style="min-height:200px
...
...>
</div>"

kleineslichtHH

#3
31 Januar 2018, 13:55:50
Hallo ihr süßen,

ich habe das selbe Problem, bekomme es leider nicht gelöst.

Auf dem Tablet/Smartphone/Laptop unter Chrome ist die Darstellung richtig, nur auf dem Tablet unter FULLY leider nicht.
Was ich bishher rausgefunden habe: grow-0 ist der Übeltäter, nur haut mein Design leider ohne nicht hin ::)


Vielleicht kann mir ja jemand helfen.

Code Auswählen

<!DOCTYPE html>
<html>


<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="longpoll_type" content="websocket">
<meta name='toast' content='0'>
    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="css/fhem-tablet-ui-custom.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FTUI-FLEX</title>
</head>


<body>


<div class="vbox">
<div class="card grow-0" style="background: none !important; style=min-height:200px"><!--Navigation-->
<div class="hbox">
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="index_flex2.html" data-icon="mi-home"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_heating.html" data-load="#flex_heating" data-active-pattern=".*#flex_heating.html" data-icon="fa-thermometer-half"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_car.html" data-load="#flex_car" data-active-pattern=".*#flex_car.html" data-icon="fa-car"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_music.html" data-load="#flex_music" data-active-pattern=".*#flex_music.html" data-icon="fa-music"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_tv.html" data-load="#flex_tv" data-active-pattern=".*#flex_tv.html" data-icon="fa-television"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_weather.html" data-load="#flex_weather" data-active-pattern=".*#flex_weather.html" data-icon="oa-weather_cloudy"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_lights.html" data-load="#flex_lights" data-active-pattern=".*#flex_lights.html" data-icon="fa-lightbulb-o"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_webcams.html" data-load="#flex_webcams" data-active-pattern=".*#flex_webcams.html" data-icon="fa-video-camera"><>
<div class="compressed-50 xxl" data-type="pagebutton" data-background-icon="" data-url="#flex_birds.html" data-load="#flex_birds" data-active-pattern=".*#flex_birds.html" data-icon="fa-heart"><>
<div class="compressed-50 xxl" data-type="symbol" data-device="Kellertuer" data-get-on='["offen","geschlossen"]' data-icons='["oa-secur_open blink","oa-secur_locked"]' data-on-colors='["IndianRed","SeaGreen"]'><>
<>
<div class="hbox " style="background: none !important">
<div class="card grow-0" style="background: none !important; style=min-height:200px"><!--Sound-->
<header>Soundbar Küche</header>
<div class="hbox">
<div class="card items-center" style="background: none !important">
<div data-type="push" data-device="Dummy_Radio_TabE" data-set="" data-set-on="Stop" data-icon="fa-stop" data-on-background-color="#aa6900" data-color="hsl(50,100%,50%)" data-doubleclick="0" class="normal"><>
<div data-type="label" >Stop<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="push" data-device="AMAD_TabE" data-set="" data-set-on="volumeDown" data-icon="fa-volume-down" data-on-background-color="#aa6900" data-color="hsl(50,100%,50%)" data-doubleclick="0" class="normal"><>
<div data-type="label" >Leiser<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="push" data-device="Dummy_Radio_TabE" data-set="" data-set-on="AlsterRadio" data-icon="fa-music" data-on-background-color="#aa6900" data-color="hsl(50,100%,50%)" data-doubleclick="0" class="normal"><>
<div data-type="label" >AlsterRadio<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="push" data-device="AMAD_TabE" data-set="" data-set-on="volumeUp" data-icon="fa-volume-up" data-on-background-color="#aa6900" data-color="hsl(50,100%,50%)" data-doubleclick="0" class="normal"><>
<div data-type="label" >Lauter<>
<>
<>
<>
<div class="card grow-0" style="background: none !important; style=min-height:200px"><!--Licht-->
<header>Lightbar</header>
<div class="hbox">
<div class="card items-center" style="background: none !important">
<div data-type="switch" data-device="sonoff75" data-get="POWER" data-set-on="ON" data-set-off="OFF" data-get-on="ON" data-get-off="OFF" data-icon="fs-light_ceiling" class="normal" ><>
<div data-type="label" >Unterbau<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="switch" data-device="sonoff76" data-get="POWER" data-set-on="ON" data-set-off="OFF" data-get-on="ON" data-get-off="OFF" data-icon="oa-light_led_stripe" class="normal" ><>
<div data-type="label" >Ambiente<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="switch" data-device="sonoff77" data-get="POWER" data-set-on="ON" data-set-off="OFF" data-get-on="ON" data-get-off="OFF" data-icon="oa-light_floor_lamp" class="normal" ><>
<div data-type="label" >Stehlampe<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="switch" data-device="sonoff62" data-icon="oa-light_stairs"><>
<div data-type="label">Treppe<>
<>
<div class="card items-center" style="background: none !important">
<div data-type="switch" data-device="sonoff_pow_1" data-get="POWER" data-set-on="ON" data-set-off="OFF" data-get-on="ON" data-get-off="OFF" data-icon="fa-television" class="normal" ><>
<div data-type="label" >TV<>
<>
<>
<>
<div data-type="classchanger" data-device="Abfall_" data-get="next_tage" data-get-on="(1|2|3)" data-off-class="hide">
<div class="card grow-0" style="background: none !important; style=min-height:200px" ><!--Müll-->
<header>Müll</header>
<div class="hbox">
<div data-type="classchanger" data-device="Abfall_" data-get="Muell__GelberSack_tage" data-get-on="(1|2|3)" data-off-class="hide">
<div class="vbox">
<div data-type="button"
data-background-icon="none"
data-device="Abfall_"
data-get="Muell__GelberSack_tage"
data-off-color="yellow"
data-fhem-cmd="setreading Abfall_ Muell__GelberSack_tage off"
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fs-bag warn","fs-bag warn","fs-bag warn blink","fs-bag warn"]'
data-on-colors='["yellow","yellow","yellow","yellow"]'
class="big">
<>
<!--<div style="margin-top:-15px !important;" data-type="label" data-device="Abfall_" data-get="Muell__GelberSack_datum"><>-->
<>
<>
<div data-type="classchanger" data-device="Abfall_" data-get="Muell__Hausmuell14-taegig_tage" data-get-on="(1|2|3)" data-off-class="hide">
<div class="vbox">
<div data-type="button"
data-background-icon="none"
data-device="Abfall_"
data-get="Muell__Hausmuell14-taegig_tage"
data-off-color="#808080"
data-fhem-cmd="setreading Abfall_ Muell__Hausmuell14-taegig_tage off"
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash-o warn","fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="big">
<>
<!--<div style="margin-top:-15px !important;" data-type="label" data-device="Abfall_" data-get="Muell__Hausmuell14-taegig_datum"><>-->
<>
<>
<div data-type="classchanger" data-device="Abfall_" data-get="Muell__Altpapier_tage" data-get-on="(1|2|3)" data-off-class="hide">
<div class="vbox">
<div data-type="button"
data-background-icon="none"
data-device="Abfall_"
data-get="Muell__Altpapier_tage"
data-off-color="cornflowerblue"
data-fhem-cmd="setreading Abfall_ Muell__Altpapier_tage off"
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash-o warn","fa-trash-o warn","fa-trash-o warn blink","fa-trash-o warn"]'
data-on-colors='["cornflowerblue","cornflowerblue","cornflowerblue","cornflowerblue"]'
class="big">
<>
<!--<div style="margin-top:-15px !important;" data-type="label" data-device="Abfall_" data-get="Muell__Altpapier_datum"><>-->
<>
<>
<div data-type="classchanger" data-device="Abfall_" data-get="Muell__Gruenabfall_tage" data-get-on="(1|2|3)" data-off-class="hide">
<div class="vbox">
<div data-type="button"
data-background-icon="none"
data-device="Abfall_"
data-get="Muell__Gruenabfall_tage"
data-off-color="cornflowerblue"
data-fhem-cmd="setreading Abfall_ Muell__Gruenabfall_tage off"
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fs-bag warn","fs-bag warn","fs-bag warn blink","fs-bag warn"]'
data-on-colors='["green","green","green","green"]'
class="big">
<>
<!--<div style="margin-top:-15px !important;" data-type="label" data-device="Abfall_" data-get="Muell__Gruenabfall_datum"><>-->
<>
<>
<>
<>
<>
<div class="card grow-0" style="background: none !important; style=min-height:200px"><!--Aussenwelt-->
<header>Aussenwelt</header>
<div class="hbox">
<div class="vbox">
<div class="card" style="background: none !important">
<div data-type="clock" data-format="H:i" class="bigger"><>
<>
<div class="card" style="background: none !important">
<div data-type="clock" data-format="d.m.y"><>
<>
<>
<div class="vbox">
<div class="card" style="background: none !important">
<div data-type="popup"
data-width="600px">
<div class="bigger" data-type="weather" data-device="_PROPLANTA" data-get="fc0_weatherDayIcon" data-imageset="meteocons"><>
<div class="dialog">
<header>7-Tage-Wettervorhersage</header>
<div data-type="chart"
data-device="_PROPLANTA"
data-logdevice='[
"lp",
"lp",
"lp"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22_PROPLANTA\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22_PROPLANTA\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22_PROPLANTA\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l2",
"ftui l6fill",
"ftui l1fill"
]'
data-ptype='[
"quadraticSmooth",
"histeps",
"quadraticSmooth"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Temperatur",
"Regen",
"Wolken"
]'
data-yunit=""
data-ytext="Regen mm / Temperatur °C"
data-yunit_sec="%"
data-ytext_sec="Wolken"
data-timeformat="eeee"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start = "0"
data-daysago_end = "-7"
data-xticks="1440"
data-yticks="auto"
data-showlegend="true"
data-return-time="10"
data-width="90%"
data-height="90%"
class="nobuttons fullsize">
<>
<>
<>
<>
<>
<div class="vbox">
<div class="card" style="background: none !important">
<div data-type="label" data-device="_PROPLANTA" data-get="temperature" data-unit="%B0C%0A" class="bigger"><>
<>
<div class="card" style="background: none !important">
<div data-type="label" data-device="_PROPLANTA" data-get="fc0_weatherDay"><>
<>
<>
<>
<>
<div class="card grow-0" style="background: none !important; style=min-height:200px"><!--VerkehrA1-->
<header>A1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A7</header>
<div class="hbox">
<div class="card" style="background: none !important">
<div class="bigger" data-type="label" data-device="Verkehr_" data-get="duration_in_traffic_min" data-unit="Min."><>
<div class="bigger" style="color: IndianRed" data-type="label" data-device="Verkehr_" data-get="delay_min" data-unit="Min."><>
<>
<div class="card" style="background: none !important">
<div class="bigger" data-type="label" data-device="Verkehr__A7" data-get="duration_in_traffic_min" data-unit="Min."><>
<div class="bigger" style="color: IndianRed" data-type="label" data-device="Verkehr__A7" data-get="delay_min" data-unit="Min."><>
<>
<>
<>
<>
<>
<div class="card border-blue borderround" style="background: none !important">
<div class="page" id="flex_heating"><>
<div class="page" id="flex_car"><>
<div class="page" id="flex_music"><>
<div class="page" id="flex_tv"><>
<div class="page" id="flex_weather"><>
<div class="page" id="flex_lights"><>
<div class="page" id="flex_webcams"><>
<div class="page" id="flex_birds"><>
<>
<>


</body>


</html>



flex_heating:
Code Auswählen


<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * pagebutton sub page
     * -->
</head>
<body>
  <div class="page" id="flex_heating">
    <div class="vbox">
<div class="card items-center" style="background: none !important">
<header>Obergeschoss</header>
<div class="hbox items-top"><!--OG-->
<div class="card grow-0 items-center" style="background: none !important"> <!--Arbeitszimmer-->
<header>Arbeitszimmer</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Arbeitszimmer'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Arbeitszimmer"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="HK.Arbeitszimmer"
data-pre-text="Ventil: "
data-get="valveposition"
data-post-text="%">
<>
<div data-type="level"
data-device="HK.Arbeitszimmer"
data-get="valveposition"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<div class="card grow-0 items-center" style="background: none !important"> <!--Badezimmer-->
<header>Badezimmer</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Badezimmer'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Badezimmer"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="HK.Badezimmer"
data-pre-text="Ventil: "
data-get="valveposition"
data-post-text="%">
<>
<div data-type="level"
data-device="HK.Badezimmer"
data-get="valveposition"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<div class="card grow-0 items-center" style="background: none !important"> <!--Schlafzimmer-->
<header>Schlafzimmer</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Schlafzimmer'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Schlafzimmer"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="HK.Schlafzimmer"
data-pre-text="Ventil: "
data-get="valveposition"
data-post-text="%">
<>
<div data-type="level"
data-device="HK.Schlafzimmer"
data-get="valveposition"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<div class="card grow-0 items-center" style="background: none !important"> <!--Kinderzimmer-->
<header>Kinderzimmer</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Kinderzimmer'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Kinderzimmer"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="HK.Kinderzimmer"
data-pre-text="Ventil: "
data-get="valveposition"
data-post-text="%">
<>
<div data-type="level"
data-device="HK.Kinderzimmer"
data-get="valveposition"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<>
<>
<div class="card items-center" style="background: none !important">
<header>Erdgeschoss</header>
<div class="hbox items-top"><!--EG-->
<div class="card grow-0 items-center" style="background: none !important"> <!--FlurEG-->
<header>FlurEG</header>
<div class="vbox">
<div data-type="label"
data-device='WT.FlurEG'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.FlurEG"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="Ventile_FlurEG"
data-pre-text="Ventil: "
data-get="valve_max"
data-post-text="%">
<>
<div data-type="level"
data-device="Ventile_FlurEG"
data-get="valve_max"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<div class="card grow-0 items-center" style="background: none !important"> <!--Küche-->
<header>Küche</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Kueche'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Kueche"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="HK.Kueche"
data-pre-text="Ventil: "
data-get="valveposition"
data-post-text="%">
<>
<div data-type="level"
data-device="HK.Kueche"
data-get="valveposition"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<div class="card grow-0 items-center" style="background: none !important"> <!--Wohnzimmer-->
<header>Wohnzimmer</header>
<div class="vbox">
<div data-type="label"
data-device='WT.Wohnzimmer'
data-get='temperature'
data-unit="°C"
class="bigger">
<>
<div data-type="spinner"
data-device="WT.Wohnzimmer"
data-get="desiredTemperature"
data-set="desiredTemperature auto"
data-background-color="none"
data-gradient-color='["blue","red"]'
data-icon-left-color="blue"
data-icon-right-color="red"
data-step="0.5"
data-min="19.0"
data-max="23.0"
data-unit="°"
class="top-space centered value">
<>
<div data-type="label"
data-device="Ventile_WZ"
data-pre-text="Ventil: "
data-get="valve_max"
data-post-text="%">
<>
<div data-type="level"
data-device="Ventile_WZ"
data-get="valve_max"
data-min="0"
data-max="100"
data-limits='[0,30,100]'
data-colors='["blue","orange","red"]'
class="horizontal left">
<>
<>
<>
<>
<>
  <>
</body>
</html>


Drucken
Nach oben Seiten1
Benutzer-Aktionen