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

0001

main
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

3
controller/express.js
View File

@ -17,5 +17,6 @@ export class Web{
}) })
app.use(express.static('static')); app.use(express.static('static'));
app.listen(Config.WEB_SERVER.PORT); 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'); ws.send('something');
}); });
this.wss = wss; 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; Storage.hub = x;
let web = new Web(); let web = new Web();
Storage.web = web;
let sock = new WebSock(); let sock = new WebSock();
let weather = new Weather(); let weather = new Weather();

83
static/index.html
View File

@ -20,7 +20,7 @@
background: #000000ad; background: #000000ad;
color: #FFF; color: #FFF;
font-weight: bold; font-weight: bold;
width: 200px; width: 170px;
height: 50px; height: 50px;
} }
@ -29,7 +29,7 @@
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 0px 0px 25px 25px; border-width: 0px 0px 38px 38px;
border-color: transparent transparent transparent #00aee7; border-color: transparent transparent transparent #00aee7;
left: 0; left: 0;
top: 0; top: 0;
@ -37,6 +37,7 @@
} }
#box-top-left:after { #box-top-left:after {
/*
content: ''; content: '';
width: 0; width: 0;
height: 0; height: 0;
@ -46,6 +47,17 @@
right: 0; right: 0;
top: 0; top: 0;
position: absolute; 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 { div#temp-inside {
@ -62,7 +74,7 @@
} }
div#temp-inside:after { div#temp-inside:after {
content: "°C"; content: "";
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -70,7 +82,7 @@
div#temp-outside { div#temp-outside {
position: absolute; position: absolute;
top: 25px; top: 25px;
left: 10px; left: 25px;
/* transform: rotateZ(-45deg);*/ /* transform: rotateZ(-45deg);*/
} }
@ -81,7 +93,7 @@
} }
div#temp-outside:after { div#temp-outside:after {
content: "°C"; content: "";
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -96,11 +108,24 @@
border-radius: 50px; border-radius: 50px;
margin-top: 5px; 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> </style>
</head> </head>
<body> <body>
<div id="box-top-left"> <div id="box-top-left" class="notShown">
<div id="temp-inside"> <div id="temp-inside">
</div> </div>
@ -115,30 +140,64 @@
<div id="content"></div> <div id="content"></div>
<script type="text/javascript"> <script type="text/javascript">
console.log(window.location.href.toString().split(window.location.host)[1]);
var content = document.getElementById('content'); var content = document.getElementById('content');
var box = document.getElementById('box-top-left');
var temp_inside = document.getElementById('temp-inside'); var temp_inside = document.getElementById('temp-inside');
var temp_outside = document.getElementById('temp-outside'); 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.onopen = function () {
socket.send('hello from the client'); socket.send('hello from the client');
}; };
socket.onmessage = function (message) { socket.onmessage = function (message) {
try { try {
let d = JSON.parse(message.data); let d = JSON.parse(message.data);
console.log(d); console.log(d);
switch (d.type) { switch (d.type) {
case "temp": case "temp":
temp_inside.innerHTML = d.inside.externalTemp data = d;
temp_outside.innerHTML = Math.ceil(d.outside.main.temp) if(!ready){
document.getElementById("weather").src = `http://openweathermap.org/img/wn/${d.outside.weather[0].icon}@2x.png`; ready = true;
run();
}
break; break;
default: default:
content.innerHTML += message.data + '<br />'; content.innerHTML += message.data + '<br />';
break; break;
} }
} catch (e) { } catch (e) {
} }