FTUI version 3

[stefan-dd]

Ich nutze das Wetter von Proplanta.
Es gibt schon Ausführungen zu den Wettericons, aber irgendwie ist alles undurchsichtig und man bekommt es nicht Ideal hin.

Mit diesen Readings scheint auch in der Nacht die Sonne.

Code Auswählen Erweitern

fc0_weather00
stark bewölkt

Die Readings unter dieser Verlinkung sind einfach nicht schön, unterscheiden aber Tag und Nacht.

Code Auswählen Erweitern

fc0_weather00Icon
https://www.proplanta.de/wetterdaten/images/symbole/n4.gif


Kann man diese auch Nutzbar für individuelle Icons machen? z.B. Das n4 selektieren und unter einem extra Icon Ordner nutzbar machen.

Hi. Du brauchst keinen provider und icon-set mit angeben wenn du die Standardicons haben willst.
Hier mal eine Demo ohne dein Device anzusprechen. Nur um zu sehen ob deine Icons auch vorhanden sind:

Code Auswählen Erweitern


<ftui-weather size="1" condition="sonnig"></ftui-weather>

Die Sonne sollte jetzt angezeigt werden.

Wenn ja sollte das so funktionieren:

Code Auswählen Erweitern


<ftui-weather size="3" [condition]="ProPlanta:fc1_weather06"></ftui-weather>

proplanta Provider ist Standard und muss nicht angegeben werden.
Die Standardicons sind die von dem Demobild auf Github.

Bsp. für bas-Icons:

Code Auswählen Erweitern


<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weather06"></ftui-weather>


Diese icon-set´s gibt es:

icon-set="meteocons" (muss nicht angegeben/definiert werden) --> sind Standard in {dein ftui3 Ordner}/icons/
icon-set="kleinklima" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/kleinklima/
icon-set="kleinklimaFHEM" --> Ordnerpfad = {fhem}/www/images/default/weather/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen))
icon-set="bas"  --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/bas/  (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen-->

Code Auswählen Erweitern

[condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"))

Diese Ordner-Pfade und deren Inhalt muss natürlich vorhanden sein.

LG

[mr_petz]

@stefan-dd
Es geht nur wie sie im mapping sind:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js

Da musst du sonst alle deinen eigenen Icons umbenennen...
LG mr_petz

[stefan-dd]

Wie komme ich aber zu den  Proplanta-Icons? Der Ansatz ist ja gut.

Code Auswählen Erweitern

proplantaICON: {
    t1: 'CLOUDLESS',
    t2: 'PARTLY_CLOUDY',

[mr_petz]

so wie hier:?
https://forum.fhem.de/index.php/topic,115259.msg1193840.html#msg1193840

Welche Icons (icon-set) möchtest du nun?

Edit:

Code Auswählen Erweitern


proplantaICON: {
    t1: 'CLOUDLESS',
    t2: 'PARTLY_CLOUDY',
etc wird ja weiter unten im Code verarbeitet auf die entsprechenden icon-set´s:

icon-set="meteocons"
icon-set="kleinklima"
icon-set="kleinklimaFHEM"
icon-set="bas"
Bsp:

Code Auswählen Erweitern


  kleinklimaFHEM: {
    CLOUDLESS: '../images/default/weather/sunny.png',
    SUNNY: '../images/default/weather/sunny.png',

usw...

[stefan-dd]

Gibt es eine Lösung, die Einheiten werden nicht angezeigt?

Code Auswählen Erweitern

<ftui-label [text]="Wetter_DD_Proplanta:fc0_tempMax"><span slot="end">°C</span></ftui-label>

[meier81]

Gibt es eine Lösung, die Einheiten werden nicht angezeigt?

Code Auswählen Erweitern

<ftui-label [text]="Wetter_DD_Proplanta:fc0_tempMax"><span slot="end">°C</span></ftui-label>

Hallo Stefan,

probiere mal

Code Auswählen Erweitern

<span slot="unit">°C</span>, das hatte sich mal geändert 

Gruß Markus

[mr_petz]

@stefan-dd
Jetzt fängst du mit einem neuen Thema an und hast dich zu deinem vorherigen nicht geäußert...
Das würde auch anderen helfen wie du es jetzt gemacht hast...
LG mr_petz

[stefan-dd]

beide Themen sind erledigt, Danke

[MDietrich]

Moin aus dem Schnee an der Ostsee

Da ich im Moment etwas Zeit habe, hab ich damit angefangen auf FTUI 3 umzustellen. An dieser Stelle herzlichen dank an setstate, mr_petz und alle anderen, welche sich hierfür engagieren und Zeit investieren.
Die Componenten sehen gut aus und auch die Performance ist gut, mit der Auffälligkeit, dass ein "initpage" > 5000 ms benötigt.

Mein "Problem" bzw. Thema:
um eine unabsichtliche Bedienung zu verhindern, habe ich bei meinen Homematic Thermostaten das Register 'modusBtnLock' auf on gesetzt.

Mit FTUI 2 hat das so geklappt:

Code Auswählen Erweitern

<!-- Checkbox für modusBtnLock -->
    <div data-type="checkbox"
    data-off-color="green"
data-on-color="red"
data-set-on="on"
data-set-off="off"
data-device="HM_Hzg_Poel_Kueche"
data-get="R-modusBtnLock"
data-set="regSet modusBtnLock"
class="inline small compressed top-space">
<div data-type="label"
    data-device="HM_Hzg_Poel_Kueche"
    data-set="getConfig"
    data-get="R-modusBtnLock"
    class="">
</div>
    </div> <!-- Checkbox für modusBtnLock -->

Im Moment scheitere ich schon daran das Register mit dem Reading 'R-modusBtnLock' dem Text eines ftui-label zu zuweisen.
Die einfache Variante:

Code Auswählen Erweitern

<ftui-label
                [text]="HM_Hzg_Poel_Kueche:R-modusBtnLock">
          </ftui-label>
funktioniert nicht, da bekomme ich nur "" als Ergebnis.
Es wäre toll einen Tipp zu bekommen, damit ich an den Feiertagen etwas zu tun habe 

Ich wünsche allen hier im Board geruhsame Feiertage und viel Glück und Gesundheit (auf der Titanic waren die meisten gesund)

LG MDietrich

[mr_petz]

Hi MDietrich.

Danke füs Danke ,  hier muss man aber setstate in den Vordergrund rücken... er macht eigentlich die meiste Arbeit damit alles läuft wie es läuft...

Jetzt zu deiner Situation.
Was sollte im Label den erscheinen und was ist das für ein Device und Reading (R-modusBtnLock)?
Was steht in diesem Reading on/off? Steht das vielleicht auch im state?
Wenn du uns ein list zeigst kann man mehr sehen und es nachstellen...
LG mr_petz

Edit: Habe mal im Forum gesucht. R-btnLock oder R-modusBtnLock sollten normale Reading´s mit on und off sein.
Dann sollte es auch angezeigt werden...
Ist es Vielleicht aus dem sichtbaren Bereich gerutscht im View oder grid-tile?
zum testen ob es an der richtigen Stelle ist mal mit:

Code Auswählen Erweitern


<ftui-label text="HM_Hzg_Poel_Kueche:R-modusBtnLock"></ftui-label>

versuchen. Jetzt solltest du das was hinter text steht lesen können...
und auch nur:

Code Auswählen Erweitern


<ftui-label [text]="HM_Hzg_Poel_Kueche"></ftui-label>


[MDietrich]

Hallo mr_petz,
habe das Problem gelöst, es saß zum Teil vor dem Bildschirm.
Ich hatte einfach einen bestehenden Zugriff kopiert, aber nicht realisiert, dass ich zwar auf das Register über FHEM zugreifen konnte es aber nicht bei den Readings aufgelistet war.
Nachdem ich das Attribut des Homematic Thermostats "expert" auf 'allreg' gesetzt habe klappt es mit:

Code Auswählen Erweitern

<ftui-label get-text="HM_Hzg_Poel_Kueche:R-modusBtnLock"> </ftui-label>

Es könnte sein, das hier bei einem FHEM update was geändert wurde.

Danke für die Unterstützung

MDietrich

[mr_petz]

...

Code Auswählen Erweitern

<ftui-label get-text="HM_Hzg_Poel_Kueche:R-modusBtnLock"> </ftui-label>
...

Ok schön das es jetzt geht. Es sollte aber auch mit dem short-binding [text] gehen.
Siehe hier:
https://github.com/knowthelist/ftui#input-binding

LG mr_petz

[curt]

Ein Bug?

@curt
Schau dir immer am besten die Demos von setstate an

Das habe ich getan.

Zum verkleinern nimmst du stroke-width (ist auch so in der Demo).

Da das nicht funktionierte, schrieb ich hier: Kann ja auch sein, dass ich irgendwie einen Fehler einbaute, ich arbeite mich erst ein.

Edit: es scheint type="arc" nicht an stroke-width gebunden zu sein!
LG mr_petz

Meine Rede.
Aber das ist nicht das einzige Problem. 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.

[mr_petz]

Ein Bug?

Das wird kein bug sein, weil es ja mit has-arc funktioniert wie ich es dir gezeigt habe:

Code Auswählen Erweitern


  <ftui-knob [(value)]="Temperatur_Blumen_Flur:temperature"
    [color]="Temperatur_Blumen_Flur:temperature | step('10:blue,21:green,23:warning,25:danger')"
    height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
    has-value-text value-size="20px" stroke-width="1" decimals="1">
  </ftui-knob>

setstate kann da bestimmt was dazu sagen zu den unterschiedlichen Möglichkeiten der Definition has-arc und type="arc" etc...
Man sollte immer eins bedenken, dass hier alles noch in der Entwicklung ist, auch wenn schon der Großteil bereits gut läuft.

...
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.

Irgendwo im Thread wurde dazu was geschrieben. setstate hatte deswegen extra das decimals für den knob integriert...
Das war im Februar:
https://github.com/knowthelist/ftui/commit/1652e0f8045b3424417150bcd3941fb562b11b0b#diff-8a501780dee08f895d535b83501b16db4f91924bc3e1ac5f1103051f587a57dd
Da es noch keine vollständige Doku gibt, bleibt manches ungewiss und man bekommt es erst nach viel lesen und oder testen raus...
LG mr_petz

Edit: Habe einen Beitrag von setstate gefunden:
https://forum.fhem.de/index.php/topic,115259.msg1130024.html#msg1130024
In den vorherigen Beiträgen geht es auch darum...
Fazit:
Du brauchst also nur min="-20.0" max="40.0" angeben, da würde decimals="1" unnötig werden...
round() hingegen zieht normalerweise alleinstehend und oder bei einer vorangegangen Berechnung. Bsp.:

Code Auswählen Erweitern

| divide(3.1) | multiply(100) | round(1)
(!beim knob funktioniert es aber so nicht alllein! da funktioniert es nur mit zusätzlichen decimals="")

[curt]

Danke für Deine Mühen. Es ist eine neue Oberfläche, die die Schwächen der alten Oberfläche beheben soll, so verstehe ich wenigstens. Rein konzeptionell denke ich ja, dass damit sofort eine neue Schwäche eingebaut ist: Das Pipe-Konzept ist hier durchbrochen. Aber ok, man muss die Dinge nehmen wie sie sind - wer bin ich denn?

Die fehlende Doku macht es schwierig: Jeder braucht an den immer gleichen Stellen Zeit. Mir fehlen da zudem best-practices-Beispiele, also das Leute zeigen, wie das insgesamt bei ihnen aussieht.

Aktuell scheitere ich übrigens an Farben. @setstate möchte, dass es nur wenige Farben gibt, ich möchte meinen Tuschkasten behalten. Gleich auf Seite 1 dieses Threads wird das Thema behandelt - wie immer aber in Andeutungen und Ausrissen - prompt funktioniert es bei mir nicht:

user.css

Code Auswählen Erweitern


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


index.html

Code Auswählen Erweitern


  <link href="ftui.css" rel="stylesheet">
  <link href="user.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
...
   <ftui-button [(dummy)]="dummy1" shape="circle" color="b1"></ftui-button>


Wie sie sehen - sehen Sie nichts: Der Button verschwindet.
Das kann ich auch gern mal bei label machen - da wird die Schrift dann weiß.

Und ich habe nicht die geringste Ahnung, was da nun wieder schief läuft. (Und mir graust es vor den Umstellungen, die komplexer werden, das Widget "Link" gibt es offenbar ja auch nicht mehr.)

Ok, erstmal Farben: Was mache ich denn da nun wieder falsch?