1<html data-bs-theme="dark">
2
3<head>
4    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
5        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
6
7</head>
8
9<body>
10
11    <div class="container">
12
13        <label for="server-port" class="form-label">Server Port</label>
14        <div class="input-group mb-3">
15            <input type="text" class="form-control" aria-label="Port Number" value="8989" id="port">
16            <button class="btn btn-primary" type="button" onclick="connect()">Connect</button>
17        </div>
18
19        <div class="row">
20            <div class="col">
21                <label for="volume_setting" class="form-label">Volume Setting</label>
22                <input type="range" class="form-range" min="0" max="255" id="volume_setting">
23            </div>
24            <div class="col">
25                <label for="change_counter" class="form-label">Change Counter</label>
26                <input type="range" class="form-range" min="0" max="255" id="change_counter">
27            </div>
28            <div class="col">
29                <div class="form-check form-switch">
30                    <input class="form-check-input" type="checkbox" role="switch" id="muted">
31                    <label class="form-check-label" for="muted">Muted</label>
32                </div>
33            </div>
34        </div>
35
36        <button class="btn btn-primary" type="button" onclick="update_state()">Notify New Volume State</button>
37
38
39        <hr>
40        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
41            <h3>Log</h3>
42            <code id="socketState">
43            </code>
44        </div>
45    </div>
46
47    <script>
48        let portInput = document.getElementById("port")
49        let volumeSetting = document.getElementById("volume_setting")
50        let muted = document.getElementById("muted")
51        let changeCounter = document.getElementById("change_counter")
52        let socket = null
53
54        function connect() {
55            if (socket != null) {
56                return
57            }
58            socket = new WebSocket(`ws://localhost:${portInput.value}`);
59            socket.onopen = _ => {
60                socketState.innerText += 'OPEN\n'
61            }
62            socket.onclose = _ => {
63                socketState.innerText += 'CLOSED\n'
64                socket = null
65            }
66            socket.onerror = (error) => {
67                socketState.innerText += 'ERROR\n'
68                console.log(`ERROR: ${error}`)
69            }
70            socket.onmessage = (event) => {
71                socketState.innerText += `<- ${event.data}\n`
72                let volume_state = JSON.parse(event.data)
73                volumeSetting.value = volume_state.volume_setting
74                changeCounter.value = volume_state.change_counter
75                muted.checked = volume_state.muted ? true : false
76            }
77        }
78
79        function send(message) {
80            if (socket && socket.readyState == WebSocket.OPEN) {
81                let jsonMessage = JSON.stringify(message)
82                socketState.innerText += `-> ${jsonMessage}\n`
83                socket.send(jsonMessage)
84            } else {
85                socketState.innerText += 'NOT CONNECTED\n'
86            }
87        }
88
89        function update_state() {
90            send({
91                volume_setting: parseInt(volumeSetting.value),
92                change_counter: parseInt(changeCounter.value),
93                muted: muted.checked ? 1 : 0
94            })
95        }
96    </script>
97    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
98        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
99        crossorigin="anonymous"></script>
100
101</body>
102
103</html>