FTUI version 3

[Grisu1079]

Hi,

habe ich gemacht d.h also hier das Beispiel:
https://knowthelist.github.io/ftui/www/ftui/

Und ich hätte jetzt gern (was mit FTUI2) ging, dass ich etwas an die URL https://knowthelist.github.io/ftui/www/ftui/ hinten anhängen kann, dass z.b. direkt statt der Home-Seite/Tab Tab5 (Duschsymbol) geladen wird?
Wie gesagt bei FTUI2 ging das via #.... d.h. man gab einfach das data-load Attribut des jeweiligen pagebutton an.

Grüße
Markus

[yersinia]

Ich kann dir nicht folgen, möglicherweise weil ich das nie bei FTUI2 derart genutzt habe. Müsste aber ftui-content (Beispiel) das nicht abbilden?

Code Auswählen Erweitern

<ftui-tab-view id="View5">
     <ftui-content file="deine/subsite.html"></ftui-content>
</ftui-tab-view>

[mr_petz]

Wenn er das meint:
https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton
, dann sollte es auch so funktionieren mit content:
https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html#L193
und wie es yersinia beschreibt:

Code Auswählen Erweitern


    <ftui-grid-tile row="1" col="1" height="10" width="1">
      <ftui-column>
        <ftui-tab view="View5">
          <ftui-icon name="bath"></ftui-icon>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

<ftui-tab-view id="View5">
     <ftui-content file="deine/subsite.html"></ftui-content>
</ftui-tab-view>

LG

[Grisu1079]

Wie gesagt es werden ja auch alle Seiten angezeigt, aber ich habe keine Chance direkt per ausrufendem Link als die per active-Attribut festgelegte Default-Seite direkt über ein Browser-Lesezeichen anzusteuern, darum ging es mir

[yersinia]

Naja, entweder du lädst content in eine bestehende Struktur oder du verlinkst auf eine eigene HTML Seite mit eigener Struktur. Du müsstest deine Unterseite entsprechend komplett definieren - inkl header, stylesheet, javascript usw. - dann solltest du diese auch einfach so direkt erreichen können. Ob man dies dann noch sinnvoll über content eingebunden bekommt bzw überhaupt sollte (im Rahmen des FTUI3 Konzepts) weiss ich nicht.

[mr_petz]

@Grisu1079
Willst du nur einen Link auf eine andere Seite?
Dann wäre das der Weg?:
https://forum.fhem.de/index.php/topic,115259.msg1207098.html#msg1207098
LG

[OdfFhem]

@Grisu1079, @yersinia, @mr_petz

Wenn ich das richtig verstanden habe, geht alles von einem normalen FTUI3-Gerüst aus.

Man möchte allerdings - unabhängig von einem fest in der html-Datei hinterlegten active-Tab - den initial darzustellenden Tab festlegen können. Richtig ?

[OdfFhem]

Angenommen, ich lag richtig.

Habe mal interessehalber die Anwendung mit sehr wenig Zeilen um eine initialView-Eigenschaft erweitert.
Diese kann beim Aufruf als Parameter mitgegeben werden und überstimmt dann ein gesetztes active-Attribut.
Wird beim Aufruf kein solcher Parameter mitgegeben, dann liegt die "Verantwortung" beim active-Attribut.

Code Auswählen Erweitern


http://raspberrypiX:8083/fhem/ftui3/index.html?initialView=View6

Sorgt dafür, dass initial auf View6 umgeschaltet wird, obwohl z.B. View9 das active-Attribut gesetzt hat.

[Dracolein]

Hi zusammen,
ich habe mal eine Frage ohne zu wissen, ob das Sinn macht oder evtl schon realisiert wurde:
Besteht die Möglichkeit ein Chart als Hintergrund in ein ftui-grid Element zu bauen?

Ich habe innerhalb meines gesamten Layouts z.B. eine Zelle mit 5-6 Informationen über den Ladezustand meines Fahrzeugs dargestellt. Teils mittels Text (Ladestand: 83%), teils mittels dynamischer Icons (grüner Stecker=Fzg in Wallbox angesteckt) usw. Weiterhin habe ich auf einer anderen Seite ein Chart, in dem auch ein Graph die Ladeleistung über den Tag darstellt.
Nun hatte ich grade die Idee, wie es wäre, diesen Graph stark vereinfach (ohne Achsenbeschriftungen etc) als halbtransparenten Zellenhintergrund darzustellen...

[mr_petz]

Hi Dracolein,
hast du schon als style Bsp.:

Code Auswählen Erweitern


opacity: 0.5;

mitgegeben?
LG

[Dracolein]

Hm, aber wie bekomme ich ein <ftui-chart> Element in den Hintergrund?

So sieht die Zelle aus:

Code Auswählen Erweitern


      <ftui-grid-tile row="1" col="16" height="3" width="4">
        <header>Wallbox & Tesla</header>
         <ftui-row>
           <ftui-column>
             <ftui-label class="size-0">Akkustand:</ftui-label>
             <ftui-label class="size-0">Reichweite:</ftui-label>
             <ftui-label class="size-0">Ladeziel:</ftui-label>
             <ftui-label class="size-0">Ladeleistung:</ftui-label>
             <ftui-label class="size-0">Energie hinzu:</ftui-label>
          </ftui-column>
          <ftui-column>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_usable_battery_level" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_ideal_battery_range_km | fix(0)" class="size-3"><span class="size-0" slot="unit">km</span></ftui-label>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_charge_limit_soc" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
             <ftui-label [text]="EVCharger22:Leistung_Ladestation_kW | fix(1)" class="size-4"
                         [color]="EVCharger22:Leistung_Ladestation_kW | step('0:grey, 1:green, 6:red')">
                         <span class="size-0" slot="unit">kW</span></ftui-label>
             <ftui-label [text]="EVCharger22:Energie_Ladevorgang_kW | fix(1)" class="size-4"><span class="size-0" slot="unit">kWh</span></ftui-label>
           </ftui-column>
           <ftui-column>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="MQTT2_TeslaMate:cars_1_locked | map('false:lock-open, true:lock')"
                      [color]="MQTT2_TeslaMate:cars_1_locked | map('false:danger, true:medium')">
              </ftui-icon>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:plug-circle-xmark-solid, verbunden:plug-circle-check-solid, Ladevorgang aktiv:charging-station')"
                      [color]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:danger, verbunden:orange, Ladevorgang aktiv:green')">
              </ftui-icon>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:bolt')"
                      [color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:orange, Schnellladen:orange')">
              </ftui-icon>
           </ftui-column>
         </ftui-row>
      </ftui-grid-tile>


[mr_petz]

im row position:absolute und ein height und im chart(hier icon) opacity:0.5 oder geringer...

Code Auswählen Erweitern


      <ftui-grid-tile row="1" col="16" height="3" width="4">
        <header>Wallbox & Tesla</header>
        <ftui-icon class="size-10" name="window-shutter" style="opacity:0.5"></ftui-icon>
         <ftui-row style="position:absolute;height: 120px;">
           <ftui-column>
             <ftui-label class="size-0">Akkustand:</ftui-label>
             <ftui-label class="size-0">Reichweite:</ftui-label>
             <ftui-label class="size-0">Ladeziel:</ftui-label>
             <ftui-label class="size-0">Ladeleistung:</ftui-label>
             <ftui-label class="size-0">Energie hinzu:</ftui-label>
          </ftui-column>
          <ftui-column>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_usable_battery_level" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_ideal_battery_range_km | fix(0)" class="size-3"><span class="size-0" slot="unit">km</span></ftui-label>
             <ftui-label [text]="MQTT2_TeslaMate:cars_1_charge_limit_soc" class="size-3"><span class="size-0" slot="unit">%</span></ftui-label>
             <ftui-label [text]="EVCharger22:Leistung_Ladestation_kW | fix(1)" class="size-4"
                         [color]="EVCharger22:Leistung_Ladestation_kW | step('0:grey, 1:green, 6:red')">
                         <span class="size-0" slot="unit">kW</span></ftui-label>
             <ftui-label [text]="EVCharger22:Energie_Ladevorgang_kW | fix(1)" class="size-4"><span class="size-0" slot="unit">kWh</span></ftui-label>
           </ftui-column>
           <ftui-column>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="MQTT2_TeslaMate:cars_1_locked | map('false:lock-open, true:lock')"
                      [color]="MQTT2_TeslaMate:cars_1_locked | map('false:danger, true:medium')">
              </ftui-icon>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:plug-circle-xmark-solid, verbunden:plug-circle-check-solid, Ladevorgang aktiv:charging-station')"
                      [color]="EVCharger22:Status_Ladevorgang | map('nicht verbunden:danger, verbunden:orange, Ladevorgang aktiv:green')">
              </ftui-icon>
              <ftui-icon size="-1" path="fa-svg/solid"
                      [name]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:solar-panel, Schnellladen:bolt')"
                      [color]="EVCharger22:Param_Betriebsart_Ladevorgang | map('Optimiertes_Laden:orange, Schnellladen:orange')">
              </ftui-icon>
           </ftui-column>
         </ftui-row>
      </ftui-grid-tile>


LG mr_petz

[DerFranke]

Hi zusammen,
ich bräuchte etwas Hilfe, da ich gerade von ftui2 auf 3 umsteige.
zum einen hatte ich einen refresh-button, den ich aber nicht wieder zum laufen bekomme.
alt:

Code Auswählen Erweitern

<div data-type="link" class="round"  data-color="grey" data-width="50" data-height="50
data-background-color="red" data-icon="fa-refresh" data-url="javascript:history.go(0)">
</div>[code]

und zum anderen sind die label-Ausgaben mir noch nicht ganz verständlich:
bisher:

Code Auswählen Erweitern

<div data-type="label" data-device="Warmwassertemperatur" data-pre-text="WW: " data-get="Warmwassertemperatur" data-unit="%B0C%0A" class="cell bigger" data-limits='[0,27,37]' data-colors='["#5858FA","white","#fa5f58"]'></div>
führte zur Ausgabe der Temperatur in Zahlen.

Code Auswählen Erweitern

<ftui-label [text]="Warmwassertemperatur" size="2"></ftui-label>
führt zB zur Ausgabe Warmwassertemperatur 48.5
Wie schaffe ich es, daß nur der Zahlenwert verwendet wird? Insbesondere, wenn er in einem ftui-knob auch verwendet werden soll?

[mr_petz]

Hi zusammen,
ich bräuchte etwas Hilfe, da ich gerade von ftui2 auf 3 umsteige.
zum einen hatte ich einen refresh-button, den ich aber nicht wieder zum laufen bekomme.
alt:

Code Auswählen Erweitern

<div data-type="link" class="round"  data-color="grey" data-width="50" data-height="50
data-background-color="red" data-icon="fa-refresh" data-url="javascript:history.go(0)">
</div>[code]

Refresh der Seite:

Code Auswählen Erweitern


<ftui-icon class="size-1" name="refresh" @click="javascript:window.location.reload(true);"></ftui-icon>

oder wie bei dir:

Code Auswählen Erweitern


<ftui-icon class="size-1" name="refresh" @click="javascript:history.go(0);"></ftui-icon>


und zum anderen sind die label-Ausgaben mir noch nicht ganz verständlich:
bisher:

Code Auswählen Erweitern

<div data-type="label" data-device="Warmwassertemperatur" data-pre-text="WW: " data-get="Warmwassertemperatur" data-unit="%B0C%0A" class="cell bigger" data-limits='[0,27,37]' data-colors='["#5858FA","white","#fa5f58"]'></div>
führte zur Ausgabe der Temperatur in Zahlen.

Code Auswählen Erweitern

<ftui-label [text]="Warmwassertemperatur" size="2"></ftui-label>
führt zB zur Ausgabe Warmwassertemperatur 48.5
Wie schaffe ich es, daß nur der Zahlenwert verwendet wird? Insbesondere, wenn er in einem ftui-knob auch verwendet werden soll?

Ist dein Devicename "Warmwassertemperatur" ? und im state steht die Temperatur? oder heisst dein device Warmwassertemperatur und es gibt noch ein reading Warmwassertemperatur??
Wenn ja:

Code Auswählen Erweitern

<ftui-label [text]="Warmwassertemperatur:Warmwassertemperatur" size="2"></ftui-label>

LG mr_petz

[DerFranke]

LG mr_petz

Super!!

Funktionert beides - besten Dank für die schnelle Antwort.