-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (108 loc) · 3.38 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>
<head>
<title>Artist Facing Screen</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 200px Helvetica, Arial;
overflow: hidden;
text-align: center;
}
</style>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
// For non-polled communication to the backend
var socket = io();
// State of what should be displayed how
var state = {
timestring: '<b>??:??:??</b><br />',
text: '[Connecting to WebSocket ...]'
}
var warningSign = '';
function checkConnected() {
warningSign = '';
if (!socket.connected) {
warningSign = '⚠';
updateText();
}
}
window.setInterval(checkConnected, 3000);
// Update the text to be displayed with the current clock/countdown + message
function updateText() {
document.body.innerHTML = warningSign + state.timestring + state.text;
// Sanity check: Make sure that the new text fits the screen size
// This can happen when changing modes with few text displayed
if ((document.body.scrollHeight > window.innerHeight) ||
(document.body.scrollWidth > window.innerWidth)) {
resizeFont();
}
}
// Determine if the current text would fit on the screen with given fontSize
function fitsTextIntoScreen(fontSize) {
document.body.style.fontSize = fontSize + 'px';
if ((document.body.scrollWidth <= window.innerWidth) &&
(document.body.scrollHeight <= window.innerHeight)) {
console.log('fitsTextIntoScreen: Tried ' + fontSize + ' fits: TRUE');
return true;
} else {
console.log('fitsTextIntoScreen: Tried ' + fontSize + ' fits: FALSE');
return false;
}
}
// Find the optimal font size that is as large as possible while still
// fitting all text without scrolling
// Google Chrome is a bit slow when trying linearly, so we do the
// "Binary Search" approach here
function resizeFont() {
var upperLimit = 10000;
var lowerLimit = 0;
var currentTry = Math.floor((upperLimit + lowerLimit) / 2);
// This function would loop endlessly on empty strings
if (document.body.innerText === '') {
document.body.style.fontSize = currentTry + 'px';
return;
}
while (true) {
// This is what we want: The text fits with that size
// but would not fit with size + 1
if (fitsTextIntoScreen(currentTry) && !fitsTextIntoScreen(currentTry+1)) {
break;
}
if (fitsTextIntoScreen(currentTry)) {
// Text is too small: Set the lowerLimit to currentTry
lowerLimit = currentTry + 1;
} else {
// Text is too large: Set the upperLimit to currentTry
upperLimit = currentTry - 1;
}
currentTry = Math.floor((upperLimit + lowerLimit) / 2);
}
document.body.style.fontSize = currentTry + 'px';
}
// When a new command comes is, handle that
socket.on('update', (newState) => {
var textChanged = false;
if ((newState.text != state.text) || (newState.mode != state.mode)) {
textChanged = true;
}
state = newState;
console.log(state);
updateText();
if (textChanged) {
resizeFont();
}
});
// Initial updates with a timeout so the DOM has loaded
window.setTimeout(updateText, 10);
window.setTimeout(resizeFont, 100);
// Update the font size when the window size changes
window.onresize = resizeFont;
</script>
<body>
</body>
</html>