FTUI version 3

[mr_petz]

Hi C0mmanda.
Ich denke da brauchst du einen höheren Safari oder/und IOS:
https://caniuse.com/resizeobserver

LG

[C0mmanda]

Hi C0mmanda.
Ich denke da brauchst du einen höheren Safari oder/und IOS:
https://caniuse.com/resizeobserver

LG

Mist
Leider ist bei dem alten iPad bei iOS12 Schluß...
Muss ich mir was einfallen lassen.
Danke für den Hinweis...

Gruß

[mr_petz]

Wenn es nur am slider liegt könntest du auch zur Not meinen nehmen...
Ab hier lesen:
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068

Edit: hier noch eine Stylebare Version zum testen (Test steht noch aus... bevor ich es ins git schiebe):
https://forum.fhem.de/index.php/topic,121901.msg1191640.html#msg1191640

LG

ps. soll keine Werbung dafür sein!

[C0mmanda]

Wenn es nur am slider liegt könntest du auch zur Not meinen nehmen...
Ab hier lesen:
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068

Edit: hier noch eine Stylebare Version zum testen (Test steht noch aus... bevor ich es ins git schiebe):
https://forum.fhem.de/index.php/topic,121901.msg1191640.html#msg1191640

LG

ps. soll keine Werbung dafür sein!

Juhu! Der funktioniert
Vielen Dank!

Gruß

[bismosa]

Hallo!

Auch ich fange gerade an die ersten Versuche mit FTUI3 zu unternehmen. Sieht richtig gut aus!

Ich würde gerne auf einem Tab eine art Untermenü erstellen. Mir ist das mit dem ftui-tab noch nicht gelungen. Geht das überhaupt? Wie muss das dann aufgebaut werden?

Ich auf jeden Tab die gleichen Icons in einer reihe platzieren und den jeweils aktiven selektieren. Finde ich aber recht aufwendig...

Danke.
Gruß
Bismosa

[mr_petz]

Ok. Das steht nicht so wirklich beschrieben...
Man muss hier mit group´s arbeiten.
Bsp.:

Code Auswählen Erweitern


<ftui-tab-view id="View8" group="2">

Standard ist hier default und wird immer gesetzt wenn keine group definiert ist...
Ich habe mal ne Demo angehangen.
Im Submenü kannst du auch mit active arbeiten oder weglassen...

LG mr_petz

Edit: Achso, die 1 aufzurufende Html ist hier in der/ aus der Demo tab-content.html

https://forum.fhem.de/index.php/topic,115259.msg1240981.html#msg1240981

[bismosa]

Hallo!

Danke für die Superschnelle Antwort und Hilfe! Gerade die demo ist sehr interessant.

In der demo sieht man sehr gut, das bei der Seite mit dem 2. Menü der rechte rand abgeschnitten wird. Auch bei mir "fehlt" hier eine Spalte bzw. der Content-Bereich geht über den Rand hinaus.
Liegt das nicht daran, das man ein neues <ftui-grid> aufruft? Wie lässt sich das umgehen?

Gruß
Bismosa

[mr_petz]

Ok war mir nicht aufgefallen.. Höhe ist nicht das Problem. Das width eher. Ich habe mal bissl getrickst mit.

Code Auswählen Erweitern


style="width:-webkit-fill-available;width:-moz-available;"

und kein width angegeben und ein Fakeview.
1. steht für chrome, 2. steht für FF
Du siehst den Unterschied in den Files.
Weis nicht ob es anders geht...

Edit: Doch. Man muss im grid eine/deine Größe Bsp.:

Code Auswählen Erweitern


base-width="90" base-height="150"

mitgeben...
Im 1. Bsp.:base-width="100" base-height="150" und den 2. bissl kleiner Bsp.:base-width="90" base-height="150"
Hier wären es 10% weniger, weil das 2.Menü auch width="1" ist.
Nicht wundern... Es wird hier vom Hochformat ausgegangen...
Ich hänge nochmal neu an!

Man man man... Sollte man doch mal Niederschreiben...

LG

[bismosa]

Hallo!

Danke für den Support!
Ich habe deinen Edit gerade erst gesehen. War die ganze Zeit am probieren.
Ich glaube meine Probleme am Anfang sind hauptsächlich:
- Was hat es mit base-width und base-height auf sich? Wie teile ich mir das am besten ein?
- Wie funktioniert das System mit den Spalten/Zeilen wie viele habe ich und wie viele benötige ich?
- Wie funktioniert das nachladen von Content über ftui-content. Was ist dabei zu beachten?

Aus meinem Halbwissen:
Wenn ich keine base-width und base-height angebe, wird die Seite auf die Anzeigengröße skaliert. (Praktisch bei unterschiedlichen Geräten).
Auf der Basis der höchsten row Anzahl und height Anzahl wird die gesamte Seite in entsprechende Reihen und Zeilen eingeteilt. Das gilt dann auch für die "Unterseiten".

Auf Basis davon habe ich mir jetzt auf meiner noch (ziemlich) leeren index.html erstmal ein Platzhalter erstellt um die Anzhal Reihen/Spalten vorzugeben.
Habe ich mein "Submenü" nur in der index.html geht es eigentlich problemlos:

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

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">

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


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

<body>
  <ftui-grid shape="round">
    <ftui-grid-tile row="1" col="1" height="12" width="1">
      <ftui-column>
        <ftui-tab view="View1" size="large" active>
          <ftui-icon name="home"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical">
          <ftui-icon name="music"></ftui-icon>
          <ftui-label>Music</ftui-label>
        </ftui-tab>
        <ftui-tab view="View3">
          <ftui-icon name="feed"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View4">
          <ftui-icon name="lightbulb"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View5">
          <ftui-icon name="bath"></ftui-icon>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" color="primary">
        <ftui-row width="80%" height="10%">
          <ftui-clock format="ee" size="6"></ftui-clock>
          <ftui-clock format="DD" size="5"></ftui-clock>
        </ftui-row>
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
      </ftui-grid-tile>
      <!-- Platzhalter für breite -->
      <ftui-grid-tile row="12" col="2" height="1" width="12" shape="round" color="primary">
        <ftui-label>Platzhalter</ftui-label>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View2">
   
        <ftui-grid-tile row="1" col="2" height="1" width="12">
            <ftui-row>
              <ftui-tab view="ViewX2" size="large" active group="2">
                <ftui-icon name="home"></ftui-icon>
              </ftui-tab>
              <ftui-tab view="ViewX3" direction="vertical" group="2">
                <ftui-icon name="music"></ftui-icon>
                <ftui-label>Music</ftui-label>
              </ftui-tab>
              <ftui-tab view="ViewX4" group="2">
                <ftui-icon name="feed"></ftui-icon>
              </ftui-tab>
              <ftui-tab view="ViewX5" group="2">
                <ftui-icon name="lightbulb"></ftui-icon>
              </ftui-tab>
              <ftui-tab view="View5" group="2">
                <ftui-icon name="bath"></ftui-icon>
              </ftui-tab>
            </ftui-row>
          </ftui-grid-tile>
         
          <ftui-tab-view id="ViewX2" group="2">
            <ftui-grid-tile row="2" col="2" height="5" width="6">
              <div class="size-10">Tab3</div>
            </ftui-grid-tile>
            <ftui-grid-tile row="2" col="8" height="5" width="6">
              <div class="size-10">Tab3</div>
            </ftui-grid-tile>
            <ftui-grid-tile row="7" col="2" height="6" width="6">
              <div class="size-10">Tab3</div>
            </ftui-grid-tile>
            <ftui-grid-tile row="7" col="8" height="6" width="6">
              <div class="size-10">Tab3</div>
            </ftui-grid-tile>
          </ftui-tab-view>

     
    </ftui-tab-view>

    <ftui-tab-view id="View3">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <div class="size-10">Tab3</div>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View4">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <div class="size-10">Tab4</div>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View5">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <div class="size-10">Tab5</div>
      </ftui-grid-tile>
    </ftui-tab-view>
  </ftui-grid>

</body>

</html>


Auch wenn man mit ftui-content die Seite einbindet geht es, wenn die Anzahl der Spalten/Zeilen mit der Hauptseite übereinstimmt und angegeben wird.

Gruß
Bismosa

[Carsten]

Statt zu fragen, was es gibt, wäre vermutlich interessanter, was müsste es geben bzw. was fehlt noch.

Hi und sorry für die späte Antwort. Ich war mit Corona beschäftigt.
Ich weiß, was du meinst, aber im Fall vom Thermostat z.B. war es ja nicht so, dass das mit den Standardmodulen unlösbar gewesen wäre, aber das spezielle Modul macht alles soviel einfacher und ich bin nur auf der Suche nach Best Practice - Beispielen darüber gestolpert. Daher wollte ich mir einen Überblick verschaffen.

Was ich z.B. noch vermisse wäre das Map-Widget, das es für 2.x gibt. Allerdings ist der Bedarf nicht akut und wahrscheinlich auch sehr speziell. Und wie ich den Callmonitor darstelle, muss ich mir auch noch überlegen.

[mr_petz]

@bismosa

...
Ich glaube meine Probleme am Anfang sind hauptsächlich:
- Was hat es mit base-width und base-height auf sich? Wie teile ich mir das am besten ein?
- Wie funktioniert das System mit den Spalten/Zeilen wie viele habe ich und wie viele benötige ich?
- Wie funktioniert das nachladen von Content über ftui-content. Was ist dabei zu beachten?
...

Hi, lässt sich schlecht genau sagen ohne deine Bildschirm/Pixelgröße.
Die Größe von meinem Tablet sieht auf meinen Laptop viel kleiner aus. Auflösung halt..
Ob es eine Faustformel gibt weis ich nicht.
Hier entsteht das ganze:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L83
Ohne responsive und base-width und base-height wird es zu 100%/100% gesetzt.
base-width="200" base-height="200" ensprechen ungefähr der gleiche Größe wenn ich es nicht setzen würde.

Hier mal zum Veranschaulichen/Nachvollziehen zur Aufteilung mit base-x:
base-width:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L112
Zum testen: https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-auto-columns
Demo: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-columns

base-height:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L113
Zum testen: https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-auto-rows
Demo: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-rows
In 'Zum testen' kannst du auch spielen mit den Angaben der Items...

Dazu kommen noch die col und row Angaben die mit eingerechnet (/gerechnet) werden. Diese kannst du auch mit decimals unterteilen und man hat dann noch mehr row´s und col´s....
Ich kann es nicht besser erklären... sorry...

zum content:
Beim content kann man seine wiederkehrende Dinge/Devices einmal übergeben.
Wie im Beispiel vom example device="Irgendwas" und wird dann mit {{device}} im content aufgerufen.
Des Weiteren kannst du da auch einen fertigen HTML-Code von Fhem holen. z.B. Readinggroup o.Ä.
Der wird dann so angezeigt. Aufpassen muss man nur bei den SVG´s. Die sind meist zu Groß. Siehe hier:
Problem:
https://forum.fhem.de/index.php/topic,115259.msg1238688.html#msg1238688
Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1238708.html#msg1238708

Bsp:

Code Auswählen Erweitern


<ftui-content [content]="Device | getHTML('DeviceHtmlCode')"></ftui-content>

Weitere Beispiele sind hier im Thread zu finden.
Ich hoffe das hilft ein wenig....

LG mr_petz

[Adimarantis]

Hallo

Hab mich jetzt endlich getraut an FTUI2->FTUI3 zu arbeiten. Gibt ja ein paar Klasse neue Möglichkeiten und ist auch viel schneller.
Zu den Images hätte ich ein paar Fragen/Anregungen:

1. Interval/Refresh
Das klappt wunderbar bei einer URL, aber mit einer Datei im Filesystem verändert sich nichts. Die Datei wird von ffmpeg von einer Kamera geholt und ständig aktualisiert. Wenn ich nocache="true" angebe, kommt gar kein Bild mehr. Hab testweise immer mal wieder eine neue Datei hinkopiert, aber das Bild bleibt unverändert bis ich meinen Browser-Cache löschen und neu lade - dann hab ich wieder das aktuelle Bild.

2. Crop
Ein Hauptgrund für das ffmpeg oben, ist, dass ich auch Platzgründen nur einen Ausschnitt des Bildes anzeigen möchte. Die Größe kann man ja anpassen, aber Beschneiden kann man es IMHO nur wenn das Tile drumrum zu klein ist - aber eben nur von einer Ecke weg und nicht einen Zoom in die Mitte.
Wäre ein freies Crop (x,y,width,height) irgendwie realisierbar?

3. RTSP
Nicht alle meine Kameras haben snapshot jpegs. Da gibt es nur den RTSP Stream (und schon sind wir wieder bei ffmpeg, was meinen Raspi allerdings sehr stresst). Gibt es eine Möglichkeit einen RTSP Stream in FTUI3 (und dem "Fully" Browser) einzubetten? Ist jetzt wahrscheinlich kein echtes FTUI Thema.

4. Android/Webview Version
Ich schätze mal, dass manche Elemente (bisher hatte ich das nur bei ftui-meter) am Tablet nicht korrekt darstellen, liegt das an meinem Android 7 mit Webview 65 (darüber beschwert sich sogar Fully). Kann da leider nicht aus. Schon Android 7 hab ich nur mit LineageOS hingekriegt - mehr gibts für mein Samsung Tab E wohl nicht mehr. Da ich keinen Elektroschrott erzeugen will, muss ich dann wohl auf andere Elemente ausweichen.

Gruß,
Jörg

[mr_petz]

...
4. Android/Webview Version
Ich schätze mal, dass manche Elemente (bisher hatte ich das nur bei ftui-meter) am Tablet nicht korrekt darstellen, liegt das an meinem Android 7 mit Webview 65 (darüber beschwert sich sogar Fully). Kann da leider nicht aus. Schon Android 7 hab ich nur mit LineageOS hingekriegt - mehr gibts für mein Samsung Tab E wohl nicht mehr. Da ich keinen Elektroschrott erzeugen will, muss ich dann wohl auf andere Elemente ausweichen.
...

Hi Jörg,
Android System WebView kannst du immer höher nachladen als apk. Habe auf meinem Tab4 mit Android 4.4.2 die WebView v95 separat nachgeworfen...
Seiten zum runterladen gibt es genug...

LG mr_petz

[cschneider]

Hallo zusammen,

nach langem Nutzen von FTUI v2 möchte ich nun umsteigen und finde mich gerade in die Syntax rein - erst mal Respekt, sieht toll aus!

Leider komme ich als "FTUI 3 Newbie" nicht komplett klar. Ich möchte - recht simpel - das WLAN einer FritzBox ein- und ausschalten über einen Switch. Hierzu (siehe dazu die Wiki-Seite bei FHEM zur FritzBox) möchte ich ein "set FRITZBOX call #96*0*" zum Ausschalten und entsprechend mit der 1 hinten zum Einschalten senden.

Hierfür habe ich erstmal hiermit angefangen:

Code Auswählen Erweitern

<ftui-switch slot="end" [value]="FritzBox:box_wlan_2.4GHz>

Der Switch zeigt daraufhin den Status des WLAN an, wie gewünscht. Dieser hat die Werte on, off - die der Switch lesen kann und entsprechend darstellt.

Nun zum Schreiben des Status. Hier habe ich ein (value)="FritzBox call" eingefügt, was dann entsprechend ein "set FritzBox call on" bzw. "off" sendet. On und Off sind hier aber falsch, die states müssen states="#96*0*,#96*1*" sein, womit ich mit dem Switch schalten kann. Nur: Jetzt wird der ausgelesene Wert, also [value], nicht mehr richtig gelesen - der Switch ist beim Laden der Seite immer off.

Ich habe auch schon folgendes probiert:

Code Auswählen Erweitern

<ftui-switch slot="end" [value]="FritzBox:box_wlan_2.4GHz | map('on:#96*0*,off:#96*1*')" (value)="FritzBox call" states="#96*0*,#96*1*">

Ich hatte gehofft, den ausgelesenen State (on, off) auf die beiden für den Switch definierten States zu Mappen, da der Switch ja jetzt nicht mehr auf (on, off) hört, sondern eben auf die beiden definierten Argumente für call... auch das klappt nicht.

Daher die Frage: Kann man sowas mit FTUI3 umsetzen, und wenn ja wie?

Vielen herzlichen Dank, viele Grüße
Christian

[bismosa]

Hallo!

Ich kann es nicht besser erklären... sorry...

Vielen Dank für die ausführliche Erklärung! Das bringt mich ein ganzes Stück voran. Auch wenn ich da noch einiges zu lernen hab 

zum content:
Hier meinte ich eher welche Inhalte dynamisch nachgeladen werden können. Was z.B. nicht geht ist ein Tabellenaufbau:
index.html:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="7" height="2" width="3">
    <table>
        <tbody>
            <tr>
                <ftui-content file="tpl_MaxDetailText.html"
                    tpl_Name="Wohnzimmer"
                    tpl_Device="Max_WT_Wohnzimmer"
                    tpl_Temperature="Max_WT_Wohnzimmer:temperature"
                    tpl_TempIsOld="Max_WT_Wohnzimmer:Temp_isOld"
                    tpl_valvepos="Max_HT_Wohnzimmer:valveposition">
                </ftui-content>
            </tr>
            <tr>
                <ftui-content file="tpl_MaxDetailText.html"
                    tpl_Name="K1"
                    tpl_Device="Max_HT_K1"
                    tpl_Temperature="GPIO4_DS18B20_K1:temperature | round(1)"
                    tpl_valvepos="Max_HT_K1:valveposition">
                </ftui-content>
            </tr>
        </tbody>
    </table>
</ftui-grid-tile>

tpl_maxDetailText.html:

Code Auswählen Erweitern


<td>
    <ftui-label
        text="{{tpl_Name}}"
    ></ftui-label>                               
</td>
<td>
   <ftui-label
        [text] = "{{tpl_Device}}:mode"
    ></ftui-label>
</td>
<td>
    <ftui-label
         [text] = "{{tpl_Device}}:desiredTemperature"
     ></ftui-label>
</td>
<td>
    <ftui-label
         [text] = "{{tpl_valvepos}"
     ></ftui-label>
</td>
<td>
    <ftui-label
         [text] = "{{tpl_Temperature}}"
     ></ftui-label>
</td>


Was hingegen funktioniert (Beispiel aus dem Thread hier):

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="7" height="2" width="3">
    <ftui-content file="tpl_MaxDetailText.html"
        tpl_Name="K1"
        tpl_Device="Max_HT_K1"
        tpl_Temperature="GPIO4_DS18B20_K1:temperature | round(1)"
        tpl_valvepos="Max_HT_K1:valveposition">
    </ftui-content>
    <ftui-content file="tpl_MaxDetailText.html"
        tpl_Name="Wohnzimmer"
        tpl_Device="Max_WT_Wohnzimmer"
        tpl_Temperature="Max_WT_Wohnzimmer:temperature"
        tpl_TempIsOld="Max_WT_Wohnzimmer:Temp_isOld"
        tpl_valvepos="Max_HT_Wohnzimmer:valveposition">
    </ftui-content>
</ftui-grid-tile>


Code Auswählen Erweitern


<ftui-row>
    <ftui-column>
        <ftui-label
            text="{{tpl_Name}}"></ftui-label>
    </ftui-column>
    <ftui-column width="10%">
        <ftui-label
            [text]="{{tpl_Device}}:mode"></ftui-label>
    </ftui-column>
    <ftui-column width="15%">
        <ftui-label
            [text]="{{tpl_Device}}:desiredTemperature"></ftui-label>
    </ftui-column>
    <ftui-column width="10%">
        <ftui-label
            [text]="{{tpl_valvepos}"></ftui-label>
    </ftui-column>
    <ftui-column width="10%">
        <ftui-label
            [text]="{{tpl_Temperature}}"></ftui-label>
    </ftui-column>
</ftui-row>

Also mit ftui-row und column eine Tabelle aufbauen, die mit festen Spaltenbreiten arbeitet. 

Gruß
Bismosa