<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
const WSState = { CONNECTING:0, OPEN:1, CLOSING:1, CLOSED: 1 };
let scenes = [];
let ws;
function clickedScene(index)
{
const name = scenes[index];
if (ws && ws.readyState == WSState.Open)
{
ws.send(JSON.stringify({set_scene:{index, name}}));
}
}
async function go()
{
await $.when($.ready);
function doWebsocket()
{
ws = new WebSocket(`ws://${document.location.host}:8080`);
ws.onclose = () =>
{
document.getElementById('scenelist').innerHTML = "";
setTimeout(doWebsocket, 3000);
};
ws.onmessage = ev =>
{
try
{
const data = JSON.parse(ev.data);
if (Array.isArray(data.scenes))
{
scenes = data.scenes;
document.getElementById('scenelist').innerHTML =
data.scenes.map((scene, i) =>
`<input type=button onclick='clickedScene(${i})' value="${scene}">`
).join('<br>');
}
}
catch {}
};
}
doWebsocket();
}
go();
</script>
</head>
<body>
<div id=scenelist></div>
</body>
</html>
