FTUI version 3

setstate · 12 November 2020, 16:18:18

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)

Code Auswählen

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

<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 · 12 November 2020, 16:55:32

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.

setstate · 12 November 2020, 18:58:16

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 · 12 November 2020, 21:33:11

Hört sich gut an, ich bin gespannt.

grossmaggul · 14 November 2020, 10:00:53

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:

Code Auswählen

<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?

setstate · 14 November 2020, 11:17:41

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.

Code Auswählen


<!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

Code Auswählen


    <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 · 14 November 2020, 17:42:05

Ich teste auch ein wenig und wollte nur eine mgl Definition des charts bei Verwendung von DBLog zeigen, die bei mir funktioniert:

Code Auswählen

<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

)

Thyraz · 14 November 2020, 18:09:40

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

Eisix · 15 November 2020, 15:04:07

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 · 15 November 2020, 15:51:57

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.

Eisix · 15 November 2020, 16:08:42

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 · 15 November 2020, 16:14:40

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 · 15 November 2020, 19:56:21

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.

Code Auswählen

<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!

grossmaggul · 16 November 2020, 20:45:02

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.

setstate · 17 November 2020, 02:42:23

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

Code Auswählen

        
<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

Code Auswählen

<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.

Code Auswählen

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