Es gibt gerade eine Mode unter den Livestreamern und zwar zeigen viele Youtube, Twitch Content Creator (wie man heute so neumodisch sagt) immer öfters die aktuellen Wetterdaten in ihrem Livestream oder Videos an. Man sieht dann das in Madeira gerade 28°C herrscht mit Sonnenschein etc. Die meisten Livestreamer machen das aber mit der Hand – das heisst also sie müssen jedesmal die Wetterangaben von Hand updaten.
Ich persönlich bin ja eine sehr faule Socke und darum möchte ich sowas automatisieren. Ich möchte also in der Lage sein, mein Livestream zu starten, ein Knopf zu drücken und die aktuellen Wetterdaten werden geladen und als Overlay umgewandelt. Da Gott die API erfunden hat, ist sowas gar nicht mal so schwer zu realisieren.
Natürlich habe ich das Ganze auch gleich programmiert.
Video
API Anmelden
Es gibt viele Wetterdienste die Gratis sind oder was kosten – gibt eine sehr grosse Auswahl. Ich persönlich habe mich jetzt mal für die Daten von https://openweathermap.org/ entschieden. Bevor man jetzt anfangen kann zu programmieren, muss man sich da ein Konto erstellen und den API Key generieren lassen (Achtung: bis der aktiviert ist kann es so 1-2h dauern).
Komplettes Script oder selbst Coden.
Als nächstes könnt ihr entweder den ganzen Code herunterladen. Ganz am Ende dieses Beitrags findet ihr einen Downloadlink zum Script. Danach müsst ihr nur noch das File mit einem Text Editor öffnen und eure API Daten eintragen und dann noch die Städte-ID eintragen. Und wenn ihr noch die Farben und die Schrift selbst anpassen wollt, könnt ihr das dann ebenfalls tun. Sichert das aktualisierte File ab und ladet es via FTP auf euren Server hoch und dann könnt ihr es in OBS oder Ecamm Live einbinden.
Leeres Text File öffnen
Wenn ihr das ganze aber selbst erstellen wollt, dann öffnet mit eurem Code-Editor oder Text-Editor ein neues File und speichert es als ≪wetter.php≫ ab.
PHP Befehle
Ganz Oben in diesem File packt ihr dann diesen PHP Code hinein. Danach müsst ihr nur noch euren API Key innerhalb der beiden Gänsefüsschen “ eintragen und eure CityID eingeben. Ich habe ein paar IDs als Beispiele unten hinzugefügt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php
$apikey ="###";
$cityID = "2867714"; //münchen
//$cityID = "2658822"; /* st.gallen */
//$cityID = "5128581"; /* new york */
//$cityID ="2950159"; /* berlin */
//$cityID = "2643743"; /* london */
$apiURL = "https://api.openweathermap.org/data/2.5/weather?id=" . $cityID . "&lang=de&units=metrics&appid=" . $apikey;
date_default_timezone_set('Europe/Berlin');
$wetter_data = json_decode(file_get_contents($apiURL), true);
$temperatur_f = $wetter_data['main']['temp'];
$temperatur_c = round($temperatur_f - 273.15);
$wetter_descr = $wetter_data['weather'][0]['description'];
$wetter_icon = $wetter_data['weather'][0]['icon'];
$name = $wetter_data['name'];
$symbol = "<img src='http://openweathermap.org/img/wn/$wetter_icon@2x.png' width='100'>";
?> |
HTML & CSS
Direkt nach dem PHP Code kommt dieser HTML und CSS Code hin. Wie ihr wisst passiert hier die ganze Design-Magie. Wenn ihr andere Schriftfarben nehmen wollt, dann könnt ihr die bei color jetzt ersetzen, ihr müsst dafür die entsprechende HEX Farbennummern eingeben. Die HEX-Codes sind die mit dem # – hier findet ihr eine gute Seite wo ihr eure HEX-Codes erzeugen könnt: https://htmlcolorcodes.com/. Ebenfalls könnt ihr die Schriftgrösse und die Abstände nach Oben anpasssen usw. In meinem Video habe ich die einzelnen Punkte detailliert angeschaut und erklärt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet">
<style>
body {
background: rgba(0,0,0,0);
}
.container {
display:flex;
width: 600px;
height: 100px;
}
.stadt, .temperatur {
margin-left: 20px;
}
.stadt {
font-family: 'Sigmar One', cursive; /* Google Font */
font-size: 35px; /* schriftgrösse */
margin-top: 25px; /* abstand zu oben */
color:#FFD9D9; /* Farbe der Schrift */
}
.temperatur {
font-family: 'Sigmar One', cursive; /* Google Font */
color:#CEFFE7; /* Farbe der Schrift */
margin-top: 25px; /* abstand zu oben */
font-size: 35px; /* schriftgrösse */
}
</style>
</head>
<body>
<div class="container">
<div class="stadt"><?php echo $name ?></div>
<div class="temperatur"><?php echo $temperatur_c ?> °C</div>
<div class="icon"><?php echo $symbol ?></div>
</div>
</body>
</html> |
File auf Server hochladen
Wenn ihr die Einstellungen alle angepasst habt, dann könnt ihr das File abspeichern und dann mit einem FTP Client auf euren Server laden. Danach müsst ihr nur noch den Pfad zum File finden und ihr könnt es am Browser testen. Seid ihr dann zufrieden, dann könnt ihr es als Widget Overlay in Ecamm einbinden und eure Szene damit verschönern.
Download
Hier könnt ihr das File direkt herunterladen. Einfach auf den Downloadlink klicken, herunterladen und das Zip File entpacken.
Hello Eric-Oliver
Danke für das tolle Script 🙂
Wie bekomme ich denn die „description“ mit angezeigt?
Leider funktioniert:
nicht. Kannst du mir helfen?
Danke für deine Arbeit und Liebe Grüsse
was für eine description meinst du?