Step 1: The HTML
The HTML behind the tank’s web interface is pretty simple – just a big
div for the webcam video and a 3-by-3 table of buttons for the control side.
mjpg-streamer package. Although
Each control button on the Web UI has an
onmousedown and an
You can see and download all the web UI code on GitHub.
Step 3: The C
The early control code for the Raspberry Tank relied on keypresses to control the tank’s main functions. Now that we have a web interface, we need to modify the code to make it accept commands from the Web UI.
Mongoose’s single C file was included in the build, and the code modified to include a Mongoose server spawned with pthreads, which wrote the command string it received from the Web UI to an internal variable. In the other, “old” section of code, the decision-making logic was changed so that rather than expecting keystrokes, it read that internal variable and issued control commands based on it.
You can see and download all the back-end code on GitHub too.
…now the Raspberry Tank can be controlled remotely from a web interface, complete with streaming video.
You may notice in these photos that the Pi is not currently inside the tank. There are a couple more issues that need to be addressed before full integration can occur, and these will be explained on day 17 of the Raspberry Tank Build Diary!