FTUI version 3

[grossmaggul]

Hast Du es mal mit <ftui-row> und <ftui-column> probiert, dort sollte auch "align" gehen, bei <ftui-label> gibt es, soweit ich weiß kein "align"

[Konfusius]

Danke, genauso gehts. Dachte ich mir doch > Gehirnwindungsknoten...

[Shadow3561]

@setstate

man kann jetzt die Liste als options - Kinderknoten angeben

Code Auswählen Erweitern


        <ftui-dropdown
          [value]="ftuitest:whiteValue"
          (value)="setreading ftuitest:whiteValue">
          <option value="white0">White 0%</option>
          <option value="white25">Weiß 25%</option>
          <option value="white50">Weiß 50%</option>
          <option value="white100">Weiß 100%</option>
        </ftui-dropdown>


Ich nutze das Dropdown um meine Rollläden zu steuern.
Es sieht dann so aus

Code Auswählen Erweitern

        <ftui-dropdown id="opt1"
          [value]="EIB_5302:ZumRechnen"
          (value)="EIB_5302:value">
          <option value="0">AUF</option>
          <option value="25">25%</option>
          <option value="50">50%</option>
          <option value="75">75%</option>
          <option value="100">Zu</option>
        </ftui-dropdown>

Ich möchte nur die Werte 0, 25, 50, 75, und 100 setzen können. Wenn jetzt aber jemand mit dem Slider oder am Taster die Rollladen bedient, dann passen diese 5 mappings nicht mehr.

Ist es möglich irgendwie das "option value" 0-24, auf AUF zu Mappen?

Code Auswählen Erweitern

<option value=[<= 24]>AUF</option>
<option value=[>= 25 && <= 49]>25%</option>
.
.
usw


Mit freundlichen Grüßen

[mr_petz]

@Shadow3561

Code Auswählen Erweitern


        <ftui-dropdown
          [value]="ftuitest:whiteValue | step('0:white0,25:white25,50:white50,100:white100')"
          (value)="setreading ftuitest:whiteValue">
          <option value="white0">Weiß 0%</option>
          <option value="white25">Weiß 25%</option>
          <option value="white50">Weiß 50%</option>
          <option value="white100">Weiß 100%</option>
        </ftui-dropdown>


Meinst du so in die Richtung?

LG mr_petz

[Shadow3561]

Danke,
genau so funktioniert es.

nur für mein Verständnis

Code Auswählen Erweitern

step('0:0,25:25,50:50,65:75,100:100')"

wie genau ist das Prinzip der step function?

0:0
25:25

Mit freundlichen Grüßen

[mr_petz]

Danke,
genau so funktioniert es.

nur für mein Verständnis

Code Auswählen Erweitern

step('0:0,25:25,50:50,65:75,100:100')"

wie genau ist das Prinzip der step function?

0:0
25:25

Mit freundlichen Grüßen

von 0 bis 24,999999 wird 0 gesetzt,
von 25,0 bis 49,99999 wird 25 gesetzt
usw...
in deinem Beispiel

map() dagegen reagiert erst und nur bei 0 oder 25 usw...

LG mr_petz

Edit:
Hier ist noch eine gute Erläuterung von @yersinia:
https://forum.fhem.de/index.php/topic,123701.msg1182722.html#msg1182722

[Shadow3561]

Danke für die Erklärung.
Dann kann ich es jetzt für mein Device anpassen.

MfG

[Konfusius]

Ich habe ein Button / Icon Problem, das ich nicht verstehe.
Mein Button sieht so aus:

Code Auswählen Erweitern

<ftui-button (value)="Testmodul">
    <ftui-icon [name]="Testmodul:state | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul:state | map('off: grid, on: white')"></ftui-icon>
</ftui-button

Soweit so gut, das funktioniert. Mein "lightbulb" Icon wird angezeigt, wechselt von grid nach weiß, schalten tut es wie gewünscht,
ABER:
Immer wird ganz kurz (Musste eine Zeitlupenaufnahme machen um das zu lesen) eine Errormeldung im Button eingeblendet:

File not found: /www.tablet/Icons/set_on.svg

Wer ruft denn da ein nicht vorhandenes set_on.svg Icon auf?

Setze ich im FHEM bei readingList statt
stat/tasmota_B94334/POWER1:.* state
stat/tasmota_B94334/POWER1:.* state1

und ändere das auch im Button nach state1:

Code Auswählen Erweitern

<ftui-button (value)="Testmodul">
    <ftui-icon [name]="Testmodul:state1 | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul:state1 | map('off: grid, on: white')"></ftui-icon>
</ftui-button

Dann erscheint der Error nicht?! Wasn da los?

[mr_petz]

Hi Konfusius,
kann ich nicht nachvollziehen.
Vielleicht liegt es an dem nicht geschlossenen </ftui-button
Also mal so definieren:

Code Auswählen Erweitern


<ftui-button (value)="Testmodul">
  <ftui-icon [name]="Testmodul:state | map('off:lightbulb, on:lightbulb-on')"
  [color]="Testmodul:state | map('off: grid, on: white')"></ftui-icon>
</ftui-button>


Normal sollte es auch ohne :state gehen.

Edit: es müssen hier natürlich ausschließlich die Werte on und off kommen...

LG mr_petz

[Konfusius]

Das fehlende ">" war nur ein Copy and Paste Fehler von mir. Der ist im Code da.
Auch so:

Code Auswählen Erweitern

<ftui-button (value)="Testmodul">
    <ftui-icon [name]="Testmodul | map('off:lightbulb, on:lightbulb-on')"
[color]="Testmodul | map('off: grid, on: white')"></ftui-icon>
</ftui-button>

Bleibt das Problem. Sind nur ms, man sieht es kaum.
Kopiere ich andere Icons auf die Namen "set_on.svg" und "set_off.svg" werden diese auch ganz kurz eingeblendet, bevor das lightbulb Icon angezeigt wird.
Das zusätzliche ":state" habe ich nur testweise drin, da ich es mit ":state1" auch getetstet habe und es da nicht auftritt.

[mr_petz]

Dann teste mal so:

Code Auswählen Erweitern


map('off:lightbulb, .*:lightbulb-on')

oder:

Code Auswählen Erweitern


map('.*:lightbulb-on, off:lightbulb')


[Konfusius]

Code Auswählen Erweitern

map('.*:lightbulb, on:lightbulb-on')

Damit ist der Error weg! Warum? Könntest Du  mir das erklären?

[mr_petz]

Code Auswählen Erweitern

map('.*:lightbulb, on:lightbulb-on')

Damit ist der Error weg! Warum? Könntest Du  mir das erklären?

Wie vorher schon erläutert,
map erwartet bei dir exakt on und off.
Wenn dein Device/Reading irgenwas anderes hat oder sendet kommt so ein Fehler.
Ich würde aber auf on gehen mit dem .*
So wird jeder x beliebige Zustand als lightbulb-on gesetzt der nicht off ist.

LG mr_petz

[presskopf]

Hallo zusammen,

ich habe in einem Tile einen Swiper und darin dieses Regenradarbild:
http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295

Die Darstellung des animated Gifs ist soweit okay. Nun wohne ich aber nicht in einer der Städte, welche hervorgehoben wurden, sondern irgendwo dazwischen.
Gibt es eine Möglichkeit per FTUI3, über das GIF noch einen roten Knödel zu legen, zufälligerweise genau dort, wo ich wohne?
Oder bleibt mir für eine solche Markierung nur ein Workflow a la Download -> Imagemagick -> FTUI3

LG
Matthias

[mr_petz]

Hi @presskopf,
hast du dir ab hier das schon angesehen?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/image.html#L102

Hier die Demo (Bild mit den Flugzeugen):
https://knowthelist.github.io/ftui/www/ftui/examples/image.html

da kannst du label und/oder icons über das Bild legen/positionieren.

LG mr_petz

Edit:
so zum Bsp mit label:

Code Auswählen Erweitern


<ftui-image src="http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295">
<ftui-label text="°" color="red" left="40%" top="54.5%" class="size-3"></ftui-label>
<ftui-label text="Stadt" color="red" left="43%" top="55%"class="size-0"></ftui-label>
</ftui-image>


oder:

Code Auswählen Erweitern


<ftui-image src="http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif?1424183385=&_=1657197778295">
<ftui-label text="." color="red" left="40%" top="37%" class="size-8"></ftui-label>
<ftui-label text="Stadt" color="red" left="44%" top="55%"class="size-0"></ftui-label>
</ftui-image>


Der Link sollte auch so gehen:
http://images2.wetterdienst.de/maps/radar/Radarfilm_Suedost.gif
und im image den refresh/interval und nocache nicht vergessen.