Skip to content

Commit c77be1a

Browse files
trybulatrybula
authored
WIP webui
1 parent ca6ac5f commit c77be1a

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

‎wip_webui/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CD Socket.IO Client</title>
7+
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
8+
<style>
9+
.tab{
10+
display: inline;
11+
visibility: hidden;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<span id="status">Server disconnected</span>
17+
<form id="nameForm">
18+
<button type="submit" >Request data</button>
19+
</form>
20+
<div id="response">
21+
Track: <div class="tab">...</div> <span id="track"></span><br>
22+
Total tracks: <div class="tab">...</div> <span id="tot_track"></span><br>
23+
Title: <div class="tab">...</div> <span id="title"></span><br>
24+
Artist: <div class="tab">...</div> <span id="artist"></span><br>
25+
Album: <div class="tab">...</div> <span id="album"></span><br>
26+
Time: <div class="tab">...</div> <span id="time"></span><br>
27+
</div>
28+
29+
<script>
30+
// Connect to the Socket.IO server
31+
const socket = io('http://127.0.0.1:5000');
32+
status_box=document.querySelector("#status");
33+
socket.on("connect", () => {
34+
status_box.innerHTML = "Server connected";
35+
});
36+
socket.on("disconnect", () => {
37+
status_box.innerHTML = "Server disconnected";
38+
});
39+
document.getElementById('nameForm').addEventListener('submit', function(e) {
40+
e.preventDefault(); // Prevent the form from submitting the traditional way
41+
socket.emit('request_data', null);
42+
});
43+
// Listen for the "hello_response" event from the server
44+
socket.on('playing_data', function(data) {
45+
console.log(data);
46+
document.getElementById('track').innerHTML=data[0];
47+
document.getElementById('tot_track').innerHTML=data[1];
48+
document.getElementById('title').innerHTML=data[2];
49+
document.getElementById('artist').innerHTML=data[3];
50+
document.getElementById('album').innerHTML=data[4];
51+
document.getElementById('time').innerHTML=data[5];
52+
});
53+
// Function to send a request every second
54+
function sendRequest() {
55+
socket.emit('request_data', null);
56+
}
57+
58+
// Set the interval to 1 second (1000 milliseconds)
59+
const intervalId = setInterval(sendRequest, 1000);
60+
61+
// To stop sending requests, you can use clearInterval(intervalId)
62+
// clearInterval(intervalId);
63+
64+
</script>
65+
</body>
66+
</html>
67+

0 commit comments

Comments
 (0)