FTUI version 3

[meier81]

Die Beispiel habe ich jetzt überarbeitet. Es gibt jetzt beide Möglichkeiten:
1.) einmal ist die Toolbar mit Menü-Button und Titel in jedem View wiederholt mit drin.

https://knowthelist.github.io/ftui/www/ftui/examples/menu.html

  <ftui-main>
    <ftui-tab-view>
        <ftui-view>
             <ftui-view-toolbar>
                 {{beliebigerTextAlsTitle}}


2.) oder, Menü-Button und Titel gibt es nur einmal

https://knowthelist.github.io/ftui/www/ftui/examples/menu2.html oder https://knowthelist.github.io/ftui/www/ftui/examples/mobile.html

  <ftui-main>
    <ftui-view>

      <ftui-view-toolbar slot="header">
        <ftui-menu-button slot="start"></ftui-menu-button>
        <ftui-tab-title text-align="left"></ftui-tab-title>
      </ftui-view-toolbar>

      <ftui-tab-view>

Dann muss man ftui-tab-title  benutzen, um von den aktivierten Tabs den Text zu bekommen.

Hab eben die Variante wie menu2.html eingebaut, funktioniert einwandfrei. Hatte die Frage auch schonmal vor ein paar Wochen gestellt, hat sich somit geklärt.

Mercy und Gruß, Markus

[SirMarco]

Hello

Zeig doch mal dein Mobile UI 

Grüsse

[meier81]

Hello

Zeig doch mal dein Mobile UI 

Grüsse

Gerne, gibt´s aber noch nicht viel zu sehen, hab mal einiges angefangen und umgesetzt, muss die endgültige Anordnung noch vornehmen (mit der Regierung zusammen)

Ich stelle auf jeden Fall noch mehr Bilder ein die Tage wenn ich das alles mal noch etwas mehr in Form gebracht habe, jetzt ging es erstmal um die "Funktionen".

Gruß Markus

[hackepeter]

Moin Moin,

gibts beim chart die Möglichkeit min / avg / max mit anzuzeigen? Wie z.B. hier: https://codepen.io/jordanwillis/pen/EWwVrK oder im Anhang(Grafana)
Bei Grafana geht es - und im FHEM auch - in der doku von chart.js und hier im Thread finde ich nichts

[stefan-dd]

Seid einem Update letzte Woche funktionieren Reading abhängige Popups nicht mehr.

Code Auswählen Erweitern

  <ftui-popup [open]="Popup_Kamera:state | map('off: false, on: true')" shape="round" timeout="0" height="700px" width="1200px">
    <header>Kamera</header><br>
      <ftui-row>.....

Spiele ist die popup.component.js vom 20.11.21 ein, funktioniert es wieder.

[setstate]

Statt open muss man jetzt active benutzten. open brauchte ich als Gegenstück for close. Siehe Beispiele.

[OdfFhem]

gibts beim chart die Möglichkeit min / avg / max mit anzuzeigen? Wie z.B. hier: https://codepen.io/jordanwillis/pen/EWwVrK oder im Anhang(Grafana)
Bei Grafana geht es - und im FHEM auch - in der doku von chart.js und hier im Thread finde ich nichts

chart.js hat früher helpers.min und helpers.max unterstützt. Seit Version 3.x werden diese unter "Removed from Helpers" aufgeführt und stehen damit nicht mehr zur Verfügung. Eine integrierte Alternative dazu scheint es (noch) nicht zu geben ...

FTUI3 könnte man aber natürlich dahingehend erweitern und beispielsweise mit folgenden Attributen eine erweiterte Ausgabe erzielen:

Code Auswählen Erweitern


<ftui-chart-data ... calc-min calc-max label="Daten ... Min: #min# ... Max: #max#"></ftui-chart-data>


Ob dies eine brauchbare Lösung sein könnte bzw. allgemeine Zustimmung findet ?


"Anregung": Chart-Themen besser in https://forum.fhem.de/index.php/topic,117779.0.html behandeln - in diesem allgemeinen Teil geht sowas schnell unter ...

[hackepeter]

Meine Zustimmung findet es!

[setstate]

Es gibt jetzt $min, $max, $avg, $last beim chart-data

Code Auswählen Erweitern

<ftui-chart-data label="Humidity (Min: $min %, Max: $max %, Last: $last %)"

[hackepeter]

Einwandfrei, es funktioniert sensationell!

[rob]

Hat jmd. von Euch das Light-Theme im Einsatz?
An meinem Küchentablet kann ich mit Dark wenig/ schlecht erkennen. Also Light. Klappt soweit.
Nur meine Slider erinnern mich an Otto Waalkes "weißer Adler auf weißem Grund" 
Die classes "rangeable-progress" und "rangeable-handle" stehen bei mir auf weiß. Lässt sich das ändern im Widget oder der Kachel (außer im CSS selbst)?

[SirMarco]

Du kannst

Code Auswählen Erweitern


  --slider-track-color: var(--gray55);
  --slider-handle-shadow: 1px 1px 4px #ddd;
  --slider-handle-border: 1px solid green;


deinem Theme hinzufügen und anpassen

[rob]

Ja, OK also nur im CSS selbst. Dann werd ich mir mal ein eigenes Theme zusammenwursten
Hab ich für FHEM auch schon, bin also quasi in "Übung"

Danke und beste Grüße
rob

[setstate]

Wenn das in den vorhandenen Themes fehlt, werde ich das natürlich noch nachpflegen

[rob]

Das wäre prima  Hab im File "bright-theme.css" gespickt: dort nicht definiert/ enthalten. Im File "ftui-theme.css" ist es drin. Für mich ist es nicht eilig.