Commit d5be805f authored by Scott Morgan's avatar Scott Morgan

Updated webpage - added buttons for mobile use and altered layout

parent fdb0d76d
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<h1>Robot Control Terminal</h1>
<img id="camera">
<p id="status">TEST</p>
<p id="usStatus">Distance: --</p>
<div id="headWrapper"><h1>Robot Control Terminal</h1></div>
<div class="wrapper">
<div class="updownBtn"><button class="btn" onclick="robotMove(1)">Forward</button></div>
<div class="leftrightBtn"><button class="btn" onclick="robotMove(4)">Left</button></div>
<div class="leftrightBtn"><button class="btn" onclick="robotMove(2)">Right</button></div>
<div class="updownBtn"><button class="btn" onclick="robotMove(3)">Reverse</button></div>
<p class="statustext" id="status">Press a button to control the robot!</p>
</div>
<div class="wrapper">
<button class="btn" id="camBtn" onclick="robotMove(6)">Activate obstacle avoidance!</button>
<p class="statustext" id="usStatus">Distance: --</p>
</div>
<div class="wrapper">
<button class="btn" onclick="robotMove(5)">Take Photo!</button><img id="camera">
</div>
<script type="text/javascript">
var config = {
......@@ -30,6 +45,58 @@ function updateUltrasonic() {
httpRequest.send();
}
function robotMove(direction) {
var url;
console.log("Direction id = " + direction);
switch(direction) {
case 1:
case "Up":
url = "/forwards";
break;
case 2:
case "Right":
url = "/right";
break;
case 3:
case "Down":
url = "/backwards";
break;
case 4:
case "Left":
url = "/left";
break;
case 5:
document.getElementById("status").innerHTML = "Acquiring image sensor data...";
document.getElementById("camera").src = "";
document.getElementById("camera").src = "/cheese";
break;
case 6:
config.ultrasonics = !config.ultrasonics;
if (config.ultrasonics) {
data.ultrasonicInterval = setInterval(updateUltrasonic, 2000);
} else {
clearInterval(data.ultrasonicInterval);
data.ultrasonicInterval = null;
}
break;
}
if (url) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", robotResponse);
oReq.open("GET", url);
oReq.send();
}
}
function keyEvent(e) {
var url;
console.log("Key pressed id = " + e.key);
......@@ -84,4 +151,4 @@ function keyEvent(e) {
document.addEventListener("keydown", keyEvent, false);
</script>
</body>
</html>
\ No newline at end of file
</html>
......@@ -4,12 +4,65 @@ body {
font-family: sans-serif;
}
.h1 {
#headWrapper {
width: 100%;
float: left;
text-align: center;
font-family: sans-serif;
}
.statustext {
float: left;
width: 100%;
}
.updownBtn{
float: left;
width: 100%;
}
.leftrightBtn {
float: left;
width: 50%;
}
.btn {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.btn:hover {
background-color:#5cbf2a;
}
.btn:active {
position:relative;
top:1px;
}
.wrapper {
float: left;
width: 100%;
text-align: center;
margin-top: 10%;
margin-bottom: 10%;
}
#camera {
width: 400px;
height: 300px;
border: solid 1px black;
}
\ No newline at end of file
float: left;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment