Layout Problem

[Yfkt5A]

Hallo zusammen...

ich bekomms einfach nicht so hin wie ich möchte...

Die "group" soll so dargestellt werden wie in Bild layout1, jedoch dann nicht bis zum rechten Bildrand durchgehen sondern gleich nach den Temperaturen abgeschnitten werden.

Dazu habe ich dann noch ein "layout colspan"(siehe Code grüne Markierung) eingefügt...

<group name=" " nowidget="false" align="center">
	[COLOR="Lime"]<layout colspan="3.5"/>[/COLOR]
	<group nowidget="true">
		<info format="%.1f °C">
			<layout colspan="2.7"/>
			<label><icon name="temp_temperature"/><icon name="scene_sleeping"/></label>
			<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
		</info>
	</group>
	<group nowidget="true">
		<info format="%.1f °C">
			<layout colspan="1.5"/>
			<label><icon name="temp_temperature"/><icon name="sani_floor_heating"/> </label>
			<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
		</info>
		<info format="%.1f °C">
			<layout colspan="0.6"/>
			<address transform="DPT:9.001" mode="readwrite">12/2/103</address>
		</info>
		<info format="%.1f °C">
			<layout colspan="0.6"/>
			<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
		</info>
	</group>
	<group nowidget="true" align="center">
            <diagram series="day" refresh="600" period="3" legend="popup" legendposition="ne" popup="true" previewlabels="false" title="Lufttemperaturen" tooltip="true">
		<layout colspan="2.7"/>
		<label/>
		<axis unit="°C"/>
		<rrd fill="false" steps="false" color="grey" consolidationFunction="AVERAGE">28.90B9FA010000_temp</rrd>
            </diagram>
        </group>
</group>

leider zerhäckselt er mir dann das Layout wie auf Bild layout2 zu sehen

Vielleicht habt ja ihr einen Tipp wie ich das hinbekommen könnte...

Ausserdem hätte ich noch ein paar Punkte was evtl. zu ändern wäre:
-gleicher Abstand zwischen den unteren 3 Temperaturen
-Graph in die Mitte oder über ganze Breite der Gruppe
-Gruppe am Bildschirm rechts ausrichten(align="right" hat nicht geklappt)

[Ziegelstein]

Hello,

ja, kann mühsam werden..
meine Erfahrung ist, wenn man zuviel über Layout vorgibt wirds nicht einfacher.

Versuch mal nur die Hauptgruppe mit colespan zu definieren und damit die geamt-Breite und alle anderen rausnehmen.

Wenn das nicht reicht, dann eben die Gruppe mit den 3 Info-elementen so einschränken, dass sie in die Hauptgruppe passen.
Die anderen Info-Elemente gar nicht beschreiben..

Darüber hinaus funktionierten bei mir oft nur ganze Zahlen:
colspan 1 2 oder 3 etc. alles mit Komma oft nicht.
Viel Erfolg!

[peuter]

Die einzelnen untergordneten groups müssen auch ein layout-element bekommen und wenn alles gleich groß und die äußere group komplett ausfüllen soll, dann müssen die Summen der colspan Werte für jede Zeile auch gleich groß sein.

Damit dann alles noch gleichmäßig aussieht, kann einfach leere Text-Elemente in die erste Zeite machen. Beim Diagramm war ein leeres Label element vorhanden, was dann Platz weggenommen hat und deswegen war das diagramm auch nicht über die ganze Fläche verteilt.

Versuchs mal hiermit:

<group name=" " nowidget="false" align="center">
    <layout colspan="2.7"/>
    <group nowidget="true">
        <layout colspan="2.7"/>
        <text>
            <layout colspan="0.9"/>
            <label><icon name="temp_temperature"/><icon name="scene_sleeping"/></label>
        </text>
        <text>
            <layout colspan="0.6"/>
        </text>
        <info format="%.1f °C">
            <layout colspan="0.6"/>
            <address transform="DPT:9.001" mode="readwrite">x/x/x</address>
        </info>
        <text>
            <layout colspan="0.6"/>
        </text>
    </group>
    <group nowidget="true">
        <layout colspan="2.7"/>
        <text>
            <layout colspan="0.9"/>
            <label><icon name="temp_temperature"/><icon name="sani_floor_heating"/> </label>
        </text>
        <info format="%.1f °C">
            <layout colspan="0.6"/>
            <address transform="DPT:9.001" mode="readwrite">x/x/x</address>
        </info>
        <info format="%.1f °C">
            <layout colspan="0.6"/>
            <address transform="DPT:9.001" mode="readwrite">12/2/103</address>
        </info>
        <info format="%.1f °C">
            <layout colspan="0.6"/>
            <address transform="DPT:9.001" mode="readwrite">x/x/x</address>
        </info>
    </group>
    <group nowidget="true">
        <layout colspan="2.7"/>
            <diagram series="day" refresh="600" period="3" legend="popup" legendposition="ne" popup="true" previewlabels="false" title="Lufttemperaturen" tooltip="true">
        <layout colspan="2.7"/>
        <axis unit="°C"/>
        <rrd fill="false" steps="false" color="grey" consolidationFunction="AVERAGE">28.90B9FA010000_temp</rrd>
            </diagram>
        </group>
</group>

Was noch fehlt: gesamte Gruppe nach rechts => align geht nicht (vielleicht wieder mit leeren text Elementen hinpfuschbar, ist aber nicht der Sinn dieses Spaltenbasierten Layouts.), verstehe den Sinn deines Vorhabens auch nicht. Eventuell sind die navbars hier eine Option, die kann man auch rechts am Bildschirm positionieren.

[Yfkt5A]

Danke für die Antworten...

mit dem Code von peuter ist nun perfekt siehe Bild...
Großes Danke... hab da wirklich schon Stunden verbracht und habs leider nicht so hinbekommen...

Der Sinn darin warum ich das rechts ausgerichtet haben möchte:
Es gibt in unserer Visu für jeden Raum eine Seite, auf der verschiedene Sachen für den Raum bedient werden können(Szenen, Jalousien...). Diese Gruppe hier soll allerdings nur diverse Status anzeigen, daher hätte ich es gerne ganz rechts...

PS: Gibts ne Möglichkeit unter den Temperaturen einen kleinen Text anzuzeigen?

[Chris M.]

Der Sinn darin warum ich das rechts ausgerichtet haben möchte:
Es gibt in unserer Visu für jeden Raum eine Seite, auf der verschiedene Sachen für den Raum bedient werden können(Szenen, Jalousien...). Diese Gruppe hier soll allerdings nur diverse Status anzeigen, daher hätte ich es gerne ganz rechts...

PS: Gibts ne Möglichkeit unter den Temperaturen einen kleinen Text anzuzeigen?

Gehen tut viel - das hier auf jeden Fall. Die Frage ist eher: kannst Du dafür ausreichend CSS?

Out-of-the-Box geht das nicht, aber über eine custom.css stehen die Chancen nicht schlecht.

[peuter]

Es gibt in unserer Visu für jeden Raum eine Seite, auf der verschiedene Sachen für den Raum bedient werden können(Szenen, Jalousien...). Diese Gruppe hier soll allerdings nur diverse Status anzeigen, daher hätte ich es gerne ganz rechts...

Ja wenn links davon diverse andere Sachen hinkommen ist es eigentlich standartverhalten des Layouts: Du musst einfach in der Config vor die vorhandene group mit den Temperaturen eine weitere group einfügen die den rest des 12-Spaltigen Layouts belegt (also colspan=9.3) und darin dann Deine ganzen Schalter packen:

<group name="Aktorik">
  <layout colspan="9.3"/>
   <!--hier die Schaltelemente hin-->
</group>
<group name=" " nowidget="false">
    <layout colspan="2.7"/>
    .....

PS: Gibts ne Möglichkeit unter den Temperaturen einen kleinen Text anzuzeigen?

Mit den vorhandenen Bordmitteln nicht. Aber da die CometVisu sehr flexibel ist, geht fast alles mehr oder weniger gut. Ist aber schon ziemlicher Pfusch im CSS, daher sind unerwünschte Nebenwirkungen nicht ausgeschlossen:

Hier ein Beispiel:

<info format="%.1f °C" class="bottom_label">
            <layout colspan="0.6"/>
            <label>Test</label>
            <address transform="DPT:9.001" mode="readwrite">x/x/x</address>
</info>

Damit das passend formatiert wird, musst Du folgenden Code in die Datei /designs/metal/custom.css packen, den Browsercache leeren und die Visu neu laden:

.widget.custom_bottom_label div {
        text-align: center;
        width: 100%;
}

.widget.custom_bottom_label .label{
        font-size: 0.6em;
        margin-top: 1.5em;
}
.widget.custom_bottom_label .actor {
        margin-top: -2.5em;
}

Durch ändern der jeweiligen margin-top Werte kannst die die Sache ein wenig vertikal hin und herschieben.

[Yfkt5A]

Danke nochmals für Eure Antworten... vorallem dir Tobias... du warst wirklich eine große Hilfe...

Auch die kleinen Labels funktionieren soweit ich das bis jetzt sagen kann ohne Nebenwirkungen...

Um das jetzt so hinzubekommen wie auf dem Bild habe ich noch ein paar Gruppen hinzugefügt:
- eine unsichtbare um "Szenen" + "Jalousien/Rolladen"
- eine leere zwischen der Linken und der Rechten um die Status rechts auszurichten, hier ist nur oben eine feine graue Linie sichtbar

<!-- Seite Schlafen -->
      <page name="Schlafen" visible="false" type="text" size="scaled">
        <!-- Gruppe links (Bedienung) -->
		<group nowidget="true">
			<layout colspan="5.8"/>
			<!-- Szenen Schlafen -->
			<group name="Szenen" nowidget="false">
				<layout colspan="5.8"/>
			</group>
			<!-- Jalousie/Rolladen Schlafen/Ankleide -->		
			<group name="Jalousie/Rolladen">
				<layout colspan="5.8"/>
				<!-- Jalousie Tür -->
				<group nowidget="true">
					<layout colspan="5.8"/>
					<text>
						<layout colspan="0.9"/>
						<label><icon name="fts_door"/>Tür</label>
					</text>
					<info mapping="JalousieHoehe">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<info format="%.0f %">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<slide min="0" max="100">
						<layout colspan="2"/>
						<address transform="DPT:5.001" mode="write">x/x/x</address>
						<address transform="DPT:5.001" mode="read">x/x/x</address>
					</slide>
					<trigger value="1" mapping="JalousieAufAb">
						<layout colspan="0.6"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
					<trigger value="1" mapping="Stop">
						<layout colspan="0.6"/>
						<address transform="DPT:1.001" mode="readwrite">x/x/x</address>
					</trigger>
					<trigger value="0" mapping="JalousieAufAb">
						<layout colspan="0.7"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
				</group>
				<group nowidget="true">
					<layout colspan="5.8"/>
					<switch mapping="JalousieAutoHand" styling="GreyGrey">
						<layout colspan="0.9"/>
						<label> </label>
						<address transform="DPT:1.003" mode="readwrite">x/x/x</address>
					</switch>
					<info mapping="LamellenWinkel">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<info format="%.0f %">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<slide min="0" max="100">
						<layout colspan="2"/>
						<address transform="DPT:5.001" mode="write">x/x/x</address>
						<address transform="DPT:5.001" mode="read">x/x/x</address>
					</slide>
					<trigger value="1" mapping="JalousieAufAb">
						<layout colspan="0.6"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
					<text align="center">
						<layout colspan="0.6"/>
						<label>Step</label>
					</text>
					<trigger value="0" mapping="JalousieAufAb">
						<layout colspan="0.7"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
				</group>
				<!-- Jalousie Rolladen Dachfenster -->
				<group nowidget="true">
					<layout colspan="5.8"/>
					<text>
						<layout colspan="0.9"/>
						<label><icon name="fts_window_roof"/>Dach</label>
					</text>
					<info mapping="DachfensterHoehe">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<info format="%.0f %">
						<layout colspan="0.5"/>
						<address transform="DPT:5.001" mode="readwrite">x/x/x</address>
					</info>
					<slide min="0" max="100">
						<layout colspan="2"/>
						<address transform="DPT:5.001" mode="write">x/x/x</address>
						<address transform="DPT:5.001" mode="read">x/x/x</address>
					</slide>
					<trigger value="1" mapping="JalousieAufAb">
						<layout colspan="0.6"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
					<trigger value="1" mapping="Stop">
						<layout colspan="0.6"/>
						<address transform="DPT:1.001" mode="readwrite">x/x/x</address>
					</trigger>
					<trigger value="0" mapping="JalousieAufAb">
						<layout colspan="0.7"/>
						<address transform="DPT:1.008" mode="readwrite">x/x/x</address>
					</trigger>
				</group>
			</group>			
		</group>
		<!-- Gruppe mitte(Platzhalter) -->
		<group nowidget="true">
			<layout colspan="3.5"/>
		</group>
		<!-- Gruppe rechts(Stati) -->
		<group name=" " nowidget="false" align="center">
			<layout colspan="2.7"/>
			<group nowidget="true">
				<layout colspan="2.7"/>
				<text>
					<layout colspan="0.9"/>
					<label><icon name="temp_temperature"/><icon name="scene_sleeping"/></label>
				</text>
				<text>
					<layout colspan="0.6"/>
				</text>
				<info format="%.1f °C">
					<layout colspan="0.6"/>
					<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
				</info>
				<text>
					<layout colspan="0.6"/>
				</text>
			</group>
			<group nowidget="true">
				<layout colspan="2.7"/>
				<text>
					<layout colspan="0.9"/>
					<label><icon name="temp_temperature"/><icon name="sani_floor_heating"/> </label>
				</text>
				<info format="%.1f °C" class="bottom_label">
					<layout colspan="0.6"/>
					<label>Ankleide</label>
					<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
				</info>
				<info format="%.1f °C">
					<layout colspan="0.6"/>
					<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
				</info>
				<info format="%.1f °C">
					<layout colspan="0.6"/>
					<address transform="DPT:9.001" mode="readwrite">x/x/x</address>
				</info>
			</group>
			<group nowidget="true">
				<layout colspan="2.7"/>
				<diagram series="day" refresh="600" period="3" legend="popup" legendposition="ne" popup="true" previewlabels="false" title="Lufttemperaturen" tooltip="true">
					<layout colspan="2.7"/>
					<axis unit="°C"/>
					<rrd fill="false" steps="false" color="grey" consolidationFunction="AVERAGE">28.90B9FA010000_temp</rrd>
				</diagram>
			</group>
			<group nowidget="true">
				<layout colspan="2.7"/>
				<text>
					<layout colspan="0.9"/>
					<label><icon name="message_light_intensity"/><icon name="scene_dressing_room"/></label>
				</text>
				<text>
					<layout colspan="0.6"/>
				</text>
				<info format="%.1f Lux">
					<layout colspan="0.6"/>
					<address transform="DPT:9.004" mode="readwrite">x/x/x</address>
				</info>
				<text>
					<layout colspan="0.6"/>
				</text>
			</group>
		</group>
		

      </page>

Vielleicht kann das dem Ein oder Anderen als Beispiel dienen...