FTUI version 3

[RockFan]

Danke @mr_petz!

Mit

Edit oder so in einer cell:

klappt das super, da der Text schön beim Icon bleibt (siehe Screenshot).

Bei der Variante mit dem Umbruch verteilt sich (wie beim Label) und wie Du es eigentlich auch geschrieben hast, Icons und Texte über den ganzen Grid. Das ist nicht so hübsch oder eben erst mit mehr Code in den Griff zu bekommen (zumindest für mich  )

Viele Grüße
Dieter

[pingus]

Ich versuche in dieser Version den Farbenwildwuchs so gut wie möglich einzudämmen. Noch ein paar Grundfarben in das CSS aufzunehmen, werde ich vermutlich noch machen. Ich erwische mich selber oft, einfach rot / grün nehmen zu wollen. Also braun, blau usw.

Diese Werte gibt es aktuell (gleiche Spalte = gleiche Farbe)

Code Auswählen Erweitern

/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */
/* "primary", "secondary", "ok",                 "error",  "white", "medium", "dark" */
/*                         "green",   "yellow",  "red",    "light", "medium", "dark" */

Für Komponenten, wo der RGB-Wet wirklich gebraucht wird, z.B. aktuelle Farbe der HUE-Lampen anzeigen, wird es auch ein rgb-Attribute geben.

FTUI-Icon hat das schon

Code Auswählen Erweitern

<ftui-icon [name]="dummy1 | map('on:lightbulb-on-outline, off:lightbulb-outline')" [rgb]="HUEDevice6:rgb">
        </ftui-icon>


https://knowthelist.github.io/ftui/examples/icon.html

Ich würde es gut finden, wenn man die Farben auch aus einem Reading ziehen kann. Ich bekomme von meinem Wetterprovider für jede Temperatur eine passende Hintergrund- und Vordergrundfarbe mit der ich den Text und den Hintergrund einfärbe.

[mr_petz]

Geht mit den Farben die in FTUI3 drin sind:

Code Auswählen Erweitern


<ftui-icon name="wifi" [color]="<device>:<reading>"></ftui-icon>


Das sind die Farben die es gibt:

https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css

Also wenn dein Reading zB green als text hat, dann kannst du es wie oben verwenden...

Edit: oder du dir die Farben in einer user.css anlegst

[setstate]

Icon hat auch ein rgb Attribute. Damit geht das

Code Auswählen Erweitern

rgb="#556677

Oder per Reading

Code Auswählen Erweitern

[rgb]="myWeather:colorValue"

[grossmaggul]

setstate, könntest Du Dir bitte nochmal die Medialist anschauen, da funktioniert das Auswählen noch nicht richtig.

[pingus]

Danke für die schnelle Antwort.

Das mit dem Icon funkioniert soweit.
Wie bringe ich den Text aus einem anderen Reading auf das Icon (siehe Anhang wie es in FTUI 2 aussieht und im Moment in FTUI3)?

In FTUI 3 habe ich es so probiert

Code Auswählen Erweitern

<ftui-column>
    <ftui-icon name="circle" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
        <ftui-label [text]="srfmeteo:forecast_day_1_min_color_temperature"><span slot="end">°C</span></ftui-label>
    </ftui-icon>
</ftui-column>
<ftui-column shape="round" color="light">
    <ftui-label [text]="srfmeteo:forecast_day_1_max_color_temperature" class="size-7 thin"><span class="size-0"
            slot="end">°C</span>
    </ftui-label>
</ftui-column>

In FTUI 2 mache ich es so:

Code Auswählen Erweitern

<div data-type="symbol" data-icon="none" data-device="srfmeteo"
    data-color="srfmeteo:forecast_day_2_min_color_text_color" data-background-icon="fa-circle"
    data-on-background-color="srfmeteo:forecast_day_2_min_color_background_color"
    data-off-background-color="srfmeteo:forecast_day_2_min_color_background_color" class="cell inline ">
    <div data-type="label" data-device="srfmeteo" data-color="srfmeteo:forecast_day_2_min_color_text_color"
        data-get="forecast_day_2_min_color_temperature" data-unit="%B0C%0A" class="">
    </div>
</div>


[Sailor]

Hallo Pingus

In FTUI 3 habe ich es so probiert

Code Auswählen Erweitern

<ftui-column>
    <ftui-icon name="circle" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
        <ftui-label [text]="srfmeteo:forecast_day_1_min_color_temperature"><span slot="end">°C</span></ftui-label>
    </ftui-icon>
</ftui-column>
<ftui-column shape="round" color="light">
    <ftui-label [text]="srfmeteo:forecast_day_1_max_color_temperature" class="size-7 thin"><span class="size-0"
            slot="end">°C</span>
    </ftui-label>
</ftui-column>
[/code]

Nur ein Vorschlag der besseren Lesbarkeit: Darf ich dir empfehlen deinen Code besser so zu schreiben:

Code Auswählen Erweitern


<ftui-column>
<ftui-icon name  = "circle"
   [rgb] = "srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text] ="srfmeteo:forecast_day_1_min_color_temperature"
unit  = "&deg;C">
</ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape = "round"
     color = "light">
<ftui-label [text] = "srfmeteo:forecast_day_1_max_color_temperature"
    class  = "size-7 thin unit="&deg;C"
</ftui-label>
</ftui-column>


[mr_petz]

@pingus

Das mit dem Icon geht so nicht.
Als Lösungsvorschlag könntest du es so machen:

Code Auswählen Erweitern


    <ftui-button shape="circle" class="size-1" [color]="srfmeteo:forecast_day_2_min_color_background_color" states="" style="pointer-events:none">
        <ftui-label class="size-3 thin" [text]="srfmeteo:forecast_day_1_min_color_temperature"><span class="size-0" slot="end">°C</span></ftui-label>
    </ftui-button>


Ansonsten musst du halt mit css und Standard-html arbeiten...
Gruß

Edit ungetestet... oh sorry button hat kein rgb, nur color...

[pingus]

Hallo Pingus

Nur ein Vorschlag der besseren Lesbarkeit: Darf ich dir empfehlen deinen Code besser so zu schreiben:

Code Auswählen Erweitern


<ftui-column>
<ftui-icon name  = "circle"
   [rgb] = "srfmeteo:forecast_day_2_min_color_background_color">
<ftui-label [text] ="srfmeteo:forecast_day_1_min_color_temperature"
unit  = "&deg;C">
</ftui-label>
</ftui-icon>
</ftui-column>
<ftui-column shape = "round"
     color = "light">
<ftui-label [text] = "srfmeteo:forecast_day_1_max_color_temperature"
    class  = "size-7 thin unit="&deg;C"
</ftui-label>
</ftui-column>


Danke, versuche ich so umzusetzen. Mal schauen was der Codeformatierer von VScode damit anstellt

Edit und völlig OT: Codeformatierung mit VSCode damit alle Attribute auf einer neuen Linie sind und untereinander: Siehe Bild

[SirMarco]

Danke, versuche ich so umzusetzen. Mal schauen was der Codeformatierer von VScode damit anstellt

Edit und völlig OT: Codeformatierung mit VSCode damit alle Attribute auf einer neuen Linie sind und untereinander: Siehe Bild

Hello

Welchen Code formatter nutzt du?

Grüsse

[pingus]

Standard HTML von VSCode

[mr_petz]

@pingus und @all
Ich habe mal für dein [rgb] color hinter deiner Temperatur ein kleines Tool für FTUI3 zusammengestellt.
Ist halt "nur" ein farbiger Hintergrund in kombination mit ftui-label oder anderen Kombinationen.
Name ist frei erfunden...
Settings:

Code Auswählen Erweitern

      size,
      shape,
      fill,
      color,
      direction,
      rgb,
      class,
Bsp für dich:

Code Auswählen Erweitern


    <ftui-bgcolor shape="circle" class="size-1" [rgb]="srfmeteo:forecast_day_2_min_color_background_color">
        <ftui-label class="size-3 thin" [text]="srfmeteo:forecast_day_1_min_color_temperature"><span class="size-0" slot="end">°C</span></ftui-label>
    </ftui-bgcolor>


CSS Teile vom Tool sind vom ftui-button.
Kannst es ja testen wenn du magst.
zum installieren: einfach ins components-Verzeichnis von ftui3

Sieht dann so aus wie oben von mir das Bild.
ps Farben werden nach Änderung des Reading auch neu gesetzt...
[color] funzt natürlich auch...
Gruß

Edit:
fill outline für rgb hinzugefügt => Definition:

Code Auswählen Erweitern

fill="outline_rgb"
fill="solid" muss nicht angegeben werden..
Bilder angehangen

noch ein Beispiel:

Code Auswählen Erweitern


    <ftui-bgcolor shape="" class="size-5" [rgb]="colordummy:color" fill="">
      <ftui-cell>
        <ftui-icon name="sun2" class="size-1"></ftui-icon>
<ftui-label class="size-3 thin" [text]="colordummy:temp" color="white"><span class="size-1" slot="end">°C</span></ftui-label>
      </ftui-cell>   
    </ftui-bgcolor>


[Eisix]

Hallo,

vielleicht habt ihr es übersehen eki hat eine Umfrage bzgl. Charts gestartet.

https://forum.fhem.de/index.php/topic,121272.0.html

Gruß
Eisix

[pingus]

Hei mr_petz

Vielen Dank! Ich bin leider noch nicht dazu gekommen das auszuprobieren 

Ich werde aber sicher ein Feedback geben, sobald es bei mir läuft.

Danke
Pingus

[Sailor]

Ein herzerfrischendes "Moin" vom achtern Diek vorweg!

Ich habe zwei Fragen zu <ftui-label>

Wenn ich in einem fhem-dummy einen ganzen Text (Warnung! Die Feuchtigkeit ist zu hoch!) abgelegt habe

a) wie bekomme ich einen Zeilenumbruch in den Text
Warnung!<BR>Die Feuchtigkeit ist zu hoch!  oder Warnung!\nDie Feuchtigkeit ist zu hoch! funktionieren nicht.

<BR> funktioniert, solange man es richtig ohne Tippfehler schreibt...

b) wie bekomme ich die Anzeige von linksbuendig in die zentrierte Ansicht. Ich finde keinen "class="  Parameter.

Danke
    Gruß
        Sailor