[FTUI3] Beispiele, Anregungen und Spielereien

Prof. Dr. Peter Henning · 17 Februar 2025, 19:27:28

Das mit der direkten Beeinflussung habe ich wieder verworfen, weil dann nicht verschiedene Elemente mit einem Funktionsaufruf gesteuert werden können. Außerdem ist der Steuercode dann über diverse Elemente verteilt, und somit extrem unübersichtlich (bis unwartbar).

Übrigens, der

Zitat von: yersinia am 17 Februar 2025, 16:55:43Interessierte

bevorzugt eindeutige Dokumentationen, statt im fast nicht kommentierten Code anderer herumzuwühlen.

LG

pah

Jojo11 · 24 Februar 2025, 19:20:07

Ich hatte letztens den Bedarf, die Vorhersage von SolarForecast in FTUI3 anzuzeigen, ohne über log-Files zu gehen. Dazu habe ich mir eine sub zusammengestrickt, die über logproxy die Daten ausgibt. Vielleicht nicht sehr anspruchsvoll, aber es erfüllt seinen Zweck. Evtl. kann es ja jemand gebrauchen:

Code Auswählen

sub myPVplot2($) {
    my ($dataset) = @_;
    my $value=0;
    my @timestamps;               # Array für die Zeitstempel
    my @values;                   # Array für die Werte aus den Dummies
    my ($sec, $min, $hour, $monthday, $month, $year, $weekday, $yearday, $isdst) = localtime(time);
    $year += 1900;
    $month += 1;
    my $hh=0;

    for my $stunde (6 .. 20) {
     my $timestamp = sprintf("%04d-%02d-%02d_%02d:30:00", $year, $month, $monthday, $stunde-1);
     push @timestamps, $timestamp;
     $hh=sprintf("%02d", $stunde);
     if ($dataset == 0){
      $value=ReadingsVal('PVforecast','Today_Hour'.$hh.'_PVforecast',0);
     } elsif ($dataset == 1){
      $value=ReadingsVal('PVforecast','Today_Hour'.$hh.'_PVreal',0);
     } elsif ($dataset == 2){
      $value=ReadingsVal('PVforecast','Tomorrow_Hour'.$hh.'_PVforecast',0);
     } else {
      $value=0;
     }
     ($value) = split(' ', $value, 2);
     push @values, $value;
    }

    my $logproxyData = join("\n", map { "$timestamps[$_] $values[$_]" } 0 .. 15);
    return $logproxyData;
}

":30:" und "$stunde-1" verschieben die Balken etwas, um die Lesbarkeit zu verbessern.
Je nach Übergabewert (0, 1 oder 2) gibt die Funktion die heutige Vorhersage, die heutigen realen Erträge oder die morgige Vorhersage zurück.

Der Chart ist dann in etwa so:

Code Auswählen

<ftui-chart id="chart03" y-min="0" x-min="6" x-max="21" unit="day" height="400px" style="background-color:none;">
    <ftui-chart-data fill type="bar" background-color="rgba(255, 186, 8 ,0.5)" color="rgba(250, 163, 7,1)" stack="stack1" log="lgprxy" spec="Func:myPVplot2(0)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:true,on:false')"></ftui-chart-data>
    <ftui-chart-data fill type="bar" background-color="rgba(0,119,182,0.2)" color="rgba(0,119,182,1)" stack="stack2" log="lgprxy" spec="Func:myPVplot2(1)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:true,on:false')"></ftui-chart-data>
    <ftui-chart-data fill type="bar" background-color="rgba(255, 186, 8 ,0.5)" color="rgba(250, 163, 7,1)" stack="stack1" log="lgprxy" spec="Func:myPVplot2(2)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:false,on:true')"></ftui-chart-data>
</ftui-chart>

Ein lgprxy-Device muss existieren. Über einen Segment-Button blende ich die nicht benötigten Daten aus.

schöne Grüße
Jojo

satprofi · 12 März 2025, 14:33:13

Hallo.
Wie schaffe ich so eine Oberfläche? In den examples finde ich nichts.
Lg

setstate · 12 März 2025, 23:53:39

Mit einem ftui-grid und vielen ftui-grid-tiles ...
Dann Eigenschaften setzen: color="orange" (blue, red), size="9", usw.

Die Tiles mit ftui-row und ftui-label füllen.

Das Zusammenpuzzeln macht doch gerade Spaß. Du willst doch hier nichts fertiges vorgesetzt bekommen

Hier mal zwei Kacheln mit statischen Werten als kleine Starthilfe.

Code Auswählen

  <!DOCTYPE html>
  <html>

  <head>
    <base href="../" />
    <script src="ftui.js"></script>
    <link href="ftui.css" rel="stylesheet">
    <link href="themes/ftui-theme.css" rel="stylesheet">
    <link href="favicon.ico" rel="icon" type="image/x-icon" />

    <title>FTUI Grid Test</title>
  </head>

  <body>

    <ftui-grid base-width="70" base-height="70" margin="1" shape="round">
      <ftui-grid-tile row="1" col="1" height="4" width="4" color="green">
        <ftui-row>
          <ftui-label text="Battery SOC" size="4"></ftui-label>
          <ftui-icon name="battery-2" size="4"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label text="67" size="9" bold>
            <span slot="unit" class="size--2">%</span>
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-cell width="80%">
            <ftui-row align-items="stretch">
              <ftui-label text="Charging:" size="1" color="black"></ftui-label>
              <ftui-label text="5,123" size="1" color="black" bold unit="KW"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Battery capacity:" size="1" color="black"></ftui-label>
              <ftui-label text="30" size="1" color="black" bold unit="kWh"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Fully charged in:" size="1" color="black"></ftui-label>
              <ftui-label text="01:10" size="1" color="black" bold unit="min"></ftui-label>
            </ftui-row>
          </ftui-cell>
        </ftui-row>
      </ftui-grid-tile>

      <ftui-grid-tile row="1" col="5" height="2" width="4" color="orange">
        <ftui-row>
          <ftui-label text="House Load" size="4"></ftui-label>
          <ftui-icon name="fort-awesome" size="4"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label text="2,123" size="8" bold>
            <span slot="unit" class="size--2">kW</span>
          </ftui-label>
        </ftui-row>
      </ftui-grid-tile>  
    </ftui-grid>

  </body>

  </html>

Prof. Dr. Peter Henning · 13 März 2025, 08:38:59

Für Freunde bunter Menüs: Vor etlichen Jahren habe ich mir mal als StarTrek-Fan so etwas gebaut. Viel JavaScript und SVG. Du darfst diesen Dateianhang nicht ansehen.
Vielleicht hat ja jemand Lust, das als Umgebung für FTUI3 zu verwenden.

LG

pah

satprofi · 13 März 2025, 10:27:33

Zitat von: setstate am 12 März 2025, 23:53:39Mit einem ftui-grid und vielen ftui-grid-tiles ...
Dann Eigenschaften setzen: color="orange" (blue, red), size="9", usw.

Die Tiles mit ftui-row und ftui-label füllen.

Das Zusammenpuzzeln macht doch gerade Spaß. Du willst doch hier nichts fertiges vorgesetzt bekommen

Danke. Aber wo bekomme ich die Icons her? Einfach Name schreiben?

setstate · 13 März 2025, 18:25:43

Die FTUI Icon kann man sich in der Demo Page ansehen: ./icons/demo.html

z.B.:http://fhem:8083/fhem/ftui/icons/demo.html

satprofi · 15 März 2025, 11:56:57

@setstate
Danke für deinen Anstoss. Anbei mein Ergebnis. Was ich aber nicht schaffe, das ich ein Grid als Button zusaätzlich verwenden kann. Button einfügen klappt, aber wenn ich auf go-e charger Feld tippe sollte ein popup aufgehen wo ich den Ladestrom z.b. einstellen könnte.
Hast du tipp für mich?

setstate · 15 März 2025, 13:17:14

Na das sieht doch schon mal richtig gut aus !

Popup bei Tile-Click:

Code Auswählen

 <ftui-grid-tile @click="popcharger.open()" ...


 <ftui-popup id="popcharger" ....

satprofi · 15 März 2025, 13:35:36

Hmmm, da muss bei mir der Wurm drin sein. Genauso hatte ich es schon, aber er macht mir ein Pop-up nicht auf. Habe von den Akku Units Pop-up verlinkt. OK, Fehlersuche starten.

[Edit]
Gefunden, Pop-up muss immer anschließend folgen.
Lg

setstate · 15 März 2025, 19:12:58

Zitat von: satprofi am 15 März 2025, 13:35:36...
[Edit]
Gefunden, Pop-up muss immer anschließend folgen.
Lg

Eigentlich nicht, müsste gehen, egal wo das <ftui-popup> in Document liegt. Hauptsache die ID wird gefunden.

satprofi · 15 März 2025, 20:40:45

Passt, ja. Mein Fehler.

Anbei mein fast fertiges Projekt. Alle Kacheln mit Untermenüs, zu detailierten Informationen.

Kai-Alfonso · 19 März 2025, 12:38:32

Zitat von: satprofi am 15 März 2025, 20:40:45Passt, ja. Mein Fehler.

Anbei mein fast fertiges Projekt. Alle Kacheln mit Untermenüs, zu detailierten Informationen.

Sehr nice - könntest Du das ggf zur Verfügung stellen?