Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar

[EdgarM]

Hallo zusammen,

ich passe gerade für mich den material widgets Adapter an und bin kurz vor Ende am Verzweifeln

Ich versuche aktuell noch zu implementieren, dass ein div über dem Widget liegt mit Fargbe weiss und opacity 0.1

Leider bekomme ich es nicht hin, dass es darüber liegt, soll heissen ich weiss nicht wo ich die left:,top,width und height vom eigentlichen Widget herbekomme.

<div class="vis-widget  md-list vis-tpl-material-ListHumidity" id="w00067" style="left: 135px; top: 273px; width: 350px; height: 50px; font-size: x-small;">	
			<div class="vis-widget-body">
				<div class="md-list-icon">
					<img src="widgets/material/img/humid_humidity.png">
				</div>
				<div class="md-list-desc">
					<div class="md-list-title mdui-title">
						Sensor
					</div>
					<div class="md-list-subtitle mdui-subtitle">
						
Luftfeuchtigkeit
					</div>
				</div>
				<div class="md-list-value mdui-value">47.0 %</div>
			</div>
			<div class="md_button_op vis-widget " id="w00067"></div>
		<div class="vis-signal   " data-index="0" style="display: none; pointer-events: none; position: absolute; z-index: 10; top: 25%; left: 65%"><img class="vis-signal-icon" src="/vis-icontwo/Weather/wet.png" style="width: 25px; height: auto;background-color: blue;"></div></div>

<script id="tplMaListHumid" type="text/ejs" class="vis-tpl" data-vis-prev='<div id="prev_tplMaListHumid" style="position: relative; text-align: initial;padding: 4px ">
				<div class="vis-widget_prev " style="width: 100px; height: 100px; padding:2px; background-color: #212121" > 
					<img src="widgets/material/img/humid_humidity.png" style="width: 100px; height: 100px;"></div></div>'
	data-vis-attrs="oid/id;title/text;subtitle/text;" data-vis-set="material" data-vis-type="val"
	data-vis-name="ListHumidity">
	<div class="vis-widget <%== this.data.attr('class') %> md-list" id="<%= this.data.attr('wid') %>" >	
			<div class="vis-widget-body" >
				<div class="md-list-icon">
					<img src="widgets/material/img/humid_humidity.png">
				</div>
				<div class="md-list-desc">
					<div class="md-list-title mdui-title" >
						<%= this.data.attr('title') %>
					</div>
					<div class="md-list-subtitle mdui-subtitle">
						<%= this.data.attr('subtitle') %>
					</div>
				</div>
				<div class="md-list-value mdui-value"></div>
			</div>
			<div class="md_button_op vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>"></div>
		</div>
		
		<% vis.binds.material.tplMdListHumid(this.data.wid, this.view, this.data);  %>
		
</script>

Mir ist nicht ganz klar, woher die Widgets diese Informationen bekommen bzw. wo sie gespeichert werden.

Für einen Tipp wäre ich sehr dankbar

grüße

[EdgarM]

Wenn mir wenigstens jemand sagen könnte, wie ich auf die Positions-informationen eines Widgets zugreifen könnte wäre ich schon glücklich

Also wo werden Informationen wie left: oder top: gespeichert?

nicht mal das finde ich aktuell.

grüße und danke

[OliverIO]

@EdgarM
Die genauen Positions Angaben werden durch den Browser während des Renderingsberechnet. Diese können je nach Browser, Bildschirmgröße, Bildschirm Auflösung variieren. Daher kannst du die exakte Position eines bestimmten Elementes erst auslesen, wenn der Browser diesen Prozess abgeschlossen hat.
Besser ist es, den Browser mitzuteilen, dass du Elemente über einander legen möchtest. Dafür gibt es diverse CSS Angaben.
Ein Beispiel dazu findest du im folgenden Link
https://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html

[EdgarM]

Hi Oliver,

erstmal danke für die info, war sehr hilfreich.

für alle anderen, unter https://github.com/EdgarM73/ioBroker.vis-material/tree/master/widgets habe ich das material widget erweitert um ein Anwesendheits widget ( und habe als Grundlage den fork von Pix--- übernommen mit Luftfeuchtigkeit und Shutter ).

Habe für den Dark Theme ein Button alike div darüber gelegt und jetzt gefällt es mir recht gut

Wer es ausprobieren möchte darf mir gerne infos zukommen lassen, auch bugs

grüße

[sigi234]

@EdgarM

Anwesendheits widget

Wie bringe ich das hinein?

[EdgarM]

Hi Oliver,

du musst mein Adapter von github laden als Testadapter.

Also im Adapter -> laden aus eigener URL -> Beliebig -> https://github.com/EdgarM73/ioBroker.vis-material

Dann hast du in VIS links den Material und dort dann die widgets .

Ich hoffe, es klappt so

grüße

[EdgarM]

Falls es jemannd testen möchte, es sieht jetzt so aus:

Wenn nicht, bitte im Projekt CSS folgendes eintragen, ich habe aktuell das Gefühl, dass mein css nicht immer geladen wird:

.my_parent {
color:white;
}

.my_child {
position: absolute;
}

.opac {
background-color: white;
opacity: 0.08;
height:100%;
width:100%;
}