At the Singapore Hour of Code event I got a great tip from Melvin on how to set up a web control page for the BeerBot. In this post I’ll describe the first working version, which you can see in the video below (apologies for the robotic monotone on the voiceover).
The BeerBot is a Raspberry Pi/Mindstorms powered robot that can be steered from a control computer. It streams video to the control computer using MJPG Streamer. Before now I have used an SSH interface to control the BeerBot, and then I’ve used a separate browser window to show the video stream from MJPG Streamer. This means that you have two windows open at once – one for control and one for video. I’ve thought before about how to integrate both functions into a webpage, but I didn’t know where to start. Melvin’s suggestion was to use the CherryPy python web framework to implement some APIs that can control the robot. Since the current control software is written in Python using the nxt-python library this seemed like a great choice.
I started by going through the tutorials on the CherryPy site. As usual I was almost instantly distracted by a side project, in this case working out what text editor I was going to use. I read somewhere that Vim is extremely powerful, so I decided to give that a go. It is indeed very powerful, but it is not instantly intuitive (e.g. to move the cursor down you use the “j” key). Fortunately it comes with a very good tutorial in the form of a text file that includes both instructions and exercises for the tutorial. Once I’d done the tutorial and had set up syntax highlighting and sensible options for autotab I started to see why it is a great tool. I will keep practicing with it.
After that detour was complete I went through the CherryPy tutorials. I did the tutorials on the BeerBot using an SSH connection from my desktop computer and tested the results using a web browser on my desktop computer pointing at the BeerBot. By default CherryPy only allows access from the same computer so I had to change that setting first. I also had to change the port that CherryPy uses since MJPG Streamer is already using the default port of 8080. I set it to 8099.
To get everything to appear properly on the webpage I had to use css to put a wrapper around the video stream. Without this wrapper all the buttons were hidden behind the video.
I am learning how to use Github to keep track of edits to the code. You can see the latest version here.
Learning points from this project
This was a great project for learning about a few hitherto mysterious bits of tech and how they link together:
- html is what you need to add elements to a webpage
- CSS makes everything pretty and readable by human beings