FTUI version 3

[grossmaggul]

Was meinst Du denn genau mit KalenderDevice?

Die "termine" sind genauso Kalender wie die anderen.

[Thyraz]

bei mir wird 'No events to display' angezeigt.

HTML in ftui:

Code Auswählen Erweitern


     <ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="3" height="5" width="9">
<header>Kalender</header>
<ftui-calendar view="listWeek">
<ftui-calendar-data calendar="Kalender_Abfall" color="primary"></ftui-calendar-data>
</ftui-calendar>
</ftui-grid-tile>
     </ftui-tab-view>


Hi Andreas,

das sieht eigentlich gut aus vom HTML Code.
Ja, Kalender_Abfall sollte der Name der Instanz vom FHEM Calendar Modul sein (Achtung, case-sensitive).

Siehst du, wenn du im Browser die Entwicklertools öffnest und dort die Console irgendwelche Errors?

Falls da alles ok ist: Was spuckt ein

Code Auswählen Erweitern


get Kalender_Abfall events format:custom="$U|$T1|$T2|$S|$L|$DS|$CA|$d" timeFormat:"%Y-%m-%dT%H:%M:%S" limit:from=-31d,to=+31d

in Fhem aus?
Siehst du da Ereignisse (und auch welche die in der aktuellen Woche liegen)?

[Thyraz]

@setstate die Pipes sind übrigens genial.

Gerade gemerkt, dass man Steigung und Achsenverschiebung von Readings / Kommando so ja sogar lösen kann, ohne dass eine Komponente das unterstützt:

Code Auswählen Erweitern


<ftui-blind [value]="Rollo:positionReading | multiply(-1.01010101) | add(100)" (value)="multiply(-0.99) | add(99) | Rollo:positionCmd" ...

Damit wird ein Rollo mit Werten von 99 bis 0 in Fhem auf 0 bis 100 in FTUI umgemapped.
Also sowohl der Wertebereich skaliert als auch invertiert (also 99 = Rollo zu statt Rollo offen).

Meine Frage wäre, ob du evtl. für ein Pipe zu begeistern wäre, dass das etwas einfacher konfigurierbar macht (also ohne Taschenrechner ).
Irgendwie in die Richtung scale(minWertFhem, maxWertFhem, minWertFTUI, maxWertFTUI).

Dann könnte man damit beliebig einen Wertebereich ummappen.
die Pipe müsste halt je nach Richtung (FHEM->FTUI oder FTUI->FHEM) anders herum rechnen, trotz gleicher Konfiguration:

Code Auswählen Erweitern


<ftui-blind [value]="Rollo:positionReading | scale(99,0,0,100)" (value)="scale(99,0,0,100) | Rollo:positionCmd" ...

Sprich eingehend aus Fhem wäre es ReadingsVal * Steigung + Achsenabschnitt und ausgehend wäre es (SetVal - Achsenabschnittt) / Steigung.

[Loetkolben]

@Thyraz:
In der Browserkonsole sieht man nur die regelmäßigen Daten von meinem Stromzähler (sicherlich für das Chart vom Stromverbrauch).

Code Auswählen Erweitern


ftui-label-38  -  onReadingEvent: set this.text=9.453 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:11 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.454 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:16 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.455 ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.456 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:26 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.457 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:31 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
Page became visible again -> start healthCheck in 3 secondes ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.458 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:36 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbrauch ftui.helper.js:101:17
ftui-label-38  -  onReadingEvent: set this.text=9.459 ftui.helper.js:101:17
ftui-chart-data-1  -  onReadingEvent: set this.update=2020-11-20 21:35:41 ftui.helper.js:101:17
send to FHEM: get FileLog_Stromzaehler - - 2020-11-20_00:00:00 2020-11-21_00:00:00 3:AktuellerVerbra


Das 'get Kalender_Abfall.....' bringt ein leeres Ergebnisfenster mit nem OK-Button.

[Edit:]
Kommando zurück!
Irgendetwas scheint mit meinem Abfallkalender nicht zu stimmen.
Ich habe zum Test mal meinen Dienstkalender genommen, da klappt es.
Jetzt muss ich mal schauen was da nicht stimmt, im FTUI 2.x funktioniert alles reibungslos, auch der Abfallkalender.

[Thyraz]

Puh, evlt. liegt es auch einfach an meinem mangelnden Verständnis von iCal Dateien oder dem Calendar Modul in Fhem.
Hatte bis ich vor 2 Tagen die FTUI Komponente programmiert habe keine wirklichen Berührungspunkte damit gehabt.

Was passiert denn wenn du den letzten Parameter (das limit mit +/-31 Tagen) weglässt?
Dann solltest du ja alle Einträge aus dem Kalender bekommen.
Siehst du da welche für den aktuellen Zeitraum?

Oder muss man sich die nachfolgenden Termine bei Serienterminen alle selbst berechnen?

Bei meinem iCloud Kalender kommen wir wiederholenden Termine korrekt rein, dort scheint das also als einzelne Termine über die API ausgeliefert zu werden.
Aber we weiß ob der iCal Standard das auch anders erlaubt...

[setstate]

Meine Frage wäre, ob du evtl. für ein Pipe zu begeistern wäre, dass das etwas einfacher konfigurierbar macht (also ohne Taschenrechner ).
Irgendwie in die Richtung scale(minWertFhem, maxWertFhem, minWertFTUI, maxWertFTUI).

Dann könnte man damit beliebig einen Wertebereich ummappen.
die Pipe müsste halt je nach Richtung (FHEM->FTUI oder FTUI->FHEM) anders herum rechnen, trotz gleicher Konfiguration:

Code Auswählen Erweitern


<ftui-blind [value]="Rollo:positionReading | scale(99,0,0,100)" (value)="scale(99,0,0,100) | Rollo:positionCmd" ...

Sprich eingehend aus Fhem wäre es ReadingsVal * Steigung + Achsenabschnitt und ausgehend wäre es (SetVal - Achsenabschnittt) / Steigung.

Die Pipe-Funktion habe ich jetzt eingebaut, aber das mit der Richtungsumkehr habe ich mir gespart. Es ist immer von links nach rechts (---->) gemeint

scale(minIn, maxIn, minOut, maxOut)

50 | scale(50,0,50,100)  = 50
0 | scale(50,0,50,100)  = 100

Kommt mit dem nächsten Commit

[OdfFhem]

@setstate

Ich habe gestern die Pipes bzgl. 'ago' und 'till' als Pull Request bereitgestellt.

Jetzt bleiben noch ein paar Fragen:
- Könnte das so übernommen werden, obwohl die Basis mittlerweile schon anders ist ?
- Ich habe einige Beispiele in das label-example integriert. Gibt es derzeit noch eine andere Möglichkeit, Beispiele für den Einsatz von Pipes zu hinterlegen ?
- Wenn es um eher spezielle Pipes wie z.B. scale geht, könnten die dann auch genau von der entsprechenden Komponente eingeschleust werden ? Vermutlich interessant für "externe" Komponenten.

[Thyraz]

Super, danke setstate.

@OdFhem mit der Komponente würde ich das nicht einschleusen, da Pipes ja vor der Komponente wirken und auch für alle Komponenten nutzbar sind.

Aber die Idee eigene Pipes anbieten zu können klingt an sich cool.
Denke man müsste die Pipes dann in eigene Files stecken, und diese dann wie die Pipe benennen. Das Ganze dann eben in einen Pipes Ordner in FTUI, aus dem die dann anhand des Names gesucht und geladen werden.

Ist aber für setstate sicher ein etwas größerer Umbau.
Daher ist die Frage ob es da wirklich so viele Use-Cases gibt, oder ob man in der Realität gar nicht so viele verschiedene Pipes benötigt...

[Loetkolben]

Puh, evlt. liegt es auch einfach an meinem mangelnden Verständnis von iCal Dateien oder dem Calendar Modul in Fhem.
Hatte bis ich vor 2 Tagen die FTUI Komponente programmiert habe keine wirklichen Berührungspunkte damit gehabt.

Was passiert denn wenn du den letzten Parameter (das limit mit +/-31 Tagen) weglässt?
Dann solltest du ja alle Einträge aus dem Kalender bekommen.
Siehst du da welche für den aktuellen Zeitraum?

Oder muss man sich die nachfolgenden Termine bei Serienterminen alle selbst berechnen?

Bei meinem iCloud Kalender kommen wir wiederholenden Termine korrekt rein, dort scheint das also als einzelne Termine über die API ausgeliefert zu werden.
Aber we weiß ob der iCal Standard das auch anders erlaubt...

Es funktioniert jetzt. 
Irgendwas war mit der URL für meinen Abfall-Kalender faul. Habe die im FHEM-Device eingetragene mal mit der URL verglichen die Google mir gibt und da ist es aufgefallen.
Warum aber im FTUI2.x mein Abfallkalender richtig angezeigt wurde - keine Ahnung.

Vielen Dank für die Hilfe!

  Andreas

[grossmaggul]

Ich steige nicht so recht durch, gibt es irgendwelche Möglichkeiten der Ausrichtung von Text oder auch Widgets, also linksbündig, zentriert oder rechtsbündig?
Ich habe in der css gesehen, daß man in der "cell" ein paar Möglichkeiten hat, die sich aber scheinbar nicht auf alle Objekte anwenden lassen.
Ein bißchen Licht im Dunkel wäre nett.

[setstate]

@setstate

Ich habe gestern die Pipes bzgl. 'ago' und 'till' als Pull Request bereitgestellt.

Jetzt bleiben noch ein paar Fragen:
- Könnte das so übernommen werden, obwohl die Basis mittlerweile schon anders ist ?
- Ich habe einige Beispiele in das label-example integriert. Gibt es derzeit noch eine andere Möglichkeit, Beispiele für den Einsatz von Pipes zu hinterlegen ?
- Wenn es um eher spezielle Pipes wie z.B. scale geht, könnten die dann auch genau von der entsprechenden Komponente eingeschleust werden ? Vermutlich interessant für "externe" Komponenten.

Vielen Dank für die Zuarbeiten!

Lustigerweise hatte ich gestern auch ago schon fertig, bei till fielen mir dann aber die Augen zu.

Ich überlege immer noch, wo eine Trennung in ago und agoFormat Sinn macht. Würde man ago mit anderen Nachfolgern als agoFormat nutzen? Könnte agoFormat andere Vorfunktionen verarbeiten? Ich finde keine sinnvollen UseCases. Deshalb habe ich es bei mir in einer Funktion gelassen.

Die Angabe tillFormat('%SSSSSSSSs','upper') finde ich sehr unübersichtlich. Habe ich jetzt 8xS oder nur 7xS getippt? Wofür steht %? Warum muss ich 'upper' angeben, wenn SSSSSSSS ja schon UpperCase ist.

Ich denke noch ein bisschen darüber nach und schreibe ein paar Klugscheißerkommentare an den PR 

[setstate]

Ich steige nicht so recht durch, gibt es irgendwelche Möglichkeiten der Ausrichtung von Text oder auch Widgets, also linksbündig, zentriert oder rechtsbündig?
Ich habe in der css gesehen, daß man in der "cell" ein paar Möglichkeiten hat, die sich aber scheinbar nicht auf alle Objekte anwenden lassen.
Ein bißchen Licht im Dunkel wäre nett.

Das ist noch eine Baustelle. Da ist immer noch kein Konzept final.

Letzte Änderung war, anstatt von <div class="column" muss man jetzt <ftui-column> benutzen.

Code Auswählen Erweitern


      <ftui-grid-tile row="1" col="4" height="2" width="2" shape="round"
                      [color]="WCLuft | map('0:ok, 1000:warning, 2000:danger')">
        <ftui-column width="80%">
          <ftui-label class="size-5 align-left">CO²</ftui-label>
          <ftui-label class="size-7 align-left" [text]="WCLuft | part(1) | toInt()"></ftui-label>
          <ftui-label class="size-0 align-right">ppm</ftui-label>
        </ftui-column>
      </ftui-grid-tile>


Bei der Version 3 muss man jetzt auch nicht mehr unbedingt <link href="ftui.css" rel="stylesheet"> einbinden.
Man kann das weglassen und jedes X-beliebige CSS Framework nutzen.

z.B.

- W3.CSS  - https://www.w3schools.com/w3css/default.asp

Code Auswählen Erweitern

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

- ionic -  https://ionicframework.com/docs/api/grid

Code Auswählen Erweitern

  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/>


- Bootstrap - https://getbootstrap.com
- onsen - https://onsen.io/v2/api/css.html

Code Auswählen Erweitern


  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>



Die meisten Frameworks sind mir aber zu überladen bzw. die Semantic ist nicht so toll. Deshalb versuche ich mit ftui.css die (für mich) besten und einfachsten Ideen aus allen Welten zu kombinieren - beschränkt auf das Nötigste.

3rd-Party Web Components kann man einbinden, wenn man die ftuiBinding "Directive" benutzt.

Code Auswählen Erweitern

       
<ion-item>
          <ion-label ftuiBinding [text-content]="ftuitest" >Grape</ion-label>
          <ion-range ftuiBinding color="danger" pin="true" debounce="200"
                      [(value)]="ftuitest"
                      @ion-change="this.setAttribute('value', this.value)"></ion-range>
</ion-item>


Wenn die Web Components keine Property <-> Attribute Reflektion implementiert haben ( https://developers.google.com/web/fundamentals/web-components/best-practices  => '... keep primitive data attributes and properties in sync, reflecting from property to attribute, and vice versa.'),

muss man sich das über die angebotenen Events + this.setAttribute selbst "verknüppern"

Code Auswählen Erweitern


          <ion-toggle ftuiBinding slot="start" name="kiwi" color="success" checked
          [checked]="dummy3 | map('on: true, off: false')"
          (value-out)="map('false: off, true: on') | dummy3"
          @ion-change="this.setAttribute('value-out', this.value)"
                      ></ion-toggle>
        </ion-item>


[grossmaggul]

Danke!

Deshalb versuche ich mit ftui.css die (für mich) besten und einfachsten Ideen aus allen Welten zu kombinieren - beschränkt auf das Nötigste.

Das finde ich sehr löblich und kommt mir sehr entgegen, da mein Gedächtnis nicht mehr das Beste ist, müsste ich bei umfangreichen CSS Frameworks dauernd nachsehen, wie was geht.
Schon in der 2er Version von ftui kam ich bestens zurecht und konnte damit eigentlich alles bauen, wie ich es mir vorgestellt habe.

[grossmaggul]

Mein Mediaplayer ist soweit fertig oder sagen wir mal so, er funktioniert(hoffe ich zumindest ), das Design ist noch nicht der Weisheit letzter Schluss, die Repat und Shuffle Icons sind auch eher nur, weil nix anderes da war.

Der Code des "grid-tile" hängt dran.

[setstate]

Perfekt, das geht ja schnell.

Am Slider habe ich doch noch etwas "geschraubt".

readonly und handle="none" konnte ich ganz easy per CSS realisieren und etwas dünner sieht er besser aus.

Code Auswählen Erweitern


    <ftui-grid-tile row="3" col="4" height="1" width="3">
      <header>READONLY</header>

        <ftui-slider [(value)]="ftuitest" min="10" max="70" handle="none" readonly></ftui-slider>

    </ftui-grid-tile>


Zur Info: hidden, readonly und disabled Attribute gibt es bei allen ftui-* Elementen.

Code Auswählen Erweitern

     
<ftui-icon name="exclamation-triangle"
            [hidden]="ftuitest | map('on:false, off:true')">
</ftui-icon>