Liebe TabletUI Fan-Gemeinde,
suche einen Lösungsansatz um die Wetterdaten z.B. von netatmo auf einem Webcambild/Stream darzustellen. Ähnlich wie hier:
http://www.multipixx.com/images/media/was-multipixx-kann-14.png (http://www.multipixx.com/images/media/was-multipixx-kann-14.png)
http://www.multipixx.com/de/adminbereich-bedrucke
Angedacht war ein Overlay über ein Bild/Stream: https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image
Wie würdet ihr das angehen?
Grüsse
Hallo,
auf meiner Webseite blende ich das ganze über das Bild ein.
<div style="position:absolute; top:1px; left:200px; width:512px ;background-color:blue; "><script language="Javascript" src="./wetter.js"></script></div>
Hier nur die Temperatur die in die Datei wetter.js geschrieben und in abständen auf den Server hochgeladen wird.
Ist recht einfach gestrickt aber funktioniert für meine Zwecke ausreichend.
Gruß Rolf
Guck dir mal ImageMagick (https://www.imagemagick.org/Usage/annotating/) an.
Ist damit super über bash zu lösen.
Geil das man damit Geld verdienen kann 8)
Ich weiß nicht, ob das zum Thema passt, aber Daten auf einem Bild kann man so realisieren:
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Image</header>
<div data-type="image" data-url="http://lorempixel.com/200/200/" data-refresh="60" class="nocache"></div>
<div class="hbox ontop items-space-around bigger">
<div data-type="label" data-device="THSensorWZ" data-get="temperature"></div>
<div data-type="label" data-device="THSensorWZ" data-get="humidity"></div>
</div>
</li>
oder so
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>Image</header>
<div data-type="image" data-url="http://lorempixel.com/200/200/" data-refresh="60" class="nocache"></div>
<div class="ontop bigger" style="left: 90px; top: 40px;" data-type="label" data-device="THSensorWZ" data-get="temperature"></div>
<div class="ontop bigger" style="left: 90px; top: 80px;" data-type="label" data-device="THSensorWZ" data-get="humidity"></div>
</li>
Hallo,
ja das Label oben darüber zu platzieren ist so ähnlich wie ich es gemacht habe, da ich aber dies auf einem ext. Webserver nutze war das die einfachste Variante für mich. Innerhalb von FTUI ist das Label natürlich eleganter da es sich auch aktualisiert. Für das Beispiel von SirMarco könnte man vielleicht auch eine Backgroundfarbe setzen.
Gruß Rolf