FTUI version 3

khk123 · 29 Januar 2021, 15:31:04

Zitat von: yersinia am 29 Januar 2021, 15:05:45
Entweder einen eigenen Selektor als Kopie des header-selektor erstellen und über custom CSS einbinden oder inline-CSS benutzen:

Prima. Das war es. Danke!

Code Auswählen

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

setstate · 29 Januar 2021, 16:30:06

Zitat von: octek0815 am 29 Januar 2021, 15:23:01
Egal was ich mache, es funktioniert nicht mehr. Hier ein Beispiel der vorher funktionierte...
...

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

Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"

Sorry

moonsorrox · 29 Januar 2021, 16:48:46

Mir hat es auch einiges zerhauen einmal links unter Temperaturen ist alles aueinander gerutscht und besonders hat es mir die Fenster zerrissen in denen Bilder drin sind, eigentlich alle Fenster mit Bilder drin, ich stelle die mal jetzt nicht alle rein auf dem Screenshot ist es rechts an den Tankstellen Bildern zu sehen.

yersinia · 29 Januar 2021, 16:49:46

Kann es sein, dass die geschweiften Klammern (L68 & L71) in der cell.component.js möglicherweise unnötig, gar falsch, sind? Sieht irgendwie komisch aus.

Müssten zudem die Attribut-Selektoren in der grid-tile.component.css nicht eher so aussehen (Attributwert in Anführungszeichen):

Code Auswählen

:host([align-items~="top"]) .content     { justify-content: flex-start; }
:host([align-items~="bottom"]) .content  { justify-content: flex-end; }
:host([align-items~="left"]) .content    { align-items: flex-start; }
:host([align-items~="right"]) .content   { align-items: flex-end; }
:host([align-items~="center"]) .content  { justify-content: center; }
:host([align-items~="stretch"]) .content { justify-content: space-between; }
:host([align-items~="around"]) .content  { justify-content: space-around; }

dto für row.component.css:

Code Auswählen

        :host([align-items~="top"]) {
          align-items: flex-start;
        }
        :host([align-items~="bottom"]) {
          align-items: flex-end;
        }
        :host([align-items~="left"]) {
          justify-content: flex-start;
        }
        :host([align-items~="right"]) {
          justify-content: flex-end;
        }

& cell.component.css:

Code Auswählen

      :host(:not(ftui-row)[align-items~="top"])    { justify-content: flex-start; }
      :host(:not(ftui-row)[align-items~="bottom"]) { justify-content: flex-end; }
      :host(:not(ftui-row)[align-items~="left"])   { align-items: flex-start; }
      :host(:not(ftui-row)[align-items~="right"])  { align-items: flex-end; }
      :host([align-items~="center"]) { justify-content: center; }
      :host([align-items~="stretch"]) { justify-content: space-between; }
      :host([align-items~="around"]) { justify-content: space-around; }

Ich frag' fürn Freund.

Zitat von: setstate am 29 Januar 2021, 16:30:06Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"

Mmh, ich nutze ungefähr diese Struktur, ohne inline bzw user_custom CSS:

Code Auswählen

<body>
  <ftui-grid base-width="317" base-height="262" margin="1">
     <!-- Tile1 -->
      <ftui-grid-tile row="1" col="1" height="1" width="1">
        <ftui-content file="tile.html"></ftui-content>
      </ftui-grid-tile>
     <!-- Tile2 -->
      <ftui-grid-tile row="1" col="2" height="1" width="2">
        <ftui-content file="tile2.html"></ftui-content>
      </ftui-grid-tile>
  </ftui-grid>
 </body>

Und in den Tiles dann

Code Auswählen

  <ftui-grid base-width="317" base-height="262" margin="1">
    <ftui-grid-tile row="1" col="1" height="1" width="1">
<!-- CONTENT -->
    </ftui-grid-tile>
  </ftui-grid>

Und genau das wird mit dem letzten commit von gestern Abend nicht mehr angezeigt.

moonsorrox · 29 Januar 2021, 16:58:51

Bis auf die Temperatur Leiste betrifft es bei mir alle Bilder egal wo drin ob im Gridtile oder im Popup, entweder sind sie zu groß oder gar kleiner geworden, ich habe es mal anhand von einem Bild probiert, ich bekomme es gar nicht kleiner bei meinem Mondbild steht width="40" drin egal was ich eintrage es bleibt riesig.

Weiterhin sind Kamera bilder willkürlich größer oder sogar kleiner in einem Popup geworden.

octek0815 · 29 Januar 2021, 17:06:32

Zitat von: setstate am 29 Januar 2021, 16:30:06
Oooorr Nö, bei den ganzen User-Classes und Inline-Styles weigere ich mich, das anzuschauen. Das sind mir zu viele Unbekannte und "Verbiegungen"

Sorry

Kann ich durchaus nachvollziehen, aber hier mal das Ganze nativ ohne User-Gedöns und es ist irgendwas faul.

Code Auswählen


<ftui-column class="size-7" 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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')"></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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></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')">
			</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)"></ftui-label>
		</ftui-column>
		<ftui-column align-items="right" width="10%" margin="0.5">
			<ftui-label [text]="Garage_TempRH_Sensor:humidity"></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)"></ftui-label>
		</ftui-column>
		<ftui-column align-items="right" width="10%" margin="0.5">
			<ftui-label [text]="Garten_TempRH_Sensor:humidity"></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)"></ftui-label>
		</ftui-column>
		<ftui-column align-items="right" width="10%" margin="0.5">
			<ftui-label [text]="Terrasse_TempRH_Sensor:humidity"></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)"></ftui-label>
		</ftui-column>
		<ftui-column align-items="right" width="10%" margin="0.5">
			<ftui-label color="transparent" text="XX"></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)">
			</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"></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)"></ftui-label>
		</ftui-column>
		<ftui-column align-items="right" width="10%" margin="0.5">
			<ftui-label color="transparent" text="XX"></ftui-label>
		</ftui-column>
	</ftui-row>
</ftui-column>

Anbei nochmal Bilder vor dem Update mit dem obigen Code und nach dem Update.

moonsorrox · 29 Januar 2021, 17:11:03

bei mir mal das Beispiel vom Mond die Größe habe ich hinbekommen jetzt mit Prozentangaben, aber ohne etwas formatiert zu haben rutscht er links an den Rand

Code Auswählen

<!-- Auruf - Mond - START -->
	<ftui-grid-tile row="5" col="16" height="4" width="4" class="semitransparent3d">
		<ftui-column>
			<ftui-row height="60%">	
				<ftui-image popup-target="popup-moon" [src]="myAstro:ftui" width="50%" height="50%"></ftui-image>
			</ftui-row>
			<ftui-row height="15%">
				<ftui-column>			
					<ftui-label [text]="myAstro:MoonRise" class="size-0">A&nbsp;:&nbsp;</ftui-label>				
				</ftui-column>
				<ftui-column> 
					<ftui-label [text]="myAstro:MoonSet" class="size-0">U&nbsp;:&nbsp;</ftui-label>
				</ftui-column>
			</ftui-row>
			<ftui-row height="25%" align-items="top" class="size-0">	
				<ftui-label [text]="myAstro:MoonPhaseS" [color]="myAstro:MoonPhaseS | map('`Letztes Viertel`:darkorange, `Abnehmende Sichel`:mediumslateblue, Neumond:MediumSpringGreen, `Zunehmende Sichel`:yellow, `Erstes Viertel`:crimson, `Zunehmender Mond`:darkviolet, Vollmond:MediumSpringGreen')"></ftui-label>
			</ftui-row>
		</ftui-column>
	</ftui-grid-tile>
	<!-- Auruf - Mond - ENDE -->
			
	<!-- PopUp - Mond - START -->
		<ftui-popup id="popup-moon" width="450px" height="450px" timeout="15" position="top">
		<!--header>Mond (<ftui-label [text]="myAstro:MoonPhaseS | toDate() | format('eeee')"></ftui-label>)</header-->
		<header>Mond - <ftui-label [text]="myAstro:MoonPhaseS" [color]="myAstro:MoonPhaseS | map('`Abnehmende Sichel`:mediumslateblue, `Letztes Viertel`:darkorange, Neumond:MediumSpringGreen, `Zunehmende Sichel`:yellow,`Erstes Viertel`:crimson, `Zunehmender Mond`:darkviolet, Vollmond:MediumSpringGreen')"></ftui-label></header>
			<ftui-image [src]="myAstro:ftui"></ftui-image>
		</ftui-popup>
	<!-- PopUp - Mond - ENDE -->

Das mit den Temperaturen habe ich hinbekommen, aber ich denke dabei immer an die Aussage von setstate, dass sich alle Reihen den Platz teilen und so hatte ich keine Prozentangabe in der row drin, jetzt haben alle row eine Prozentangabe von 6% drin, siehe Screenshot.

Aber das dies Mondbild nicht zentriert ist verstehe ich nicht, so auch wohl dann alle anderen Bilder die ich irgendwo überall drin habe

grossmaggul · 29 Januar 2021, 17:41:30

Wenn mich nicht alles täuscht, muss bei den Angaben <width> und <height> eine Einheit angegeben werden, also entweder "%" für relative oder "px" für absolute Positionierungen.
Gibt man keine Einheit an, werden <width> und <height> ignoriert.

Anbei mal mein Mond, der funktioniert

Code Auswählen

<!-- Moon -->
        <ftui-grid-tile row="1" col="7" height="2" width="2" shape="round" shape="round" class="semitransparent">
            <!-- <header>Mond</header> -->
            <ftui-column height="80%">
                <ftui-row>
                    <ftui-image popup-target="moon" [src]="astro:ftui" width="95px"></ftui-image>
                </ftui-row>
                <ftui-row>
                    <ftui-label [text]="proplanta:fc0_moonRise">A:</ftui-label>
                    <ftui-label [text]="proplanta:fc0_moonSet">&nbsp;U:</ftui-label>
                </ftui-row>
            </ftui-column>
        </ftui-grid-tile>       
            <!-- Moon Popup -->
            <ftui-popup id="moon" width="480px" height="480px" timeout="10" shape="round" position="top">
                <ftui-image [src]="astro:ftui" width="380px"></ftui-image>
            </ftui-popup>

moonsorrox · 29 Januar 2021, 17:47:14

ich bekomme das Bild im Popup überhaupt nicht größer oder auch kleiner, es ignoriert die Prozente die ich eingebe... $:-\$
Ah ich sehe du hast nur eine Angabe in px drin

Prozent hat bei mir nicht funktioniert, mit deiner Angabe in width="65px" geht es

setstate · 29 Januar 2021, 17:48:26

Zitat von: octek0815 am 29 Januar 2021, 17:06:32
Kann ich durchaus nachvollziehen, aber hier mal das Ganze nativ ohne User-Gedöns und es ist irgendwas faul.
Code Auswählen Erweitern
<ftui-column class="size-7" 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)"></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')"> </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)"></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')"> </ftui-label> </ftui-column> </ftui-row> <ftui-row> <ftui-column align-items="left" margin="1"> <ftui-label text="Bü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)"></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')"> </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)"></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')"> </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)"></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')"></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)"></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')"> </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)"></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')"> </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)"></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')"> </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)"></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')"> </ftui-label> </ftui-column> </ftui-row> <ftui-row> <ftui-column align-items="left" margin="1"> <ftui-label text="Kü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)"></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')"> </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)"></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')"> </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)"></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')"> </ftui-label> </ftui-column> </ftui-row> <ftui-row height="2%" class="size-0"> </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)"></ftui-label> </ftui-column> <ftui-column align-items="right" width="10%" margin="0.5"> <ftui-label [text]="Garage_TempRH_Sensor:humidity"></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)"></ftui-label> </ftui-column> <ftui-column align-items="right" width="10%" margin="0.5"> <ftui-label [text]="Garten_TempRH_Sensor:humidity"></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)"></ftui-label> </ftui-column> <ftui-column align-items="right" width="10%" margin="0.5"> <ftui-label [text]="Terrasse_TempRH_Sensor:humidity"></ftui-label> </ftui-column> </ftui-row> <ftui-row height="2%" class="size-0"> </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)"></ftui-label> </ftui-column> <ftui-column align-items="right" width="10%" margin="0.5"> <ftui-label color="transparent" text="XX"></ftui-label> </ftui-column> </ftui-row> <ftui-row> <ftui-column align-items="left" margin="1"> <ftui-label text="Kü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)"> </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"></ftui-label> </ftui-column> </ftui-row> <ftui-row> <ftui-column align-items="left" margin="1"> <ftui-label text="Kühlschrank Kü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)"></ftui-label> </ftui-column> <ftui-column align-items="right" width="10%" margin="0.5"> <ftui-label color="transparent" text="XX"></ftui-label> </ftui-column> </ftui-row> </ftui-column>

Anbei nochmal Bilder vor dem Update mit dem obigen Code und nach dem Update.

Schon viiiiiiel besser. Da schaue ich gern nach.

Sieht aber erstmal gut aus, oder? Außer die Zeilenabstände?
Das sind deine vielen Margins! Die wirken ringsum.

margin="1em" ist eine Fonthöhe oben, rechts, unten, links
Ich würde nur dort margin setzen, wo es gebraucht wird. links oder recht. ggf. unten weniger

margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em

Nachtrag: ja das könnte es sein. Vorher wurde Margin autom. nur an die Seite gesetzt, wohin aligned wurde. Jetzt wirkt es ringsum.
Schau ich mir an. Die Angabe margin="0 0 0 0.5em" ist aber flexibler.

octek0815 · 29 Januar 2021, 17:55:52

Zitat von: setstate am 29 Januar 2021, 17:48:26
margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em

Alles klar, vielen dank für deine Erklärung.
Jetzt wird es logisch, dann kann ich das ja recht schnell fixen.
Das muss aber neu sein mir den vier Werten im margin oder?

OdfFhem · 30 Januar 2021, 05:33:55

@yersinia

***
*** Attribut-Selektoren ***
***

Die Anführungszeichen spielen im Normalfall keine Rolle, können aber auch angegeben werden - das Ergebnis ist in beiden Fällen identisch.

Dein Link trägt interessanterweise auch nicht wirklich zur eindeutigen Klärung der Frage bei ...

Die Erläuterungsseite definiert:

Code Auswählen


[title~="flower"] {
  border: 5px solid yellow;
}

Im zugehörigen Try-It-Bereich wird definiert:

Code Auswählen


[title~=flower] {
  border: 5px solid yellow;
}

***
*** content ***
***

Ausschnitt aus Datei test.html

Code Auswählen


<body>
  <ftui-grid base-height="27" base-width="27">
    ...
    <ftui-tab-view id="content">
      <ftui-grid-tile row="1" col="1" height="1" width="1">
        <ftui-content file="tab-view_content.html" color="green"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
    ...
  </ftui-grid>
</body>

Datei tab-view_content.html

Code Auswählen


<ftui-grid base-height="27" base-width="27" margin="0">
  <ftui-grid-tile row="1" col="1" height="1" width="1" color="blue">
    <ftui-content file="content_content.html"></ftui-content>
  </ftui-grid-tile>
  <ftui-grid-tile row="1" col="2" height="1" width="1">
    <ftui-content file="content_content.html"></ftui-content>
  </ftui-grid-tile>
  <ftui-grid-tile row="2" col="1" height="1" width="1">
    <ftui-content file="content_content.html"></ftui-content>
  </ftui-grid-tile>
  <ftui-grid-tile row="2" col="2" height="1" width="1" color="blue">
    <ftui-content file="content_content.html"></ftui-content>
  </ftui-grid-tile>
  <ftui-grid-tile row="1" col="1" height="2" width="2">
    <ftui-content file="content_content.html"></ftui-content>
  </ftui-grid-tile>
</ftui-grid>

Datei content_content.html

Code Auswählen


<ftui-column>
  <div style="color:#0000ff;">blau</div>
</ftui-column>

- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html wird 1 Kachel (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird zentriert ausgerichtet

Ergebnis s. Anhang Screenshot_1

Datei test.html verändert

Code Auswählen


...
<ftui-grid-tile row="1" col="1" height="1" width="1">
  <ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>
...

- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html wird 1 Kachel (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet

Ergebnis s. Anhang Screenshot_2

Datei test.html verändert

Code Auswählen


...
<ftui-grid-tile row="1" col="1" height="2" width="2">
  <ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>
...

- Kachelgröße in test.html (27x27) und tab-view_content.html (27x27) stimmen überein
- In test.html werden 4 Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet

Ergebnis s. Anhang Screenshot_3

Datei test.html verändert

Code Auswählen


<ftui-grid-tile row="1" col="1" height="4" width="4">
  <ftui-content file="tab-view_content.html" color="green" align-items="left"></ftui-content>
</ftui-grid-tile>

Datei tab-view_content.html verändert

Code Auswählen


<ftui-grid base-height="54" base-width="54" margin="0">
  ...
</ftui-grid>

- Kachelgröße in test.html (27x27) und tab-view_content.html (54x54) stimmen nicht überein
- In test.html werden 16 Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird links ausgerichtet

Ergebnis s. Anhang Screenshot_4

Datei test.html verändert

Code Auswählen


<ftui-grid-tile row="1" col="1" height="34" width="26">
  <ftui-content file="tab-view_content.html" color="green"></ftui-content>
</ftui-grid-tile>

- Kachelgröße in test.html (27x27) und tab-view_content.html (54x54) stimmen nicht überein
- In test.html werden alle Kacheln (oben links) für tab-view_content.html zur Verfügung gestellt
- Inhalt von tab-view_content.html wird zentriert ausgerichtet

Ergebnis s. Anhang Screenshot_5

Ich selbst nutze eigentlich immer die letzte Variante, da dann die komplette Kachelfläche zur Verfügung gestellt wird und die linke obere Ecke des Sub-Grid immer mit der oberen linken Ecke vom Master-Grid übereinstimmt.

Welche Kachelgröße zur Ausnutzung der kompletten Kachelfläche dann im Sub-Grid verwendet werden soll, kann man individuell festlegen. Zu große oder zu viele Kacheln werden am Rand der kompletten Kachelfläche abgeschnitten und sind somit nicht sichtbar.

moonsorrox · 30 Januar 2021, 15:13:50

Zitat von: setstate am 29 Januar 2021, 17:48:26
margin="0 0 0 0.5em" => oben: 0, rechts: 0, unten: 0, links: 0.5em

das heißt jetzt für alle weiteren Formatierungen muss margin so eingesetzt werden margin="0 0 0 0.5em"
Ein margin="1" gilt jetzt für alle 4 Seiten

yersinia · 30 Januar 2021, 15:36:18

@OdfFhem: Danke fürs Testen und den Hineweis. Interessant, dass w3schools da etwas inkonsequent ist.

Ich hab' meinen Fehler auch gefunden, ich hatte quasi ein grid in grid, was vorher Problemlos funktioniert hat, aber nach dem Update von gestern nicht mehr. Update gemacht, Zeilen gelöscht, läuft.

setstate · 30 Januar 2021, 15:49:48

Zitat von: moonsorrox am 30 Januar 2021, 15:13:50
das heißt jetzt für alle weiteren Formatierungen muss margin so eingesetzt werden margin="0 0 0 0.5em"
Ein margin="1" gilt jetzt für alle 4 Seiten

na ja, das wäre die einfachste Umsetzung. Besser als margin-left, margin-top, margin....
Oder per Automatismus:

wenn align-items="left" und margin="1", dann setzte margin-left="1em"
wenn align-items="left top" und margin="1", dann setzte margin-left="1em" und margin-top="1em"