INDEX_HTML

This commit is contained in:
Patrick Haßel 2025-01-07 18:51:17 +01:00
parent 33f7a3cfda
commit 3a1003b0af

View File

@ -1,29 +1,68 @@
#include "INDEX_HTML.h"
const char* INDEX_HTML = R"(<!DOCTYPE html>
const char *INDEX_HTML = R"(<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>TEST</title>
<script>
function connect() {
console.log("connecting");
const socket = new WebSocket('ws://10.0.0.119/ws');
socket.timeout = 1;
socket.addEventListener('open', _ => console.log('connected'));
socket.addEventListener('message', event => {
document.getElementById("content").innerText = JSON.stringify(JSON.parse(event.data), null, 2);
});
socket.addEventListener('close', _ => {
console.log('disconnected');
connect();
});
<style>
body {
font-size: 4vw;
}
connect();
</script>
@media (min-width: 1200px) {
body {
font-size: 16px;
}
}
</style>
</head>
<body>
<pre id="content"></pre>
<pre id="time"></pre>
<script>
const time = document.getElementById("time");
const content = document.getElementById("content");
let last = null;
function updateTime() {
if (last === null) {
time.innerText = "Noch keine Daten";
return;
}
const ageSeconds = Math.floor((Date.now() - last) / 1000);
if (ageSeconds === 0) {
time.innerText = "Gerade eben";
} else {
time.innerText = "Vor " + ageSeconds + " Sekunde" + (ageSeconds === 1 ? "" : "n");
}
}
function connect() {
console.log("connecting websocket...");
const host = location.host || "10.0.0.119";
const port = location.port || "80";
const socket = new WebSocket(`ws://${host}:${port}/ws`);
socket.timeout = 1;
socket.addEventListener('open', _ => console.log('websocket connected'));
socket.addEventListener('message', event => {
last = Date.now();
updateTime();
const parsed = JSON.parse(event.data);
console.log("websocket received", parsed);
content.innerText = JSON.stringify(parsed, null, 2);
});
socket.addEventListener('close', _ => {
console.log('websocket disconnected');
connect();
});
}
updateTime();
connect();
setInterval(updateTime, 1000);
</script>
</body>
</html>
)";
)";