Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

setstate

Zitat von: grossmaggul am 12 November 2020, 16:05:42
Ja, das war mir klar, allerdings konnte man in der 2er Version von Ftui einfach einen RGB Farbwert angeben, das erscheint mir dann doch einfacher, als für jede Farbe die man vielleicht einmal braucht im User-CSS eine dafür anzulegen. Z.B. würde ich die Biotonne gerne Braun darstellen, die Farbe werde ich aber wohl sonst nirgendwo brauchen.

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)

/* "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

<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

grossmaggul

ZitatSchau mal in den examples/button.html, da gibt es sowas
Oh, manchmal sieht man einfach den Button vor lauter CSS nicht. ;)

ZitatIch versuche in dieser Version den Farbenwildwuchs so gut wie möglich einzudämmen.
O.K., sehe ich ein, ist ja auch eigentlich besser so, was aber irgendwie fehlt ist richtiges Schwarz.

ZitatFür Komponenten, wo der RGB-Wet wirklich gebraucht wird, z.B. aktuelle Farbe der HUE-Lampen anzeigen, wird es auch ein rgb-Attribute geben.
Das wiederum habe ich schon gefunden und auch bei meinen HUEs erfolgreich eingesetzt.

ZitatUpdate folgt gleich.
Super!

Die Frage nach den Templates ist vermutlich untergegangen.
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate

Content aus einem File holen habe ich schon fertig. Ist nur noch nicht hochgeladen. Ich überlege noch, ob man Platzhaltervariablen braucht und wie ich das umsetze.

Außerdem ist User Thyraz gerade dabei Panel-Componenten zu bauen. Das sind dann auch wiederverwendbare Sachen, die aus mehreren Einzelkomponenten bestehen. Damit hat man dann mit wenigen Zeilen umfangreiche Seiten schnell fertig.  Panel-Blind oder Panel-Slider zum Beispiel.

Das könnte man zu einem schönen Panel Baukasten ausbauen.

https://thyraz.github.io/ftui/examples/page.html


grossmaggul

Hört sich gut an, ich bin gespannt. :)
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

grossmaggul

Jetzt habe ich aber doch noch ein Problem.

Dieses Konstrukt soll bei verschiedenen Temperaturen unterschiedliche Farben anzeigen, das hat auch schon mal funktioniert, jetzt nicht mehr:

<div class="cell small">
          <ftui-knob [value]="proplanta:temperature" [color]="proplanta:temperature | map('0: success, 10: warning, 30: danger')" width="120" height="100" offset-y="15" type="arc" min="-30" max="40" unit="°C" readonly has-value-text></ftui-knob>
        </div>


Was mache ich da falsch?
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate

Leider ist an dem Code nix falsch. Das funktioniert so.

Ich habe auch extra eine frischen Installation von Github gezogen und auf einer leeren Seite probiert.


<!DOCTYPE html>
<html>

<head>
  <meta name='debug' content='2'>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <script src="ftui.js" defer></script>

  <title>FHEM-Tablet-UI</title>
</head>

<body>
  <ftui-grid>

    <ftui-grid-tile row="1" col="1" height="1" width="1">
      <header>OUT-TEMP</header>
      <div class="cell small">
        <ftui-knob [value]="AgroWeather:temperature"
                   [color]="AgroWeather:temperature | map('0: success, 10: warning, 30: danger')"
                   width="120"
                   height="100"
                   offset-y="15"
                   type="arc"
                   min="-30"
                   max="40"
                   unit="°C"
                   readonly
                   has-value-text>
        </ftui-knob>
      </div>
    </ftui-grid-tile>

  </ftui-grid>
</body>

</html>



Da muss was anderes innerhalb der Seite zum Fehler führen.

Ich habe ünbrigens noch eine paar Standardfarben hinzugefügt


    <ftui-grid-tile row="1" col="10" height="2" width="4">
      <header>COLOR</header>
      <div class="row">
        <ftui-icon name="trash" color="brown"></ftui-icon>
        <ftui-icon name="trash" color="yellow"></ftui-icon>
        <ftui-icon name="trash" color="blue"></ftui-icon>
        <ftui-icon name="trash" color="black"></ftui-icon>
        <ftui-icon name="trash" color="gray"></ftui-icon>
      </div>
    </ftui-grid-tile>



MKeY

Ich teste auch ein wenig und wollte nur eine mgl Definition des charts bei Verwendung von DBLog  zeigen, die bei mir funktioniert:
<ftui-chart  class="row" width="150px" height="75px">
            <ftui-chart-data fill log="DBLogDEVICE" file="history" spec="DEVICE:READING" [update]="DEVICE:state:time"></ftui-chart-data>
</ftui-chart>


Falls das nicht gewünscht ist, einfach löschen und danke für deine Arbeit, setstate (man kann sich ja gut durch die widgets lesen :) )
Wer Fehler findet, darf sie behalten!
RPi's, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3S (MMU2S vorhanden, aber nervtötend)
Lowrider 2CNC

Thyraz

Da ich auch DbLog nutze sind hier auch noch ein paar Beispiele im Quellcode der Seite zu finden:

https://thyraz.github.io/ftui/examples/page.html
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Eisix

Hallo Setstate,

Content aus einem File laden, also ein aufsplitten der index.html wäre mir sehr wichtig, da ich sonst den Überblick verliere. Würde vorschlagen das ein Demo Tread angelegt wird wo jeder seine bisherigen Teile rein packt wie bei FTUI2.
Oder gleich ins wiki?!
Gruß
Eisix

Thyraz

Die aktuelle ,,offizielle" Version ist ja immer noch die 2er.
Wer hier mitmacht muss recht schmerzfrei sein was fehlende Features oder Fehler angeht.

Somit würde ich mit mehreren Threads oder gar Wiki noch warten.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Eisix

Hallo Thyraz,

Hab schon seit ein paar Wochen eine Seite damit laufen zum Test. Wetter, Abfall, Anrufliste und Videostreams habe ich am laufen. Die Einbindung des Kleinklima Iconsets habe ich setstate schon mal geschickt.

Gruß
Eisix

setstate

Zitat von: Eisix am 15 November 2020, 16:08:42
Die Einbindung des Kleinklima Iconsets habe ich setstate schon mal geschickt.

Oh, das ist untergegangen. Gut, dass du mich erinnerst.

grossmaggul

#27
ZitatLeider ist an dem Code nix falsch. Das funktioniert so.

Ich habe auch extra eine frischen Installation von Github gezogen und auf einer leeren Seite probiert.
Habe ich auch gemacht und bei mir funktioniert es leider nicht, keine Ahnung was das Problem bei mir ist.:-/
Geht doch, wenn ich die runden Klammern hinzufüge, aber laut Deinem Beispiel sollte das ja auch ohne gehen.
<ftui-knob [(value)]="proplanta:temperature" [color]="proplanta:temperature | map('-30:blue,0:green,15:warning,30:danger')" width="120" height="100" offset-y="15" type="arc" min="-30" max="40" unit="°C" readonly has-value-text></ftui-knob>

ZitatIch habe ünbrigens noch eine paar Standardfarben hinzugefügt
Super!
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

grossmaggul

Ich hoffe ich nerve nicht zu sehr. ::)

Kann man Icons auch spinnen oder blinken lassen abhängig von bestimmten Werten?
Als z.B. die rotierenden Mülltonnen ab einem bestimmten Tag vor dem Abholtag.

Und lässt sich Text in einem Label ausrichten? Ich habe es mit align-center/left/right versucht, das klappt aber nicht.
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate


Animationen gehen per class: spin, hop, blink
Man kann für class auch ein Binding per [class-name]="Device:Reading" realisieren.

       
<ftui-icon name="trash" color="brown" class="spin"></ftui-icon>
<ftui-icon name="trash" color="yellow" class="hop"></ftui-icon>
<ftui-icon name="trash" color="blue" [class-name]="dummy2 | map('1:hop,2:')"></ftui-icon>


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

Thyraz hat schöne Multichlor-Icons gebaut, die man auch animieren kann:

https://thyraz.github.io/ftui/examples/icon-multicolor.html


ZitatContent aus einem File laden, also ein aufsplitten der index.html wäre mir sehr wichtig, da ich sonst den Überblick verliere.

Es gibt jetzt auch ftui-content
<ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>

Im Template-File kann man auch Platzhalter mit doppelter geschweifter Klammer verbauen, die im ftui-content als beliebiges Attribute
angegeben werden können.

<ftui-title>{{room}}</ftui-title>