Anordnung Widgets für Template

Ruckzuck · 08 März 2022, 22:05:05

Hallo,

ich habe ein kleines Template erstellt um meinen Jalousienaktor einzubinden. Das Template möchte ich dann später mehrfach, via Variablen, aufrufen. Es besteht aus mehren Readings und vier Push-Widgets. Momentan richte ich alle Komponenten über eine Tabelle aus. Das scheint aber nicht das richtige zu sein. Ein Screenshot zum besseren Verständnis füge ich an. Ich habe mal temporär Rahmen um die Zellen gelegt.

Kann mir jemand einen Tipp geben, wie ich die einzelnen Widgets am günstigsten zueinander ausrichte, dass ich das Template später mehrfach aufrufen kann? Ich würde auch gerne das rechte und linke Push Widget näher an die beiden Mittleren rücken, aber bekomme die Zelle nicht kleiner

Vielen Dank

Hier noch meine Template-Datei:

Code Auswählen

!DOCTYPE html>
<html>
	
        <div class="sheet border-green">
			<div class="row border-red">
				<div class="cell border-yellow bottom-align">
					<div data-type="label" class="bold">param_label</div>
					<div data-type="label" class="inline top-space darker">Position: </div>
					<div data-type="label" data-device="param_device" data-get="position_blind-get" class="inline top-space darker"> ></div>
					<div></div>
					<div data-type="label" class="inline darker">Lamellen: </div>
					<div data-type="label" data-device="param_device" data-get="position_fins-get" class="inline darker"></div>
					<div data-type="label" data-device="param_device" data-get="diag-get" class="darker"></div>	
				</div>
			</div>
			<div class="row">
				<div class="sheet " >
					<div class="row-10">
						<div class="cell border-red">
							<div data-type="push"  data-device="param_device" data-icon="fa-rotate-left" data-background-icon="fa-square-o" data-set-on="open" data-set="run_fins"  data-on-color="#2A2A2A" class="large right-align"> </div>			
						</div>							
						<div class="cell-10 border-red">
							<div data-type="push"  data-device="param_device" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="up" data-set-off="up" data-set="updown" data-get="active_up-get" data-get-on="true" data-get-on="false" data-on-color="#2A2A2A" class="large"> </div>	
							<div data-type="push" data-device="param_device" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="down" data-set-off="down" data-set="updown" data-get="active_down-get" data-get-on="true" data-get-on="false" data-on-color="#2A2A2A" class="large"> </div>			 
						</div>	
						<div class="cell left-align border-red">
							<div data-type="push" data-device="param_device" data-icon="fa-rotate-right" data-background-icon="fa-square-o" data-set-on="closed"  data-set="run_fins"  data-on-color="#2A2A2A" class="large"> </div>	
						</div>
					</div>
				</div>
			</div>
		</div>
			
		
</html>

Aufgerufen wird mit:

Code Auswählen

<li data-template="mywidgets/behang.html" data-parameter='{"param_device":"Raffstore_Flur", "param_label": "Flur"}'></li>

FHEM Forum

Anordnung Widgets für Template

Ruckzuck