-
Notifications
You must be signed in to change notification settings - Fork 0
/
control.html
84 lines (80 loc) · 4.69 KB
/
control.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta author="Hugo Woesthuis, code portions generated by ChatGPT">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire Control Panel</title>
<style>
/* Style to arrange buttons in a grid */
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px; /* Reduced gap between buttons */
margin: 20px;
}
/* Square button styling */
.button {
width: calc(100% - 10px); /* Adjust width considering padding and gap */
height: 100px; /* Equal height to create square buttons */
padding: 10px;
font-size: 16px;
text-align: center;
color: white;
border: none;
background-color: #e74c3c;
cursor: pointer;
}
/* Red button styling */
.red-button {
background-color: #e74c3c; /* Red color */
}
/* Green button styling */
.green-button {
background-color: #2ecc71; /* Green color */
}
/* Blue button styling */
.blue-button {
background-color: #3498db; /* Blue color */
}
</style>
</head>
<body>
<button class="red-button" id="armButton" onclick="armSystem()">Arm</button>
<button class="red-button blue-button" onclick="disarmSystem()">Disarm</button>
<h1>Fire Control</h1>
<div class="button-grid">
<!-- Sixteen buttons (disabled by default) -->
<button class="button" onclick="sendRequest(1)">Fire 1</button>
<button class="button" onclick="sendRequest(2)">Fire 2</button>
<button class="button" onclick="sendRequest(3)">Fire 3</button>
<button class="button" onclick="sendRequest(4)">Fire 4</button>
<button class="button" onclick="sendRequest(5)">Fire 5</button>
<button class="button" onclick="sendRequest(6)">Fire 6</button>
<button class="button" onclick="sendRequest(7)">Fire 7</button>
<button class="button" onclick="sendRequest(8)">Fire 8</button>
<button class="button" onclick="sendRequest(9)">Fire 9</button>
<button class="button" onclick="sendRequest(10)">Fire 10</button>
<button class="button" onclick="sendRequest(11)">Fire 11</button>
<button class="button" onclick="sendRequest(12)">Fire 12</button>
<button class="button" onclick="sendRequest(13)">Fire 13</button>
<button class="button" onclick="sendRequest(14)">Fire 14</button>
<button class="button" onclick="sendRequest(15)">Fire 15</button>
<button class="button" onclick="sendRequest(16)">Fire 16</button>
</div>
<h2>Effects</h2>
<div>
Fire cue
<input id="minCue" type="number" min="1" max="16" style="width: 40px;">
to
<input id="maxCue" type="number" min="1" max="16" style="width: 40px;">
with
<input id="interval" type="number" max="5" step=".01" style="width: 45px;">
seconds per cue inteval.
<button class="red-button" onclick="intervalEffect()">Fire effect</button>
</div>
<script>
function sleep(ms){return new Promise(resolve=>setTimeout(resolve,ms))}async function intervalEffect(){let mi=Number(document.getElementById('minCue').value);let ma=Number(document.getElementById('maxCue').value);let inv=Number(document.getElementById('interval').value);if(mi>=ma){alert("Maximum is higher than the minimum!");return}for(let i=mi;i<=ma;i+=1){fetch(`http://192.168.4.1/fire/${ i }`,{method:'GET'}).then(response=>{if(!response.ok){throw new Error('Network response was not ok')}console.log(`Fire command sent for button ${ number }`)}).catch(error=>{console.error('There was a problem with the fetch operation:',error)});await sleep(inv*1000)}}function sendRequest(number){fetch(`http://192.168.4.1/fire/${ number }`,{method:'GET'}).then(response=>{if(!response.ok){throw new Error('Network response was not ok')}console.log(`Fire command sent for button ${ number }`)}).catch(error=>{console.error('There was a problem with the fetch operation:',error)})}function armSystem(){fetch('http://192.168.4.1/arm',{method:'GET'}).then(response=>{if(!response.ok){throw new Error('Network response was not ok')}document.getElementById('armButton').classList.add('green-button');document.getElementById('armButton').classList.remove('red-button');const buttons=document.querySelectorAll('.button');buttons.forEach(button=>{button.disabled=false})}).catch(error=>{console.error('There was a problem with the arm request:',error)})}function disarmSystem(){fetch('http://192.168.4.1/reset',{method:'GET'}).then(response=>{if(!response.ok){throw new Error('Network response was not ok')}document.getElementById('armButton').classList.remove('green-button');document.getElementById('armButton').classList.add('red-button')}).catch(error=>{console.error('There was a problem with the disarm request:',error)})}
</script>
</body>
</html>