App/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="CSS/main.css">
</head>
<body>
<div class="main">
<h1 class="text" id="main-header">Dashboard - Robotics GUI</h1>
<p id="marker"></p>
<!-- <iframe src="http://localhost:5000" width="960" height="720" style="display:inline-block"></iframe> -->
<img src="http://10.0.0.10:8080" width="auto" height="auto"></img>
<canvas id="flippers" width="350" height="300" style="display:inline-block"></canvas>
<div style="display:inline-block">
<p id="leftWheelsDirection">Left wheels: forwards</p>
<p id="rightWheelsDirection">Right wheels: forwards</p>
<p id="flipperDirection">Flippers: front</p>
</div>
<div class="slidecontainer">
<button type="button" name="lookLeft" onclick="cameraLeft()">Look left</button>
<button type="button" name="lookCenter" onclick="centerCamera()">Center the camera</button>
<button type="button" name="move" onclick="cameraRight()">Look right</button>
<button type="button" name="move" onclick="moveStraight()">Move forward</button>
<button type="button" name="button" onclick="stop()">Stop</button>
<h4>Grabber Direction </h4>
<p id="grabberPositionDisplay">Grabber position: 0%</p>
<form id="grabberParent">
<input type="checkbox" name="Servo 1" value="1" checked>
<label for="1">Grabber Servo 1</label>
<br>
<input type="checkbox" name="Servo 2" value="2" checked>
<label for="2">Grabber Servo 2</label>
<br>
<input type="checkbox" name="Servo 3" value="3" checked>
<label for="3">Grabber Servo 3</label>
</form>
</div>
<div class="text-content">
<label class="form-switch">
Hazmat Detection
<input type="checkbox" id="check1">
<i></i>
</label>
<br>
<label class="form-switch">
General Detection
<input type="checkbox" id="check2">
<i></i>
</label>
<label class="form-switch">
Code Scanning
<input type="checkbox" id="check3">
<i></i>
</label>
<label class="form-switch">
Point Tracking
<input type="checkbox" id="check4">
<i></i>
</label>
</div>
</div>
<script type="text/javascript" src="JS/main.js"></script>
<script type="text/javascript" src="JS/client.js"></script>
</body>
</html>