Suche Lösungsansatz/Idee: Wetterdaten auf Webcambild

[SirMarco]

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/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

[rvideobaer]

Hallo,

auf meiner Webseite blende ich das ganze über das Bild ein.

Code Auswählen Erweitern

<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

[pataya]

Guck dir mal ImageMagick an.
Ist damit super über bash zu lösen.

Geil das man damit Geld verdienen kann

[setstate]

Ich weiß nicht, ob das zum Thema passt, aber Daten auf einem Bild kann man so realisieren:

Code Auswählen Erweitern


            <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

Code Auswählen Erweitern


            <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>


[rvideobaer]

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