[FTUI3] Anzeige untereinader sehr weit auseinander

[moonsorrox]

Nach wie vor bekomme ich es nicht hin das sich meine Statatusanzeige von mehreren Geräten nach unten auseinander schiebt, d.h. es gibt größere Abstände als es sie vor dem Update am Freitag gab.

Ich brauche dazu eine Reihe mit zwei Anzeigen, einmal links die Schrift und rechts das Icon, wenn diese Geräte aus sind verschwinden sie.
Bis Freitag haben in diesem Feld 8 Geräte Platz gehabt, jetzt gehen kaum 5-6 untereinander rein.
Aber hier erst einmal der Code wie ich es gemacht habe, dazu der Screenshot.
Bei den Rollläden funktioniert das weil genau die Anzahl in das Feld paßt, also nicht davon irritieren lassen das es dort gut aussieht, es wird zusammen geschoben.

Code Auswählen Erweitern

<!-- Gerätestatus Beleuchtung usw. - START -->
<ftui-grid-tile row="11" col="12" height="10" width="9" class="semitransparent3d">
<ftui-column align-items="top">
<!-- ==== Terrasse - Fensterkontakt ==== -->
<ftui-row [hidden]="WZ_TK_Terrasse:state | map('open: false, closed: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_TK_Terrasse:state | map ('open: Terrassentür - OFFEN')"
[color]="WZ_TK_Terrasse:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fts_window_2w_open_l" [color]="WZ_TK_Terrasse:state | map('off: white, open: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ========== Garagentor ========== -->
<ftui-row [hidden]="Garagentorsensor:state | map('open: false, closed: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="Garagentorsensor:state | map ('open: Garagen Tor - OFFEN')"
[color]="Garagentorsensor:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fts_garage_door_50" [color]="Garagentorsensor:state | map('closed:white, open:crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Gardena Pumpe ==== -->
<ftui-row [hidden]="GardenaPumpe:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="GardenaPumpe:state | map ('on: Gardena Pumpe')"
[color]="GardenaPumpe:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="sani_garden_pump" [color]="GardenaPumpe:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Ladestation Landroid ==== -->
<ftui-row [hidden]="AU_Landroid:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="AU_Landroid:state | map ('on: Ladestation Landroid')"
[color]="AU_Landroid:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="scene_robo_lawnmower" [color]="AU_Landroid:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== AVR Marantz NR1506 ==== -->
<ftui-row [hidden]="WZ_Marantz:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_Marantz:state | map ('on: AVR Marantz NR1506')"
[color]="WZ_Marantz:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="audio_volume_high" [color]="WZ_Marantz:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Gruppe Stehlampe ==== -->
<ftui-row [hidden]="WZ_Stehlampe:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_Stehlampe:state | map ('on: Gruppe Stehlampe')"
[color]="WZ_Stehlampe:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_floor_lamp" [color]="WZ_Stehlampe:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== LED TV Stripe ==== -->
<ftui-row [hidden]="WZ_Lampe_TV:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_Lampe_TV:state | map ('on: LED-TV Stripe')"
[color]="WZ_Lampe_TV:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WZ_Lampe_TV:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== LED Schrank und Vitrine ==== -->
<ftui-row [hidden]="WZ_Schrank:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_Schrank:state | map ('on: LED Schrank & Vitrine')"
[color]="WZ_Schrank:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_cabinet" [color]="WZ_Schrank:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg hinten ==== -->
<ftui-row [hidden]="WegLampe_Sw_02:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WegLampe_Sw_02:state | map ('on: Beleuchtung Weg hinten')"
[color]="WegLampe_Sw_02:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="WegLampe_Sw_02:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garten ==== -->
<ftui-row [hidden]="AU_Garten:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="AU_Garten:state | map ('on: Beleuchtung Garten')"
[color]="AU_Garten:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="AU_Garten:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Terrasse ==== -->
<ftui-row [hidden]="NI3_LichtTerrasse:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="NI3_LichtTerrasse:state | map ('on: Beleuchtung Terrasse')"
[color]="NI3_LichtTerrasse:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_outdoor" [color]="NI3_LichtTerrasse:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung 3x LED Eingang ==== -->
<ftui-row [hidden]="3xLED_lampe:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="3xLED_lampe:state | map ('on: 3x LED Eingang')"
[color]="3xLED_lampe:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_downlight" [color]="3xLED_lampe:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Licht Fenster Flur ==== -->
<ftui-row [hidden]="Flurfenster:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="Flurfenster:state | map ('on: Fensterlicht Flur')"
[color]="Flurfenster:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_stairs" [color]="Flurfenster:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr - EIN')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="time_clock" [color]="Uhrzeit:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch - EIN')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wire_system_1" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garage ==== -->
<ftui-row [hidden]="NI7_LichtGarage:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="NI7_LichtGarage:state | map('on: Beleuchtung Garage')"
[color]="NI7_LichtGarage:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fts_garage" [color]="NI7_LichtGarage:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Schlafzimmer ==== -->
<ftui-row [hidden]="NI2_LichtSZ:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="NI2_LichtSZ:state | map('on: Beleuchtung Schlafzimmer')"
[color]="NI2_LichtSZ:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_led_stripe" [color]="NI2_LichtSZ:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Windows 10 - Gaming-PC ==== -->
<ftui-row [hidden]="BU_4CH:POWER2 | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="BU_4CH:POWER2 | map('on: Windows 10 - Gaming-PC')"
[color]="BU_4CH:POWER2 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column class="top-narrow" align-items="right" margin="1" width="10%">
<ftui-icon name="television" [color]="BU_4CH:POWER2 | map('off: white, on: crimson')" path="icons"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Netzwerkdrucker Büro ==== -->
<ftui-row [hidden]="BU_4CH:POWER3 | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="BU_4CH:POWER3 | map('on: Netzwerkdrucker Büro')"
[color]="BU_4CH:POWER3 | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="print" [color]="BU_4CH:POWER3 | map('off: white, on: crimson')" path="icons"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Dekolicht Terrasse ==== -->
<ftui-row [hidden]="Dekolicht_Terrasse:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="Dekolicht_Terrasse:state | map('on: Dekolicht Terrasse')"
[color]="Dekolicht_Terrasse:stete | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_outdoor" [color]="Dekolicht_Terrasse:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== BuschLicht Weihnachten ==== -->
<ftui-row [hidden]="AU_BuschLicht:state | map('on: false, off: true')" height="12%">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="AU_BuschLicht:state | map('on: BuschLicht')"
[color]="AU_BuschLicht:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_fairy_lights" [color]="AU_BuschLicht:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
</ftui-grid-tile>
<!-- Gerätestatus Beleuchtung usw. - ENDE -->



Den neuen Code aus dem Github habe ich auch schon probiert, aber das klappt garnicht.
Evtl. muss ich am Aufbau etwas ändern, aber ich probiere nun schon den ganzen Tag und bekomme es nicht hin.
Hat jemand kein Brett vor dem Kopf wie ich es gerade habe. 

Dieser unten stehende Code war heute bei mir die Grundlage aber ich scheitere kläglich:

Code Auswählen Erweitern

<ftui-grid-tile row="2" col="1" height="1" width="1">
      <header>TILE2</header>
      <ftui-row align-items="top" margin="1" >
        <div>1</div>
        <div>2</div>       
      </ftui-row>
    </ftui-grid-tile>


Das heuteige Update kann ich garnicht machen, das zerschießt mir immer noch mein komplettes Layout.

[mr_petz]

@moonsorrox

Füge mal in deine ftui-row´s margin="-1" ein. Da rückt das schön zusammen.
Anbei ein Test von mir. Die ersten 4 row´s mit margin -1 der Rest wie du es hast.

Code Auswählen Erweitern


<!-- ==== Terrasse - Fensterkontakt ==== -->
<ftui-row [hidden]="WZ_TK_Terrasse:state | map('open: false, closed: true')" height="12%" margin="-1">
<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WZ_TK_Terrasse:state | map ('open: Terrassentür - OFFEN')"
[color]="WZ_TK_Terrasse:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="fts_window_2w_open_l" [color]="WZ_TK_Terrasse:state | map('off: white, open: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>


LG mr_petz

Edit: Der Abstand kommt von den margin in den column´s. Da müsstest du mit margin-left und margin-right arbeiten. Wirst du aber im/mit style="" machen müssen.

Code Auswählen Erweitern


<!-- ==== Terrasse - Fensterkontakt ==== -->
<ftui-row [hidden]="WZ_TK_Terrasse:state | map('open: false, closed: true')" height="12%">
<ftui-column class="size-2" align-items="left" style="margin-left:1em;">
<ftui-label [text]="WZ_TK_Terrasse:state | map ('open: Terrassentür - OFFEN')"
[color]="WZ_TK_Terrasse:state | map('open: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" style="margin-right:1em;">
<ftui-icon name="fts_window_2w_open_l" [color]="WZ_TK_Terrasse:state | map('off: white, open: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>


Ich hoffe das ist so wie du es dir Vorstellst. Du kannst auch die Abstände mit . angeben um präziser den Abstand zu gestallten. Bsp. margin="0.7"

[moonsorrox]

@mr_petz

das war ein super Tipp mit dem "margin=-1" damit passt jetzt schon mehr als vorher rein, denn auch vorher war einer immer halb verschwunden.

Das andere schaue ich mir, später an... du hast das Beispiel ja gut dargestellt. Werde morgen mal probieren, aber ich bin  jetzt schon zufrieden.
Hauptsache ein Update schießt nicht wieder alles kaputt.
Denn aktuell kann ich das Update nicht machen, muss warten bis da mehr Leute Erfahrung gesammelt haben.

[mr_petz]

setstate hat jetzt/heute Abend den size im grid korrigiert. Könntest es vielleicht nochmal testen.

LG mr_petz

[moonsorrox]

also die Änderungen mit den styleeinträgen schiebt mir alles noch weiter zusammen, war neugierig und habe es eben mal mit meinen aktuellen Statusmeldungen probiert.
Ich denke die 1.Variante mit "margin=-1" ist die bessere, werde aber trotzdem nochmal die Tage ran gehen und probieren.

Ich habe gerade ein Update gemacht... dazu folgendes

Ich habe ja immer folgendes drin gehabt:

Code Auswählen Erweitern

<ftui-grid responsive margin="2">
das geht gar nicht das ganze Layout ist komplett zerschossen

Jetzt habe ich das mal rein gesetzt:

Code Auswählen Erweitern

<ftui-grid resize margin="2">

das läuft mit dem neuen Update welches ich eben gemacht habe.
Werde das noch im FTUI 3 Thread schreiben, damit es von denen gesehen wird die ebenfalls Problem hatten.