FTUI version 3

[Wetterhexe]

Hast du schon ein Update gemacht? Ich habe gestern zwei Änderungen gemacht. Alle icons sollten jetzt bunt werden.

hatte ich tatsächlich noch nicht ... eben nachgeholt, das sieht sehr viel besser aus, vielen Dank!! 

Ich häng noch eine aktuelle view dran ... einzelne icons sind noch schwarz, stört mich aber nicht weiter.

LG, Christina

[Sailor]

Hi Christina

einzelne icons sind noch schwarz, stört mich aber nicht weiter.

Naja, eine rote Ampel die ihrerseits rot ist, bildet wohl keinen guten Kontrast. 

Gruß
    Sailor

[Wetterhexe]

Naja, eine rote Ampel die ihrerseits rot ist, bildet wohl keinen guten Kontrast. 

die Farbe der Ampel läßt sich ja ändern, nur der schwarz dargestellte Korpus nicht

[curt]

Nachdem geklärt wurde, wie row/column in einer Kachel funktionieren, habe ich nun ein Problem mit ftui-slider, genauer gesagt mit dessen Positionierung.

Die Basis ist ein relativ kleines Kachel-Design:

Code Auswählen Erweitern


  <ftui-grid base-width="96" base-height="86" margin="4">


Im ersten Screenshot sieht man Putzi, meinen niedlichen Staubsaugerroboter mit drei Elementen, es soll um das linke Element gehen, das soll den Ladezustand der Batterie anzeigen. Ich bin in der Lage, dass Element so zu positionieren, dass es bezogen auf die obere Kante richtig steht. Leider ist es nicht lang genug - und ich habe keine Ahnung, wie ich das "länger" machen kann, meine Versuche scheiterten. Was kann/muss ich tun?

Der komplette Code der Kachel, gern auch bitte kritisieren, ich übe noch:

Code Auswählen Erweitern


      <ftui-grid-tile row="3" col="3" height="1" width="1" color="black">
              <!-- Putzi -->
       <ftui-row>
        <ftui-column>
         <ftui-row>
          <ftui-slider margin="-34px 0 0 0" class="size-0"
                [value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
                [color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
          </ftui-slider>
         </ftui-row>
        </ftui-column>
        <ftui-column>
         <ftui-row>
        <ftui-button
                [(value)]="Putzi_2"
                states="start" fill="none"
                @click="javascript:sendFhem('set Putzi_2 reconnect; set Putzi_2 start')"
                >
              <ftui-icon margin="-10px 0 0 0" name="circle" class="size-0"
                 [color]="Putzi_2 | map('`cleaning vacuum`:my_signalgreen, paused:my_signalred, Charging:my_darkblue, `Fully charged`:my_green, `Insufficient battery, continuing cleaning after recharge`:my_darkblue, .*:my_grey2')"></ftui-icon>
        </ftui-button>
         </ftui-row>
         <ftui-row>
          <ftui-icon margin="-18px 0 0 0" name="icons-eigene/putzfrau" class="size-2"
                         [color]="Putzi_2:run_state | map('dock:my_grey2, standby:my_grey2, closed:my_grey2, self-test:my_green, `cleaning vacuum`:my_signalgreen, paused:my_signalorange, `return to dock`:my_darkblue')">
          </ftui-icon>
         </ftui-row>
        </ftui-column>
       </ftui-row>
      </ftui-grid-tile>


P.S. @mr_petz
slider (o.ä, jedenfalls das Thermometer-Konzept von Slider) wäre nach meine unmaßgeblichen Meinung auch was für Dich: Gleitende Farbwertänderung bezogen auf Reading, Ticks, ich kann mir da wahnsinnig dolle Sachen vorstellen. 

Der zweite Screenshot dient nur der Illustrierung dessen, was gehen könnte und wie ich "solid" meine, habe ich aus meinem FHEM - und dafür war das gemopst: Den Autoren (nickname nicht momentan) habe ich aus dem Augenwinkel auch schon mal in FTUI3-Threads gesehen; sein Avatur wechselt, manchmal hat er als Avatar genau diese Kachel ...

[stefan-dd]

Ich möchte ein Menü zum wechseln der Radiosender erstellen.
Problem dabei, die Sender kann ich nur durch Anwahl des Speicherplatzes verstellen z.B." set AV_Receiver preset 1", ich erhalte aber keine Rückmeldung über den Speicherplatz, nur über die TunerFrequenz oder currentStation kann ich den eingestellten Sender erkennen. Die Anzeige der Sendermit meinem dargestellten Code funktioniert, wie bekomme ich aber die Senderverstellung noch hin? Statt "set AV_Receiver:preset $value" müsste ich die Speicherplatznummern übergeben 1...2...3..

Code Auswählen Erweitern

<ftui-dropdown nochevron class="size-3"
  [value]="AV_Receiver:tunerFrequency"
  (value)="set AV_Receiver:preset $value">
  <option value="202.928">MDR Sputnik</option>
  <option value="178.352">sunshine live</option>
</ftui-dropdown>

Bekommt man das so überhaupt hin? Oder muss ich über Userreadings gehen?

[OdfFhem]

Leider ist es nicht lang genug - und ich habe keine Ahnung, wie ich das "länger" machen kann, meine Versuche scheiterten. Was kann/muss ich tun?

Um die Position des Sliders zumindest temporär sichtbar zu machen, habe ich die entsprechende "Spalte" gelb eingefärbt.


Die Höhe des Sliders wird im css "speziell" berechnet; um sie zu individualisieren, kann man das style-Attribut einschalten ...

style="height:90%;" ... s. Screenshot__height

Code Auswählen Erweitern


      <ftui-column color="yellow">
        <ftui-row>
          <ftui-slider style="height:90%;" class="size-0"
                       [value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
                       [color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
          </ftui-slider>
        </ftui-row>
      </ftui-column>


Die horizontale Ausrichtung des Sliders zielt auf die Mitte der "Spalte" - allerdings bezogen auf den rechten Rand des Sliders (s.o.).
Um dies auf die Mitte des Sliders zu beziehen, kann man auch hier das Attribut style einschalten ...

style="height:90%; margin:0 -8px 0 0;" ... s. Screenshot__height_margin

Code Auswählen Erweitern


      <ftui-column color="yellow">
        <ftui-row>
          <ftui-slider style="height:90%; margin:0 -8px 0 0;" class="size-0"
                       [value]="Putzi_2:batteryPercent" min="0" max="100" is-vertical handle="none" readonly
                       [color]="Putzi_2:batteryPercent | step('3:my_darkred, 96:my_signalorange, 99:my_signalgreen')">
          </ftui-slider>
        </ftui-row>
      </ftui-column>



Jetzt befindet sich der Slider in seiner "Spalte" zentriert bzgl. oben/unten und links/rechts ...

[mr_petz]

@curt

....
P.S. @mr_petz
slider (o.ä, jedenfalls das Thermometer-Konzept von Slider) wäre nach meine unmaßgeblichen Meinung auch was für Dich: Gleitende Farbwertänderung bezogen auf Reading, Ticks, ich kann mir da wahnsinnig dolle Sachen vorstellen. 
...

Hier ist noch der ftui-meter zu erwähnen.
https://knowthelist.github.io/ftui/www/ftui/examples/meter.html
Er dient als reine Anzeige. Hier wäre es für @setstate ein leichtes gradient und vertikal hinzuzufügen.

LG mr_petz

Edit: setstate hat Farbverlauf und Vertikal hinzugefügt...

[stefan-dd]

Könnte man eventuell noch ein Attribut für die Dateiendung integrieren? Oder ist dies über map lösbar?

Code Auswählen Erweitern

data-suffix=".png"

Code Auswählen Erweitern

<ftui-image base="icons/" [src]="AV_Receiver:currentStation" </ftui-image>

[mr_petz]

Könnte man eventuell noch ein Attribut für die Dateiendung integrieren? Oder ist dies über map lösbar?

Code Auswählen Erweitern

data-suffix=".png"

Code Auswählen Erweitern

<ftui-image base="icons/" [src]="AV_Receiver:currentStation" </ftui-image>

So würdest du die Endung .png zum gelesenen Reading, was ein numerischer Wert ist, hinzufügen/dranhängen wenn du das meinst:

Code Auswählen Erweitern

<ftui-image base="icons/" [src]="AV_Receiver:currentStation | add('.png')"></ftui-image>

LG mr_petz

Edit: Es steht auf GitHub add(number) bei den Pipes, aber habe es gerade bei einem ftui-label getestet und wird hinten als string angehangen...
Oh sorry es geht nur bei Number(input)...
Also nur wenn dein Reading ein numerischer Wert ist...
Bei mir stand dann halt 20.png usw...
Sorry nochmal für die Verwirrung.

[stefan-dd]

So hatte ich mir das grundsätzlich gedacht. Schön wäre es, wenn es auch für nicht nummerische Werte funktioniert.

[mr_petz]

kleines Update:

Code Auswählen Erweitern


<ftui-label [text]="AV_Receiver:currentStation | replace(/(.*)/,text+'.png')"></ftui-label>

damit geht der gelesene Reading-string von [text] zu erweitern mit der Endung .png.

Jetzt kannst du es mit:

Code Auswählen Erweitern


<ftui-image base="icons/" [src]="AV_Receiver:currentStation | replace(/(.*)/,text+'.png')"></ftui-image>

testen und es sollte [src] erweitert werden mit .png.

Edit: Habe es gerade getestet und funktioniert. Man muss hier auch text+'.png' nehmen im replace().
Das Bild muss natürlich dann auch unter icons zu finden sein...

LG mr_petz

Edit: Es geht jetzt mit append() Pipe:

Code Auswählen Erweitern

<ftui-image base="icons/" [src]="AV_Receiver:currentStation | append('.png')"></ftui-image>

[OdfFhem]

@mr_petz

Woher kommt denn die Variable text bzw. wie kommt text an ihren Wert ?

[mr_petz]

@OdfFhem
k.A. aber ich denke das kommt irgendwo von den Helpern oder Bindings oder von der replace-funktion?
setstate weiß das bestimmt.
Hast du es auch mal getestet?

Edit: Hier mal ein Test:

Code Auswählen Erweitern


<ftui-button (value)="dummy" states="Bild">Test</ftui-button>
<ftui-label [text]="dummy | replace(/(.*)/,text+'.png')"></ftui-label>

Ausgabe von label ist Bild.png

[OdfFhem]

@mr_petz

Nein, aber ich hätte wie früher $1 verwendet - dem runden Klammerpaar sei dank ...

[mr_petz]

setstate hatte vor einer ganzen weile die get/setDevice+Reading mal geändert. Kommt vielleicht daher?