FTUI 3

[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.

Code Auswählen Erweitern

    <ftui-content
          file="./content/Rollo.html" Rollo="Rollo_Buero" Rollo_WT="Rollo_Buero_WT" Rollo_pop="rlb_timer">
    </ftui-content>
und dann

Code Auswählen Erweitern

    <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

[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  )

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

Viele Grüße
Jürgen

[Muffin4711]

Hallo Jürgen,

ich komme Deinen Rat nach

ich habe in meiner Index folgenden Aufruf des Swipers:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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

[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

[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

[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