[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