FTUI Layout mit Flexbox

Willkommen im Forum „FHEM Forum“.
Einloggen
Registrieren

24 April 2024, 09:08:14

Hauptmenü

FTUI Layout mit Flexbox

Begonnen von setstate, 09 August 2016, 01:44:23

Vorheriges Thema - Nächstes Thema

Drucken

Nach unten Seiten1 2 3 4 Alle

Benutzer-Aktionen

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

FTUI Layout mit Flexbox

09 August 2016, 01:44:23 Letzte Bearbeitung: 12 August 2016, 23:10:04 von setstate

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>

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

Christoph

Full Member
Beiträge: 197
Gespeichert

Antw:FTUI Layout mit Flexbox

#1

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

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#2

15 August 2016, 22:56:00 Letzte Bearbeitung: 15 August 2016, 23:09:44 von setstate

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>

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#3

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

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

choetzu

Hero Member
Beiträge: 1.255
Gespeichert

Antw:FTUI Layout mit Flexbox

#4

19 September 2016, 07:48:07 Letzte Bearbeitung: 19 September 2016, 07:50:33 von choetzu

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!!

Raspi3, EnOcean, Zwave, Homematic

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#5

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.

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

choetzu

Hero Member
Beiträge: 1.255
Gespeichert

Antw:FTUI Layout mit Flexbox

#6

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...

Raspi3, EnOcean, Zwave, Homematic

Tobias

Developer
Hero Member
Beiträge: 4.115
Gespeichert

Antw:FTUI Layout mit Flexbox

#7

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

Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#8

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

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

Pi_Newbie

Jr. Member
Beiträge: 61
Gespeichert

Antw:FTUI Layout mit Flexbox

#9

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!

Pi3 mit Jessie lite, KNX-Installation

JoeALLb

Hero Member
Beiträge: 1.617
Gespeichert

Antw:FTUI Layout mit Flexbox

#10

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...

FHEM-Server auf IntelAtom+Debian (8.1 Watt), KNX,
RasPi-2 Sonos-FHEM per FHEM2FHEM,RasPi-3 Versuchs-RasPi für WLAN-Tests
Gateways: DuoFern Stick, CUL866 PCA301, CUL HM, HMLan, JeeLink, LaCrosse,VCO2
Synology. Ardurino UNO für 1-Wire Tests, FB7270

Pi_Newbie

Jr. Member
Beiträge: 61
Gespeichert

Antw:FTUI Layout mit Flexbox

#11

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.

Pi3 mit Jessie lite, KNX-Installation

JoeALLb

Hero Member
Beiträge: 1.617
Gespeichert

Antw:FTUI Layout mit Flexbox

#12

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

FHEM-Server auf IntelAtom+Debian (8.1 Watt), KNX,
RasPi-2 Sonos-FHEM per FHEM2FHEM,RasPi-3 Versuchs-RasPi für WLAN-Tests
Gateways: DuoFern Stick, CUL866 PCA301, CUL HM, HMLan, JeeLink, LaCrosse,VCO2
Synology. Ardurino UNO für 1-Wire Tests, FB7270

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#13

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.

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

TWART016

Hero Member
Beiträge: 1.187
Gespeichert

Antw:FTUI Layout mit Flexbox

#14

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?

kud

Full Member
Beiträge: 499
Gespeichert

Antw:FTUI Layout mit Flexbox

#15

29 Dezember 2016, 15:27:04

Hallöchen,
bin gerade in einer Umsetzung mit FLEXBOX. Finde ich recht cool, da mit einer Datei, bei richtigen Einsatz, sowohl der Desktop als auch Tablet und Handy bedient werden.
Wollte jetzt so eine Art Statuszeile über die beiden Spalten bringen. Darin sollten x beliebige Readings nebeneinander auftauchen.
Habe schon alles mögliche probiert leider keinen durchgehenden Erfolg. Bei einer "hbox" stehen zwar die Werte nebeneinander jedoch ist dann der Abstand nach unten zu groß.
Wer kann da helfen?

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#16

29 Dezember 2016, 15:33:09

ich würde eine hbox nehmen und mit style="height:120px;" die Höhe fixieren

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

kud

Full Member
Beiträge: 499
Gespeichert

Antw:FTUI Layout mit Flexbox

#17

29 Dezember 2016, 17:37:13

Danke setstate für Antwort und natürlich die tolle Möglichkeit FHEM aufzuhübschen.
Mein Code (falls ich das richtig verstanden habe) ist:

Code Auswählen

 <div class="hbox  style="height:120px" >
                        
                            <div data-type="label" data-device="CUL_WS_5" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="large thin"></div>
                            <div data-type="label" class="cell">Temperatur</div>
                            <div data-type="label" data-device="CUL_WS_5" data-fix="0" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="large thin"></div>
                            <div data-type="label" class="cell">Luftfeuchte</div>
			 </div>

Der Abstand zu den Spalten darunter ist aber immer noch riesig.
BTW. Woher bekomme ich die Infos zu "HBOX" ? Ist das Flexbox / CSS oder Deine Implementierung?

Danke.

kud

Full Member
Beiträge: 499
Gespeichert

Antw:FTUI Layout mit Flexbox

#18

30 Dezember 2016, 11:06:24

Das oben war ne dumme Frage.
Man sollte ein wenig über css/html/inline style lesen

Für alle die es interessiert. So klappt es:

Code Auswählen

 <div style="height: 5%;" class="hbox" >
                        
                            <div data-type="label" data-device="CUL_WS_5" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="large thin"></div>
                            <div data-type="label" class="cell">Temperatur</div>
                            <div data-type="label" data-device="CUL_WS_5" data-fix="0" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="large thin"></div>
                            <div data-type="label" class="cell">Luftfeuchte</div>
						
 			 </div>

Tobias

Developer
Hero Member
Beiträge: 4.115
Gespeichert

Antw:FTUI Layout mit Flexbox

#19

04 Januar 2017, 11:42:27 Letzte Bearbeitung: 04 Januar 2017, 11:44:41 von Tobias

hi,
ich habe probleme mit der full-height Angabe in einem Swiper. Der Swiper umfasst die komplette Seite.
Problem ist, das ich nichts sehe. Gebe ich stattdessen "data-height="740px"" an, so wird alles korrekt dargestellt. Übrigens, bei "data-height="100%"" wird auch nix gezeigt
Hier mein Code:

Code Auswählen

<html>
<title>FHEM Home</title>
<head>
</head>

<body>
    <div class="page" id="musik">
      <div data-type="swiper" data-width="100%" class="full-height" >
        <ul>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="8" data-sizey="6">
                  <header>Wohnzimmer</header>
                  <div data-template="template_musik_sonos.html"></div>
                </li>
              <ul>
            </div>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="8" data-sizey="6">
                  <header>MPD Player</header>
                  <div data-template="template_musik_mpd.html"
                     data-parameter='{"par_device":"MPD",
                                      "par_SC_dev":"WW_EG_Kueche",
                                      "par_SC_color":"Farbwert_Gruppe1",
                                      "par_RL_auto":"RL_EG_Auto"}'>
                  </div>
                <li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
</body>
</html>

Benutze ich full-height falsch?
Ps: mit data-width="100%" funktioniert es dagegen

Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

kud

Full Member
Beiträge: 499
Gespeichert

Antw:FTUI Layout mit Flexbox

#20

04 Januar 2017, 12:31:40

Hat das jetzt was mit FLEXBOX zu tun ?

Tobias

Developer
Hero Member
Beiträge: 4.115
Gespeichert

Antw:FTUI Layout mit Flexbox

#21

04 Januar 2017, 12:36:42

die Klasse "full-height" gehört zur Flexbox, siehe GitHub Readme

Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#22

02 Februar 2017, 13:41:00

Hallo,

gibt es irgendwo ein Doku zu Flexbox?

vg

Marc-Antón

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#23

09 Februar 2017, 19:04:22

Scheinbar wohl nicht.

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#24

09 Februar 2017, 19:27:06

Nö, iss wirklich nix noch da.

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

schmimat

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#25

13 Februar 2017, 15:46:33

Hallo,

seit dem Update auf 2.5 (bzw. 2.6) wird im Flexbox Layout mit Menu-Steuerung die "page" nicht mehr neben dem Menu angezeigt.
Habe auch die Beispiele ausprobiert, gleiches Problem

Woran könnte es liegen ?

Vielen Dak für Eure Hilfe.

mfG Matthias

Rudy

Jr. Member
Beiträge: 77
Gespeichert

Antw:FTUI Layout mit Flexbox

#26

13 Februar 2017, 18:22:07

Da gibt es wohl ein Problem mit der CSS-Klasse:

Code Auswählen

div:not(.circlemenu-wrapper) > .menu {
    background: #1D1F20;
    height: 100vh;
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

Nachdem ich bisherige Variante

Code Auswählen

:not([data-type="circlemenu"]) > .menu {
    background: #1D1F20;
    height: 100vh;
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

in meine user.css-Datei eingefügt hatte, ging es wieder.

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#27

14 Februar 2017, 00:03:20

Danke Rudy für die entscheidenden Hinweise. Problem ist gefixed

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

schmimat

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#28

14 Februar 2017, 09:02:43

Hallo und guten Morgen,

vielen Dank für die schnelle Hilfe und die Berichtigung.

Ich hoffe ich nerve nicht, aber ich hab schon wieder was gefunden.

Beim Ändern der Größe des Browsers von 901 auf 900 werden zwar die Beschriftungen der Icons (span) ausgeblendet und die aktive Page verschoben, jedoch nicht das Menu selbst kleiner gemacht.
(siehe Bilder des Beispiels)

Wo liegt hier das Problem?

Sollen eigentlich diese Probleme hier gemeldet werden, oder besser im git?

Vielen Dank für eure Bemühungen und ein großes Lob an setstate.

mfG Matthias

Rudy

Jr. Member
Beiträge: 77
Gespeichert

Antw:FTUI Layout mit Flexbox

#29

14 Februar 2017, 17:37:49

Dagegen hilft folgender Eintrag in deinem eigenen css:

Code Auswählen

@media screen and (max-width: 900px) and (min-width: 480px) {
    :not([data-type="circlemenu"]) > .menu {
    width: 90px;
    }
}

dancatt

Sr. Member
Beiträge: 553
Gespeichert

Antw:FTUI Layout mit Flexbox

#30

03 März 2017, 11:19:31

Hallo zusammen,

ich habe eine Frage zum ersten Post hier im Thread.

Ich möchte gerne dass mein Menü so aussieht wie aus dem ersten Post. Das heißt jeder Menüeintrag entspricht einer Kachel. Diese Seite soll dann der Startseite entsprechen. Jede Kachel hat eventuell noch mal eine kleine Info zusätzlich. Beim Klick auf eine Kachel wird die entsprechende neue Seite geladen und alle Kacheln werden dann horizontal oben dargestellt (2017-03-03 11_06_41-FHEM-Tablet-UI.png). Funktionieren tut das alles mit einer Realisierung mit pagebutton, aber dann muss ich auf jeder Seite leider den kompletten <head> einbinden.

Besser funktioniert es, wenn ich in der index.html eigentlich alles zusätzlich im Element <nav> einbinde und unterhalb des Elements <main> entsprechend die container lade:

Code Auswählen

<main>
<nav class="menu">
  <ul>
    <li>
      <div data-type="pagebutton" data-on-color="orange" class="bigger"
           data-url="#home.html" data-load="#home" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home"></div>
    </li>
    <li>
      <div data-type="pagebutton"  data-on-color="orange" class="bigger"
           data-url="#heizung.html" data-load="#heizung" data-active-pattern="(.*/||.*#heizung.html)" data-icon="oa-sani_heating"></div>
    </li>
     <li>
      <div data-type="pagebutton" data-on-color="orange" class="bigger"
           data-url="#umwelt.html" data-load="#umwelt" data-active-pattern="(.*/||.*#umwelt.html)" data-icon="fa-cloud"></div>
    </li>
  </ul> 
</nav>

  <div class="page" id="home"></div>
  <div class="page" id="heizung"></div>
  <div class="page" id="umwelt"></div>
</main>

aber dann sehe ich natürlich links das Menü was ich ja nicht möchte (2017-03-03 11_10_17-FHEM-Tablet-UI.png). Zusätzlich dazu werden alle Seiten untereinander dargestellt, erst home, dann heizung und dann umwelt.

Wie kann ich das denn am geschicktesten realisieren dass das Menü auf der Startseite in Form von Kacheln dargestellt wird?

Vielen Dank.

Gruß Daniel

Cubietruck: FHEM-Server 6.0

Homematic: HM-USB-CFG2, HM-CFG-LAN, HM-LC-SW1-FM, HM-LC-Sw1-Pl-DN-R1, HM-CC-RT-DN, HM-TC-IT-WM-W-EU, HM-SEC-SC-2, HM-SEC-SD, HM-PB-6-WM55

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#31

28 Juni 2017, 21:20:55

Hallo setstate,

du schreibst ganz oben folgendes.

Zitat von: setstate am 09 August 2016, 01:44:23
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.

Ich arbeite schon eine ganze Weile mit dem Flexboxlayout. Funktioniert bei mir bis auf div. Kleinigkeiten in Verbindung mit data-template alles prima. Nun bin ich nochmal das Thema Menü angegangen und habe die oben stehende Aussage gefunden. Bei mir wird das Menü derzeit, egal auf welchem Screen, immer als Slideoutmenü angezeigt. Wie muss ich das Menü schreiben, damit es wie von dir beschrieben auf den jeweiligen Screen reagiert?

Anbei ein paar Bilder wie es im Moment aussieht.

Danke Dir schon mal!

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#32

29 Juni 2017, 13:06:51

Das ist vom jeweiligen Gerät abhängig. Die Min und Max Breite für die jeweiligen Modi sind im CSS fest definiert. Im Firefox Menü unter EntwicklerTools gibt es Bildschirmgröße testen. Da kann man das testen.

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#33

29 Juni 2017, 19:57:12

Habe das schon getestet. Jedoch kommt, egal bei welcher Auflösung immer das selbe Menü. Anbei mal meine Index.html. Vielleicht habe ich dort ja schon was falsch gemacht?

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<!-- FHEM Tablet UI V2.6 -->

    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>Smart Home</title>

	<meta name="viewport" content="width=device-width, initial-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='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>

	<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name='toast' content='0'>

    <!-- define your personal style here, it wont be overwritten  -->
 
	<style>
		#header-nav {
			height: 40px;
			width: 100%;
			top: 0;
			left: 0;
			-webkit-box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
			-moz-box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
			box-shadow: 0px 3px 5px rgba(150, 150, 150, 0.49);
		}
		
		header.fixed#header-nav + main#panel {
			margin-top: 45px;
		}
		
		main#panel.slideout-panel {
			display: block;
			position: absolute;
			height: auto;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
		}	
	</style>

	<script src="js/fhem-tablet-ui.js" defer></script>
</head>

<body>
    <nav id="menu">
        <div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content0"
           data-url="#cont_main.html"
           data-active-color="blue"
           data-active-pattern="(.*index.html|.*#cont_main.html)">Start</div>
        <div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content1"
           data-url="#cont_thermo.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_thermo.html)">Heizung</div>
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content2"
           data-url="#cont_weather.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_weather.html)">Umgebung</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content3"
           data-url="#cont_light.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_light.html)">Licht und Schalter</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content4"
           data-url="#cont_doors.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_doors.html)">T&uuml;ren und Fenster</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content5"
           data-url="#cont_blinds.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_blinds.html)">Jalousien</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content6"
           data-url="#cont_smoke.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_smoke.html)">Rauchmelder</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content7"
           data-url="#cont_cam.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_cam.html)">&Uuml;berwachung</div> 
		<div data-type="link" class="large top-space left-space-2x"
           data-width="150"
           data-color="white"
           data-text-align="left"
           data-load="div#content8"
           data-url="#cont_test.html"
           data-active-color="blue"
           data-active-pattern="(.*#cont_test.html)">Test</div> 
	</nav>

	<header id="header-nav" class="big bg-gray fixed row">
		<div data-type="slideout" data-position="left" data-icon-color="white" class="cell-10 notouch"></div>
		<div id="linkname" class="cell left-align"></div>
	</header>

	<main id="panel" class="">
		<div class="page" id="content0"></div>    
		<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>   
		<div class="page" id="content7"></div> 
		<div class="page" id="content8"></div>
	</main>
</body>

</html>

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#34

29 Juni 2017, 22:12:53

Hallo setstate,

ich habe das mit dem responsive Menü jetzt soweit hinbekommen. Der Fehler lag im Menü meiner index.html (siehe meine letzte Antwort)

Das responsive Menü reagiert jetzt korrekt bei Bildschirmbreite unter 480px (kleines "Slideout-Menü") und bei größer 900px (breites Menü 180px mit Symbol und Schrift am linken Fensterrand. Probleme hat das responsive Menü bei einer Breite zwischen 480px und 900px. Hier bleibt das Menü am linken Rand und es wird nur noch das Symbol ohne Text angezeigt. (soweit wie erwartet) Jedoch wird bei mir das Menü selbst nicht schmaler, obwohl es laut fhem-tablet-ui.css auf 90px runter gehen müsste. Somit überdeckt das (ungewollt) den Content, da der auf "padding-left: 90px" ausgerichtet wird.

Kannst du dir das bitte mal in der fhem-tablet-ui.css ansehen. Ich vermute hier einen Fehler, da index_flex_demo_menu.html genau dasselbe Verhalten aufweist.

Danke Dir schon mal!

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#35

29 Juni 2017, 22:22:38

Fehler in der fhem-tablet-ui.css gefunden

Zeile 833-835
statt:

Code Auswählen


   .menu {
        width: 90px;
    }

geht es mit:

Code Auswählen


   .menu {
        width: 90px !important;
    }

Quant

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#36

30 Juni 2017, 16:07:53 Letzte Bearbeitung: 30 Juni 2017, 16:24:07 von ~Thomas

@jemu75 Kannst Du Deine korrigierte index.html hier nochmal zur Verfügung stellen - und vielleicht auch beispielhaft eine eingebundene Content-Seite?

Danke!

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#37

30 Juni 2017, 21:58:24

Hallo,

anbei der aktuelle Arbeitsstand. Ich habe vorerst mal in der test.html unter <style>...</style> den vermeintlichen Bug korrigiert. Der Part kann später sicher wieder raus, falls setsate das ebenso sieht

test.html

Code Auswählen


<!DOCTYPE html>
<html>

<head>
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	
    <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="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <script src="js/fhem-tablet-ui.js" defer></script>

	<style>
	@media screen and (max-width: 900px) and (min-width: 480px) {
		.menu {
			width: 90px !important;
		}
	}
	</style>
	
    <title>FHEM-Tablet-UI</title>
</head>

<body>
	<nav class="menu">
		<div class="menu-trigger"></div>
		<header class="">Menu</header>
        <ul>
			<li>
				<div data-type="link" data-url="#cont_test.html"
				data-color="white"
				data-width="115"
				data-load="#content1"
				data-text-align="left"
				data-active-pattern="(.*test.html|.*#cont_test.html)"
				data-icon="fa-home" class="large"><span>Heizung</span></div>
			</li>
			<li>
				<div data-type="link" data-url="#cont_test1.html"
				data-color="white"
				data-width="115"
				data-load="#content2"
				data-text-align="left"
				data-active-pattern="(.*#cont_test1.html)"
				data-icon="mi-lightbulb_outline" class="large"><span>Licht</span></div>
			</li>
			<li>
				<div data-type="link" data-url="#cont_test2.html"
				data-color="white"
				data-width="115"
				data-load="#content3"
				data-text-align="left"
				data-active-pattern=".*(#cont_test2.html)"
				data-icon="fa-align-justify" class="large"><span>Jalousien</span></div>
			</li>
		</ul>
	</nav>
 	
	<main>
		<div class="page" id="content1"></div>
		<div class="page" id="content2"></div>
		<div class="page" id="content3"></div>
	</main>
</body>
</html>

cont_test.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content1">
		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxxx","var_temp_day":"22.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
				
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>

				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
			</div>

			<div class="vbox phone-width">
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"22.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
				
				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>

				<div class="card">
					<header>Standard Box 10</header>
					<div data-template="widget_HM-thermo_test.html" data-parameter='{"var_device1":"HM_xxxxx","var_temp_day":"21.0","var_temp_night":"17.0","var_device2":"HM_xxxxx_xx_xx"}'></div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

widget_HM_thermo_test.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Widget für Homematic Funk Wandthermostat HM-TC-IT-WM-W-EU -->
</head>
<body>
		<div class="row">
			<div class="cell">
				<div data-type="symbol" data-device="var_device2" data-states='["off","on"]' data-colors='["blue","red"]'  data-icon="fa-thermometer-3" class="big"></div>
			</div>
			<div class="cell-50 left-align">
				<div data-type="label" data-device="var_device1_Climate" data-get="measured-temp" data-unit="&deg;C" class="bigger thin inline"></div>
				<div data-type="label" data-device="var_device1_Climate" data-get="humidity" data-unit="%" class="bigger thin inline"></div>
			</div>
			<div class="cell">
				<div data-type="symbol" data-device="var_device1" data-get="desired-temp" data-states='["var_temp_night","var_temp_day"]' data-icons='["fa-moon-o","mi-wb_sunny"]' data-colors='["grey","blue"]' class="small newline"></div>
				<div data-type="label" data-device="var_device1" data-get="desired-temp" data-unit="&deg;C" class="small newline"></div>
			</div>
			<div class="cell right-space">
				<div data-type="checkbox" data-device="var_device1_Climate" data-get="desired-temp" data-set="desired-temp" data-get-on="var_temp_day" data-get-off="var_temp_night" data-set-on="var_temp_day" data-set-off="var_temp_night" class="blue"></div>
			</div>
		</div>
</body>
</html>

till24

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#38

10 August 2017, 11:57:19

Hallo zusammen,

ich habe für mehrere Räume ca. 5 Messwerte. Jeden Raum habe ich in eine Card "gepackt". Auf dem Handy werden die einzelnen Räume (quasi Kästen) untereinander angezeigt. Soweit alles gut. Nun würde ich gerne folgendes realisieren:
Es sollen immer nur 2 der 5 Werte angezeigt werden, so dass die "Liste" kürzer wird und ich auf dem Handy alle Räume auf dem Display sehe, ohne scrollen zu müssen. Nun möchte ich per Klick (zum Beispiel auf den head-Bereich oder auf ein Symbol) die restlichen Werte "ausklappen", also den Kasten wieder auf volle Größe bringen. Ist so etwas möglich?

Vielen Dank schonmal!

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#39

27 August 2017, 15:47:23

Mal noch ein anderes Problem, ich versuche mich gerade am Flexlayout, bekomme da aber einen Rotor nicht richtig eingebunden.

So sieht's aus:

Code Auswählen


<div class="vbox">
    <div class="hbox phone-width">

<div class="card">....</div>

 <div class="card">
        <header class="lightblue">Wind/Druck</header>
        <!------------->
        <!--- Wind ---->
        <!------------->
            
        <div data-type="rotor" class="fade">
         <ul>
           <li>
             <div data-type="wind_direction" 
                 data-device="Wetter" 
                 data-direction="wind_direction" 
                 data-speed="wind_speed" 
                 data-size="70"
                 class="cell top-space">
             </div>    
             <div data-type="symbol" 
                    data-device="Wetter" 
                    data-get="wind" 
                    data-icon="oa-weather_wind" 
                    data-on-color="lightblue"
                    data-off-color="lightblue"
                    class="inline">
             </div>
             <div data-type="label" 
                    data-device="Wetter" 
                    data-get="wind_speed" 
                    data-unit=" km/h"
                    class="inline">
             </div>
          </li>
          <li>
            <div data-type="knob"
                 data-device="wu_weather"
                 data-get="pressure"
                 data-min="900"
                 data-max="1080"
                 data-unit="hPa"
                 data-fgcolor="lightblue"
                 class="small readonly top-space">
            </div>
            <div data-type="label"
                 data-device="wu_weather"
                 data-pre-text="Trend "
                 data-get="pressure_trend"
                 class="top-narrow">
            </div>
           </li>     
          </ul>
     <div class="card">....</div>
     <div class="card">....</div>
         </div>    
      </div>
<div class="card">....</div>
<div class="card">....</div>

Die Box ist dann irgendwie verschoben (siehe Bild)

Ich nehme an es hat was mit den <ul><li> Tags zu tun.

Oder mache ich da was falsch?

gm

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#40

29 August 2017, 20:08:24

Keiner ne Idee?

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

devil77

Full Member
Beiträge: 393
Gespeichert

Antw:FTUI Layout mit Flexbox

#41

30 August 2017, 08:41:59 Letzte Bearbeitung: 30 August 2017, 08:43:54 von devil77

Hallo, womit berabeitest Du deine hmtl und css Dateien? Probier mal das ganze mit notepad++ zu machen. Das kannst Du ganz schnell sehen
wo deine div, ul, li... Blöcke anfangen und enden.

So wie es aussieht ist der div nicht richtig definiert, da er scheinbar noch zwei andere mit einschließt.

Code Auswählen


<div class="card">  ------------> Anfang DIV
        <header class="lightblue">Wind/Druck</header>
        ......       
     <div class="card">....</div>
     <div class="card">....</div>
         </div> ----------------> Ende DIV

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#42

30 August 2017, 22:12:25

Danke für Deine Antwort.

ZitatHallo, womit berabeitest Du deine hmtl und css Dateien?

Mit Brackets, der zeigt die Verschachtelungen an, notepad++ läuft auf meinem Mac nicht.

Kann sein, daß ich nicht alles kopiert habe um es übersichtlich zu halten, ein fehlendes </div> scheint nicht das Problem zu sein.

Ich versuche es noch einmal etwas übersichtlicher, es gibt noch mehr "cards", ich habe jetzt nur mal die rausgezogen um die es geht.

Zitat

<main id="home">
<div class="vbox">
<div class="hbox phone-width">
<div class="card">
<header class="lightblue">Wind/Druck</header>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="wind_direction"
data-device="Wetter"
data-direction="wind_direction"
data-speed="wind_speed"
data-size="70"
class="cell top-space">
</div>
<div data-type="symbol"
data-device="Wetter"
data-get="wind"
data-icon="oa-weather_wind"
data-on-color="lightblue"
data-off-color="lightblue"
class="inline">
</div>
<div data-type="label"
data-device="Wetter"
data-get="wind_speed"
data-unit=" km/h"
class="inline">
</div>
</li>
<li>
<div data-type="knob"
data-device="wu_weather"
data-get="pressure"
data-min="900"
data-max="1080"
data-unit="hPa"
data-fgcolor="lightblue"
class="small readonly top-space">
</div>
<div data-type="label"
data-device="wu_weather"
data-pre-text="Trend "
data-get="pressure_trend"
class="top-narrow">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Jetzt müßte es stimmen und damit gibt es das oben gezeigte Bild.

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#43

30 August 2017, 22:42:19

Ich würde jeder Card eine feste Höhe geben

Code Auswählen

<div class="card" style="height:200px">

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

grossmaggul

Sr. Member
Beiträge: 722
Gespeichert

Antw:FTUI Layout mit Flexbox

#44

31 August 2017, 00:34:28

Danke, jetzt klappt's!

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE, 2 x Gosund SP1

ErzGabriel

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#45

01 September 2017, 09:29:19

Hallo.
Ich bin bis jetzt auf der Suche nach einer Dokumentation für Flexbox Layout. Sprich, wo die ganzen ClASS Einstellungen beschrieben sind und sowas.
Aber ich bin nicht fündig geworden. Kann mir bitte jemand mal nen Link hier posten.
Danke.

sku

Full Member
Beiträge: 103
Gespeichert

Antw:FTUI Layout mit Flexbox

#46

06 September 2017, 21:43:50

hallo,

hilft dir der wiki eintrag weiter?
https://wiki.fhem.de/wiki/FTUI_Layout_Flex

ErzGabriel

Gast
Gespeichert

Antw:FTUI Layout mit Flexbox

#47

07 September 2017, 04:53:05

Nicht wirklich, weil da keine vernünftige Beschreibung der Klassen drin steht. Entweder ist es sehr oberflöchlich beschrieben oder gar nicht.

jemu75

Developer
Hero Member
Beiträge: 1.070
Gespeichert

Antw:FTUI Layout mit Flexbox

#48

07 September 2017, 09:43:41

Möglicher Weise liefert folgendes noch ein paar Infos. Ist zwar keine Erklärung von Grund auf, aber ein Beispiel was zeigt, wie man in der Praxis damit arbeiten kann.

[url]https://forum.fhem.de/index.php?topic=76306.0[url]

moonsorrox

Hero Member
Beiträge: 4.124
Online
Gespeichert

Antw:FTUI Layout mit Flexbox

#49

14 September 2017, 14:48:59

Ich tue mich mit der Flexbox Darstellung gerade etwas schwer ich möchte gern so wie es auf der 1. Seite in diesem Beitrag dargestellt wurde eine Übersichts Seite erstellen mit allen wichtigen Meldungen.
Dort hat es ja 4 Felder, diese möchte ich gern erweitern, oder besser gesagt auf mehr Felder erweitern eben angepaßt an meine Bedürfnisse z.B. breitere Felder, höhere Felder für die entsprechenden Informationen.
Ist das möglich..?

Da ich die Anzeige nur auf 3 Tablets (kein Handy) darstellen möchte könnte ich es dafür anpassen.
Wie es dann auf einem Handy aussieht ist mir erst einmal egal, da ich es bisher nicht nutze.!

Der Rest der Zimmer, Geräte usw. sollte dann über eine Menüleiste (oben, unten oder seitlich und einklappbar) erreichbar sein. Hat das jemand schon einmal umgesetzt..?
Ich habe unzählige Versuche aber es artet immer mit zusätzlichem css und Abstandhalter aus und nun war das Update und ich habe echt keine Lust das wieder alles anzupassen, da alles verschoben ist ist und senkrechte Linien fehlen $:-\$
Soll also heißen mit den gegeben css hier für Flexbox sollte es machbar sein...

Ein Beispiel auf welches ich aufbauen könnte wäre toll

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

ulli

Sr. Member
Beiträge: 616
Gespeichert

Antw:FTUI Layout mit Flexbox

#50

13 Januar 2018, 11:16:15

Hallo zusammen,
ich habe das tolle design vom choetzu übernommen für meine Raumklimadarstellung.
Jetzt würde ich aber gerne die einzelnen sections (zeilen) abwelchseln mit unterschiedlichen Hintergrundfarben über css einstellen.
Weiß wer wie das geht?
Über google habe ich schon was mit nth-of-type(even) gelesen. Ich weiß aber nicht wie ich das für die sections anwende.
hat wer einen Tip?

Zitat von: choetzu am 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 Erweitern
 <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>  <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!!

ulli

Sr. Member
Beiträge: 616
Gespeichert

Antw:FTUI Layout mit Flexbox

#51

13 Januar 2018, 11:40:08

habs doch noch heraus gefunden

.card, section:nth-child(even) {
background-color: #f2f2f2;
}

tunguskar

New Member
Beiträge: 38
Gespeichert

Antw:FTUI Layout mit Flexbox

#52

06 Dezember 2018, 21:32:17

Gibt es eigentlich auch die Möglichkeit bei einer card die Möglichkeit, Abhängig von dem Status eines FHEM Device die Hintergrundfarbe zu ändern. Konkret Will ich z.B. wenn noch ein Licht im OG brennt über eine den Hintergrund orange machen, wenn alle aus sind grün. In FHEM liegt dann eine Struktur aller Lichter im OG

Code Auswählen

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

Ulm32b

Full Member
Beiträge: 395
Gespeichert

Antw:FTUI Layout mit Flexbox

#53

06 Dezember 2018, 21:53:23

Zitat von: tunguskar am 06 Dezember 2018, 21:32:17
Gibt es eigentlich auch die Möglichkeit bei einer card die Möglichkeit, Abhängig von dem Status eines FHEM Device die Hintergrundfarbe zu ändern.

Könnte mit https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger klappen.

setstate

Hero Member
Beiträge: 4.388
FHEM TabletUI
Gespeichert

Antw:FTUI Layout mit Flexbox

#54

06 Dezember 2018, 21:57:36

ich nutze so etwas

Code Auswählen


<div class="display" data-type="html" data-class="AlleFenster:STATE" data-map-class='{"closed":"bg-green", ".*":"bg-red"}'>
    <div class="display-topcenter top-space"><div class="big">Fenster</div></div>
    <div class="display-center fa fa-4x ftui-window"></div>
    <div class="display-bottomleft bottom-space left-space" data-type="label" 
         data-substitution='["alle Fenster sind geschlossen.","alles geschlossen","Kinderzimmer","Kind","FensterRechts","RechtsFenster","FensterLinks","LinksFenster", "Fenster","<br>","noch offen",""]' 
         data-get="AllWindows:text"></div>
</div>

FTUI3: https://github.com/knowthelist/ftui
Pay me a beer: http://paypal.me/setstate

spi3845

Full Member
Beiträge: 133
Gespeichert

Antw:FTUI Layout mit Flexbox

#55

13 Februar 2019, 13:57:00 Letzte Bearbeitung: 13 Februar 2019, 14:35:21 von spi3845

Zitat von: setstate am 09 August 2016, 01:44:23
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.

Ich arbeite mich gerade in FTUI mit Flexbox ein und bin über folgende 2 Probleme gestolpert:

1) Das Beispiel aus dem ersten Thread wir auf meinem PC mit Chrome-Browser, auf meinem 8"-Tablet im Quermodus und auf meinem Smartphone (auch im Quermodus) als 12 Kacheln nebeneinander dargestellt (auf Tablet und Smartphone im Fully Kiosk Browser). Wenn ich mein Smartphone drehe, dann rutschen die Kacheln untereinander. Passt.

Drehe ich das Tablet (oder mache auf dem PC das Browser-Fenster schmaler), dann werden immer noch 12 Kacheln nebeneinander dargestellt. Sie rutschen nicht untereinander, sondern die Kacheln werden irgendwann ganz schmal und die linke/rechte Spalten werden verdeckt. Ich kann dann auch nur noch nach rechts scrollen und die rechte Spalte sehen, nach links scrollen geht nicht.

Hat jemand eine Idee, woran das liegen könnte? Dabei hat das Smartphone eine deutlich höhere Auflösung als das Tablet...

2) Das abgebildete Code-Beispiel besteht aus einer vbox mit 2 card-Containern. Im oberen Container sind drei hboxen mit mit jeweils 2 card-Containern. Wie kann man erreichen, dass
- der Zwischenraum zwischen den waagrechten card-Containern einer hbox verschwindet,
- ein Zwischenraum zwischen den vertikalen hboxen des oberen Containers dargestellt wird?

Ich könnte natürlich die Hintergrundfarbe ändern, aber ich will ja verstehen, wie man mit den Boxen hantiert...

Schon mal danke, falls jemand einen Tipp hat...

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)
     *
     * 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/jquery.toast.min.css" />
    <link rel="stylesheet" href="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="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <link rel="stylesheet" href="customfonts/sp-font/style.css">

    <title>TEST</title>
    <link rel="icon" href="icons/house-black-transparent.ico" type="image/x-icon" />

    <style>
    @media screen and (max-width: 900px) and (min-width: 480px) {
        .menu {
                width: 90px !important;
        }
    }
    </style>

</head>
<body>
<main id="content1">
    <div class="vbox bg-white full-height">
      <div class="card lift phone-width items-top">
        <header>OBEN</header>
        <!-- div class="vbox bg-ligthblue" -->
          <div class="hbox bg-red">
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
          </div>
          <div class="hbox bg-mint">
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
          </div>
          <div class="hbox bg-lightgray">
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
            <div class="card items-top full-height full-width">
              <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            </div>
          </div>
        <!-- /div -->
      </div>
      <div class="card lift phone-width items-top">
        <header>UNTEN</header>
        <div class="hbox bg-orange">
          <div class="card items-top full-height full-width">
            <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
            <div data-type="symbol" data-device="BadFenster" class="narrow big"></div>
          </div>
        </div>
      </div>
    </div>
</main>
</body>
</html>

Ok, den zweiten Teil der zweiten Frage habe ich rausgekriegt - nochmal einen card-Container um jede einzelne hbox legen, dann werden auch vertikal Zwischenräume angezeigt.

Aber für die waagrechte Darstellung brauche ich card-Container in einer hbox, damit auch der Zwischenraum dazwischen. Also, wie würde man den am besten wegkriegen und trotzdem die Anordnung der Boxen behalten?

Ok2, zur ersten Frage habe ich in fhem-tablet-ui.css folgendes gefunden (bei mir ab Zeile 1049):

Code Auswählen


@media screen and (max-width: 480px) {
    .hbox,
    .vbox,
    .box,
    .card {
        flex-wrap: wrap;
        height: auto;

Wenn ich die Zeile mit dem flex-wrap entferne, dann wird die Darstellung auf dem Smartphone nicht mehr gedreht. Das Tablet meldet sich mit einer Auflösung von 962x601, das Smartphone mir 424x848. Damit fällt das Smartphone in das Raster von 480px. Wenn ich testweise in diesem Block und dem davor die Schwelle auf 620px ändere, dann funktioniert das. Um nicht alles zu ändern, habe ich folgendes direkt in meinen style-Block in meiner html-Datei aufgenommen:

Code Auswählen


    @media screen and (min-width: 620px) {
        .icon-width {
            min-width: 104px;
            max-width: 104px;
        }
    }
    @media screen and (max-width: 620px) {
        .hbox,
        .vbox,
        .box,
        .card {
            flex-wrap: wrap;
            height: auto;
        }
        .v100,
        .full-height,
        .height-100 {
            height: auto;
            min-height: 100vh;
        }
        .card > .box.horizontal,
        .card > .hbox {
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .hbox.nowrap,
        .box.nowrap,
        .card.nowrap {
            flex-wrap: nowrap;
        }
    }

Gibt's da ein besseres Vorgehen? Sorry, wenn das jetzt doch ziemlich lang wurde, aber nachdem ich das zuerst geschrieben habe, bin ich noch über etwas gestolpert. Und dann noch einmal...

NewMatic

Full Member
Beiträge: 217
Gespeichert

Antw:FTUI Layout mit Flexbox

#56

13 Februar 2019, 14:59:38

ich habe ebenfalls das problem, dass im landscape modus, der linke bereich abgeschnitten wird.
Kann das an viewpoint liegen?

Portrait Ansicht passt. Dort werden alle Container schön übereinander angeordnet und an die Bildschirmbreite angepasst.

spi3845

Full Member
Beiträge: 133
Gespeichert

Antw:FTUI Layout mit Flexbox

#57

13 Februar 2019, 15:03:15

Zitat von: NewMatic am 13 Februar 2019, 14:59:38
ich habe ebenfalls das problem, dass im landscape modus, der linke bereich abgeschnitten wird.
Kann das an viewpoint liegen?

Portrait Ansicht passt. Dort werden alle Container schön übereinander angeordnet und an die Bildschirmbreite angepasst.

Versuche mal in deiner html-Datei in einem Style-Block folgendes reinzuschreiben und die 620px an deine Bildschirmbreite (im Portrait-Modus) anzupassen:

Code Auswählen


 @media screen and (min-width: 620px) {
        .icon-width {
            min-width: 104px;
            max-width: 104px;
        }
    }
    @media screen and (max-width: 620px) {
        .hbox,
        .vbox,
        .box,
        .card {
            flex-wrap: wrap;
            height: auto;
        }
        .v100,
        .full-height,
        .height-100 {
            height: auto;
            min-height: 100vh;
        }
        .card > .box.horizontal,
        .card > .hbox {
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .hbox.nowrap,
        .box.nowrap,
        .card.nowrap {
            flex-wrap: nowrap;
        }
    }

Klappt es dann mit dem Drehen des Gerätes? Bei meinem Tablet hat das geholfen, auch auf dem PC beim Verkleinern des Browserfensters.

spi3845

Full Member
Beiträge: 133
Gespeichert

Antw:FTUI Layout mit Flexbox

#58

19 Februar 2019, 13:46:34 Letzte Bearbeitung: 19 Februar 2019, 13:49:39 von spi3845

Beim Ausprobieren bin ich noch über ein Verständnis-Problem gestolpert. Der Übersicht halber habe ich die Anzahö der Boxen von 12 auf 6 reduziert.

Das Beispiel aus dem ersten Beitrag wollte ich so umbauen, dass die "innersten" Boxen vboxen in einer hbox sind, damit ich mit grow-1 und grow-2 unterschiedlich große Boxen je Zeile habe (und nicht unterschiedlich große Boxen in einer Spalte).

Ich bekomme es aber einfach nicht hin, dass die "inneren" Boxen die gesamte Höhe einer hbox einnehmen, siehe Screenshot (full-height bei card oder hbox macht die Box höher als die Zeile). Hat jemand einen Tipp für mich, was ich falsch mache?

Anmerkung: in der sp-tablet-ui.css habe ich die menu-Settings so überschrieben, dass das Menü ganz schmal eingeblendet wird und Portrait-Landscape-Modus auf meinem Tablet funktioniert.

Hier mein Code:

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)
     *
     * 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/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
    <link rel="stylesheet" href="css/sp-tablet-ui.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="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <link rel="stylesheet" href="customfonts/sp-font/style.css">

    <style>
    </style>

</head>
<body>
<main id="content1">
<div class="vbox bg-white">
    <div class="hbox bg-blue">
        <div class="card bg-mint grow-1">
          <div class="vbox">
              <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 grow-2">
            <div class="vbox">
                <i class="mi-security gigantic"></i>
                <div data-type="label" data-device="alarm" data-get="STATE" class="big">activ</div>
            </div>
        </div>
    </div>
    <div class="hbox bg-green">
        <div class="card bg-blue grow-1">
            <div class="vbox">
                <i class="mi-local_post_office gigantic"></i>
                <div data-type="label" data-device="mail" data-get="count" class="big">21</div>
            </div>
        </div>
        <!-- OG -->
        <div class="card bg-blue grow-1">
            <div class="vbox">
                <div class="big" data-type="symbol" data-device="og_FenstergriffKiZi" data-get-on="open" data-get-off="closed" data-on-color="#ad3333" data-off-color="#32a054"></div>
                <div data-type="label" class="medium">KiZi-Fenster</div>
                <div class="big" data-type="switch" data-device='eg_DimmerWoZi_Sofa'></div>
                <div data-type="label" class="medium">Sofa</div>
            </div>
        </div>
    </div>
    <div class="hbox">
        <div class="card bg-gray grow-2">
            <div class="vbox">
                <div data-type="symbol" data-device="dummy1" data-on-color="#ffffff" data-get-on="on" data-icon="mi-wc" class="compressed grande"></div>
                <div data-type="label" data-device="wc" data-get="STATE" class="big">free</div>
            </div>
        </div>
        <div class="card bg-red grow-1">
            <div class="vbox">
                <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>
</main>
</body>
</html>

Drucken

Nach oben Seiten1 2 3 4 Alle

Benutzer-Aktionen

Benutzer-Aktionen

Drucken