FTUI version 3

[Dracolein]

Hallo Dracolein,

einfach ftui-icon dazu

Code Auswählen Erweitern


                       <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>


hier nochmal komplett

Code Auswählen Erweitern


<ftui-row>
        <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation"
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
                        [color]="Luefter:state  | map('auto:mygreen, man:mygreen, off:mygreen')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="mygreen">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="mygreen">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="mygreen">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="mygreen">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation"
                                        name="vent_ventilation_level_automatic"
                                        color="mygreen"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>
        <ftui-badge
                backgroundcolor="secondary"
                [text]="Luefter:stufe">
        </ftui-badge>
</ftui-row>



oder fehlt dir der Path zu den Icons?

Code Auswählen Erweitern


path="../images/openautomation"


Gruß
Eisix

Ich hab mein Problem dank Deines Beispiels gefunden. Mein Lösungsweg war schon richtig, aber was zum Geier bedeutet <ftui-button-nice> ?
Mit dem klassischen <ftui-button> habe ich mein circlemenu hinbekommen, danke.


Edit:
Ein Problem habe ich doch noch. Und zwar vermutlich, da ich die genaue Syntax nicht begreife.

Hier der Schnipsel, um den es geht:

Code Auswählen Erweitern


<ftui-icon size="3" path="../images/openautomation"
                         [name]="shelly5:pct | map('0:fts_shutter_100, 10:fts_shutter_90, 20:fts_shutter_80, 30:fts_shutter_70, 40:fts_shutter_60, 50:fts_shutter_50, 60:fts_shutter_40, 70:fts_shutter_30, 80:fts_shutter_20, 90:fts_shutter_10, 100:fts_shutter_10')"
                         [color]="shelly5:pct | step('0:light, 1:brown, 100: green')"></ftui-icon>

- Icons werden korrekt dargestellt
- Farben wird korrekt dargestellt
- Icon wird aber nur angezeigt, wenn der Wert des Readings exakt zutrifft. Ist der Rolladen z.b. bei pct=43, wird kein Icon dargestellt.

Mein Problem ist logisch, das kann nicht funktionieren, weil die Funktion eine Auswahl meiner exakt vorgegebenen Werte vornimmt.
Aber wie müsste es korrekt formuliert werden, zumal ich für den Wert pct=0 ein eigenes Icon nutze, ebenso wie für pct=100.
Als Beispiel müsste das Icon "fts_shutter_90" für den Wertebereich zwischen 1-10 dargestellt werden. Aber ich kann ja nur entweder "map" oder "step" definieren.
Glaube jedoch, dass ich einen Denkfehler habe...

edit2:
habs gelöst. Beim Schreiben von Text löst sich manchmal der Knoten

Lösung:

Code Auswählen Erweitern


<ftui-icon size="3" path="../images/openautomation"
                         [name]="shelly5:pct | step('0:fts_shutter_100, 1:fts_shutter_90, 11:fts_shutter_80, 21:fts_shutter_70, 31:fts_shutter_60, 41:fts_shutter_50, 51:fts_shutter_40, 61:fts_shutter_30, 71:fts_shutter_20, 81:fts_shutter_10')"
                         [color]="shelly5:pct | step('0:light, 1:brown, 100: green')"></ftui-icon>


[Dracolein]

Besteht die Möglichkeit, ein Badge-Element abzuwandeln, um es als zusätzliches Hinweis-Icon zu benutzen?

Im Anhang habe ich mal ein Screenshot meines FTUI 2.x angehängt; es zeigt einen Teil einer Menüleiste.
Mit den dort verfügbaren Möglichkeiten konnte man z.B. an ein Symbol-Element zusätzlich ein eventabhängiges Icon dranhängen.
Hier im Beispiel ist optisch ein Hinweis signalisiert, dass ein Termin unmittelbar bevorsteht, bzw. draußen grade Frostgefahr besteht.

Code Auswählen Erweitern


                data-warn="daycheck"
                data-warn-on="1"
                data-warn-off="0"
                data-warn-icon="mi mi-priority_high"
                data-warn-background-color='["#aa6900"]'
                data-warn-color='["lightgray"]'

Ich fand sowas sehr nützlich.

[Dracolein]

Kann mir jmd mit der replace Pipe weiterhelfen? Ich begreife es leider nicht.

Code Auswählen Erweitern

<ftui-label [text]="Sonnenaufgang"></ftui-label>
ergibt z.B.

Next: 07:35:25

und ich möchte lediglich die Ausgabe

07:35

sehen.

Vielen Dank vorab.

[LuGu]

Hallo Dracolein,

müsste mit

Code Auswählen Erweitern


<ftui-label [text]="Sonnenaufgang | part(2)"></ftui-label>

klappen.

Gruß Lutz

[yersinia]

Besteht die Möglichkeit, ein Badge-Element abzuwandeln, um es als zusätzliches Hinweis-Icon zu benutzen?

Ja, das sollte gehen, da du dem badge ein icon unterschieben kannst. In etwa so:

Code Auswählen Erweitern

<ftui-icon>
<!-- hier dein icon an dem das badge ran soll -->
</ftui-icon>
  <ftui-badge text="&nbsp;" color="clear"
      [hidden]="DEIN-DEVICE:daycheck | map('0:true, 1:false')">
      <ftui-icon path="icons/materialicons/"
            name="mi-priority_high"
            color="lightgray"
            class="">
      </ftui-icon>
  </ftui-badge>
Vorrausgesetzt, deine materialicons sind vorhanden unter dem Pfad und das icon heisst so.

[Dracolein]

Hallo Dracolein,

müsste mit

Code Auswählen Erweitern


<ftui-label [text]="Sonnenaufgang | part(2)"></ftui-label>

klappen.

Gruß Lutz

Hallo Lutz, vielen Dank, das bringt mich einen Schritt weiter.
Ich habe nun immerhin die Ausgabe

07:33:54

jetzt fehlt noch das Wegschneiden der Sekunden, falls möglich.
Davon ab würde mich interessieren, wie ich die Funktion nachvollziehen kann zwecks Lerneffekt für mich.

Ja, das sollte gehen, da du dem badge ein icon unterschieben kannst. In etwa so:

Code Auswählen Erweitern

<ftui-icon>
<!-- hier dein icon an dem das badge ran soll -->
</ftui-icon>
  <ftui-badge text="&nbsp;" color="clear"
      [hidden]="DEIN-DEVICE:daycheck | map('0:true, 1:false')">
      <ftui-icon path="icons/materialicons/"
            name="mi-priority_high"
            color="lightgray"
            class="">
      </ftui-icon>
  </ftui-badge>
Vorrausgesetzt, deine materialicons sind vorhanden unter dem Pfad und das icon heisst so.

Cooler Tip, das funktioniert generell schon gut. Aber ich schaffe es nicht, dass das "Badge-Icon" transparent ist. Color="clear" wirkt nicht, ebenso wenig wie fill="clear". Hier mein Code und im Anhang der Screenshot dazu

Code Auswählen Erweitern


         
            <ftui-badge text="&nbsp;" color="clear" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
              <ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
            </ftui-badge> 
           


P.S.:
und überhaupt, dieser Thread ist voll mit geballter Kompetenz, das müsste unbedingt in einen Wiki-Eintrag untergebracht werden. Was ich hier an Möglichkeiten durch puren Zufall entdeckt hatte, ist der Hammer.  Allein die Möglichkeiten mit <ftui-weather> kannte ich zuvor auch alle nicht.

[yersinia]

Cooler Tip, das funktioniert generell schon gut. Aber ich schaffe es nicht, dass das "Badge-Icon" transparent ist. Color="clear" wirkt nicht, ebenso wenig wie fill="clear". Hier mein Code und im Anhang der Screenshot dazu

Code Auswählen Erweitern

            <ftui-badge text="&nbsp;" color="clear" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
              <ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
            </ftui-badge>

Code Auswählen Erweitern

            <ftui-badge text="&nbsp;" color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
              <ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
            </ftui-badge>
Versuch mal color="transparent" beim badge. Ich weiss gar nicht mehr, ob text="&nbsp;" noch benötigt wird. "Früher" wurde das benötigt, damit badge ohne text auch angezeigt worden ist.

Das geile an FTUI3 ist auch, dass du hier beliebig kombinieren könntest, zB verschiedene batches die je nach Zustand angezeigt werden

Code Auswählen Erweitern

            <ftui-badge text="&nbsp;" color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, 1:false')">
              <ftui-icon name="info" color="brown" class="" size="-2"></ftui-icon>
            </ftui-badge>
            <ftui-badge text="&nbsp;" color="transparent" [hidden]="FamilyCal:daycheck | map('0:false, 1:true')">
              <ftui-icon name="info" color="green" class="" size="-2"></ftui-icon>
            </ftui-badge>
Oder das icon je nach Zustände im batch definieren.

Code Auswählen Erweitern

            <ftui-badge text="&nbsp;" color="transparent" [hidden]="FamilyCal:daycheck | map('0:true, .*:false')">
              <ftui-icon [name]="FamilyCal:daycheck | map('0:info, 1:info, 2:warning')" [color]="FamilyCal:daycheck | map('0:brown, 1:brown, 2:green')" class="" size="-2"></ftui-icon>
            </ftui-badge>

[Dracolein]

Perfekt, color="transparent" hat Abhilfe geschaffen. Wieso zum Geier bin ich da nicht selbst drauf gekommen...

Aber schlimm, wie lange man sich als Perfektionist mit den kleinsten Details aufhalten kann   

[Dracolein]

Wie ändere ich die tatsächlich dargestellte Farbe hinter dem Wort "green" innerhalb des HTML Konstrukts? Also die dargestellte Farbe, wenn ich z.B.

Code Auswählen Erweitern

<ftui-row color="green">green</ftui-row>
schreibe. Ich dachte, dazu gehe ich in die ftui-theme.css und ändere einfach den Farbwert von

--green: #32a054;

aber 1.) entspricht der dort stenden Farbcode gar nicht dem in meinem Browser dargestellten Farbwert und 2.) kann ich durch Änderung dieses Farbcodes gar nichts bewirken.

[StephanFHEM]

ich habe im Style-Tag auf der Index-Seite einfach folgendes geschrieben:

Code Auswählen Erweitern

    [color="green"] {
      --color-base: #32a054;
    }

Den Color-Code kannst du dir zB hier holen oder anschauen: http://html-color.org/de/

[Dracolein]

Ohne die genauen Hintergründe zu kennen, aber kann es sein, dass in der Funktion <ftui-weather> bei der Zuordnung der richtigen Bilddateien für die bunten Grafiken ein Bug enthalten ist?

Code Auswählen Erweitern

<ftui-weather size="6" [condition]="WetterProplanta:weather"></ftui-weather> 
Funktioniert perfekt

Code Auswählen Erweitern

<ftui-weather size="7" icon-set="kleinklimaFHEM" path="../images/default/weather/" [condition]="WetterProplanta:weather"></ftui-weather>
Funktioniert auch, aber es werden - so glaube ich jedenfalls - nicht immer die richtigen Bilddateien ausgewählt.
Gestern abend war es draußen am regnen und anstelle der Regenwolke mit Mond (=Nacht) wurde mir eine Regenwolke mit Sonne angezeigt.

In meinem alten FTUI 2 funktioniert das kleinklima-Iconset weiterhin zuverlässig, dort siehts so aus:

Code Auswählen Erweitern


<div data-type="weather" data-device="WetterProplanta" data-get="weatherIcon" data-imageset="kleinklima" style="width:120px"></div>

Ja, hier frage ich das Reading "weatherIcon" ab, während ich oben in FTUI3 das Reading "Weather" abfrage. Aber die Textdarstellung des Readings "Weather" ist auch korrekt gewesen ("Sprühregen" am gestrigen Abend)

Möglicherweise beobachtet jemand auch dies Problemchen?

[grossmaggul]

Ich hatte das schonmal gemeldet, ist aber wahrscheinlich untergegangen.

Beim Colorpicker sind horizontal und vertikal vertauscht, wenn man das Attribut direction=horizontal angibt, wird der Regler vertikal gezeichnet. Sieht man auch im Beispiel im git.

[setstate]

Ich hatte das schonmal gemeldet, ist aber wahrscheinlich untergegangen.

Beim Colorpicker sind horizontal und vertikal vertauscht, wenn man das Attribut direction=horizontal angibt, wird der Regler vertikal gezeichnet. Sieht man auch im Beispiel im git.

Dachte ich auch erst, aber im Sinne des iro.js bedeutet "horizontal", dass die Elemente nebeneinander sind, und "vertical" ist ein Stack von oben nach unten.
Bei Slider, die eher Länglich sind, wirkt das Wording schnell verwirrend.

[grossmaggul]

aber im Sinne des iro.js bedeutet "horizontal", dass die Elemente nebeneinander sind, und "vertical" ist ein Stack von oben nach unten.

O.K., wenn man's so sieht, das kommt halt dabei heraus wenn Nerds versuchen logisch zu sein.

[ToM_ToM]

Sowas geht nicht. In FTUI 4 dann vielleicht mal 

Hallo setstate, wäre es nicht möglich, eine Content zu erweitern damit es möglich ist, kompletten html code aus einem Reading darzustellen?
z.B statt

Code Auswählen Erweitern

<ftui-content file="mainTablet/templates/template_Sonos.html"></ftui-content>

dann:

Code Auswählen Erweitern

<ftui-content [reading]="MeinDevice:meinHTMLCodeReading"></ftui-content>

Beste Grüße

Thomas