FTUI version 3

[grossmaggul]

Danke, ich wollte das eigentlich nur wissen und Dich nicht zur Arbeit animieren.

[mr_petz]

Ich fühlte mich animiert

[Konfusius]

Ich bin ja absoluter Anfänger und von FTUI3 echt begeistert.
Ohne viel Kenntnisse konnte ich mit den Beispielen meine kleine FHEM Oberfläche sinnvoll aufs Handy umsetzen.
Die erste Sache die ich nun nicht hinbekomme ist ein einfacher "AN Aus" Befehl.
Ich habe mit Tasmota einen RGBW Stripe in 2 Teile "gehackt", so dass ich den Weiß-Teil extra schalten / dimmen kann.
Dazu habe ich die Befehle "set on1" und set off1" im FHEM eingesetzt. Für das Dimmen gibt den Wert "white" (dezimal 0....100)
Also habe ich das FTUI3 Colorpicker Example genommen und folgendes probiert:

Code Auswählen Erweitern

</ftui-grid-tile>

        <ftui-grid-tile row="6" col="2" height="5" width="4">

     <ftui-label size="4"  color="orange" >Carport Weiß</ftui-label>

        <ftui-colorpicker direction="horizontal" layout="valueSlider"

                [brightness]="Carport:white  | toInt()"

                (brightness)=" toInt() | Carport:white">

        </ftui-colorpicker>

<ftui-switch [(value)]="Carport" texts='on1,off1'></ftui-switch>

    </ftui-grid-tile>

Gesendet wird aber immer nur "on" und "off", nicht "on1" und "off1".
Wo ist da meine Wissenslücke?
Ich dachte den zu sendenden Text hier festlegen zu können?
So geht der RGB Teil an und aus ,der mit "on" und "off" gesteuert wird.
Auch ist der Slider trotz direction="horizontal" vertikal angeordnet?
Dimmen tut der aber wie er soll.

[mr_petz]

Hi, du musst im switch deine states angeben, da sonst immer der Standard on/off genommen wird.

Code Auswählen Erweitern


<ftui-switch [(value)]="Carport" states="on1,off1" texts="on,off"></ftui-switch>

Hier muss aber im STATE vom Device dann auch on1 und off1 stehen, da sonst der Zustand vom switch nicht stimmt.
Die texts sind "nur" für die Anzeige im switch.
LG mr_petz

Edit:
Bezüglich der direction vom colorpicker. lösche den Eintrag direction="horizontal" und der slider ist horizontal.
ps. Zum reinen Dimmen könntest du auch den ftui-slider nehmen.

[Konfusius]

Danke, läuft jetzt wie gewünscht.
Und wieder was gelernt! 

[Stonemuc]

Mal eine Frage zum FTUI3 auf dem Handy.
Ich habe das FTUI eigentlich für ein Tablet gebastelt - dort wird es richtig angezeigt - auf dem PC auch.

Wenn ich allerdings den Browser auf dem Smartphone öffne, versucht es die Teile schon irgendwie klein zu schieben, allerdings mit mäßigem Erfolg.
Gibt es ein extra theme?
Ich hab folgendes im head stehen:

Code Auswählen Erweitern

  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/mobile-dark-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">

[Stonemuc]

@setstate, @yersinia

ich habe mal auf Grundlage des ftui-dropdown und des ContentSonosFav ein benutzerdefiniertes Dropdown erstellt.
Unter Android und Windows sieht alles gut aus. IOS kann ich nicht testen.
Background und Text-color kann man anpassen und wird dargestellt.
Die Liste ist auch wie im ftui-dropdown nutzbar. Ich habe es nur mit meinen SonosFavourites getestet.
Ihr könnt es ja testen und wenn setstate will kann er es übernehmen (und wahrscheinlich noch bissl anpassen  )
Einfach ins components Verzeichnis kopieren.
Settings sind wie im dropdown + Styleangaben wie im Beispiel.
Im animierten GIF ist das obere das ungestylte und das untere das gestylte.

Code Auswählen Erweitern


    <ftui-droplist
      [list]="Sonos_Kueche:FavouritesListAlias"
      [value]="Sonos_Kueche:FavouriteDropdown"
      (value)="encode() | Sonos_Kueche:StartFavourite $value"
      delimiter="|">
    </ftui-droplist>
    <ftui-droplist class="size-2" left="10%" height="80px" style="--text-color:var(--black);--droplist-background-color:var(--medium-color)"
      [list]="Sonos_Kueche:FavouritesListAlias"
      [value]="Sonos_Kueche:FavouriteDropdown"
      (value)="encode() | Sonos_Kueche:StartFavourite $value"
      delimiter="|">
      </ftui-droplist>


LG mr_petz

Und noch ne Frage: Wie bekomme ich so einen schönen Knob hin?

[mr_petz]

Erste Frage:
Das reine MobileTheme ist das:
https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/mobile.html

Zweite Frage:
Das ist mein Volume3DKnob
https://forum.fhem.de/index.php/topic,122208.0.html
https://github.com/mr-petz/ftui/tree/volume3d/www/ftui/components/volume3d

LG mr_petz

[Stonemuc]

Das Mobilthema hatte ich auch schon auf der Seite im Github gefunden, allerdings versteh ich das dazugehörige Beispiel nicht. Da scheint ja lles gravierend anders zu sein.
Naja...dann lass ich es einfach wie es ist.

Aber deinen Volume3DKnob werde ich auf jeden Fall noch einbauen....

[LuGu]

swiper2 ist nur die id des Swiper, keine Reading, was man beim Binding benutzen kann.

Man müsste dem Swiper erst ein passendes Binding verpassen

entweder Richtung FHEM

Code Auswählen Erweitern


<ftui-swiper id="swiper2" [(value)]=dummySwiper >


oder rein lokal

Code Auswählen Erweitern


<ftui-swiper id="swiper2" [(value)]=local:swiper2 >


Dann kann man die Änderung auch als Farbänderung nutzen.

Code Auswählen Erweitern


[color]="local:swiper2 | map('sw2_5:primary,.*:currentColor')"


Funktioniert bei jemand der swiper2 aus dem Beispiel:
https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html
Bei mir funktioniert es weder in Firefox noch in Chrom so, wie es gedacht ist.
Wenn ich die Chevron Buttons benutze, funktioniert es, aber wenn ich "garage-variant" oder "projector" benutze funktioniert es mal, aber meistens nicht.
Meiner Meinung nach funktioniert das:

Code Auswählen Erweitern

onclick="swiper2.value = 'sw2_5'"
nicht zuverlässig.

Wenn jemand ein Tipp hat, wäre ich sehr dankbar. Ich wollte das gleiche Prinzip nutzen, um vom Tageswetter auf die jeweils detaillierte Vorhersage um zu schalten (beim Click auf das Wettericon des jeweiligen Tages)

[Konfusius]

Sagt mal, wo bekomme ich das IconSet "Kleinklima" her?
Ich suche schon ne Ewigkeit, finde es aber nicht zum Download?
Bin ich zu blöd?

[mr_petz]

Hier in der weather.zip sind die mit drin:
https://forum.fhem.de/index.php/topic,96954.msg901188.html#msg901188

LG

[Konfusius]

Danke, habe ich geladen. Alle Icons sind im .png Format.
Setze ich bei meinem Wetter
icon-set="kleinklima"
ein, dann sucht er eine .svg Datei, die dann natürlich fehlt.
Muss ich die alle einzeln umwandeln?

OK: mit icon-set=kleinklimaFHEM" gehts!

[mr_petz]

Für .png musst du icon-set kleinklimaFHEM verwenden.

LH

[Dracolein]

Moin zusammen,
nach Monaten bin ich mal wieder hier präsent, nachdem ich am Wochenende (wg anderer Probleme) ein "update all" machen musste.
Ihr habt inzwischen sicherlich eine Menge Änderungen einfliessen lassen, ich habe grade auch schon danach gesucht, wurde aber nicht fündig.
Zwei optische Änderungen gab es bei mir, um die ich mich kümmern muss:

1.) Farbwert geändert
Die Farbe "blue" ist verändert worden. Vermutlich sollte ich hier nun definierte hex-werte eintragen, anstatt die Vorgabedefinitionen zu ändern (die zukünftige Updates überschreiben würden), oder gibt es zwischenzeitlich weitere per Text wählbare Farben ?
Die neue "blue" Farbe ist recht dunkel geworden, das gefällt mir für meinen Anwendungsfall nicht so ganz (sieht man auch etwas im Screenshot).

2.) Wettericons geändert
Ich nutze die bas-Wettericons. Meine Konfig ist noch vomn Jahreswechsel, wo zur Diskussion stand, ob Ihr Dateinamen mit Prefix nutzen wollt, oder nicht.
Ergo habe ich alle Dateien nach dem Update umbenannt in "bas_clear...png" - nun wurden sie erstmal wieder angezeigt, Fehler behoben.

Was ich nicht hinbekommen habe, und ich verstehe die Ursache auch nicht, am Beispiel der Sonne, die innere Fläche der Sonne ist nun hellgrau dargestellt und zeigt dort nicht mehr die Hintergrundfarbe der Box an, wie sie soll. Dies Problem betrifft diverse Wettericons, die alle irgendwo eine in sich geschlossene Kontur haben.
Zuerst hatte ich die Bilddatei unter Verdacht, weil selbige beim Update erneut runtergeladen wurde. Ergo überschrieb ich sie mit der File aus meinem Backup - ohne Besserung.
Da es aktuell regnet, habe ich kurzerhand das Problem in Photoshop für Euch simuliert, siehe Anhang.
Woran kann es liegen?