213 lines
5.9 KiB
HTML
213 lines
5.9 KiB
HTML
<!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: 170px;
|
|
height: 50px;
|
|
}
|
|
|
|
#box-top-left:before {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0px 0px 38px 38px;
|
|
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;
|
|
*/
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 50px 50px 50px 0px;
|
|
border-color: transparent transparent #000000ad transparent;
|
|
right: -75px;
|
|
top: -25px;
|
|
position: absolute;
|
|
transform: rotateZ(90deg);
|
|
}
|
|
|
|
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: "";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
div#temp-outside {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 25px;
|
|
/* transform: rotateZ(-45deg);*/
|
|
}
|
|
|
|
div#temp-outside:before {
|
|
content: "o ";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
div#temp-outside:after {
|
|
content: "";
|
|
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;
|
|
}
|
|
.notShown{
|
|
opacity: 0;
|
|
}
|
|
.slideIn{
|
|
opacity:0;
|
|
animation: slidein 1.5s cubic-bezier(0, 0, 0.02, 0.99) forwards;
|
|
}
|
|
|
|
@keyframes slidein{
|
|
0%{ opacity:0; transform:translateY(-50px); }
|
|
25%{ opacity:0.25; transform:translateY(-50px); }
|
|
100%{ opacity:1; transform:translateY(0px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="box-top-left" class="notShown">
|
|
<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">
|
|
console.log(window.location.href.toString().split(window.location.host)[1]);
|
|
|
|
var content = document.getElementById('content');
|
|
var box = document.getElementById('box-top-left');
|
|
var temp_inside = document.getElementById('temp-inside');
|
|
var temp_outside = document.getElementById('temp-outside');
|
|
|
|
let timer = 30*1000;
|
|
let data = {};
|
|
let ready = false;
|
|
let mode = "";
|
|
|
|
function run(){
|
|
if(ready){
|
|
box.classList.add('slideIn');
|
|
box.classList.remove('notShown')
|
|
switch(mode){
|
|
case "humidity":
|
|
temp_inside.innerHTML = data.inside.humidity + "%h"
|
|
temp_outside.innerHTML = Math.ceil(data.outside.main.humidity) + "%h"
|
|
mode = "";
|
|
break;
|
|
default:
|
|
temp_inside.innerHTML = data.inside.externalTemp + "°C"
|
|
temp_outside.innerHTML = Math.ceil(data.outside.main.temp) + "°C"
|
|
document.getElementById("weather").src = `http://openweathermap.org/img/wn/${data.outside.weather[0].icon}@2x.png`;
|
|
mode = "humidity";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
let inter = setInterval(run,timer)
|
|
|
|
|
|
var socket = new WebSocket(`ws://${window.location.hostname}:8990`);
|
|
//var socket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`);
|
|
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":
|
|
data = d;
|
|
if(!ready){
|
|
ready = true;
|
|
run();
|
|
}
|
|
break;
|
|
default:
|
|
content.innerHTML += message.data + '<br />';
|
|
break;
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
|
|
};
|
|
|
|
socket.onerror = function (error) {
|
|
console.log('WebSocket error: ' + error);
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |