Autor Thema: FTUI version 3  (Gelesen 96635 mal)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #15 am: 12 November 2020, 16:18:18 »
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

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #16 am: 12 November 2020, 16:55:32 »
Zitat
Schau mal in den examples/button.html, da gibt es sowas
Oh, manchmal sieht man einfach den Button vor lauter CSS nicht. ;)

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

Zitat
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.
Das wiederum habe ich schon gefunden und auch bei meinen HUEs erfolgreich eingesetzt.

Zitat
Update folgt gleich.
Super!

Die Frage nach den Templates ist vermutlich untergegangen.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #17 am: 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

Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #18 am: 12 November 2020, 21:33:11 »
Hört sich gut an, ich bin gespannt. :)
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #19 am: 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:

<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 Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #20 am: 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.

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

Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline MKeY

  • Full Member
  • ***
  • Beiträge: 200
Antw:FTUI version 3
« Antwort #21 am: 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:
<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

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1212
Antw:FTUI version 3
« Antwort #22 am: 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
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, ...
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #23 am: 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

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1212
Antw:FTUI version 3
« Antwort #24 am: 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.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, ...

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #25 am: 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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #26 am: 15 November 2020, 16:14:40 »
Die Einbindung des Kleinklima Iconsets habe ich setstate schon mal geschickt.

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

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #27 am: 15 November 2020, 19:56:21 »
Zitat
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.
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>
Zitat
Ich habe ünbrigens noch eine paar Standardfarben hinzugefügt
Super!
« Letzte Änderung: 15 November 2020, 21:11:15 von grossmaggul »
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #28 am: 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.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #29 am: 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.

       
<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


Zitat
Content 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>
Gefällt mir Gefällt mir x 2 Liste anzeigen

 

decade-submarginal