FTUI Layout mit Flexbox

setstate · 09 August 2016, 01:44:23

Hier möchte ich gerne nach und nach einige Beispiele für Layouts mit Flexbox anstelle von Gridster vorstellen.

Das FTUI Flexbox-Layout (nur mittels CSS Klassen realisiert) erlaubt eine bessere dynamische Anpassung an die Device-Bildschirm-Größe. Zum Beispiel können auf dem Tablet die Spalten nebeneinander dargestellt werden, aber auf dem Mobil-Phone rutschen diese einfach untereinander.

oder: Auf dem Desktop-Browser ist links ein volles Menü, auf dem Tablet ein schmales und auf dem Telefon nur ein Slideout-Menu je nach Bedarf. Alles mit nur einer Seite.

Als erstes ein Beispiel mit bunten Kacheln: Farbe fix, feste Icons, Label mit Werten von FHEM. Wenn man das Fenster auf Telefonbreite verkleinert, ändert sich die Darstellung.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.3
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * Example for a flexbox layout instead of gridster
     */
    -->
    <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 -->

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

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- 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>
<main>
<div class="hbox">
    <div class="vbox phone-width full-height">
      <div class="card bg-mint">
        <div class="hbox">
            <i class="mi-watch_later gigantic"></i>
            <div data-type="label" data-device="server" data-get="uptime" class="big">3d 7h</div>
        </div>
      </div>
      <div class="card bg-red">
          <div class="hbox">
              <i class="mi-security gigantic"></i>
              <div data-type="label" data-device="alarm" data-get="STATE" class="big">activ</div>
          </div>
      </div>
      <div class="card bg-orange">
          <div class="hbox">
              <i class="mi-radio gigantic"></i>
              <div data-type="label" data-device="radio" data-get="STATE" class="big">on</div>
          </div>
      </div>
    </div>
    <div class="vbox phone-width full-height">
        <div class="card bg-blue">
            <div class="hbox">
                <i class="mi-phone gigantic"></i>
                <div data-type="label" data-device="fritz" data-get="calls" class="big">3</div>
            </div>
        </div>
        <div class="card bg-gray">
            <div class="hbox">
                <i class="mi-wc gigantic"></i>
                <div data-type="label" data-device="wc" data-get="STATE" class="big">free</div>
            </div>
        </div>
        <div class="card bg-red">
            <div class="hbox">
                <i class="mi-signal_wifi_off gigantic"></i>
                <div data-type="label" data-device="wifi" data-get="STATE" class="big">off</div>
            </div>
        </div>
    </div>
    <div class="vbox phone-width full-height">
        <div class="card bg-gray">
            <div class="hbox">
                <i class="mi-local_gas_station gigantic"></i>
                <div data-type="label" data-device="bezin" data-get="STATE" class="big">1,27€</div>
            </div>
        </div>
        <div class="card bg-blue">
            <div class="hbox">
                <i class="mi-local_post_office gigantic"></i>
                <div data-type="label" data-device="mail" data-get="count" class="big">21</div>
            </div>
        </div>
        <div class="card bg-orange">
            <div class="hbox">
                <i class="mi-traffic gigantic"></i>
                <div data-type="label" data-device="traffic" data-get="load" class="big">low</div>
            </div>
        </div>
    </div>
    <div class="vbox phone-width full-height">
        <div class="card bg-red">
            <div class="hbox">
                <i class="mi-power gigantic"></i>
                <div data-type="label" data-device="power" data-get="today" class="big">200kWh</div>
            </div>
        </div>
        <div class="card bg-gray">
            <div class="hbox">
                <i class="mi-ac_unit gigantic"></i>
                <div data-type="label" data-device="frost" data-get="temp" class="big">-23°C</div>
            </div>
        </div>
        <div class="card bg-blue">
            <div class="hbox">
                <i class="mi-notifications gigantic"></i>
                <div data-type="label" data-device="notifications" data-get="count" class="big">0</div>
            </div>
        </div>
    </div>
</div>
</main>
</body>
</html>

Wenn man statt fester Icon das Symbol Widget nutzen will, muss dieses aber etwas gepressed werden, weil mit 2em alle Switches und Symbols sich Platz verschaffen. Dazu class="compressed" einfügen

Code Auswählen


        <div class="card bg-gray">
            <div class="hbox">
                <div data-type="symbol" data-device="dummy1" data-on-color="#fff" data-get-on="on" data-icon="mi-wc" class="compressed gigantic"></div>
                <div data-type="label" data-device="wc" data-get="STATE" class="big">free</div>
            </div>
        </div>

Christoph · 15 August 2016, 21:55:28

Ist es eigentlich machbar, eine komplette Kachel "klickbar zu machen, anstatt z.b. switch zu benutzen ?

Gruß Christoph

setstate · 15 August 2016, 22:56:00

Zitat von: Christoph am 15 August 2016, 21:55:28
Ist es eigentlich machbar, eine komplette Kachel "klickbar zu machen, anstatt z.b. switch zu benutzen ?

Gruß Christoph

Man kann das Icon als ein Symbol Widget erstellen, welches als Trigger für ein Popup fungiert.
Man hat also mit den Kacheln eine grobe Übersicht und kann auf jedes klicken, um ein Popupfenster zu bekommen. Das Popup bietet dann Stellmöglichkeiten mit Switches, Circlemenüs, Slider usw.

Code Auswählen


        <div class="card bg-gray">
            <div class="hbox">
            <div data-type="popup" data-height="200px" data-width="400px">
            <div data-type="symbol" data-device="dummy1" data-on-color="#fff" data-get-on="on" data-icon="mi-ac_unit" class="compressed gigantic"></div>
              <div class="dialog">
                      <header>DIALOG</header>
                      <div class="top-space">
                            <div class="inline">
                              <div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="&deg;C" class="bigger thin"></div>
                              <div data-type="label" class="cell">Temperatur</div>
                            </div>
                            <div class="inline">
                              <div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
                              <div data-type="label" class="cell">Luftfeuchte</div>
                            </div>
                      </div>
              </div>
            </div>
                <div data-type="label" data-device="frost" data-get="temp" class="big">-23°C</div>
            </div>
        </div>

Oder
Man reagiert auf das onclick Event und schickt ein Command an FHEM

Code Auswählen


        <div class="card bg-blue" onclick="ftui.setFhemStatus('set dummy1 off');">
            <div class="hbox">
                <i class="mi-notifications gigantic"></i>
                <div data-type="label" data-device="notifications" data-get="count" class="big">0</div>
            </div>
        </div>

setstate · 16 September 2016, 22:09:08

Mit dem Erstellen von super tollen Flexbox Demos tue ich mich gerade etwas schwer. Deshalb habe ich jetzt alles erst einmal in den Order https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/flexbox geschoben. Vielleicht hat jemand schon Verwendung dafür. Eine Docu dafür gibt es auch noch nicht ...

index_flex_demo3.html ist ganz nett geworden. Deshalb hier 2 Screeshots. Einmal auf dem Telefon -> einspaltig dargestellt / und zweitens auf einem großen Display -> zweispaltig

choetzu · 19 September 2016, 07:48:07

Hey setstate

das layout gefällt mir sehr gut. Bin nun auch Schritt für Schrtt aufbauen. Wo ich mir gestern die Zähne ausgebissen habe, ist an der anliegenden Darstellung bei "Pool". Ich bring die Werte nicht schön unter einander. Hast du mir einen Tipp?

Hier noch der Code:

Code Auswählen

      <!-- Pool -->
    <section>
    <div class="hbox items-space-between">
        <i class="fa ftui-thermo bigger icon-width main-color"></i>
     <div class="grow-7 left-align">
              <div class="bold medium">Pool</div>
        <div class="vbox left">      
        <div class="hbox items-space-between">
            <div data-type="label" data-device="PoolController" data-get="Pool" 
              		data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            <div data-type="label" data-device="PoolController" data-get="Redox" data-part="1" data-fix="0"
                 data-limits='[200,700,900]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="mV"
                 class="left-space bold"></div>
            <div data-type="label" data-device="PoolController" data-get="Chlor" data-part="1"
                 data-limits='[0,0.3,1]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="ppm"
                 class="left-space"></div>
            <div data-type="label" data-device="PoolController" data-get="Cl_consumption" data-part="1"
                 data-limits='[0,100,1300]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="ml"
                 class="left-space"></div>
            <div data-type="label" data-device="PoolController" data-get="Cl_Rest" data-part="1" data-fix="0"
                 data-limits='[0,20,101]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="%"
                 class="left-space"></div>
    	</div>  
              
        <div class="hbox items-space-between">
            <div data-type="label" data-device="PoolController" data-get="pH" 
              		data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            <div data-type="label" data-device="PoolController" data-get="pH" data-part="1"
                 data-limits='[0,6.8,7.3]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="pH"
                 class="left-space bold"></div>
            <div data-type="label" data-device="PoolController" data-get="pH-_consumption" data-part="1"
                 data-limits='[0,20,100]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="ml"
                 class="left-space"></div>
            <div data-type="label" data-device="PoolController" data-get="pH-_Rest" data-part="1" data-fix="0"
                 data-limits='[0,20,101]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="%"
                 class="left-space"></div>
    	</div> 
    	</div> 
     </div>
          	<div data-type="label" data-device="PoolController" data-get="Pool" data-part="1" data-fix="1"
                 data-limits='[0,18,28]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="°C" class="top-narrow bigger robotothin"></div>     
    </div>
    </section>

      <!-- Schlafzimmer -->
      <section>
      <div class="hbox items-space-between">
          <i class="fa ftui-thermo bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Schlafzimmer</div>
              
              <div class="hbox left items-space-between">
              	<div data-type="label" data-device="netatmo_D70_ee_50_02_92_3a" data-get="temperature" 
              		data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            	<div data-type="label" data-device="netatmo_D70_ee_50_02_92_3a" data-get="co2" data-part="2"
                 	data-limits='[0,300,800]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="ppm"
                 	class="left-space"></div>
            	<div data-type="label" data-device="netatmo_D70_ee_50_02_92_3a" data-get="humidity" data-part="2"
                 	data-limits='[0,29,90]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="%"
                 	class="left-space"></div>
            	<div data-type="label" data-device="netatmo_D70_ee_50_02_92_3a" data-get="noise" data-part="2"
                 	data-limits='[0,20,50]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="db"
                 	class="left-space"></div>
    		 </div>
          </div>
          <div data-type="label" data-device="netatmo_D70_ee_50_02_92_3a" data-get="temperature" data-part="2" data-fix="1" 
          		data-limits='[10,19,26]' data-colors='["#6699FF","#000000","#ad3333"]' data-unit="°C" class="top-narrow bigger robotothin"></div>
      </div>
      </section>

Danke!!

setstate · 19 September 2016, 08:16:48

fein fein, da hast du schon mal gute Arbeit geleistet ....

Der Platz wird gleichmässig aufgeteilt. Aber einmal durch 3 Elemente und einmal durch 4. Darum verschiebt es sich. Kannst du nicht unten auch 4 Elemente einfügen?
Dann könnte man mit class="col-1-x" versuchen die Breite fest festzulegen oder im Flexbox Stil mit class="grow-x" das Verhältniss für die Ausdehnung vorgeben.

choetzu · 19 September 2016, 16:35:45

danke setstate.. Ich habe es weder col-1-x noch mit grow-x hingekriegt. Das einzige was mir grad in den Sinn kommt, wäre vermutlich eine Tabelle zu machen. Aber dann wird wahrscheinlich das Alignment unter den sections nicht mehr so schön sein.. Hmm.. ich kämpfe weiter

Bin aber um jegliche Hilfestellung dankbar...

Tobias · 19 September 2016, 21:28:11

Hi setstate,
die neue Klasse "compressed" finde ich leider noch nicht in der Beschreibung
https://github.com/knowthelist/fhem-tablet-ui

setstate · 20 September 2016, 07:01:55

oh, das wird nicht das einzige sein

Sowas in der Richtung müsste ergnzt werden

Zitat- compressed : forces switches/symbols to a height and width of 1em instead of 2em to have less space around the icon

Pi_Newbie · 23 Oktober 2016, 10:47:00

Hallo setstate,

ich bin aktuell dabei auf Basis deinem Flex Grid und verschiedensten anderen .html Dateien meine mobile UI zu gestalten.

Ich habe aktuell folgendes großes Problem. Wenn ich z.B. im Menü den Unterpunkt "System" aufrufen möchte, wird mir meistens zuerst die Unterseite "content_eg.html" angezeigt und darunter erst die "content_system.html".

Refreshe ich mehrmals den Browser, ist es irgendwann korrekt. Weißt Du was das sein könnte?

Des Weiteren habe ich Probleme mit der index.html. Diese muss ich quasi "leer" lassen, denn wenn ich dort Inhalte platziere, werden mir diese ebenfalls immer als erstes angezeigt und darunter erst die entsprechenden Unterseiten. Eigentlich wollte ich die "index.html" als Art Dashboard definieren mit den wichtigsten Infos, aktuell aber leider nicht machbar.

Auf dem einen Bild siehst man auch wie die Dateien sich manchmal überlagern, paar mal refresh dann passt es wieder!

Bei dem 2ten Bild sieht man das obwohl "OG" ausgewählt ist, erst die Daten des "EG" zu sehen sind. Darunter folgt dann erst das "OG".

!!! Ich bin dabei die ganzen Dateien am abändern, also oft sind noch die falschen Bezeichnungen vermerkt und noch nicht die korrekten Bezeichnungen eingetragen!!!

Hier mal die content_og.html

Code Auswählen

<html>
<head>
</head>
<body>
<main class="page" id="content6">
  <div class="hbox full-height">

   <!-- +++ column 1 +++ -->
   <div class="vbox phone-width ">

      <!-- +++ HomeStatus +++ -->
      <div class="card lift ">
        <header class="bold large">Dashboard</header>
        <!-- place your widget here -->
        <div class="hbox items-space-between">
            <div class="grow-4">
                
            </div>
            
            <div data-type="pagebutton" data-url="#content_kg.html" data-load="#content4" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern="(.*#content_kg.html)" data-icon="oa-control_building_s_kg" class="big"></div>

            <div data-type="pagebutton" data-url="#content_eg.html" data-load="#content5" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern="(.*#content_eg.html)" data-icon="oa-control_building_s_eg" class="default big"></div>

            <div data-type="pagebutton" data-url="#content_og.html" data-load="#content6" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern="(.*#content_og.html)" data-icon="oa-control_building_s_og" class="big"></div>

            <div data-type="pagebutton" data-url="#content_dg.html" data-load="#content10" data-off-background-color="#444" data-off-color="#bbb" data-on-background-color="#11d597" data-on-color="#222222" data-active-pattern="(.*#content_dg.html)" data-icon="oa-control_building_s_dg" class="big"></div>

            <div data-type="symbol" data-device="AnzahlOffenerFenster" data-get='Zaehler' data-off-color="grey" data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
            data-icons='["ftui-window","ftui-window warn"]' data-on-colors='["grey","blue"]' class="col-1-6 big"></div>

        <div class="small col-1 left-align">Lärm</div>
          <div data-type="label"
                    data-device="netatmo_" 
                    data-get="noise" 
                    data-fix="0" 
                    data-unit=" dB"
                    class="medium col-2 left-align"></div>
            <div class="small col-2 left-align">|&nbsp;Luftfeuchte</div>
                    <div data-type="label"
                    data-device="netatmo" 
                    data-get="humidity" 
                    data-fix="0" 
                    data-unit="%"
                    class="medium col-2 left-align"></div>
            <div class="small col-3 left-align">|&nbsp;CO&sup2;</div>
                  <div data-type="label" 
                   data-device="netatmo" 
                   data-get="co2"
                   data-fix="0" 
                   data-unit=" ppm"
                   data-limits="[0, 600, 1000, 1180, 1800, 2250]"
                   data-colors='["green","yellowgreen","greenyellow","yellow","orange","red"]'
                   class="medium col-3 left-align"></div>
            <div class="small col-4 left-align">|&nbsp;Temp.</div>
                   <div data-type="label"
                    data-device="netatmo" 
                    data-get="temperature"
                    data-unit="°C"
                    data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]"
                    data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]'
                    class="medium col-4 right-align"></div>
        </div>
      </div>

      <div class="card lift">
      <header class="bold large">Schlafzimmer & Ankleide</header>
      <!-- Haustuerbeleuchtung -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Deckenlicht</div>
          </div>
          <div data-type="switch" data-device="Kueche.Arbeitsplatte" class="grow-2"></div>
      </div>
      <!-- Deckenlichte Kueche -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Decke</div>
          </div>
          <div data-type="switch" data-device="Kueche.Decke" class="grow-2"></div>
      </div>
      <!-- HWR -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Hauswirtschaftsraum</div>
          </div>
          <div data-type="switch" data-device="HWR" class="grow-2"></div>
      </div>
      
      <!-- Temperatur -->
      <div class="hbox items-space-between">
          <i class="fa ftui-thermo bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Temperatur</div>
              <div data-type="label"></div>
          </div>
          <div data-type="label" data-device="Kueche" data-get="state" class="big robotothin"></div>
      </div>
    
    </div>

      <!-- +++ Eingang und Flur +++ -->
      <div class="card lift">
        <header class="bold large">Bad</header>
      <!-- Tisch links -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Deckenlicht</div>
              <div data-type="label" data-device="KG" data-get="state"></div>
          </div>
          <div data-type="switch" data-device="KG" class="grow-2"></div>
      </div>
      
       <!-- Rolladen1 -->
        <div class="hbox items-space-between">
            <i class="mi mi-line_weight bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Rolladen links</div>
                <div data-type="label" data-device="ftuitest" data-get="progress" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div class="hbox">
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-down" data-background-icon="fa-square-o" data-set-on="down" class=""></div>
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-set-on="up" class=""></div>
            </div>
        </div>
        <!-- Rolladen2 -->
        <div class="hbox items-space-between">
            <i class="mi mi-line_weight bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Rolladen rechts</div>
                <div data-type="label" data-device="ftuitest" data-get="progress" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div class="hbox">
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-down" data-background-icon="fa-square-o" data-set-on="down" class=""></div>
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-set-on="up" class=""></div>
            </div>
        </div>



      </div>
    </div>

    <!-- +++ column 2 +++ -->
  <div class="vbox phone-width ">

    <!-- +++ Schlafzimmer +++ -->
    <div class="card lift">
      <header class="bold large">Gästezimmer</header>
      <!-- Tisch links -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Deckenlicht</div>
              <div data-type="label" data-device="KG.Treppen" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
          </div>
          <div data-type="switch" data-device="KG.Treppen" class="grow-2"></div>
      </div>
      <!-- Deckenlampe -->
      <div class="hbox items-space-between">
          <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Zentral AUS KG</div>
              <div data-type="label" data-device="bananlight" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
          </div>
          <div data-type="switch" data-device="bananlight" class="grow-2"></div>
      </div>
      <!-- Rolladen1 -->
      <div class="hbox items-space-between">
          <i class="mi mi-line_weight bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Rolladen links</div>
              <div data-type="label" data-device="ftuitest" data-get="progress" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
          </div>
          <div class="grow-2">
              <div class="width-narrow" data-type="push" data-device="Rollo" data-icon="fa-angle-down" data-background-icon="fa-square-o" data-set-on="down" ></div>
              <div class="width-narrow" data-type="push" data-device="Rollo" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-set-on="up" ></div>
          </div>
      </div>
      <!-- Temperatur -->
      <div class="hbox items-space-between">
          <i class="fa ftui-thermo bigger icon-width main-color"></i>
          <div class="grow-7 left-align">
              <div class="bold medium">Temperatur</div>
              <div data-type="label" data-device="SchlafzimmerHeizung_Clima" data-get="measured-temp" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
          </div>
          <div data-type="label" data-device="SchlafzimmerHeizung_Clima" data-get="measured-temp" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="&deg;C" class="bigger robotothin"></div>
      </div>
    </div>

      <!-- +++ Wohnzimmer +++ -->
      <div class="card lift">
        <header class="bold large">Wohnzimmer</header>
        <!-- Schranklampe -->
        <div class="hbox items-space-between">
            <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Schranklampe</div>
                <div data-type="label" data-device="PowerAV_Sw" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div data-type="checkbox" data-device="PowerAV_Sw" class="grow-2"></div>
        </div>
        <!-- Deckenlampe -->
        <div class="hbox items-space-between">
            <i class="fa fa-lightbulb-o bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Deckenlampe</div>
                <div data-type="label" data-device="bananlight" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div data-type="checkbox" data-device="bananlight" class="grow-2"></div>
        </div>
        <!-- Rolladen1 -->
        <div class="hbox items-space-between">
            <i class="mi mi-line_weight bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Rolladen links</div>
                <div data-type="label" data-device="ftuitest" data-get="progress" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div class="hbox">
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-down" data-background-icon="fa-square-o" data-set-on="down" class=""></div>
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-set-on="up" class=""></div>
            </div>
        </div>
        <!-- Rolladen2 -->
        <div class="hbox items-space-between">
            <i class="mi mi-line_weight bigger icon-width main-color"></i>
            <div class="grow-7 left-align">
                <div class="bold medium">Rolladen rechts</div>
                <div data-type="label" data-device="ftuitest" data-get="progress" data-substitution="toDate().hhmm()" class="timestamp left-align"></div>
            </div>
            <div class="hbox">
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-down" data-background-icon="fa-square-o" data-set-on="down" class=""></div>
                <div data-type="push" data-device="Rollo" data-icon="fa-angle-up" data-background-icon="fa-square-o" data-set-on="up" class=""></div>
            </div>
        </div>
      </div>

  

    </div>
  </div>
</main>
</body>
</html>

Und hier die index.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.2
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * Example for a flexbox layout instead of gridster
     */
    -->
    <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="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Cache-Control" content="no-store" />

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

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
        <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
        <!--link rel="stylesheet" href="css/fhem-mobil-ui.css" /-->

    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
    <script src="/fhem/www/tablet/js/fhem-tablet-ui.js" defer></script>
    <link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css">

    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <main id="content1">
        <nav class="menu">
        <div class="menu-trigger"></div>
        <header class="">Menu</header>
        <ul>
    <li>
        <div data-type="link" data-url="#index_flex_demo2.html"
        data-color="white"
        data-width="115"
        data-load="#content2"
        data-text-align="left"
        data-active-pattern="(.*/||.*#index_flex_demo2.html)"
        data-icon="fa-home" class=" large"><span>Dashboard</span></div>
    </li>
    <li>
        <div data-type="link" data-url="#index_flex_demo2.html"
        data-color="white"
        data-width="115"
        data-load="#content2"
        data-text-align="left"
        data-active-pattern=".*#index_flex_demo2.html"
        data-icon="fa-music" class=" large"><span>Customers</span></div>

    </li>
    <li>
        <div data-type="link" data-url="#flex_demo_footer.html"
        data-load="#demo-footer"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#flex_demo_footer.html"
        data-icon="fa-sliders" class="large"><span>Users</span></div>

    </li>
    <li>
        <div data-type="link" data-url="#index_flex_demo3.html"
        data-load="#content3"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#index_flex_demo3.html" data-icon="fa-lightbulb-o" class="large">
        <span>Settings</span>
        </div>
    </li>
    <li>
        <div data-type="link" data-url="#content_kg.html"
        data-load="#content4"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#content_kg.html" data-icon="fa-lightbulb-o" class="large">
        <span>Settings</span>
        </div>
    </li>
    <li>
        <div data-type="link" data-url="#content_eg.html"
        data-load="#content5"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#content_kg.html" data-icon="fa-lightbulb-o" class="large">
        <span>EG</span>
        </div>
    </li>
    <li>
        <div data-type="link" data-url="#content_wetter.html"
        data-load="#content88"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#content_wetter.html" data-icon="fa-sun-o" class="large">
        <span>Wetter</span>
        </div>
    </li>
    <li>
        <div data-type="link" data-url="#content_system.html"
        data-load="#content99"
        data-color="white"
        data-width="115"
        data-text-align="left"
        data-active-pattern=".*#content_system.html" data-icon="fa-cogs" class="large">
        <span>System</span>
        </div>
    </li>
  </ul>
</nav>
<main>
    <div class="page" id="content1"></div>
    <div class="page" id="content2"></div>
    <div class="page" id="demo-footer"></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>
    <div class="page" id="content99"></div>
</main>

</body>
</html>

Kann mir hier jemand weiterhelfen?

Besten Dank an alle und viele Grüße!

JoeALLb · 30 November 2016, 16:54:00

Zitat von: Pi_Newbie am 23 Oktober 2016, 10:47:00
Ich habe aktuell folgendes großes Problem. Wenn ich z.B. im Menü den Unterpunkt "System" aufrufen möchte, wird mir meistens zuerst die Unterseite "content_eg.html" angezeigt und darunter erst die "content_system.html".

Hast Du das gelöst? Konnte ich beim Test auch feststellen... gerne würde ich hier etwas weitertesten...

Pi_Newbie · 01 Dezember 2016, 08:14:53

Nein, ich habe das bisher leider nicht lösen können. Ich weiß auch wirklich nicht woran es liegen könnte.

JoeALLb · 01 Dezember 2016, 08:23:56

Nutzt Du es noch? dann sollten wir versuchen, das gemeinsam hinzubekommen...
Ich habe eine Version, wo es funktioniert, und eine, wo es nicht funktioniert... ich finde den relevanten Unterschied aber noch nicht

setstate · 01 Dezember 2016, 08:32:50

Es kann auch durchaus sein, dass von meiner Seite noch nicht alles 100pro ist. Das müsste ich erst einmal checken. Ich bin aber gerade an einem allumfassenden Code cleanup dran und dadurch bleibt für aktive Support gerade wenig Zeit.

TWART016 · 24 Dezember 2016, 14:49:40

Ich bin gerade dabei eine Flexbox Seiten fürs Smartphone mit Slideout zu basteln. Sobald ich jedoch hbox oder vbox verwende wird nichts mehr angezeigt.

Mit section werden die Daten korrekt angezeigt. Darin geht bei mir auch kein Flexbox.

Hast du Demoseiten mit Slideout index und Unterseiten?