119 lines
3.1 KiB
JavaScript
119 lines
3.1 KiB
JavaScript
const DEV_HOST = "10.0.0.119";
|
|
|
|
const S = 100 / 27;
|
|
|
|
const display = document.getElementById("display");
|
|
|
|
const segments = [];
|
|
|
|
function url(protocol, path) {
|
|
const hostPart = location.host.substring(0, location.host.indexOf(":"))
|
|
const isLocal = hostPart === "" || hostPart === "localhost" || hostPart === "0";
|
|
const host = isLocal ? DEV_HOST : hostPart;
|
|
const port = isLocal ? "80" : location.port;
|
|
return `${protocol}://${host}:${port}${path}`;
|
|
}
|
|
|
|
function get(path) {
|
|
const request = new XMLHttpRequest();
|
|
request.open("GET", url("http", path), true);
|
|
request.send();
|
|
}
|
|
|
|
function drawDigit(x, y) {
|
|
drawPixel(x, y, 0, 3);
|
|
drawPixel(x, y, 0, 2);
|
|
drawPixel(x, y, 0, 1);
|
|
|
|
drawPixel(x, y, 1, 0);
|
|
drawPixel(x, y, 2, 0);
|
|
drawPixel(x, y, 3, 0);
|
|
|
|
drawPixel(x, y, 4, 1);
|
|
drawPixel(x, y, 4, 2);
|
|
drawPixel(x, y, 4, 3);
|
|
|
|
drawPixel(x, y, 4, 5);
|
|
drawPixel(x, y, 4, 6);
|
|
drawPixel(x, y, 4, 7);
|
|
|
|
drawPixel(x, y, 3, 8);
|
|
drawPixel(x, y, 2, 8);
|
|
drawPixel(x, y, 1, 8);
|
|
|
|
drawPixel(x, y, 0, 7);
|
|
drawPixel(x, y, 0, 6);
|
|
drawPixel(x, y, 0, 5);
|
|
|
|
drawPixel(x, y, 1, 4);
|
|
drawPixel(x, y, 2, 4);
|
|
drawPixel(x, y, 3, 4);
|
|
}
|
|
|
|
function drawPixel(offsetRasterX, offsetRasterY, innerRasterX, innerRasterY) {
|
|
const segment = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
const x = (offsetRasterX + innerRasterX) * S;
|
|
const y = (offsetRasterY + innerRasterY) * S;
|
|
segment.setAttribute("x", x + "vw");
|
|
segment.setAttribute("y", y + "vw");
|
|
segment.setAttribute("width", S + "vw");
|
|
segment.setAttribute("height", S + "vw");
|
|
segment.setAttribute("stroke", "white");
|
|
segment.setAttribute("fill", "none");
|
|
segment.setAttribute("id", "segment" + segments.length);
|
|
display.appendChild(segment);
|
|
segments.push(segment);
|
|
}
|
|
|
|
function drawDisplay(rasterX, rasterY) {
|
|
drawDigit(rasterX, rasterY);
|
|
rasterX += 6;
|
|
drawDigit(rasterX, rasterY);
|
|
rasterX += 6;
|
|
drawPixel(rasterX, rasterY, 0, 0);
|
|
drawPixel(rasterX, rasterY + 2, 0, 0);
|
|
drawPixel(rasterX, rasterY + 6, 0, 0);
|
|
drawPixel(rasterX, rasterY + 8, 0, 0);
|
|
rasterX += 2;
|
|
drawDigit(rasterX, rasterY);
|
|
rasterX += 6;
|
|
drawDigit(rasterX, rasterY);
|
|
}
|
|
|
|
function connect() {
|
|
console.log("connecting websocket...");
|
|
const socket = new WebSocket(url("ws", "/ws"));
|
|
socket.timeout = 1;
|
|
socket.addEventListener('open', _ => {
|
|
console.log('websocket connected');
|
|
segments.forEach(segment => {
|
|
segment.setAttribute("fill", "none");
|
|
segment.setAttribute("stroke", "none");
|
|
});
|
|
});
|
|
socket.addEventListener('message', event => {
|
|
const len = event.data.length;
|
|
let index = 0;
|
|
let start = 0;
|
|
while (start < len) {
|
|
const end = start + 3;
|
|
const color = event.data.substring(start, end);
|
|
const segment = segments[index];
|
|
segment.setAttribute("fill", "#" + color)
|
|
index++;
|
|
start = end;
|
|
}
|
|
});
|
|
socket.addEventListener('close', _ => {
|
|
console.log('websocket disconnected');
|
|
segments.forEach(segment => {
|
|
segment.setAttribute("fill", "none");
|
|
segment.setAttribute("stroke", "white");
|
|
});
|
|
setTimeout(connect, 1000);
|
|
});
|
|
}
|
|
|
|
drawDisplay(1, 1);
|
|
setTimeout(connect, 1000);
|