init

2022-05-20 07:55:08 +02:00
parent 270c31ad07
commit d521488087
12 changed files with 1621 additions and 0 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Temp</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+
+        * {
+            font-family: 'Roboto', sans-serif;
+        }
+
+        #box-top-left {
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: #000000ad;
+            color: #FFF;
+            font-weight: bold;
+            width: 200px;
+            height: 50px;
+        }
+
+        #box-top-left:before {
+            content: '';
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0px 0px 25px 25px;
+            border-color: transparent transparent transparent #00aee7;
+            left: 0;
+            top: 0;
+            position: absolute;
+        }
+
+        #box-top-left:after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 25px 0px 25px 25px;
+            border-color: transparent transparent #00aee7 transparent;
+            right: 0;
+            top: 0;
+            position: absolute;
+        }
+
+        div#temp-inside {
+            position: absolute;
+            top: 5px;
+            left: 50px;
+            /* transform: rotateZ(-45deg);*/
+        }
+
+        div#temp-inside:before {
+            content: "i ";
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        div#temp-inside:after {
+            content: "°C";
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        div#temp-outside {
+            position: absolute;
+            top: 25px;
+            left: 10px;
+            /* transform: rotateZ(-45deg);*/
+        }
+
+        div#temp-outside:before {
+            content: "o ";
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        div#temp-outside:after {
+            content: "°C";
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        img#weather {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            left: 125px;
+            /* filter: brightness(0.5); */
+            background: #999;
+            border-radius: 50px;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="box-top-left">
+        <div id="temp-inside">
+
+        </div>
+        <div id="temp-outside">
+
+        </div>
+        <div id="weather-img">
+            <img id="weather" src="http://openweathermap.org/img/wn/10d@2x.png" />
+        </div>
+    </div>
+
+    <div id="content"></div>
+
+    <script type="text/javascript">
+        var content = document.getElementById('content');
+        var temp_inside = document.getElementById('temp-inside');
+        var temp_outside = document.getElementById('temp-outside');
+        //var socket = new WebSocket(`ws://${window.location.hostname}:8990`);
+        var socket = new WebSocket(`ws://192.168.2.7:8990`);
+        socket.onopen = function () {
+            socket.send('hello from the client');
+        };
+
+        socket.onmessage = function (message) {
+
+            try {
+                let d = JSON.parse(message.data);
+                console.log(d);
+                switch (d.type) {
+                    case "temp":
+                        temp_inside.innerHTML = d.inside.externalTemp
+                        temp_outside.innerHTML = Math.ceil(d.outside.main.temp)
+                        document.getElementById("weather").src = `http://openweathermap.org/img/wn/${d.outside.weather[0].icon}@2x.png`;
+                        break;
+                    default:
+                        content.innerHTML += message.data + '<br />';
+                        break;
+                }
+            } catch (e) {
+
+            }
+
+        };
+
+        socket.onerror = function (error) {
+            console.log('WebSocket error: ' + error);
+        };
+    </script>
+</body>
+
+</html>