FTUI version 3

[meier81]

Hallo setstate,

hab das eben mit resize auch mal getestet, funktioniert jetzt bei mir soweit einwandfrei. Hab allerdings ein Problem, bezieht sich auf grid mit einem image als Inhalt, hab hier bei mir das Niederschlagsradar eingebunden, Definition wir folgt:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
  <header>Niederschlagsradar</header>
  <ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" interval="300" nocache></ftui-image>
</ftui-grid-tile>

Wenn ich ftui-grid mit base-width und base-height definiere wird das grid sauber angezeigt, siehe Anhang. Definiere ich jetzt ftui-grid mit resize funktionieren alle grids auf der Seite super, nur das vom Niederschlagsradar wird "größer" gemacht, es überdeckt oben den header und unten wird auch ein Teil "abgeschnitten", siehe Bild 2.

Kann ich da dem image noch einen Parameter mitgeben das dies verhindert?

Gruß Markus

P.S.: Im Anhang auch die vollständige content-wetter.html

[mr_petz]

Hi Markus,
gib dem ftui-image mal ein:

Code Auswählen Erweitern


height="max-height"

mit.

LG

[meier81]

Hi Markus,
gib dem ftui-image mal ein:

Code Auswählen Erweitern


height="max-height"

mit.

Hi mr_petz,

hat leider keinerlei Auswirkungen. Habe mal im Browser die Seite untersucht, das image bekommt das Attribut "width" mit, denke wahrscheinlich vom der css. Mit meiner Definition:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
  <header>Niederschlagsradar</header>
  <ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" interval="300" nocache></ftui-image>
</ftui-grid-tile>

sieht der Quelltext so aus:

Code Auswählen Erweitern

<img style="width: 100%; height: auto;" src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif?_=1671719852692">

Wenn ich jetzt meine Definition ändere und dem image

Code Auswählen Erweitern

style="width: 87%;" mitgebe, dann sehe ich das image vollständig, ist natürlich links und rechts ein grauer Rand (siehe Anhang).

Wäre für mich soweit okay, gibt es aber die Möglichkeit das ich dem image

Code Auswählen Erweitern

style="height: 100%;" mitgebe und "height" für dieses image deaktivieren kann?

LG Markus

[mr_petz]

Hast du es nur mit style getestet oder auch einfach direkt das height eingetragen?

[meier81]

Hast du es nur mit style getestet oder auch einfach direkt das height eingetragen?

Bei deinem Vorschlag hatte ich es direkt mit height eingetragen, bei den Tests mit meinen Ausführungen mit style.

Kann es auch nochmal nur mit height probieren.

[setstate]

Perfekt, so sieht das jetzt gut aus. Eine Kleinigkeit noch direkt, dann brauche ich nicht danach suchen. Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.

Danke für die schnellen Umsetzungen!

das passiert meist, wenn man mit margin bzw. padding arbeitet, dann kommt es ungewollt irgendwo zu >100%. Mit overflow: hidden muss man dann gezielt an dieser Stelle respektive der entsprechenden Container arbeiten. An manchen Stellen will man eine Auto-Scrollbar, an einigen soll niemals eine auftauchen.

Man kann also ohne konkretes Beispiel nicht viel helfen. Könntest du eine Minimalbeispielsseite generieren, die das Problem zeigt?

[mr_petz]

Hi Markus@meier81,
Ich habe es mal nachgestellt. Mit:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
  <header>Niederschlagsradar</header>
  <ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 100%;height: 100%;" width="100%" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>

wird es bei mir ins tile auf 100x100% reingequetscht...

Mit:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
  <header>Niederschlagsradar</header>
  <ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 50%;height: 100%;" width="100%" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>

wird es mittig in einer annähernd proportionalen Ansicht dargestellt...

Ohne den style und einzelnen width/height-Angaben geht es bei mir nicht...

LG

[bismosa]

Hallo!

Ich habe gerade mal wieder ein Update eingespielt. Dadurch funktioniert nun ein <ftui-grid> wesentlich besser.
Vorher hatte ich rechts und unten kachel-Bereiche, die immer abgeschnitten worden sind.

Jedoch habe ich nach wie vor einen unschönen Rand (rechts und unten). Mein Aufbau ist so:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <title>FTUI Example Tab</title>
</head>

<body>

  <ftui-grid>
   
    <ftui-grid-tile row="1" col="1" height="10" width="1">
      <ftui-column>
        <ftui-tab view="View1" active>
          <ftui-icon name="home"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View2">
          <ftui-icon name="music"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View3" (value)="dummy1">
          <ftui-label size="5">Tab3</ftui-label>
        </ftui-tab>
        <ftui-tab view="View4" fill="solid" timeout="10">Tab4</ftui-tab>
        <ftui-tab view="View5" fill="solid" timeout="5">Tab5</ftui-tab>
        <ftui-tab view="View6" fill="solid" shape="circle">
          <ftui-icon name="road"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View7" fill="solid" shape="circle" [value]="ftuitest | map('1:on, .*:off')">
          <ftui-icon name="camera"></ftui-icon>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="10" width="11">
        <div class="size-10">Tab-View1</div>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View2">
        <ftui-grid-tile row="1" col="2" height="10" width="11">
            <ftui-grid>
                <!-- Menü oben: -->
                <ftui-grid-tile row="1" col="1" height="1" width="10">
                    <ftui-row>
                        <ftui-tab view="ViewHeizungenHome" size="normal" direction="vertical" group="Heizungen">
                            <ftui-icon name="home"></ftui-icon>
                            <ftui-label>Übersicht alt</ftui-label>
                        </ftui-tab>
                        <ftui-tab view="ViewHeizungenNeu" size="normal" direction="vertical" active group="Heizungen">
                            <ftui-icon name="home"></ftui-icon>
                            <ftui-label>Übersicht neu</ftui-label>
                        </ftui-tab>
                        <ftui-tab view="TODO" size="normal" direction="vertical" group="Heizungen">
                            <ftui-icon name="thumbs-down"></ftui-icon>
                            <ftui-label>TODO</ftui-label>
                        </ftui-tab>
                    </ftui-row>
                </ftui-grid-tile>

                <ftui-tab-view id="ViewHeizungenNeu" group="Heizungen">
                    <ftui-grid-tile row="2" col="1" height="9" width="10">
                        <ftui-label text="Platzhalter"></ftui-label>
                    </ftui-grid-tile>
                </ftui-tab-view>
            </ftui-grid>
        </ftui-grid-tile>
    </ftui-tab-view>
  </ftui-grid>
</body>
</html>

Der Rand entsteht nur, wenn ich mit einem 2. <ftui-grid> arbeite. Siehe Seite 2 "Übersicht neu". Da habe ich in der oberen Zeile ein 2. Menü.
Was kann ich ändern, um diesen Rand zu entfernen? Oder ist mein Aufbau grundsätzlich falsch?

Gruß
Bismosa

[meier81]

Ohne den style und einzelnen width/height-Angaben geht es bei mir nicht...

Hi mr_petz,

danke mal für den Tipp und das nachstellen, habe jetzt mal beide Varianten von dir probiert und auch noch etwas weiter experimentiert, bin jetzt bei folgender Variante hängen geblieben, ist für mich jetzt passend, die Höhe wird zu 100% ausgenutzt und in der Breite gibt es beidseitig ein wenig Rand:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="13" height="3" width="6" shape="round">
  <header>Niederschlagsradar</header>
  <ftui-image src="https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif" style="width: 89%;" height="100%" interval="300" nocache></ftui-image>
</ftui-grid-tile>


Danke auf jeden Fall nochmal 

[jual]

das passiert meist, wenn man mit margin bzw. padding arbeitet, dann kommt es ungewollt irgendwo zu >100%. Mit overflow: hidden muss man dann gezielt an dieser Stelle respektive der entsprechenden Container arbeiten. An manchen Stellen will man eine Auto-Scrollbar, an einigen soll niemals eine auftauchen.

Man kann also ohne konkretes Beispiel nicht viel helfen. Könntest du eine Minimalbeispielsseite generieren, die das Problem zeigt?

Anbei der Code für das Minimalbeispiel. Ich habe mal die Index.html quasi komplett und die Content-Datei beigefügt:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
 
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <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="toast_position" content="topLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">


  <title>FHEM Tablet2</title>
 
</head>

<body>
<ftui-menu timeout="0">
    <ftui-tab view="View1" title="Übersicht" active color="primary">
      <ftui-icon name="home"></ftui-icon>
      Übersicht
    </ftui-tab>
  </ftui-menu>

  <ftui-main>
    <ftui-view>
      <ftui-view-toolbar slot="header" height="10%">
        <ftui-menu-button slot="start"></ftui-menu-button>
        <ftui-tab-title text-align="left"></ftui-tab-title>
      </ftui-view-toolbar>

      <ftui-tab-view id="View1">    
        <ftui-content file="page_content_home.html"></ftui-content>
      </ftui-tab-view>
    </ftui-view>
  </ftui-main>
</body>
</html>


Code Auswählen Erweitern


<ftui-grid resize class="size-4">
<ftui-grid-tile row="1" col="1" height="5" width="6">

<ftui-row color="danger">
<ftui-button [(value)]="wz_Lampen" states="an, aus" >
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>
<ftui-row color="success">
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>

</ftui-grid-tile>

<ftui-grid-tile row="1" col="7" height="5" width="3">
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" ></ftui-icon></ftui-button>
</ftui-row>
<ftui-row>
</ftui-row>
<ftui-row>
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="1" col="10" height="5" width="3">
<ftui-row>
</ftui-row>
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')"></ftui-icon></ftui-button>
</ftui-row>
</ftui-grid-tile>
</ftui-grid>



[juemuc]

Hallo,
bei der Umstellung von FTUI2 auf FTUI3 fehlt mir die Möglichkeit "Trends" z.B. für Temperaturänderungen anzuzeigen. In FTUI2 hatte ich das wie folgt gelöst:

Code Auswählen Erweitern


<div>
    <div data-type="klimatrend" data-device="WetterProplanta" data-get="statTemperatureTendency" data-refperiod="1" class="inline large"></div>
    <div data-type="klimatrend" data-device="WetterProplanta" data-get="statTemperatureTendency" data-refperiod="2" class="inline large"></div>
</div>
Die dazugehörigen Readings haben folgende Werte:

Code Auswählen Erweitern


statHumidityTendency         1h: -2 2h: -5 3h: -3 6h: +4                 2022-12-23 18:59:55
statTemperatureTendency      1h: +0.5 2h: +0.7 3h: +0.2 6h: -0.6         2022-12-23 18:59:55

Wie kann ich dies in FTUI3 lösen?

Viele Grüße
Jürgen

[meier81]

Hallo Jürgen,

schau mal hier https://forum.fhem.de/index.php/topic,115259.msg1231291.html#msg1231291

wurde da schonmal behandelt. Hoffe das hilft dir.

Gruß Markus

[juemuc]

Hallo Markus,

danke für den Tipp. Mir fehlt leider das Icon für "=" (equal.svg). Wo finde ich dieses?

Viele Grüße
Jürgen

[meier81]

Auf die Schnelle, ohne Gewähr 

https://www.svgrepo.com/vectors/equal/

[juemuc]

Danke.

@setstate, kannst Du dieses Icon bitte noch in den "Standard" übernehmen. Danke.

Viele Grüße
Jürgen