154 lines
4.0 KiB
HTML
154 lines
4.0 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: 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> |