FTUI version 3

[MDietrich]

Leute das Update von heute zerschiesst mir komplett das FTUI....

Hallo, willkommen im Club 
https://forum.fhem.de/index.php/topic,115259.msg1206414.html#msg1206414

AN alles Betroffenen: Könntet ihr bitte gefundene Lösungen hier posten?

LG
MDietrich

[moonsorrox]

erstmal die Version von gestern nehmen

diese hier nutze ich nicht

Code Auswählen Erweitern

  <!--ftui-grid cols="32" rows="22" resize margin="2"-->
  <!--ftui-grid base-width="45" base-height="50" margin="2"-->
  <!-- <ftui-grid base-width="100" base-height="80" margin="2"-->

[setstate]

Code Auswählen Erweitern

<ftui-grid <ftui-grid responsive margin="2"> >

gab es bis gestern so nicht, obwohl das in einem Beispiel noch als Restposten drin war.

Weil ich die Idee von responsive im Grid aber interessant fand, habe ich es gestern richtig eingebaut.

https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html

zum Testen - einfach mal das Browser-Fenster größer oder kleiner schieben.

Um auf den alten Stand zu kommen, einfach das responsive Attribute rausnehmen.

cols und rows gibt es auch nicht mehr beim Grid, nur noch base-width und base-height - mit jeweils 140 als default.

[meier81]

Hallo setstate,

mir ist aufgefallen das es aktuell Probleme mit dem anzeigen von Umlauten gibt, bin der Meinung das ist seit dem Update heute.

Anbei mal ein Screenshot.

Dadurch wird das Wettericon nicht mehr richtig gemappt da hier das "ö" nicht richtig funktioniert und etwas weiter unten funktioniert das "ß" bei der Apotheke nicht.

Kannst du dir ja mal anschauen.

Gruß Markus

P.S.: Hab das mit dem "responsive" mal ausprobiert, da wird bei mir aber alles riesengroß, hab´s auch mal angefügt als Screenshot, einmal normal und einmal mit responsive

[LuGu]

Hallo setstate,

mir ist aufgefallen das es aktuell Probleme mit dem anzeigen von Umlauten gibt, bin der Meinung das ist seit dem Update heute.

Anbei mal ein Screenshot.

Dadurch wird das Wettericon nicht mehr richtig gemappt da hier das "ö" nicht richtig funktioniert und etwas weiter unten funktioniert das "ß" bei der Apotheke nicht.

Kannst du dir ja mal anschauen.

Gruß Markus

Das liegt am Update des fhemweb Modul.

Edit: Ist mit dem heutigen fhemweb Update wieder ok.

Gruß LuGu

[mr_petz]

Also am FTUI3 liegt´s nicht.
Man muss auch aufpassen ob der Editor den man verwendet nur UTF-8 oder UTF-8-BOM verwendet.
Selber Effekt.

LG mr_petz

[moonsorrox]

Code Auswählen Erweitern

<ftui-grid <ftui-grid responsive margin="2"> >

gab es bis gestern so nicht, obwohl das in einem Beispiel noch als Restposten drin war.

Weil ich die Idee von responsive im Grid aber interessant fand, habe ich es gestern richtig eingebaut.

https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html

zum Testen - einfach mal das Browser-Fenster größer oder kleiner schieben.

Um auf den alten Stand zu kommen, einfach das responsive Attribute rausnehmen.

cols und rows gibt es auch nicht mehr beim Grid, nur noch base-width und base-height - mit jeweils 140 als default.

ich stehe bei github immer etwas auf dem Schlauch, klar ist das Beispiel gut zu sehen wie komme ich aber an den aktuellen Code dieses Beispiels.
Kenne mich da leider nicht so gut uas

[MDietrich]

Hallo setstate,

ich habe die von dir beschriebenen notwendigen Änderungen ausprobiert:

Code Auswählen Erweitern

<ftui-grid base-width="80" base-height="60" margin="3">
Nach dem Entfernen von 'responsive' passt mein Layout prinzipiell wieder, die dynamische Anpassung an die aktuelle Fenstergröße ist aber weg. 
Bei den Grid-Tiles verwende ich jedoch:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="19" height="15" width="2" shape="round">

Wenn ich versuche die Grid-Definition wie von dir oben beschrieben zu machen mit:

Code Auswählen Erweitern

<ftui-grid <ftui-grid margin="2" responsive>></ftui-grid>
Dann werden alle Grid-Tiles mit der gleichen Breite vertikal untereinander dargestellt, mit Ausnahme des zuerst definierten, dies ist dann ca. bei 130% der Fensterbreite ganz unten.

Dritter Versuch, ohne das umschließende ftui-grid:

Code Auswählen Erweitern

<ftui-grid margin="2" responsive>
Die Reihenfolge der Tiles ändert sich, sie werden in der Reihenfolge wie im Code dargestellt, die Breite ist wie im Beispiel oben, erst bei einem Zoom-Faktor von  50 sehe ich alles Tiles vollständig in der beschriebenen Form. Dann unterscheiden sich die beiden letzten Varianten in der Darstellung nicht mehr.

Wenn es hilfreich ist, hänge ich gerne ein paar Bilder zur Veranschaulichung an. Gibt es eine Variante um das Verhalten wie vor dem Update zu realisieren?

LG
MDietrich

[OdfFhem]

@moonsorrox

Es gibt viele Möglichkeiten, um auf eine Datei bei GitHub zuzugreifen; 3 davon sind unten aufgeführt.

*** Datei wird ausgeführt
https://knowthelist.github.io/ftui/www/ftui/examples/grid_responsive.html
- macht im Grunde nur bei den Beispiel-Hauptdateien Sinn

*** Inhalt der Datei wird mit "GitHub-Umgebung" angezeigt
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/grid_responsive.html
- Inhalt der Datei kann in Zwischenablage kopiert werden
- Ansicht der Datei kann umgeschaltet werden
- Historie der Datei kann eingesehen werden
- man kann sich ähnlich zu einem Dateimanager im gesamten Projekt bewegen
- ...

*** Inhalt der Datei wird als reine Text-Datei angezeigt
https://github.com/knowthelist/ftui/raw/master/www/ftui/examples/grid_responsive.html
- Inhalt der Datei kann in Zwischenablage kopiert werden


examples/grid_responsive.html kann quasi als Schablone angesehen und "beliebig" ersetzt werden ... examples/label.html oder components/timeset/timeset.component.js oder ...

[setstate]

oh, da habe ich beim Grid zu viel raus gelöscht. Das Resize geht wirklich nicht mehr. Hatte ich nicht mehr auf dem Schirm. Muss ich nochmal überarbeiten ...

[moonsorrox]

@OdfFhem
ich danke dir für die tolle Erklärung, werde ich mal genau anschauen.!!

@setstate
Was ich aktuell absolut nicht weiß, wie ich jetzt was einstelle um das aktuelle Update zu fahren, denn gestern habe ich ja mein gesamtes Layout zerschossen.
Hier nochmal zur Info ich arbeite mit folgendem Code, wobei wohl wichtig ist wie ich das mit "responsive" umsetze damit es nicht aussieht wie Kraut und Rüben

Code Auswählen Erweitern

<ftui-grid responsive margin="2">
  <!-- Menü Leiste waagerecht - START -->
<ftui-grid-tile row="1" col="10" height="2" width="10" color="transparent">
<ftui-row id="ftui-row-1" height="" width="" align-items="center" space="evenly" class="size-1" color="" margin="0">
<ftui-tab view="home" id="ftui-tab-1" states="on,off" fill="clear" color="" size="large" shape="" direction="horizontal" value="off" group="default" active><ftui-icon name="home1" id="ftui-icon-1" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="wetter" id="ftui-tab-2" states="on,off" fill="clear" color="" size="large" shape="" direction="horizontal" value="off" group="default"><ftui-icon name="cloudy" id="ftui-icon-2" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="rollladen" id="ftui-tab-3" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="fts_shutter_30" id="ftui-icon-3" type="svg" path="../images/openautomation" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="multimedia" id="ftui-tab-4" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="music" id="ftui-icon-4" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<ftui-tab view="webcams" id="ftui-tab-5" states="on,off" fill="clear" color="" size="large" shape="normal" direction="horizontal" value="off" group="default"><ftui-icon name="camera1" id="ftui-icon-5" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab>
<!--ftui-tab view="View6" id="ftui-tab-6" states="on,off" fill="clear" color="" size="large" shape="large" direction="horizontal" value="off" group="default"><ftui-icon name="cogs" id="ftui-icon-6" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab-->
<!--ftui-tab view="View7" id="ftui-tab-7" states="on,off" fill="clear" color="" size="large" shape="large" direction="horizontal" value="off" group="default"><ftui-icon name="connectdevelop" id="ftui-icon-7" type="svg" path="icons" color="" rgb=""></ftui-icon></ftui-tab-->

</ftui-row>
</ftui-grid-tile>
   <!-- Menü Leiste waagerecht - ENDE -->

.
.
.

</ftui-grid>

[masterpete23]

Hi,

ich wollte es gerade auf docker installieren.
Kann es sein, dass dies nicht (mehr) funktioniert?

Code Auswählen Erweitern

standard_init_linux.go:228: exec user process caused: exec format error


[GSK19]

Hallo,
habe gerade einmal eine Verständnisfrage. Ich will einen Wert aus einem Input-Feld per Klick auf ein Icon in ein Dummy schreien. So hatte ich das gedacht:

Code Auswählen Erweitern

<input type="text" id="neuerEintrag">
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set testdummy2 ' + neuerEintrag.value);"></ftui-icon>

Klappt aber irgendwie nicht - es wird nur ein "undefined" übergeben. Was mache ich da falsch? Würd mich echt freuen, wenn mir jemand auf die Sprünge helfen kann!

[setstate]

immer Kleinschreibung für IDs

neuereintrag oder neuer_eintrag anstatt neuerEintrag

[mr_petz]

oder etwas anders :

Code Auswählen Erweitern


<input type="text" id="neuerEintrag">
<ftui-icon name="check" onclick="ftuiApp.fhemService.updateFhem('set testdummy2 ' + document.querySelector('#neuerEintrag').value)"></ftui-icon>



oder:

Code Auswählen Erweitern


<input type="text" id="neuer_eintrag">
<ftui-icon name="check" @click="javascript:sendFhem('set testdummy2 ' + neuer_eintrag.value)"></ftui-icon>


LG mr_petz

Edit:

Code Auswählen Erweitern


<ftui-input id="neuer_eintrag"></ftui-input>
<ftui-icon name="check" @click="javascript:sendFhem('set testdummy2 ' + neuer_eintrag.value);neuer_eintrag.value='';"></ftui-icon>
Hier mit ftui-input und es wird noch nach dem klick das value geleert.