Hauptmenü

FTUI 3

Begonnen von Muffin4711, 09 Juni 2024, 17:41:08

Vorheriges Thema - Nächstes Thema

Muffin4711

Hallo nochmal,

ich hatte mir in der alten FTUI 2 einige Templates erstellt. In dieser Variante würde ich das gern auch in FTUI 3 machen.
Ich rufe mit folgendem Code eine weitere Seite auf:

<ftui-content file="content/test.html"></ftui-content>

Hier würde ich gern das Device mit übergeben.
Sprich, wie übergibt man Parameter in eine aufgerufene html Seite?

Hat jemand dazu eine Idee?

Grüße Jörg

juemuc

Hallo Jörg,

geht ganz einfach. So kann ich "Rollo.html" mit mehreren Devices aufrufen.

    <ftui-content
          file="./content/Rollo.html" Rollo="Rollo_Buero" Rollo_WT="Rollo_Buero_WT" Rollo_pop="rlb_timer">
    </ftui-content>
und dann
    <ftui-row width="100%">
      <ftui-column align-items="left" width="39%">
        <ftui-label margin="1" color="white" size="3" @click="pop_{{Rollo_pop}}.open()"
              [text]="{{Rollo}}:alias">
        </ftui-label>
      </ftui-column>
      <ftui-row width="1%">
        <ftui-icon color="red" size="2" left="220px"
              path="../images/default" [name]="{{Rollo}}:pct | map('100:fts_roof_window_shutter_0, 75:fts_roof_window_shutter_03, 50:f>
              25:fts_roof_window_shutter_07, 0:fts_roof_window_shutter_10')"
              [hidden]="{{Rollo}}:Fensterstatus | map('open:false, closed:true')">
        </ftui-icon>
        <ftui-icon size="2" left="220px"
              [color]="{{Rollo}}:state | map('undefined:yellow, .*:green')"
              path="../images/default" [name]="{{Rollo}}:pct | map('100:fts_roof_window_shutter_0, 75:fts_roof_window_shutter_03, 50:f>
              25:fts_roof_window_shutter_07, 0:fts_roof_window_shutter_10')"
              [hidden]="{{Rollo}}:Fensterstatus | map('closed:false, open:true')">
        </ftui-icon>
      </ftui-row>
      <ftui-row width="25%">
        <ftui-label size="3">Auswahl:</ftui-label>
        <ftui-dropdown width="auto"
              list="0,25,50,75,100" [(value)]="{{Rollo}}:pct">
        </ftui-dropdown>
      </ftui-row>
      <ftui-row width="35%">
        <ftui-label color="green" size="3"
              [text]="{{Rollo_WT}}:nextUpdate" [hidden]="{{Rollo_WT}}:disabled | map('1:true, .*:false')">
        </ftui-label>
        <ftui-label color="white" size="3"
              [text]="{{Rollo_WT}}:nextValue | replace('pct:','')" unit="%" [hidden]="{{Rollo_WT}}:disabled | map('1:true, .*:false')">
        </ftui-label>
        <ftui-label color="white" size="3"
              text="Timer ist aus!" [hidden]="{{Rollo_WT}}:disabled | map('1:false, .*:true')">
        </ftui-label>
      </ftui-row>
    </ftui-row>

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

Muffin4711

Hallo Jürgen,

auch dafür besten Dank.. funktioniert alles wie gewünscht.
Ein Thema hätte ich noch, ich rufe per Swiper eine html Seite auf die mehrere Template enthält. Leider werden die Größen für ftui-grid-tile in einem Swiper nicht übernommen.
Gäbe es dafür auch noch eine Idee?

Grüße Jörg

juemuc

Hi Jörg,

ich habe dazu aktuelll keine Idee (habe aber auch das Problem nicht verstanden  O:-) )

Stelle doch einfach deine Definition und ein Screenshot ein, damit man das Problem sehen kann.

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

Muffin4711

Hallo Jürgen,

ich komme Deinen Rat nach :-)

ich habe in meiner Index folgenden Aufruf des Swipers:

<ftui-tab-view id="View3">
<ftui-grid-tile row="3" col="1" height="6.5" width="15" shape="round" color="black" >
<ftui-swiper id="swiper_heating">
<ftui-content id="swh_1" file="content/heating1.html" Therm1="WTH_2_Wohnbereich" Therm2="STHD_Kueche" Therm3="STHD_Gaestezimmer"></ftui-content>
<ftui-content id="swh_2" file="content/heating1.html" Therm1="STHD_Hobbyraum" Therm2="STHD_Gaeste_WC" Therm3="WTH_2_Bad"></ftui-content>
</ftui-swiper>
</ftui-grid-tile>

<ftui-grid-tile row="9.5" col="1" height="1" width="15" shape="round">
<ftui-row>
<ftui-icon name="chevron-left" @click="swiper_heating.back()"></ftui-icon>
<ftui-icon name="chevron-right" @click="swiper_heating.next()"></ftui-icon>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>

Dann die content Datei:

<ftui-row>
<ftui-content file="template/WTH-2_STHD.html" Thermometer="{{Therm1}}"></ftui-content>
<ftui-content file="template/WTH-2_STHD.html" Thermometer="{{Therm2}}"></ftui-content>
<ftui-content file="template/WTH-2_STHD.html" Thermometer="{{Therm3}}"></ftui-content>
</ftui-row>

die wiederum das Template aufruft:

<ftui-grid-tile row="3" col="1" height="6.5" width="7.5" shape="round">
<header><ftui-label size="3" [text]="{{Thermometer}}:alias"></ftui-label></header>
<ftui-row>
<ftui-column>
<ftui-knob [(value)]="{{Thermometer}}:measured-temp" color="cold-hot" width="150" height="150" min="5" max="30" step="0.1" unit="°C" has-value-text offset-y="15" has-arc has-scale readonly></ftui-knob>  
<ftui-label margin="-40px 0 0 0">IST TEMP</ftui-label>
</ftui-column>
<ftui-column>
<ftui-knob [(value)]="{{Thermometer}}:desired-temp" color="cold-hot" width="150" height="150" min="5" max="30" step="0.5" unit="°C" has-value-text offset-y="15" has-arc has-scale></ftui-knob>
<ftui-label margin="-40px 0 0 0">SOLL TEMP</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label [text]="{{Thermometer}}:humidity" unit=" %">Luftfeuchte: </ftui-label>
<ftui-label [text]="{{Thermometer}}:voltage" unit=" V">Battery: </ftui-label>
<ftui-label [text]="{{Thermometer}}:rssidevice">RSSI: </ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-button color="dark" (value)="{{Thermometer}}" states="manu, auto">
<ftui-icon class="size-2" [name]="{{Thermometer}}:SET_POINT_MODE  | map('manual: toggle-off, auto: toggle-on')"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-grid-tile>

Was dann wie folgt aussieht. Eigentlich sollten die drei nebeneinander und in ganzer Höhe angezeigt werden.

Gruß Jörg

juemuc

Hallo Jörg,

das funktioniert so meines Wissens nicht. Du musst aus meiner Sicht die "Flächen" mit "grid-tile" auf oberster Ebene definieren und kannst diese dann unterschiedlich füllen.
Ich arbeite zum Beispiel bei den Termostaten mit "Pop-ups", da ich sonst zu wenig Platz habe.

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

Muffin4711

Hallo Jürgen,

gibt es denn och eine andere Möglichkeit mit dem Swiper? Mit Pop-ups geht es nicht da ich sonst extrem viele Buttons benötige.
So könnte ich durch swipen...

Gruß Jörg

Muffin4711

Hallo Jürgen,

ich habe jetzt ein Lösung. Da ich drei Thermostate auf einer Swiper Seite angezeigt bekommen möchte habe ich meinem Template eine Tabelle mit einer weite von 33% in Pixel und eine passende höhe in Pixel spendiert.
Somit wird nun auch alles richtig dargestellt. Sie Bild

juemuc

Hallo Jörg,

warum stellst Du IST und SOLL getrennt dar?

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

Muffin4711

Jürgen, das ist bis jetzt nur ein Test.. ich wollte erstmal schauen ob man alles soweit gut darstellen kann.
Ich fange jetzt erst damit an. :-)

Muffin4711

Jürgen,

hast DU auch noch eine Idee wie man einem Icon noch eine Farbe mitgeben kann.
In der Form color="#00FF00" geht es nicht.

Gruß Jörg

juemuc

Hallo Jörg,

hier solltest Du die notwendigen Infos finden.

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

Muffin4711

Hallo Jürgen,

ich hab mal ein wenig weiter gemacht. Alles funktioniert ohne Probleme.
Ich bin bewusst auf eine Analoge Anzeige gegangen da man auf einem Touchpad mit Swiper und einem Knob Probleme mit der Bedienung bekommt.
Wenn man den Knob bedient, reagiert auch gleichzeitig der Swiper.
Anbei mal ein Bildchen wie ich es bisher habe.

Gruß Jörg