BatmobileWeb/index.html at master · Samleo8/BatmobileWeb · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Batmobile Bluetooth Test</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="index.css">
	</head>

	<body>
		<div id="controls">
			<h1 class="title">Batmobile Bluetooth Test
				<div class="version">v2.3.0</div>
			</h1>
			<div id="connection_controls">
				<div class="button" id="connect">Connect</div>
				<div class="button" id="disconnect">Disconnect</div>
			</div>
			<div id="y-padding"></div>
			<div id="motor_control">
				CPU Cycles: <input type="number" min="0" max="1000" id="input_cpu_cycles" value="0" />
				Speed: <input type="number" min="-126" max="126" id="input_speed" value="126" />
				<div class="x-separator"></div>
				<div class="button" id="move_motor_left">Left Motor</div>
				<div class="button" id="move_motor_right">Right Motor</div>
				<div class="button" id="move_motor_both">Both Motors</div>
				<div class="x-separator"></div>
				<div class="button" id="stop_motor_left">Stop Left</div>
				<div class="button" id="stop_motor_right">Stop Right</div>
				<div class="button" id="stop_motor_both">Stop Both</div>
			</div>
		</div>
		<div class="flex-container">
			<div id="instructions" class="flex-item flex-50">
				<h1 class="smallcaps title">Controls</h1>
				<div class="flex-container controls-container" id="controls-keyboard">
					<div class="flex-item border-override">
						<h2 class="smallcaps">Motor</h2>
						<table class="control-table">
							<tr>
								<th>Left</th>
								<th>Right</th>
								<th>Stop</th>
							</tr>
							<tr>
								<td>W/S</td>
								<td>I/K</td>
								<td>Space<br>Enter</td>
							</tr>
						</table>
					</div>
					<div class="flex-item border-override">
						<h2 class="smallcaps">Global</h2>
						<table class="control-table">
							<tr>
								<th>Forth</th>
								<th>Back</th>
								<th colspan="2">Rotate</th>
							</tr>
							<tr>
								<td>Up &#8593;</td>
								<td>Down &#8595;</td>
								<td>&#8592; &nbsp;Left</td>
								<td>Right &#8594;</td>
							</tr>
						</table>
					</div>
				</div>
				<div id="controls-touch" class="controls-container">
					<h2 class="smallcaps">Joysticks</h2>
					<div>Use the joysticks to control the left and right motors respectively.</div>
				</div>
			</div>
			<div id="logs" class="flex-item">
				<h1 class="smallcaps title">Logs
					<div onclick="clearLogs()" id="clearLogsButton" class="button">Clear</div>
				</h1>
				<div id="logs_out">

				</div>
			</div>
		</div>
		<div class="joystick-padding">
		</div>

		<div id="joystick-container">
			<div class="joystick" id="joystick_left"></div>
			<div class="joystick" id="joystick_right"></div>
		</div>

		<script type="text/javascript" src="joystick.js"></script>
		<script type="text/javascript" src="poweredup.js"></script>
		<script type="text/javascript" src="index.js"></script>
	</body>
</html>