WiFi Controlled Robot
Alex the Giant 
WiFi Camera Robot Software
Now that the wiring works, the motors can be controlled from a web page, and we know the URL for our camera works, we can finally put it all together. All we need to do is eject the microSD card from our Motion Shield and change the HTML code on our computer.
reloadImg() Javascript function.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var sendCommand = 1;
var count = 0;
document.addEventListener("keydown", function (evt) {
count = count + 1;
if(count > 10) {
count = 2;
}
if(count > 2) {
if (evt.keyCode == "38" && sendCommand) {
sendData("D1") // up arrow
sendCommand = 0;
}
else if (evt.keyCode == "40" && sendCommand) {
sendData("U1") // down arrow
sendCommand = 0;
}
else if (evt.keyCode == "37" && sendCommand) {
sendData("L1") // left arrow
sendCommand = 0;
}
else if (evt.keyCode == "39" && sendCommand) {
sendData("R1")// right arrow
sendCommand = 0;
}
}
});
document.addEventListener("keyup", function (evt) {
if(count > 2) {
if(evt.keyCode == "37" || evt.keyCode == "38" || evt.keyCode == "39" || evt.keyCode == "40") {
sendData("STOP");
sendCommand = 1;
}
count = 0;
}
else {
if (evt.keyCode == "38" && sendCommand) {
sendData("D3") // up arrow
}
else if (evt.keyCode == "40" && sendCommand) {
sendData("U3") // down arrow
}
else if (evt.keyCode == "37" && sendCommand) {
sendData("L3") // left arrow
}
else if (evt.keyCode == "39" && sendCommand) {
sendData("R3")// right arrow
}
count = 0;
sendCommand = 1;
}
});
function sendData(motorData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xhttp.open("GET", "setMotors?motorState="+motorData, true);
xhttp.send();
}
var refreshRate = 5; //ms
function reload()
{
setTimeout('reloadImg("refresh")',refreshRate)
};
function reloadImg(id)
{
var obj = document.getElementById(id);
var date = new Date();
obj.src = "http://[IP ADDRESS]:[PORT]/mjpeg/snap.cgi?chn=1?user=[USERNAME]&pwd=[PASSWORD]&t=" + Math.floor(date.getTime()/refreshRate);
}
</script>
</head>
<body>
<h2>SparkFun ESP32 Thing + WiFi Camera Remote Control</h2>
<img src="http://[IP ADDRESS]:[PORT]/mjpeg/snap.cgi?chn=1?user=[USERNAME]&pwd=[PASSWORD]" name="refresh" id="refresh" onload='reload(this)' onerror='reload(this)'>
<br/>
<ul>
<li>Use the arrow keys send commands to the motors.</li>
<li>When a arrow key is pressed, this page sends a XML request for the ESP32 to respond to.</li>
<li>The ESP32 responds by sending a motor command to the Serial Controlled Motor Driver. </li>
<li>By sending a XML request, we're able to control the motors without having to reload the page!</li>
</ul>
</body>
</html>
This HTML file has a few changes from the Controlling the Motors From a Web Page example. The most obvious change is the <img> tag which calls the reloadImg() function. In the reloadImg() Javascript function, we refresh the image every 5ms. In the URL of the function, we added on "&t=[Time in Milliseconds]"; without it the browser will assume it's the same image and to save time reload that image with the same image without talking to the camera. Adding on the time parameter will make the browser think it's a new URL and retrieve it instead of reloading the same image that it stored in the cached memory.