FTUI version 3

[Carsten]

Moin!

Nehme gerade FTUI3 in Betrieb, liebe es jetzt schon und versuche alle Infos zusammen zu suchen. Gestaltet sich aber etwas schwierig, weil ich häufig bei alten TabletUI 2.x-Themen lande.

Ich hab z.B. erst spät das Thermostat-Modul von mr_petz entdeckt.

Gibt es irgendwo eine Liste von verfügbaren Modulen oder eine sinnvolle Suchmöglichkeit, die ich übersehe?
Gibt es mittlerweile neben der readme auf github weitere Anleitungen?

[mr_petz]

Hi Carsten,
Offizielle Komponentenliste wäre diese:
https://github.com/knowthelist/ftui/tree/master/www/ftui/components
Meine "inoffizielle" siehst du unten.

Eine andere Anleitung ist nur hier in diesen Thread zu finden.
Am besten hier im Thread die SuFu benutzen. Da sind dann die Treffer von diesen Thread.
LG

[Carsten]

Hallo mr_petz,

sorry, ich hab das falsch formuliert. Ich meinte 3rd-Party Module.

Deine Liste hatte ich auch bereits gefunden, nachdem ich das Thermostat entdeckt hatte. Danke dafür! Ich dachte, es gäbe vielleicht noch zusätzliche Module von anderen Entwicklern, die mir entgangen sind.
Bei der 2.x gibt es ne ganze Liste von 3rd-Party Widgets im Wiki.

Gibt es zu deinen anderen Modulen auch Screenshots oder Beispiele? Hab in den Branches keine gefunden.

[Dracolein]

a.) wollte ich hier nochmal erinnern in der Hoffnung auf Hilfe:

Habe kürzlich mal wieder FHEM update all gemacht. Scheinbar hat sich der Hexcode für die Farbe "blue" etwas geändert.
Ich meine das Problem hatte ich bei mir schon einmal. Um der Sache für mich Herr zu werden, nach allem was ich gelernt habe, müsste ich die Definition für "blue" in der user.css eintragen, wessen Farbcode das Wort zugeordnet werden soll. Wäre das richtig?

Was müsste ich dort eintragen? In der ftui-theme.css finde ich die Definition

Code Auswählen Erweitern

  --blue: #436D8D;

b.) hätte ich eine Frage anhand eines Beispiels:

Code Auswählen Erweitern


              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:electricity_mast')"
                      [color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:green, Schnellladen:orange')">
              </ftui-icon>

Könnte man die Icongröße auch via map() abhängig vom Parameterwert individualisieren? Also z.B.:

Code Auswählen Erweitern


[size]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:1, Schnellladen:2')">


[mr_petz]

a.) wollte ich hier nochmal erinnern in der Hoffnung auf Hilfe:

zum Eintragen in die user.css

Code Auswählen Erweitern


:root {
--blue: #436D8D;
}

Wenn du jetzt color="blue" definierst, dann wird diese Farbe genommen.

b.) hätte ich eine Frage anhand eines Beispiels:

Code Auswählen Erweitern


              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:electricity_mast')"
                      [color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:green, Schnellladen:orange')">
              </ftui-icon>

Könnte man die Icongröße auch via map() abhängig vom Parameterwert individualisieren? Also z.B.:

Code Auswählen Erweitern


[size]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:1, Schnellladen:2')">


Wie du schon sagst kannst du mit map() oder step() size oder style individualisieren.

LG

[mr_petz]

Hallo mr_petz,

sorry, ich hab das falsch formuliert. Ich meinte 3rd-Party Module.

Deine Liste hatte ich auch bereits gefunden, nachdem ich das Thermostat entdeckt hatte. Danke dafür! Ich dachte, es gäbe vielleicht noch zusätzliche Module von anderen Entwicklern, die mir entgangen sind.
Bei der 2.x gibt es ne ganze Liste von 3rd-Party Widgets im Wiki.

Gibt es zu deinen anderen Modulen auch Screenshots oder Beispiele? Hab in den Branches keine gefunden.

3rd-Party
Alles Auffindbar (auch mit der Suche [FTUI3]):
Module von @yersinia:

• https://forum.fhem.de/index.php/topic,119440.msg1233955.html#msg1233955
• https://forum.fhem.de/index.php/topic,117858.msg1122799.html#msg1122799

mehr ist mir nicht bekannt.
Edit: Doch eins noch von @Thyraz:
https://github.com/Thyraz/ftui/tree/master/components/calendar

Infos gibt es von meinen Erweiterungen hier und unter der Suche [FTUI3].
Im Git von mir gibt es examples vom thermostat, calview und pinpad. Weiter bin ich noch nicht gekommen. Musst du in den entsprechenden Threads und Beiträgen die Infos holen, Screen´s anschauen oder Fragen.
Ich habe noch zwei in der Pipeline, war aber bisher kein Bedarf. Eins werde ich in kürze noch präsentieren...
Was suchst du im Speziellen?
Und nein es gibt noch keine Wiki-Einträge über alle Module.
LG

[OdfFhem]

@Carsten

Unter Umständen macht es Sinn, die Theorie umzudrehen.

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

Dann kann man schauen, ob schon die Bordmittel dafür ausreichen müssten oder ob jemand was "Individuelles" dafür bereitstellen kann oder jemand in der Lage ist, etwas Neues zu entwickeln.

[Dracolein]

zum Eintragen in die user.css

Code Auswählen Erweitern


:root {
--blue: #436D8D;
}

Wenn du jetzt color="blue" definierst, dann wird diese Farbe genommen.

Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.

Die Farbe in FTUI3 ist (Ausschnitt aus einem <ftui-label>) an vielen Punkten mitunter z.B. so definiert:

Code Auswählen Erweitern

[color]="Aussensensor_T:temperature | step('-20: blue, 8: green, 21: orange, 27: red')">

[yersinia]

Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.

zum Eintragen in die user.css

Code Auswählen Erweitern


:root {
--blue: #436D8D;
}


Das kann so auch nur mit Glück funktionieren, da es für blue zwei unterschiedliche Definitionen gibt. Nutze einen eigenen Namensraum in der user.css:

Code Auswählen Erweitern

:root {
--meinblau: #436D8D;
}

Und entsprechend dann ersetzen:

Code Auswählen Erweitern

[color]="Aussensensor_T:temperature | step('-20: meinblau, 8: green, 21: orange, 27: red')">

Das schützt dich auch vor FTUI3 Updates....

[Dracolein]

Damit wird die Textfarbe weiss, also so als wäre gar keine Farbe definiert 

[yersinia]

...die user.css hast du aber auch eingebunden?

Code Auswählen Erweitern

<link href="user.css" rel="stylesheet" type="text/css" />

[Dracolein]

Ja die ist eingebunden und funktioniert, weil da schon eine Definition enthalten ist

[yersinia]

Jo, hast recht, da fehlt noch was (habs mal versucht nachzustellen), du müsstest die Definition noch um einen selektor erweitern:

Code Auswählen Erweitern

:root {
  --meinblau: #436D8D;
}

[color="meinblau"] {
  --color-base: var(--meinblau);
  --color-contrast: var(--success-contrast-color);
}
Ob du --color-contrast auch setzt ist dir überlassen, ich habe dies von der originalen blue-Definition übernommen.

[mr_petz]

Leider funktioniert es nicht, habe es 1:1 in der user.css eingetragen.

Die Farbe in FTUI3 ist (Ausschnitt aus einem <ftui-label>) an vielen Punkten mitunter z.B. so definiert:

Code Auswählen Erweitern

[color]="Aussensensor_T:temperature | step('-20: blue, 8: green, 21: orange, 27: red')">

Wenn du es 1:1 so eingetragen hast dann siehst du auch keinen Unterschied, weil das '--blue: #436D8D' das Standardblau im FTUI ist!
https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css#L7
Ich habe es mal unter FF und Chrome nachgestellt und mit dieser Definition:

Code Auswählen Erweitern


:root {
  --blue: #446666;
}

wird das blue umgestrickt siehe Anhang.
Wenn du ein eigenes Blau im color haben möchtest, reicht:

Code Auswählen Erweitern


[color="blau"] {
  color: #446666;
}

Das alles gilt für color="" Angaben.

ansonsten reicht für andere Sachen die nicht zu color="" gehören:

Code Auswählen Erweitern


:root {
  --blau: #446666;
}

und kann mit var(--blau) aufgerufen werden....
Bsp. im style von Komponenten:

Code Auswählen Erweitern


style="--droplist-text-color: var(--blau);"


Edit: Und Cache leeren nach der Änderung nicht vergessen!

LG mr_petz

[C0mmanda]

Hallo,

mir macht der Slider Probleme auf dem iPad.
Im Browser ist alles wunderbar, aber auf dem iPad bleibt er "unsichtbar" und ich erhalte
die Fehlermeldung

"slider.component.js:49
ReferenceError: Can't find variable:
ResizeObserver"


Funktion ist gegeben, ich kann die Lautstärke ändern, aber ich sehe ihn nicht
Weiß jemand Rat?
Danke.

Code Auswählen Erweitern

        <ftui-slider [(value)]="KODI_KU:volume" max="80"
                   tick="5"
                   has-wide-ticks></ftui-slider>
        <ftui-label size="2">Volume</ftui-label>