[FTUI3] Beispiele, Anregungen und Spielereien

[satprofi]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

Super. Vielen Dank für die Arbeit und Bereitstellen

Dank geht auch an @setstate , für den Input !

[Kai-Alfonso]

Ich hab aktuell noch eine Frage dazu. Ich habe diese "Kacheln" von Satprofi und finde sie echt nett. Allerdings will ich neben den statischen Kacheln auch "wechselnde" Kacheln mit dem Rotor Widget realisieren. Dort ist aber das Layout verschoben und die Farbe des Hintergrunds ist nicht auf die ganze Kachel erstreckt. (Screenshot rechte Kachel).

Wie bekomme ich das denn hin, das die Inhalte gleich formatiert sind?

Code Auswählen Erweitern

      <ftui-grid-tile height="2" width="2" color="white">
        <ftui-row>
          <ftui-label text="Battery SOC" size="3"></ftui-label>
          <ftui-icon name="battery-0" size="3"
            [name]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc | step(' 0:battery-0, 25:battery-1, 50:battery-2, 75: battery-3, 90:battery')"
            [color]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc | step('50:green, 25:orange, 0:danger')"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc" size="8" bold>
            <span slot="unit" class="size--1">%</span>
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-cell width="80%">
            <ftui-row align-items="stretch">
              <ftui-label text="Ladestrom:" size="1" color="black"></ftui-label>
              <ftui-label
                [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.emsBpPower | divide(1000) | round(2)"
                size="1" color="black" bold unit="kW"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Status:" size="1" color="black"></ftui-label>
              <ftui-label
                [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.emsBpPower | step(' -100000:Entladen,0:Idle, 1:Laden')"
                size="1" color="black" bold></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Capacity:" size="1" color="black"></ftui-label>
              <ftui-label [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.bpRemainWatth" size="1"
                color="black" bold unit="kWh"></ftui-label>
            </ftui-row>

          </ftui-cell>
        </ftui-row>
      </ftui-grid-tile>

      <ftui-grid-tile height="2" width="2">
        <ftui-rotor animation="fade" interval="10">
          <ftui-grid-tile color="red">
            <ftui-row>
              <ftui-label text="Netzbezug" size="3"></ftui-label>
              <ftui-icon name="plug" size="2"></ftui-icon>
            </ftui-row>
            <ftui-row>
              <ftui-label [text]="Ecoflow_Cloud_Statistic_All:Grid_Aktuell | divide(1000) | round(2)" size="8" bold>
                <span slot="unit" class="size--1">kW</span>
              </ftui-label>
            </ftui-row>
            <ftui-row>
              <ftui-cell width="100%">
                <ftui-row align-items="stretch">
                  <ftui-label text="Heute:" size="1" color="black"></ftui-label>
                  <ftui-label [text]="Ecoflow_Cloud_Statistic_All:Grid_Import | round(0)" size="1" color="black" bold
                    unit="kWh"></ftui-label>
                </ftui-row>
                <ftui-row align-items="stretch">
                  <ftui-label text="Monat:" size="1" color="black"></ftui-label>
                  <ftui-label [text]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonth | round(0) "
                    size="1" color="black" bold unit="kWh"></ftui-label>
                </ftui-row>
              </ftui-cell>
          </ftui-grid-tile>
        </ftui-rotor>
      </ftui-grid-tile>
Du darfst diesen Dateianhang nicht ansehen.

[Dracolein]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

Tolles Design, ich überlege grade wirklich, Dein Konzept als Grundlage für eine völlig neue Designidee meines komplexen FTUI3 Layouts zu nutzen.
Konzeptfrage: Dient Dein Design lediglich der Information (=Darstellung) oder kannst Du auf eine Kachel beispielsweise drauftippen und erhälst auch Zugriff auf Einstellmöglichkeiten o.ä.? 

Ich überlege grade, schlichte Kacheln analog zu Dir zu bauen, jeweils Überschrift + Icon, darunter 1 wesentliches Reading und bis zu 3 kleine Zusatzinformationen. Bei Bedarf ist die Kachel klickbar, öffnet ein Popup-Menü und gibt mir Zugriff auf weitere Informationen & Optionen.

Ich habe ein 15" Touchscreen, der ist randvoll mit Readings und Schaltern, verfügt über eine Statusleiste und eine Menüleiste.... aber irgendwie nach vielen Jahren "langweilig" geworden"

[satprofi]

Hallo. Freut mich das es gefällt.
Und ja, ich kann auf Kacheln tippen und sehe dann neue Fenster. Auch mit Rollups wo ich z.b. meine Wallbox manuell starte oder die Stromkosten Abrufe, etc.
Habe auch extra Fenster nur für Aktoren zu schalten, oder Strompreis.
LG

Hier mein Hauptfenster , samt script

[Salvi5]

Da ich recht stolz auf meine neue Ftui3-Wandpanel-Seite bin, und auch mal meinen Dank loswerden möchte,
an alle, die sich mit so viel Enthusiasmus dafür engagieren, stelle ich mal ein paar Beispiele hier rein.
Nochmal: Danke! Ftui3 läuft schnell auf dem Raspi4 und hat beim Erstellen wenig Probleme gemacht.
Mehr Doku wäre gut, aber die Beispiele und die nette KI von nebenan haben viel geholfen.

Gruß Mike

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.

[Dracolein]

PV Dashboard:

Du darfst diesen Dateianhang nicht ansehen.

[Prof. Dr. Peter Henning]

Hmmmm. Bunt. Ergonomie nein Danke, würde ich sagen.

LG

pah

[caldir65]

Moin Pah,

Hmmmm. Bunt. Ergonomie nein Danke, würde ich sagen.

hauptsache, der WAF stimmt - dann ist Ergonomie zweitrangig 
Abgesehen davon - ich glaube, die meisten hier werden das als Freizeit-Projekt betreiben und alles mit Learning-by-doing oder durch zusammenklicken gebaut, und haben sonst einen anderen (beruflichen) Hintergrund ...

Ich stricke schon lange an einer neueren UI mit FTUI3, und bin immer froh, wenn ich mal Inspirationen hier finde  . Meine bisherige UI ist mit FUIP, hat aber so ihre Probleme...

LG Christoph
LG Christoph

[Prof. Dr. Peter Henning]

hauptsache, der WAF stimmt - dann ist Ergonomie zweitrangig

Das ist sicher richtig. Aber dann frag mal Deine Liebste, ob ihr beim Anblick der Seite wirklich alles klar ist. Wollen wir wetten, dass sie "nein" sagt?

Es ist von keinem Freizeit-FHEM-FTUI3-Entwickler zu verlangen, dass er eine Vorlesung über Benutzungsschnittstellen besucht hat. Natürlich kann auch jeder das machen was er will und schön findet. Ich halte aber sehr viel davon, Technik am Menschen auszurichten, und nicht umgekehrt. Und dann muss man eben beim Einsatz von Technik berücksichtigen, wie Menschen Informationen aufnehmen: Am Besten dann, wenn sie nicht mit Daten überflutet werden. Im vorliegenden Fall würde ich empfehlen:

1. Nicht mehr als 10 verschiedene Farben verwenden, diese werden sonst nicht hinreichend voneinander unterschieden.
2. Gleiche Farben für gleiche Größen. Dracolein verwendet z.B. Grün für Netzeinspeisung, Ertrag und Autarkie, und Gelb für Ladestand, PV-Ertrag und Dach.
3. Ganz wichtig: Form follows function. Es ist ja schön, dass die Carport-Anlage mit 2,9 kW läuft, und deshalb der kreisförmige "Messbalken" am Ende rot eingefärbt ist. Damit aber verliert der immer noch blau eingefärbte Anfangsteil jede Bedeutung. Hier wäre zu empfehlen, das ganze Ding mit einer Farbe zu rendern.
4. Einheiten konsistent halten und auf das Sinnvolle begrenzen. Ich habe erhebliche ZWeifel daran, dass die Genauigkeit der Messungen so groß ist, dass tatsächlich 2938 Watt der richtige Wert sind. 2,9 kW, vielleicht noch 2,94 kW wäre eine sinnvolle Angabe.

LG

pah