FTUI version 3

[grossmaggul]

aber trotzdem sollte doch in meinem Fall die gesamte Schrift der Temperaturen in dem Container/Block mit
...
bleiben und nicht nach oben und unten ausbrechen..

Sollte wohl nicht, aber da wird wohl eher setstate was zu sagen können.

[Eisix]

Hallo,

das ausbrechen hatte ich auch schon nach unten. Interessanterweise nur wenn kein Anderes Grid-Tile sich darunter befindet. Habe einfach mal auf der Seite unten sozusagen einen Balken eingezogen dann war es ok.

Was mir auch noch aufgefallen ist beim bauen einer Fernbedienung ist, die ftui-buttons beanspruchen unterschiedlich viel Platz in X-Richtung. Wenn man dann mehrere rows mit unterschiedlichen Typen (fill, shape) kombiniert passen die Abstände nicht mehr.
Mit dem bösen Table ging das dann Problemlos.

Gruß
Eisix

[moonsorrox]

ich habe jetzt mal

Code Auswählen Erweitern

<ftui-grid base-width="100" base-height="80" margin="2">
genommen, da bekomme ich ein riesen Bild mit Scrollleisten, dass heißt er scheibt sich nicht autoamtisch zusammen.

Was ich noch probiert habe ist folgendes

Code Auswählen Erweitern

<ftui-grid responsive margin="2">

hier bleibt die gesamte Ansicht mit Backgroundbild immer zentriert und passt sich gut ein, soll heißen auch die Schrift bleibt im Container, aber...
ab einer bestimmten Größe ich sage jetzt mal auf meinem 10" Tablet schiebt sich die Schrift wieder nach oben und unten raus aus dem
<ftui-grid-tile>Inhalt siehe code</ftui-grid-tile>

Code Auswählen Erweitern

  <ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
            <ftui-row class="size-3">
                <ftui-column align-items="left" margin="1">
                    <ftui-label text="Wohnzimmer"></ftui-label>
                    <ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
                    <ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norde"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
                </ftui-column>
               
                <ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;hPa</span></ftui-label>
                </ftui-column>
                   
                <ftui-column align-items="center">               
                    <ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
                </ftui-column>   
            </ftui-row>
      </ftui-grid-tile>

die "böse" Tabelle dei ich immer noch als Test drin habe sieht wiederum sehr gut aus und es passt alles..
Aber mit Tabelle wollte ich jetzt nicht mehr arbeiten.

[moonsorrox]

ich denke wir sollten mal auf eine Antwort von setstate warten, weil ich ehrlich gesagt noch nicht weiß welches Layout nun was genau tut.

Wenn ich in einem s.g. Container Inhalt habe, dann sollte der normalerweise nicht ausbrechen, sondern sich eher zusammen schieben, bis sich sage ich mal die einzelnen Zeilen übereinander schieben und unleserlich werden, dann erst weiß ich Ok es ist zu wenig Platz, aber so kann ich vergrößern und vergrößern die Schrift bleibt trotzdem ausserhalb.

Ich habe jetzt nochmal eine Aktualisierung vorgenommen:
Ich arbeit aktuell noch mit dem "responsiven" Layout
Screenshot 1 ist auf dem PC mit Firefox hier wird alles wunderbar angezeigt

Screenshot 2 auf meinem geößeren Tablet, hier wird die Schrift nach oben und unten heraus geschoben weil die beiden Temperatur Namen zu lang sind schreibt er die untereinander, ansonsten würde es wohl gehen ich experimentiere weiter... 

Links ist immer noch die" böse" Tabelle die bei beiden Screenshots die Namen der beiden Außentemperaturen richtig anzeigt, aber auch auf dem Tablet 2. Screenshot  nach unten raus schiebt.

Rechts ist aber das Code Layout welches ich nutzen möchte..!!
Hier noch mal der Code dazu.

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="20" height="11" width="9" class="semitransparent3d">
            <ftui-row class="size-3">
                <ftui-column align-items="left" margin="1">
                    <ftui-label text="Wohnzimmer"></ftui-label>
                    <ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
                    <ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norden"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
                </ftui-column>
               
                <ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;hPa</span></ftui-label>
                </ftui-column>
                   
                <ftui-column align-items="center">               
                    <ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
                </ftui-column>   
            </ftui-row>
      </ftui-grid-tile>

[moonsorrox]

ich habe jetzt die Schrift mal auf size-2 geändert, ist etwas klein, aber damit kann ich Leben, wenn ich jetzt mit allem so weitermache wäre ich schon zufrieden...

Was ich mir immer als Hilfe nutze ist eine Seite,  wo ich mal eben schnell die Reihen und Spalten nach schauen kann...
Vllt. kann es jemand brauchen (sind allerdings von mir mit css gemachte Farben drin)

Code Auswählen Erweitern

<ftui-tab-view id="View9">
  <ftui-grid-tile row="1" col="1" height="1" width="32" color="success">row 1 col 1-32
      </ftui-grid-tile>
  <ftui-grid-tile row="2" col="1" height="1" width="32" color="crimson">row 2 col 1-32
      </ftui-grid-tile>
  <ftui-grid-tile row="3" col="1" height="1" width="32" color="darkorange">row 3 col 1-32
      </ftui-grid-tile>
 
      <ftui-grid-tile row="4" col="2" height="19" width="1" color="ligt">row4-23 col 2
  </ftui-grid-tile>
  <ftui-grid-tile row="4" col="3" height="19" width="1" color="dark">row5-23 col 3
  </ftui-grid-tile>
  <ftui-grid-tile row="4" col="4" height="19" width="1" color="medium">row6-23 col 4
 
  </ftui-grid-tile>
      <ftui-grid-tile row="4" col="30" height="16" width="1" color="darkgray">row4-19 col 30
      </ftui-grid-tile>
  <ftui-grid-tile row="4" col="31" height="16" width="1" color="medium">row4-19 col 31
      </ftui-grid-tile>
  <ftui-grid-tile row="4" col="32" height="16" width="1" color="orange1">row4-19 col 32
      </ftui-grid-tile>
 
  <ftui-grid-tile row="4" col="10" height="16" width="1" color="darkviolet">row4-19 col 10
      </ftui-grid-tile>
  <ftui-grid-tile row="4" col="20" height="16" width="1" color="warning">row4-19 col 20
      </ftui-grid-tile>
 
 
  <ftui-grid-tile row="20" col="5" height="1" width="28" color="orange1">row 20 col 5-32
      </ftui-grid-tile>
  <ftui-grid-tile row="21" col="5" height="1" width="28" color="royalblue1">row 21 col 5-32
      </ftui-grid-tile>
  <ftui-grid-tile row="22" col="5" height="1" width="28" color="lightgreen">row 22 col 5-32  
      </ftui-grid-tile>
    </ftui-tab-view>

[Thyraz]

Grundsätzlich ist das okay. So subscribe't man sich die Readings.

Aktuelle Probleme:
Wenn das zuvor (beim Init) keiner gemacht hat, bekommt man keine Events, da das Device:Reading dann nicht im Filter für jsonlist und inform mit drin ist.
Also müsste man nach einer Änderung createFilterParameter() rufen, damit das aufgenommen wird und dann die WebSocket Verbindung neu aufbauen.
Weiterhin müsste man vorher das alte Reading unsubsciben. Dafür muss ich erst noch ein unsubscribe() in die Subject Klasse bauen.

Alles nix wildes, aber viele Baustellen noch.

Aktuell hätte ich doch einen Fall, bei dem ich das brauchen könnte.
Wenn man ein Modul für ein fixes FHEM Device baut, macht es ja durchaus Sinn die nötigen Readings "fest zu verdrahten" anstatt den User das manuell (auf die sowieso einzig mögliche Weise) machen zu lassen.

Falls sich da also etwas tut, gern hier informieren.

[OdfFhem]

@Thyraz

Angenommen, die zu abonnierenden Readings stehen von Anfang an fest, dann funktioniert folgender Weg einwandfrei:

Calendar-Komponente mit device-Attribut calendar ... innerhalb von onAttributeChanged:

Code Auswählen Erweitern


  case 'calendar':
    fhemService.getReadingEvents(this.calendar + ':' + 'lastUpdate').subscribe(param => this.onUpdateCalendar(param));
    break;


EPG-Komponente mit device-Attribut epg ... innerhalb von onAttributeChanged:

Code Auswählen Erweitern


  case 'epg':
    fhemService.getReadingEvents(this.epg + ':' + 'EPG_last_loaded').subscribe(param => this.onUpdateEPG(param));
    break;


[Knallkopp_02]

@setstate, habe eben durch Zufall diesen Thread gefunden und bin begeistert, das eine neue Version in Arbeit ist. Meine Frage äre, ob es acuh wieder sowas wie den "Rotor" geben wird oder gibt. Ich suche sowas für meine Wetteranzeige, wo ich die Werte im 10 Sekundentakt durchwechseln lasse. Was beim FTUI2 doch rechenintensiv zu sein scheint und den Raspberry teilweise an seine Grenzen bringt.

Gruß

[setstate]

ich denke wir sollten mal auf eine Antwort von setstate warten, weil ich ehrlich gesagt noch nicht weiß welches Layout nun was genau tut.
nderbar angezeigt

Du musst entweder die Grid base-height größer machen, oder bei kleinen base-height die Grid-Tile height entsprechend höher setzen.

Das Gerät berechnet aus den den Font-Size em einen absoluten px Wert und wenn die Summe der px der Zeilen über die px des Parent-Containers geht, ragt es darüber hinaus. Das sollte man vermeiden, oder eine Behandlung per overflow Regel einbauen: scroll, hidden ...

[moonsorrox]

geht es eigentlich schon mit den "kleinklima" Anzeigen beim Wetter, ich habe bisher noch nichts gefunden. Ich meine die farbigen Icons..?

[octek0815]

Hallo,

ich wollte sowas wie einen Spinner von FTUI2 realisieren

Code Auswählen Erweitern


                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
                                fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-label
                                        [text]="Heizung.Status_WZ:TempMan"
                                        [color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
                                        class="size-1">
                                </ftui-label>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
                                        fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:red')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>


Jemand einen Tip für mich wie ich die Werte übergebe

(value)="set Heizung.Status_WZ:TempMan {$value+0.5}"

Gruß
Eisix

Moin Eisix,

hast Du das irgendwie hinbekommen, mir fehlt der Spinner für die Thermostatsteuerung auch.

Grüße
Olli

[octek0815]

geht es eigentlich schon mit den "kleinklima" Anzeigen beim Wetter, ich habe bisher noch nichts gefunden. Ich meine die farbigen Icons..?

https://forum.fhem.de/index.php/topic,115259.msg1104525.html#msg1104525

[Eisix]

@octek0815

Könnte mir vorstellen das es über mapping geht, mir fehlen aber die variablen, sprich momentaner Wert + oder - Änderung und das als set an Fhem

Code Auswählen Erweitern


                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
                                fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-label
                                        [text]="Heizung.Status_WZ:TempMan"
                                        [color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
                                        class="size-1">
                                </ftui-label>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
                                        fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:red')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>


Gruß
Eisix

[moonsorrox]

https://forum.fhem.de/index.php/topic,115259.msg1104525.html#msg1104525

Vielen Dank, ich habe immer auf github gesucht 
setstate schreibt das man sich die Icons selber integrieren muss, ich dachte die kommen vom Wetteranbieter, naja ich probiere mal...

[Eisix]

@moonsorrox

Hatte die kleinklima Icons eingebunden als nur .svg unterstützt wurde. Sie liegen aber nur als .png vor und ich habe sie in .svg konvertiert. Somit dürfte einfaches kopieren nicht reichen. Also entweder icons auch konvertieren und in den Pfad

./icons/weather/kleinklima/

oder die weather.map.js entsprechend anpassen. Png sollte mittlerweile auch funktionieren.

Gruß
Eisix