FTUI Layout mit Flexbox

[ErzGabriel]

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]

hallo,

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

[ErzGabriel]

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

[jemu75]

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]

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 

[ulli]

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?

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

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

[ulli]

habs doch noch heraus gefunden

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

[tunguskar]

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 Erweitern

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

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]

ich nutze so etwas

Code Auswählen Erweitern


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


[spi3845]

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 Erweitern


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


@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 Erweitern


    @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]

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]

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 Erweitern


@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]

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 Erweitern


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