CelliesProjects · February 4, 2025 14:56 · CelliesProjects · Feb 3, 2025 · CelliesProjects · Feb 3, 2025
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aquacontrol index</title>
    <!-- Include minified reconnecting-websocket library from https://github.com/joewalnes/reconnecting-websocket -->
    <script>!function (a, b) { "function" == typeof define && define.amd ? define([], b) : "undefined" != typeof module && module.exports ? module.exports = b() : a.ReconnectingWebSocket = b() }(this, function () { function a(b, c, d) { function l(a, b) { var c = document.createEvent("CustomEvent"); return c.initCustomEvent(a, !1, !1, b), c } var e = { debug: !1, automaticOpen: !0, reconnectInterval: 1e3, maxReconnectInterval: 3e4, reconnectDecay: 1.5, timeoutInterval: 2e3 }; d || (d = {}); for (var f in e) this[f] = "undefined" != typeof d[f] ? d[f] : e[f]; this.url = b, this.reconnectAttempts = 0, this.readyState = WebSocket.CONNECTING, this.protocol = null; var h, g = this, i = !1, j = !1, k = document.createElement("div"); k.addEventListener("open", function (a) { g.onopen(a) }), k.addEventListener("close", function (a) { g.onclose(a) }), k.addEventListener("connecting", function (a) { g.onconnecting(a) }), k.addEventListener("message", function (a) { g.onmessage(a) }), k.addEventListener("error", function (a) { g.onerror(a) }), this.addEventListener = k.addEventListener.bind(k), this.removeEventListener = k.removeEventListener.bind(k), this.dispatchEvent = k.dispatchEvent.bind(k), this.open = function (b) { h = new WebSocket(g.url, c || []), b || k.dispatchEvent(l("connecting")), (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "attempt-connect", g.url); var d = h, e = setTimeout(function () { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "connection-timeout", g.url), j = !0, d.close(), j = !1 }, g.timeoutInterval); h.onopen = function () { clearTimeout(e), (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onopen", g.url), g.protocol = h.protocol, g.readyState = WebSocket.OPEN, g.reconnectAttempts = 0; var d = l("open"); d.isReconnect = b, b = !1, k.dispatchEvent(d) }, h.onclose = function (c) { if (clearTimeout(e), h = null, i) g.readyState = WebSocket.CLOSED, k.dispatchEvent(l("close")); else { g.readyState = WebSocket.CONNECTING; var d = l("connecting"); d.code = c.code, d.reason = c.reason, d.wasClean = c.wasClean, k.dispatchEvent(d), b || j || ((g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onclose", g.url), k.dispatchEvent(l("close"))); var e = g.reconnectInterval * Math.pow(g.reconnectDecay, g.reconnectAttempts); setTimeout(function () { g.reconnectAttempts++, g.open(!0) }, e > g.maxReconnectInterval ? g.maxReconnectInterval : e) } }, h.onmessage = function (b) { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onmessage", g.url, b.data); var c = l("message"); c.data = b.data, k.dispatchEvent(c) }, h.onerror = function (b) { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onerror", g.url, b), k.dispatchEvent(l("error")) } }, 1 == this.automaticOpen && this.open(!1), this.send = function (b) { if (h) return (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "send", g.url, b), h.send(b); throw "INVALID_STATE_ERR : Pausing to reconnect websocket" }, this.close = function (a, b) { "undefined" == typeof a && (a = 1e3), i = !0, h && h.close(a, b) }, this.refresh = function () { h && h.close() } } return a.prototype.onopen = function () { }, a.prototype.onclose = function () { }, a.prototype.onconnecting = function () { }, a.prototype.onmessage = function () { }, a.prototype.onerror = function () { }, a.debugAll = !1, a.CONNECTING = WebSocket.CONNECTING, a.OPEN = WebSocket.OPEN, a.CLOSING = WebSocket.CLOSING, a.CLOSED = WebSocket.CLOSED, a });</script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            display: flex;
            gap: 10px;
        }

        .channel {
            width: 100px;
            height: 50px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid #000;
        }
    </style>

 </head>

 <body>
    <h1>Aquacontrol index</h1>
    <div class="container" id="channelContainer">
        <div class="channel">Channel 0</div>
        <div class="channel">Channel 1</div>
        <div class="channel">Channel 2</div>
        <div class="channel">Channel 3</div>
        <div class="channel">Channel 4</div>
    </div>
    <div id="connection-status">Connecting...</div>
    <script>
        let ws;

        function createWebSocket() {
            if (document.visibilityState === 'hidden')
                return;

            if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
                console.log("WebSocket already exists");
                return;
            }

            ws = new ReconnectingWebSocket("ws://" + window.location.host + "/websocket");
            console.log("ws://" + window.location.host + "/websocket");

            ws.addEventListener('open', () => {
                document.getElementById('connection-status').textContent = 'Connected';
                console.log('WebSocket connected');
            });

            ws.addEventListener('close', () => {
                if (ws) {
                    ws = null; // Ensure a fresh instance
                    setTimeout(createWebSocket, 500); // Delayed reconnect
                }
            });

            ws.addEventListener('message', (event) => {
                console.log('Message received:', event.data);
                // Handle incoming messages here
            });

            ws.addEventListener('error', (error) => {
                console.error('WebSocket error:', error);
            });
        }

        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState === 'hidden') {
                // Close connection when page is hidden
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.close();
                }
            } else {
                // Reconnect when page becomes visible
                if (!ws || ws.readyState === WebSocket.CLOSED) {
                    createWebSocket();
                }
            }
        });

        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".channel").forEach((div, index) => {
                div.addEventListener("click", function () {
                    window.location = "/editor?channel=" + index;
                });
            });
            createWebSocket();
        });

        window.addEventListener('pageshow', (event) => {
            if (event.persisted) { // Page was restored from bfcache
                createWebSocket();
            }
        });

        window.addEventListener('beforeunload', () => {
            if (ws) {
                ws.close(1000, "Page unloading"); // Cleanly close with a normal closure code
            }
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Aquacontrol index</title>
	<!-- Include minified reconnecting-websocket library from https://github.com/joewalnes/reconnecting-websocket -->
	<script>!function (a, b) { "function" == typeof define && define.amd ? define([], b) : "undefined" != typeof module && module.exports ? module.exports = b() : a.ReconnectingWebSocket = b() }(this, function () { function a(b, c, d) { function l(a, b) { var c = document.createEvent("CustomEvent"); return c.initCustomEvent(a, !1, !1, b), c } var e = { debug: !1, automaticOpen: !0, reconnectInterval: 1e3, maxReconnectInterval: 3e4, reconnectDecay: 1.5, timeoutInterval: 2e3 }; d \|\| (d = {}); for (var f in e) this[f] = "undefined" != typeof d[f] ? d[f] : e[f]; this.url = b, this.reconnectAttempts = 0, this.readyState = WebSocket.CONNECTING, this.protocol = null; var h, g = this, i = !1, j = !1, k = document.createElement("div"); k.addEventListener("open", function (a) { g.onopen(a) }), k.addEventListener("close", function (a) { g.onclose(a) }), k.addEventListener("connecting", function (a) { g.onconnecting(a) }), k.addEventListener("message", function (a) { g.onmessage(a) }), k.addEventListener("error", function (a) { g.onerror(a) }), this.addEventListener = k.addEventListener.bind(k), this.removeEventListener = k.removeEventListener.bind(k), this.dispatchEvent = k.dispatchEvent.bind(k), this.open = function (b) { h = new WebSocket(g.url, c \|\| []), b \|\| k.dispatchEvent(l("connecting")), (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "attempt-connect", g.url); var d = h, e = setTimeout(function () { (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "connection-timeout", g.url), j = !0, d.close(), j = !1 }, g.timeoutInterval); h.onopen = function () { clearTimeout(e), (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "onopen", g.url), g.protocol = h.protocol, g.readyState = WebSocket.OPEN, g.reconnectAttempts = 0; var d = l("open"); d.isReconnect = b, b = !1, k.dispatchEvent(d) }, h.onclose = function (c) { if (clearTimeout(e), h = null, i) g.readyState = WebSocket.CLOSED, k.dispatchEvent(l("close")); else { g.readyState = WebSocket.CONNECTING; var d = l("connecting"); d.code = c.code, d.reason = c.reason, d.wasClean = c.wasClean, k.dispatchEvent(d), b \|\| j \|\| ((g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "onclose", g.url), k.dispatchEvent(l("close"))); var e = g.reconnectInterval * Math.pow(g.reconnectDecay, g.reconnectAttempts); setTimeout(function () { g.reconnectAttempts++, g.open(!0) }, e > g.maxReconnectInterval ? g.maxReconnectInterval : e) } }, h.onmessage = function (b) { (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "onmessage", g.url, b.data); var c = l("message"); c.data = b.data, k.dispatchEvent(c) }, h.onerror = function (b) { (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "onerror", g.url, b), k.dispatchEvent(l("error")) } }, 1 == this.automaticOpen && this.open(!1), this.send = function (b) { if (h) return (g.debug \|\| a.debugAll) && console.debug("ReconnectingWebSocket", "send", g.url, b), h.send(b); throw "INVALID_STATE_ERR : Pausing to reconnect websocket" }, this.close = function (a, b) { "undefined" == typeof a && (a = 1e3), i = !0, h && h.close(a, b) }, this.refresh = function () { h && h.close() } } return a.prototype.onopen = function () { }, a.prototype.onclose = function () { }, a.prototype.onconnecting = function () { }, a.prototype.onmessage = function () { }, a.prototype.onerror = function () { }, a.debugAll = !1, a.CONNECTING = WebSocket.CONNECTING, a.OPEN = WebSocket.OPEN, a.CLOSING = WebSocket.CLOSING, a.CLOSED = WebSocket.CLOSED, a });</script>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

	.container {
	display: flex;
	gap: 10px;
	}

	.channel {
	width: 100px;
	height: 50px;
	background-color: lightblue;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid #000;
	}
	</style>

	</head>

	<body>
	<h1>Aquacontrol index</h1>
	<div class="container" id="channelContainer">
	<div class="channel">Channel 0</div>
	<div class="channel">Channel 1</div>
	<div class="channel">Channel 2</div>
	<div class="channel">Channel 3</div>
	<div class="channel">Channel 4</div>
	</div>
	<div id="connection-status">Connecting...</div>
	<script>
	let ws;

	function createWebSocket() {
	if (document.visibilityState === 'hidden')
	return;

	if (ws && (ws.readyState === WebSocket.OPEN \|\| ws.readyState === WebSocket.CONNECTING)) {
	console.log("WebSocket already exists");
	return;
	}

	ws = new ReconnectingWebSocket("ws://" + window.location.host + "/websocket");
	console.log("ws://" + window.location.host + "/websocket");

	ws.addEventListener('open', () => {
	document.getElementById('connection-status').textContent = 'Connected';
	console.log('WebSocket connected');
	});

	ws.addEventListener('close', () => {
	if (ws) {
	ws = null; // Ensure a fresh instance
	setTimeout(createWebSocket, 500); // Delayed reconnect
	}
	});

	ws.addEventListener('message', (event) => {
	console.log('Message received:', event.data);
	// Handle incoming messages here
	});

	ws.addEventListener('error', (error) => {
	console.error('WebSocket error:', error);
	});
	}

	document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'hidden') {
	// Close connection when page is hidden
	if (ws && ws.readyState === WebSocket.OPEN) {
	ws.close();
	}
	} else {
	// Reconnect when page becomes visible
	if (!ws \|\| ws.readyState === WebSocket.CLOSED) {
	createWebSocket();
	}
	}
	});

	document.addEventListener("DOMContentLoaded", function () {
	document.querySelectorAll(".channel").forEach((div, index) => {
	div.addEventListener("click", function () {
	window.location = "/editor?channel=" + index;
	});
	});
	createWebSocket();
	});

	window.addEventListener('pageshow', (event) => {
	if (event.persisted) { // Page was restored from bfcache
	createWebSocket();
	}
	});

	window.addEventListener('beforeunload', () => {
	if (ws) {
	ws.close(1000, "Page unloading"); // Cleanly close with a normal closure code
	}
	});
	</script>
	</body>

	</html>