feat: show weather on display

RouHim · Feb 20, 2022 · a59cf4a · a59cf4a
1 parent 9837fdf
commit a59cf4a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/static/index.html b/static/index.html
@@ -9,6 +9,10 @@
 <div id="slideshow-layout">
     <image id="slideshow-image"></image>
     <div class="label" id="slideshow-metadata"></div>
+    <div class="weather">
+        <div id="icon"><img id="weather-icon" src="" alt="Weather icon"></div>
+        <div class="weather-temp" id="weather-temp"></div>
+    </div>
 </div>
 </body>
 </html>
diff --git a/static/script.js b/static/script.js
@@ -6,6 +6,19 @@ window.onload = () => {
     loadAvailableImages();
 };
 
+function loadCurrentWeather() {
+    const url = 'https://api.openweathermap.org/data/2.5/weather?q=Koblenz&appid=4021b60be2b322c8cfc749a6503bb553&units=metric&lang=de';
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            const weather = data.weather[0];
+            const temp = data.main.temp;
+            const icon = weather.icon;
+            document.getElementById("weather-temp").innerHTML = weather.description + ", " + Math.round(temp) + "°C";
+            document.getElementById("weather-icon").src = "https://openweathermap.org/img/w/" + icon + ".png";
+        });
+}
+
 function slideshowTick() {
     let photoDataRequest = new XMLHttpRequest();
     photoDataRequest.open("GET",
@@ -23,6 +36,8 @@ function slideshowTick() {
     if (currentIndex > maxIndex) {
         currentIndex = 0;
     }
+
+    loadCurrentWeather();
 }
 
 function startSlideshow(response) {

diff --git a/static/style.css b/static/style.css
@@ -32,4 +32,17 @@
     width: 100%;
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: black;
+}
+
+.weather {
+    position: absolute;
+    bottom: 5vh;
+    right: 5vh;
+    text-align: right;
+    color: #FFFFFF;
+    font-family: "Roboto Medium", serif;
+    background: transparent;
+    font-size: 30px;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
 }