FTUI version 3

mr_petz · 27 Dezember 2021, 09:27:10

Hi curt.
Nicht verzweifeln. Es dauert bei jeden ein wenig um sich einzuarbeiten...

Jetzt zu deinem color und gleichzeitig link:
im head mal am besten die user.css als letztes setzen:


  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="user.css" rel="stylesheet">

Deine user.css sollte laut deiner Angabe im Hauptverzeichnis wie die ftui.css liegen!

jetzt zur Definition in der user.css:

Code Auswählen


[color=b1] {
  --color-base: #0B4513;
  --color-contrast: var(--white);
  --color-shade: var(--seagreen);
}

aufpassen das die ; gesetzt sind und bei contrast war eine ( zu viel.

jetzt zum button und button inkl. linkfunktion und deinem color:

Code Auswählen


<ftui-button [(dummy)]="dummy1" shape="circle" color="b1"></ftui-button>

hier mit Link:
<ftui-button class="size-1" @click="javascript:window.open('http://127.0.0.1:8083');" color="b1">FHEM color</ftui-button>
<ftui-button class="size-1" @click="javascript:window.location.href='http://127.0.0.1:8083';" color="b1">FHEM color</ftui-button>

Jetzt funktioniert dein color. IP-Adresse/Url musst du natürlich anpassen.
In icon oder label könntest du das @click auch anwenden...

Du kannst auch einen klassischen Link einfügen:

Code Auswählen


<a href="http://127.0.0.1:8083/fhem/">FHEM</a>

LG mr_petz

Edit:
Hier noch ein Beispiel für ein Reload der Seite mit @click:

Code Auswählen


<ftui-icon class="size-1" name="refresh1" @click="javascript:window.location.reload(true);"></ftui-icon>

und du kannst auch einen Befehl an fhem senden mit @click:

Code Auswählen


@click="sendFhem('get oder set Device was auch immer....')"

setstate stellt uns den Baukasten und wir können ihn benutzen...

grossmaggul · 27 Dezember 2021, 15:12:38

Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?

stefan-dd · 27 Dezember 2021, 17:31:10

Code Auswählen

<ftui-popup id="pop-custom-close" timeout="0" opacity="0.1">.....

grossmaggul · 27 Dezember 2021, 18:20:41

Danke, aber das meinte ich nicht, das ist ja ein Popup was wieder geschlossen wird.

Ich meine wenn man ein Tabmenü hat und einen anderen Tab angewählt hat, daß dann nach einer eingestellten Zeit wieder auf die "Home"-Seite zurückgesprungen wird.

mr_petz · 28 Dezember 2021, 00:00:44

Zitat von: grossmaggul am 27 Dezember 2021, 15:12:38
Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?

hi grossmaggul.
setstate hatte mal was zur Nachverfolgung vom Timestamp und oder Reading geschrieben.
Hatte es mir zum Glück notiert...

Code Auswählen


<script>
  setInterval(
    () => myout.innerText =
      ftuiApp.fhemService.states.connection.lastEventTimestamp.toLocaleString(),
      //ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.time,
      //ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.update,
      //ftuiApp.fhemService.getReadingItem('AussenTemp:temperature').data.value,
    6000
  );
</script>

Das könntest du dafür in abgewandelter Form vielleicht für dich verwenden Bsp.:

Code Auswählen


<script>
  setInterval(
    () => window.location.href='http://127.0.0.1:8083/fhem/ftui/',
    10000
  );
</script>

in ms.
Hier wird aber immer ein href durchgeführt! Das Beispiel entspricht wie einem automatischen Reload der Seite.

In dieser Version nur einmalig bei Aufruf der entsprechenden Seite:

Code Auswählen


<script>
  setTimeout(
    () => window.location.href='http://127.0.0.1:8083/fhem/ftui/',
    10000
  );
</script>

Das alles muss dann ins <head> rein...
Kannst es ja auch in anderer Form von href testen...:

Code Auswählen

window.location.href="view/heizung.html"

Ich hoffe das Hilft erstmal

LG mr_petz

Edit: ich habe in den letzten 30 Seiten auch dazu nix gefunden...

Edit2:
ODER besser im ftui-tab mit @click:

Code Auswählen


@click="setTimeout(() => window.location.href='view/heizung.html',10000);"

grossmaggul · 28 Dezember 2021, 00:50:31

Danke Dir, werde ich mir mal in einer ruhigen Minute zu Gemüte führen.

curt · 28 Dezember 2021, 02:42:10

Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
im head mal am besten die user.css als letztes setzen:

Ok, erledigt.

Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
Deine user.css sollte laut deiner Angabe im Hauptverzeichnis wie die ftui.css liegen!

Klar.

Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
jetzt zur Definition in der user.css:
...
aufpassen das die ; gesetzt sind und bei contrast war eine ( zu viel.

Das fehlende Semikolon geht auf den Autoren von Seite 1, die Klammer geht auf mich. Sooo - jetzt funktioniert das mit den Farben und ich kann erstmal die Grundlagen für meine Umstellung schaffen. Sehr herzlichen Dank Dir!

Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
jetzt zum button und button inkl. linkfunktion und deinem color:
...
Du kannst auch einen klassischen Link einfügen:

Ohne den ersten Teil jetzt probiert zu haben - da reden wir vermutlich aneinander vorbei. Also bei diesem Kästchen-Beispiel https://knowthelist.github.io/ftui/www/ftui/examples/tab.html wird ja rechts in Abhängigkeit eines Klicks auf ein Icon der linken Spalte der Inhalt verändert. Bei ftui2 gab es nun ein Widget "Link", da konnte man das gleiche Verhalten derart provozieren: Man klickt auf ein Icon, welches sich rechts befindet -> der Inhalt der rechten Seite (bei setstate "Tab-View genannt) ändert sich. Also es ist ausdrücklich nicht popup gemeint, das wäre im Falle des Falles nur der letzte Notnagel.

Zitat von: mr_petz am 27 Dezember 2021, 09:27:10
setstate stellt uns den Baukasten und wir können ihn benutzen...

Also das ich setstate und allen Mitarbeitenden dankbar bin ist ja ohne Frage. Trotzdem sollte es erlaubt sein zu sagen, was nicht so ganz schön ist. Und das ist einerseits die fehlende Doku, andererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt. Bei FTUI2 war das noch anders, da zeigten so einige stolz, was man damit so alles machen kann. Und erst das führte oft dazu, dass andere sagten "will auch" und das insbesondere andere die Idee weiterentwickelten.

Ich weiß beispielsweise noch immer nicht, wie man Temperaturen anzeigt. Ja, das geht über knob - aber vielleicht geht das auch noch anders und viel ergonomischer?

Zitat von: grossmaggul am 27 Dezember 2021, 15:12:38
Ich finde es gerade nicht, gab es eine Möglichkeit, daß nach einer eingestellten Zeit wieder auf die Hauptseite zurück gesprungen wird?

Ich weiß was Du meinst. Bei FTUI2 konnte man das so lösen:

index.html

Code Auswählen


<meta http-equiv="refresh" content="3600; URL=/fhem/www/tablet/index.html">

Das müsste eigentlich auch bei FTUI3 funktionieren - ich habe das aber nicht getestet.
P.S: URL natürlich auf ftui-Verzeichnis anpassen...

setstate · 28 Dezember 2021, 10:49:38

Zitat von: curt am 26 Dezember 2021, 05:00:01
Nicht stringent ist auch folgendes:
Es gibt ja das PIPE-Konzept. Um bei ftui-knob zu runden, würde ich nun erwarten, dass ich round(1) nutzen kann bzw. muss. So ist das aber nicht, da gilt nun wieder decimals="1". Warum auch immer.

Die Pipe-Funktionen benutzt man, um die Werte von oder zu FHEM zu bearbeiten. Zum Beispiel x10 oder um zu runden

Für KNOB benötigt man aber auch schon vorher einige Attribute, um das grundsätzliche Verhalten festzulegen: Soll die Zahl in der Mitte 18 oder 18.5 anzeigen; oder: ist max jetzt 24 oder 24.5.; Oder: man hat min="18" und max="26", will aber auch Werte 0.1 Grad fein einstellen.

Code Auswählen

<ftui-knob value="18" min="18" max="26" decimals="1" ticks="8" type="scale" has-value-text has-scale-text></ftui-knob>

Aber ich merke gerade, vielleicht will man in 0.5 Schritten springen und nicht 0.1. Und vielleicht will man die große Zahl als 23.5 angezeigt haben, die Skala-Zahlen aber ohne Komma. Muss ich also noch etwas umgebaut werden.

grossmaggul · 28 Dezember 2021, 11:46:30

ZitatDas müsste eigentlich auch bei FTUI3 funktionieren -

Ja, tut es, aber das ging in ftui2 noch anders, weil mit Deiner Version wird ja einfach nur ein refresh der Homeseite ausgeführt, aber eben immer alle 3600s, das finde ich aber nicht so optimal.

Zitatandererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt.

Dann erstelle doch einfach selber einen Thread und zeige schonmal was Du gebaut hast, dann werden sich sicher andere anschließen.

Und was die Doku betrifft, sicher, das ist im Moment nicht optimal, aber da das Ganze noch Betastadium hat, wäre es auch nicht sinnvoll eine ausführliche Doku zu schreiben, weil sich ständig was ändert.
Aber davon mal ab, find ich, daß man nicht von setstate auch noch verlangen kann(mal abgesehen davon, daß man eh nix verlangen kann) eine ausführliche Doku zu schreiben, da bleibt dann u.U. keine Zeit mehr für FTUI3, da müssten dann vielleicht mal die User tätig werden, mache doch mal den Anfang.

mr_petz · 28 Dezember 2021, 13:53:59

Zitat von: curt am 28 Dezember 2021, 02:42:10
Ohne den ersten Teil jetzt probiert zu haben - da reden wir vermutlich aneinander vorbei. Also bei diesem Kästchen-Beispiel https://knowthelist.github.io/ftui/www/ftui/examples/tab.html wird ja rechts in Abhängigkeit eines Klicks auf ein Icon der linken Spalte der Inhalt verändert. Bei ftui2 gab es nun ein Widget "Link", da konnte man das gleiche Verhalten derart provozieren: Man klickt auf ein Icon, welches sich rechts befindet -> der Inhalt der rechten Seite (bei setstate "Tab-View genannt) ändert sich. Also es ist ausdrücklich nicht popup gemeint, das wäre im Falle des Falles nur der letzte Notnagel.

Verstehe ich leider nicht ganz...

Zitat
Also das ich setstate und allen Mitarbeitenden dankbar bin ist ja ohne Frage. Trotzdem sollte es erlaubt sein zu sagen, was nicht so ganz schön ist. Und das ist einerseits die fehlende Doku, andererseits das leider fast niemand mal zeigt, was er so mit FTUI3 anstellt. Bei FTUI2 war das noch anders, da zeigten so einige stolz, was man damit so alles machen kann. Und erst das führte oft dazu, dass andere sagten "will auch" und das insbesondere andere die Idee weiterentwickelten.

Da bin ich bei grossmaggul´s Meinung. Jeder sollte hier eigeninitiative an den Tag legen und gegebenfalls setstate und alle anderen bei dieser Entwicklung unterstützen wie und wo sie können...

Zitat
Ich weiß beispielsweise noch immer nicht, wie man Temperaturen anzeigt. Ja, das geht über knob - aber vielleicht geht das auch noch anders und viel ergonomischer?

Bringe doch bitte konkrete Vorschläge wie du dir das vorstellst. Es gibt mehrere Möglichkeiten in FTUI3 eine Temperatur darzustellen...
icon mit label, nur label, icon was sich abhängig vom Reading ändert usw...

LG mr_petz

mr_petz · 28 Dezember 2021, 20:09:44

Zitat von: grossmaggul am 28 Dezember 2021, 00:50:31
Danke Dir, werde ich mir mal in einer ruhigen Minute zu Gemüte führen.

Hi ich nochmal. Ich konnte es nicht lassen...

Ich habe mal ein @click-script geschrieben.
Ich habe es bei mir gerade getestet. Hier im ftui-tab view="View2".
Wenn man auf diesen tab drückt springt er in den View1 (der ja hier im Beispiel Standard ist) nach 10s zurück:

Code Auswählen


<ftui-tab view="View2" direction="vertical" @click="setTimeout(() => ftuiHelper.selectAll('ftui-tab-view').forEach(elem => {(elem.id !== 'View1'?elem.setAttribute('hidden', ''):elem.removeAttribute('hidden'))}),10000);">

@click kann ja bei vielen Sachen (icon,label usw.) verwendet werden.
Du müsstest nur View1 umbenennen in deinen ersten Startview, dann geht er nach 10s (10000ms) zurück.
Die 10000 hinten kannst du nach deiner Zeit anpassen.
Somit wird kein reload des View oder der Page provoziert...
Ich sag ja... setstate gibt uns den Baukasten...
Jetzt bist du drann...

LG mr_petz

Edit: Ich weiss nicht ob man da extra ein eigenes Modul machen muss. Man muss es nur irgendwo festhalten oder???
ps. der Timeout wird auch nur einmal ausgeführt.
Edit2: Code gekürzt.
Edit3: Nochmal angepasst: https://forum.fhem.de/index.php/topic,115259.msg1196540.html#msg1196540

grossmaggul · 28 Dezember 2021, 20:38:36

ZitatIch sag ja... setstate gibt uns den Baukasten...

Leider bin ich zu doof für die Bauklötzchen.

Irgendwie war das in FTUI2 einfacher.

meier81 · 28 Dezember 2021, 21:10:10

Zitat von: blenni am 10 Dezember 2021, 13:41:42
Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html

Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstand, aber rechts geht die Markierung über die Leiste hinaus.

Wollte nochmal nachfragen bezüglich dieses Posts, habe nämlich das gleiche Anzeigeproblem, muss irgendwann in den letzten Updates passiert sein, ging nämlich mal ohne Probleme.

Vielleicht könnte sich das setstate mal anschauen.

Hier mal der Link mit Bild zum Originalpost: https://forum.fhem.de/index.php/topic,115259.msg1192500.html#msg1192500

Gruß Markus

curt · 28 Dezember 2021, 23:45:20

Zitat von: setstate am 28 Dezember 2021, 10:49:38
Für KNOB [...]
Aber ich merke gerade, vielleicht will man in 0.5 Schritten springen und nicht 0.1. Und vielleicht will man die große Zahl als 23.5 angezeigt haben, die Skala-Zahlen aber ohne Komma. Muss ich also noch etwas umgebaut werden.

Aus meiner Sicht wäre es sinnvoll, Skalenangaben zu trennen von (Mess)Werten, das sind zwei Paar Schuh. Von daher würde das in Deinem Konzept eigentlich vorgesehene Pipe auf round schon gut passen.

grossmaggul · 29 Dezember 2021, 00:59:53

ZitatIch habe mal ein @click-script geschrieben.

Und das funktioniert perfekt, danke dafür!!