FTUI version 3

[setstate]

Beim Output-Bindung wird versucht, das Muster

set Device Reading Wert zu finden und gegebenfalls die fehlenden Teile ergänzt.

Bei dir ist viel da und damit nur noch das "set" vorangestellt.

Ich weiß nicht, wo bei deinem Befehl der Wert aus dem Control hin muss.

Setze an dieser Stelle ein $value

Bei

Code Auswählen Erweitern

(value)="HM_WohnzimmerGruppe:datapoint" und einem eingestellten Wert von 23 wird

Code Auswählen Erweitern

set HM_WohnzimmerGruppe datapoint 23 gesendet.

bei ftui-knob gibt es aber nur einen Augangswert. ControlMode, der sich ändert bei bestimmten Einstellungen, wie max oder min gibt es nicht.

[octek0815]

ein

Code Auswählen Erweitern

unit="°C" unit-size="4" unit-position="upper"

ist nicht nicht wirklich kürzer oder einfacher als

Code Auswählen Erweitern

<sup slot="end" class="size-4">°C</sup>

Was gibt es denn für Ausprägungen? Maximal "half-size" und "half-size-upper". Dann könnte man auch size und position zusammenfassen?

Hast natürlich Recht, über sup und sub habe ich garn nicht nachgedacht.

[Reinhart]

Hallo,

gibt es beim Knob eine Möglichkeit Decimal Stellen zu beschriften?
Siehe im Bild den ersten Knob, die Anzeige geht von 0 - 2 Bar und die Beschriftung sieht hier unvorteilhaft aus da nur ganze Zahlen dargestellt werden.

LG

[OdfFhem]

@Reinhart

Aktuell kann man die Berücksichtigung der Dezimalstellen scheinbar nicht beeinflussen. Ich habe ein wenig rumprobiert und eine kleine Änderung in der Komponente vorgenommen. Anschließend erhält man ein Ergebnis wie im angehängten Bild. Ich weiss nicht, ob es jemand nutzen würde, aber auch die dezimalgenaue Übernahme eines eingestellten Wertes wäre möglich.

Sollte das in Ordnung sein, kann ich es vielleicht noch in den aktuellen PR übernehmen.

[grossmaggul]

.

[setstate]

oh, ich habe die Dezimalstellenbeachtung jetzt auch schnell eingebaut

Code Auswählen Erweitern

<ftui-knob value="1.2" max="2.0" min="1.0" ticks="6" type="scale" has-value-text has-scale-text></ftui-knob>
     

Automatisch per max="2.0" Vorgabe oder explizit per decimals="1"

[setstate]

das blau hinterlegte passt nicht... steht auf der ersten option obwohl die 2. (15°C) aktiv ist (text ist heller).

Grüße^^

Ist jetzt gefixed

[moonsorrox]

@setstate

bis gestern glaube ich war es so das der header immer mittig war, nun bekommen ich aber komplett links zu sehen.

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>

ein align-items="center" bringt nichts, wie bekomme ich das wieder mittig muss ich mir einen header in css anlegen.?

[OdfFhem]

@setstate

Das decimals-Attribut war auch meine Lösung ... allerdings ohne automatische Ermittlung. Im Übrigen finde ich die ticks-Erweiterung sehr nützlich ...

Da der knob-PR jetzt nicht mehr aktuell ist, sollte ich den entsprechend aktualisieren ?

[roman1528]

Ist jetzt gefixed

Perfekt. Vielen Dank! Läuft.

Hast du zum Dropdown noch ein paar Info's für uns?

Wie kann ich die list-Einträge mappen?
also sowas wie:

Code Auswählen Erweitern

list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"
oder:

Code Auswählen Erweitern

list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"

ich habe einiges probiert... aber nichts klappt... und vorallem wie ist dann das linking zu "set"

ganz blicke ich durch FTUI 3 tatsächlich noch nicht durch... noch ist alles irgendwie "try and error"

Grüße^^

[Reinhart]

alles Perfekt, vielen Dank!
Funktioniert bestens da ich den Maxwert schon auf 2.0 hatte!

LG

[setstate]

@setstate

bis gestern glaube ich war es so das der header immer mittig war, nun bekommen ich aber komplett links zu sehen.

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>

ein align-items="center" bringt nichts, wie bekomme ich das wieder mittig muss ich mir einen header in css anlegen.?

Nein, das muss bei dir durch etwas anderes hervorgerufen werden

Code Auswählen Erweitern


    <ftui-grid-tile row="1" col="2" height="1" width="2">
      <header class="size-4 thin"><ftui-label color="green">CUSTOM-HEADER</ftui-label></header>
      <ftui-row>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </ftui-row>
    </ftui-grid-tile>


[moonsorrox]

Nein, das muss bei dir durch etwas anderes hervorgerufen werden

sieht bei mir so aus, ich habe am header nicht verändert bis auf das label

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>

der aufruf der dateien so, nichts weiter im Tab drin

Code Auswählen Erweitern

<ftui-tab-view id="multimedia">

<ftui-grid-tile row="4" col="2" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="4" col="19" height="11" width="13" class="semitransparent3d">
<ftui-row>
<ftui-content file="content-multimedia1.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>

</ftui-tab-view>


[setstate]

Wie kann ich die list-Einträge mappen?
also sowas wie:

Code Auswählen Erweitern

list="weiss25:Weiß 25%, weiss50:Weiß 50%, rot:Rot"
oder:

Code Auswählen Erweitern

list="RauteMusik.FM%20Harder:RauteMusik-Harder, radio%20ffn%20101.9%20%28Hot%20AC%29:FFN"

Wie ich sehe, ist das noch nicht eingebaut. Value und Text ist gleich. Muss ich noch nachholen

[moonsorrox]

EDIT:// habe den header weggenommen und es in eine row gepackt.... ist erst mal die beste Lösung, brauche ja keinen header


das ist mir jetzt ein Rätsel vorallem weil es gestern noch mittig war
ich habe dein Beispiel mal eingetragen auch der wandert nach links...! Habe meine user.css mal kontrolliert ich habe keine "header" Formatierung drin...
Was kann das noch sein

Alle header die ich habe egal ob nun im Popup oder so, sind alle mittig...

Meine komplette multimedia Datei, aber deine reicht ja schon aus um es zu sehen.

Code Auswählen Erweitern

<header class="size-4 thin"><ftui-label align-items="center" color="MediumSpringGreen">WohnSqueezy - Mediaplayer</ftui-label></header>
<ftui-row height="50%">
<ftui-column width="40%">
<ftui-image [src]="SB_Wohnzimmer:coverarturl" width="160px" shape="round"></ftui-image>
</ftui-column>
<ftui-column width="60%">
<ftui-dropdown [list]="SB_Wohnzimmer:ftuiPlaylistsAlias" [(value)]="SB_Wohnzimmer:playlists" [color]="SB_Wohnzimmer:playlists"></ftui-dropdown>
<ftui-label class="size-3" color="darkorange" [text]="SB_Wohnzimmer:currentArtist"></ftui-label>
<ftui-label class="size-2" color="white" [text]="SB_Wohnzimmer:currentTitle"></ftui-label>
</ftui-column>
</ftui-row>
     
<!-- Fortschrittanzeige -->
<ftui-row height="10%">
<ftui-column align-items="right" width="20%">
<ftui-label [text]="SB_Wohnzimmer:duration | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-slider [max]="SB_Wohnzimmer:duration" [(value)]="SB_Wohnzimmer:currentTrackPosition" handle="none" color="royalblue1"></ftui-slider>
</ftui-column>
<ftui-column align-items="left" width="20%">
<ftui-label [text]="SB_Wohnzimmer:currentTrackPosition | timeFormat('mm:ss','s')"></ftui-label>
</ftui-column>
</ftui-row>

<!-- Power Botton -->
<ftui-row height="10%">
<ftui-column width="25%">
<ftui-row>
<ftui-button [(value)]="SB_Wohnzimmer" [fill]="SB_Wohnzimmer | map('on:solid, off:outline')"
[color]="SB_Wohnzimmer | map('on:crimson, off:MediumSpringGreen')" shape="normal">
<ftui-icon [name]="SB_Wohnzimmer | map('on:power-off, off:power-off')"
   [color]="SB_Wohnzimmer | map('on:black, off:MediumSpringGreen')">
</ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<!-- Bedienungsleiste -->
<ftui-column width="75%">
<ftui-row>
<!-- Previous -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:prev" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-backward" [name]="SB_Wohnzimmer:prev | map('on:step-backward, off:step-backward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Play/Pause -->
<ftui-button shape="normal" fill="outline" [value]="SB_Wohnzimmer:playStatus | map('playing: play, paused|stopped: pause')" (value)="SB_Wohnzimmer" states="play,pause" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:pause1, paused|stopped: play')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Stop -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:stop" [color]="SB_Wohnzimmer:playStatus | map('playing:royalblue1, paused|stopped:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:playStatus | map('playing:stop, paused|stopped:stop')" [color]="SB_Wohnzimmer:playStatus | map('playing:white, paused|stopped:white')"></ftui-icon>
</ftui-button>

<!-- Next -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:next" [color]="SB_Wohnzimmer | map('on:royalblue1, off:royalblue1')">
<ftui-icon name="step-forward" [name]="SB_Wohnzimmer:next | map('on:step-forward, off:step-forward')" [color]="SB_Wohnzimmer | map('on:white, off:white')"></ftui-icon>
</ftui-button>

<!-- Shuffle -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:shuffle" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:royalblue1, song:royalblue1, album:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:shuffle | map('off:lines, song:random, album:image')" states="off,song,album" [color]="SB_Wohnzimmer:shuffle | map('off:white, song:white, album:white')"></ftui-icon>
</ftui-button>

<!-- Repeat -->
<ftui-button shape="normal" fill="outline" [(value)]="SB_Wohnzimmer:repeat" states="off,one,all" [color]="SB_Wohnzimmer:repeat | map('off:royalblue1, one:royalblue1, all:royalblue1')">
<ftui-icon [name]="SB_Wohnzimmer:repeat | map('off:ban, one:repeat1, all:circle-o-notch')" states="off,song,album" [color]="SB_Wohnzimmer:repeat | map('off:white, one:white, all:white')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<!-- Volume -->
<ftui-row height="20%">
<header><ftui-label color="MediumSpringGreen">Volume</ftui-label></header>
<ftui-column width="75%">
<ftui-slider [(value)]="SB_Wohnzimmer:volume"
[color]="SB_Wohnzimmer:volume | map('0:lightgreen, 30:royalblue1, 50:yellow, 70:crimson')"
[text]="SB_Wohnzimmer:volume" text="0"
max="100" tick="10" wide-tick="50" handle="retro" has-ruler has-wide-ticks>
</ftui-slider>
</ftui-column>
</ftui-row>