-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
52 lines (41 loc) · 1.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="en">
<head>
<title>Artnet Weblight</title>
<link href="./css/style.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function () {
const socket = io();
let deviceNr = window.location.pathname.substr(1);
if (!deviceNr) deviceNr = 0;
const deviceId = "dev" + deviceNr;
const print = function (input) {
return "Device " + deviceNr + " | Red: " + input.r + " Green: " + input.g + " Blue: " + input.b + " Alpha " + input.a +
" Border: " + input.border + " Blur: " + input.blur + " Image: " + input.image;
};
socket.on(deviceId, function (msg) {
if (window.location.search.substr(1) === 'debug') {
$('#debug').text(print(msg));
$('#debug').css('display', 'inline');
}
$('body').css('background-color', 'rgba(' + msg.r + ', ' + msg.g + ', ' + msg.b + ', ' + msg.a + ')');
const screenSizeMax = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
$('body').css('box-shadow', '0px 0px ' + (msg.blur / 255 * screenSizeMax / 4) + 'px ' + (msg.border / 255 * screenSizeMax / 2 + 1) + 'px #000000 inset');
if (msg.image !== "none") {
$('body').css('background-image', 'url(/' + msg.image + ')');
} else {
$('body').css('background-image', '');
}
});
});
</script>
</head>
<body>
<div>
<span id="debug"></span>
</div>
<!--<div id="circlebox"></div>-->
</body>
</html>