FTUI version 3

[setstate]

Hallo,

hatte gestern auch den swiper kurz getestet. Ist es auch möglich Icons einzubinden wie in meinem Anhang? Hat mir bei einem schnellen Test alles zerschossen.

Gruß
Eisix

ja, habe ich gerade so probiert

Code Auswählen Erweitern


      <ftui-swiper>
        <ftui-icon name="washing-machine" size="6"></ftui-icon>
        <ftui-icon name="garage-variant" size="6"></ftui-icon>
        <ftui-icon name="car-battery" size="6"></ftui-icon>
        <ftui-icon name="mower" size="6"></ftui-icon>
        <ftui-icon name="projector" size="6"></ftui-icon>
      </ftui-swiper>


[torte]

Okay, jetzt ist mir deine Absicht klarer.

Ich würde folgendes setzen:

Code Auswählen Erweitern


<ftui-grid-tile align-items="top" ...
    <ftui-content height="3em" [hidden]="....

Grid-Tile zieht seine Kinder nach oben.
Feste Höhe der Kinder, damit sich diese nicht durch den freiwerdende Raum auseinander ziehen.
Hidden auf die Kinder direkt, nicht innerhalb. Sonst verbleiben die leeren ftui-content Container stehen.

Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update

DANKE!!! 
Funktioniert jetzt.

Grüße
Torte

[Eisix]

ja, habe ich gerade so probiert

Code Auswählen Erweitern


      <ftui-swiper>
        <ftui-icon name="washing-machine" size="6"></ftui-icon>
        <ftui-icon name="garage-variant" size="6"></ftui-icon>
        <ftui-icon name="car-battery" size="6"></ftui-icon>
        <ftui-icon name="mower" size="6"></ftui-icon>
        <ftui-icon name="projector" size="6"></ftui-icon>
      </ftui-swiper>


Hallo setstate,

das funktioniert, aber das ist nicht was ich erreichen wollte. Mein screenshot war zu klein um zu verdeutlichen was ich meine. Anstatt des schmalen swiper Balkens wollte ich die Icons zur Auswahl setzen. Mache das momentan mit einem Dummy und hide.

Gruß
Eisix

[setstate]

Nein, ein Selektor oder Parameter zum Steuern gibt es noch nicht.

[octek0815]

Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update

Bei mir hat das neue Update alles zerhauen, stimmt da was noch nicht?
Anbei vorher - Nachher Beispiele...

[yersinia]

dto, das commit lässt meine index.html leer anzeigen, der html-code wird geladen aber die tiles sind nicht sichtbar.

[grossmaggul]

Bei mir ist alles bestens nach dem update.

[moonsorrox]

Bei mir hat das neue Update alles zerhauen, stimmt da was noch nicht?
Anbei vorher - Nachher Beispiele...

Oh je da werde ich mal nicht updaten.... hatte ja letztens auch ein Dinge anzupassen

[torte]

Hallo octek0815,

hast du eine height gesetzt für den ftui-Content?
so sieht das zb bei mir aus:

Code Auswählen Erweitern


<ftui-content device="tuer1" devicename="Balkon vorne" reading="eventState" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')" align-items="top" height="8%" file="content/content_system_door_status.html"></ftui-content>


[khk123]

Kann ich die Backgound-Farbe eines grid-tile headers ändern?

[moonsorrox]

Kann ich die Backgound-Farbe eines grid-tile headers ändern?

Habe ich auch gemacht in der user-ftui.css
hier

Code Auswählen Erweitern

--grid-header-background-color: var(--DarkBlue);

[khk123]

Habe ich auch gemacht in der user-ftui.css
hier

Code Auswählen Erweitern

--grid-header-background-color: var(--DarkBlue);

Dank für die schnelle Antwort. Hab es mir fast gedacht. Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben. 

[yersinia]

Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben.

Entweder einen eigenen Selektor als Kopie des header-selektor erstellen und über custom CSS einbinden oder inline-CSS benutzen:

Code Auswählen Erweitern

<header style="background-color: var(--DarkBlue);">TEXT</header>

[moonsorrox]

Dank für die schnelle Antwort. Hab es mir fast gedacht. Allerding wirkt die Änderung dann generell. Ich möchte nur einen einzelnen, ganz bestimmten Header anders einfärben.

du kannst auch das so erstellen und dann über ID aufrufen, so habe ich ein einzelnes Popup z.B. für den Mond durchsichtig gestaltet. Da kannst du all die Dinge die du verändern möchtest eintragen.

Code Auswählen Erweitern

#popup-moon {
  --popup-background-color: translucent;
  --popup-header-color: translucent;
  --popup-header-background-color: translucent;
}

[octek0815]

Hallo octek0815,

hast du eine height gesetzt für den ftui-Content?
so sieht das zb bei mir aus:

Code Auswählen Erweitern


<ftui-content device="tuer1" devicename="Balkon vorne" reading="eventState" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')" align-items="top" height="8%" file="content/content_system_door_status.html"></ftui-content>


Egal was ich mache, es funktioniert nicht mehr. Hier ein Beispiel der vorher funktionierte...

Aufruf aus der index.html:

Code Auswählen Erweitern


<ftui-grid-tile row="6" col="1" height="30" width="19">
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-home-temp-feuchte.html"></ftui-content>
</ftui-row>
</ftui-grid-tile>


...und der der Content:

Code Auswählen Erweitern


<ftui-column class="_size-standard" style="margin-top:5%; margin-bottom:5%; line-height:75%;" height="92.5%">
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:humidity"
[color]="Badezimmer_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity"
[color]="Badezimmer_EG_Steckdose_Rasierer_Und_Zahnbuersten:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="B&uuml;ro"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity"
[color]="Arbeitszimmer_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Dean"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer2_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur oben"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_OG_TempRH_Sensor:humidity"
[color]="Flur_OG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Flur unten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Flur_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Flur_EG_TempRH_Sensor:humidity"
[color]="Flur_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Fynn"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity"
[color]="Kinderzimmer1_OG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR1"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR1_EG_TempRH_Sensor:humidity"
[color]="HWR1_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="HWR2_EG_TempRH_Sensor:humidity"
[color]="HWR2_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="K&uuml;che"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Kueche_EG_TempRH_Sensor:humidity"
[color]="Kueche_EG_TempRH_Sensor:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Schlafzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Schlafzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Schlafzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Wohnzimmer"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:measured-temp | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Wohnzimmer_EG_Wandthermostat_Climate:humidity"
[color]="Wohnzimmer_EG_Wandthermostat_Climate:humidity | map('64: white, 65: danger')"><span slot="end" class="_UnitStyle">%</span>
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0">&nbsp;</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garage"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garage_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garage_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Garten"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Garten_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Garten_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Terrasse"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Terrasse_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label [text]="Terrasse_TempRH_Sensor:humidity"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row height="2%" class="size-0">&nbsp;</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="Gefrierschrank"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="HWR2_EG_Gefrierschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="K&uuml;hlschrank HWR2"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off:true, on:false')"
[text]="HWR2_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span>
</ftui-label>
<ftui-label [hidden]="HWR2_EG_Steckdose_Kuehlschrank:state | map('on:true, off:false')"
[text]="HWR2_EG_Steckdose_Kuehlschrank:state | map('off: AUS, on:')">
</ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column align-items="left" margin="1">
<ftui-label text="K&uuml;hlschrank K&uuml;che"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="0.75" width="10%">
<ftui-label [text]="Kueche_EG_Kuehlschrank_Temp_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column align-items="right" width="10%" margin="0.5">
<ftui-label color="transparent" text="XX"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>


Bin erstmal zurückgerollt und hoffe auf Antwort von setstate.