theenoro/weather-streamoverlay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0001

Browse Source
This commit is contained in:
Theenoro 2022-05-20 09:54:28 +02:00
parent d521488087
commit 6ead5e4b10
4 changed files with 80 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
controller/express.js
View File

@ -17,5 +17,6 @@ export class Web{
})
app.use(express.static('static'));
app.listen(Config.WEB_SERVER.PORT);
this.app = app;
}
}

6
controller/websocket.js
View File

@ -22,5 +22,11 @@ export class WebSock {
ws.send('something');
});
this.wss = wss;
/*Storage.web.app.on('upgrade', (request, socket, head) => {
wss.handleUpgrade(request, socket, head, socket => {
wss.emit('connection', socket, request);
});
});*/
}
}

1
index.js
View File

@ -13,6 +13,7 @@ let x = new Hub();
Storage.hub = x;
let web = new Web();
Storage.web = web;
let sock = new WebSock();
let weather = new Weather();

83
static/index.html
View File

@ -20,7 +20,7 @@
background: #000000ad;
color: #FFF;
font-weight: bold;
width: 200px;
width: 170px;
height: 50px;
}
@ -29,7 +29,7 @@
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 25px 25px;
border-width: 0px 0px 38px 38px;
border-color: transparent transparent transparent #00aee7;
left: 0;
top: 0;
@ -37,6 +37,7 @@
}
#box-top-left:after {
/*
content: '';
width: 0;
height: 0;
@ -46,6 +47,17 @@
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 {
@ -62,7 +74,7 @@
}
div#temp-inside:after {
content: "°C";
content: "";
display: inline-block;
margin-right: 5px;
}
@ -70,7 +82,7 @@
div#temp-outside {
position: absolute;
top: 25px;
left: 10px;
left: 25px;
/* transform: rotateZ(-45deg);*/
}
@ -81,7 +93,7 @@
}
div#temp-outside:after {
content: "°C";
content: "";
display: inline-block;
margin-right: 5px;
}
@ -96,11 +108,24 @@
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">
<div id="box-top-left" class="notShown">
<div id="temp-inside">
</div>
@ -115,30 +140,64 @@
<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');
//var socket = new WebSocket(`ws://${window.location.hostname}:8990`);
var socket = new WebSocket(`ws://192.168.2.7:8990`);
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":
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`;
data = d;
if(!ready){
ready = true;
run();
}
break;
default:
content.innerHTML += message.data + '<br />';
break;
}
} catch (e) {
}