Web Controlled BeerBot

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.

Vim in action
Vim in action

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.

The early tutorials show you how to set up CherryPy to send out a webpage when it gets a particular request from a client. I needed to put the video streaming code in that webpage. MJPG Streamer comes with a few demo pages including one for javascript. I copied the code from that page and included it in an index.html file for CherryPy to deliver.

The later CherryPy tutorials go through setting up APIs and also show a demonstration of ajax. As I understand it, ajax allows you to send signals in the background without having to load a new webpage. This technique is what I needed to be able to control the robot. I made some APIs for robot movements etc. in the python script running on the BeerBot and in the javascript portion of the index.html file I created some buttons that linked to jquery functions. This is the first time I’ve done anything with javascript. Before this project I didn’t fully understand that when you are interacting with a website there are usually two programs running – the one on the server (my CherryPy web framework) and one on the client’s computer (the javascript that sends calls to the APIs when buttons are pressed).

BeerBot interface (BeerBot is looking in a mirror). As well as buttons there is an input field for entering non-default distances
As well as buttons there is an input field for entering non-default distances

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:

  • CherryPy is a very quick, easy and powerful way to do cool web stuff using Python. It can deliver pages that include html and javascript
  • html is what you need to add elements to a webpage
  • Javascript and jquery can make elements in a webpage do smart things (like call APIs)
  • CSS makes everything pretty and readable by human beings
100% Fan

Ducted Fan Part II and Octoprint

Last month I posted about installing a ducted fan on Squirty. After installing the fan I read issue 42 of MAKE magazine and became excited about two ideas to try for testing out the ducted fan. As is often the case, I got a bit distracted trying out these ideas so it’s taken me a while to get round to answering the original question of whether the ducted fan helps with print quality or not (short answer is yes, but more work needed for Squirty to match commercial desktop printers).
Continue reading

Fan held in place with electrical tape

Ducted Fan Part 1

The suckiness of Squirty’s ability to make nice overhangs and bridges has been getting to me recently. I have been really impressed by the cool support-free prints created by LeFabShop on thingiverse but then have been disappointed when I find that they don’t quite work for Squirty. Their elephant turned out nicely but when I tried to print their awesome car it failed to print the tougher parts of the print. I’ve also failed to make a home hydroponics kit that will hopefully stop our houseplants from dying. I’ve now installed a ducted fan attachment today which hopefully will allow me to make overhangs and bridges without support.
Continue reading

Slic3r 117

Slic3r Profiles Data Directory

If you are used to using the version of Slic3r that came with your version of pronterface (V 0.9.9 for me) and then download the new version (V 1.1.7) you may be horrified to discover all of your print profiles have gone. You then may be even more horrified when you open the old version of slic3r and realise that your print profiles aren’t there either. Trying to load them by going to File-Load Config and navigating to the .ini file only allows you to load one at at time and messes up the naming.
Continue reading

Candles were not 3D printed (but given that PLA burns quite well maybe you could print them?)

Project Tombstone

About 1 year after I started working on it I have posted Project Tombstone on Thingiverse. It took the approach of Halloween to make me finally upload it. You can view it here. It builds on the randomisable grassy knoll that I described back in February.

I first printed around March, but I had to make some edits before I could post online (which took me ages to get round to).

The one in the middle is the one that used to work with the Pi but now does not

Why No RPi Wifi ?

As mentioned in the last post the Raspberry Pi I have been using to control Squirty the RepRap suddenly decided to stop connecting to my home network. It would work with a different wifi dongle, but not with the one I have been using for the last year or so. The “broken” dongle was able to connect to the network without any problems when connected to my windows desktop, so I was quite mystified as to what happened.

My usual approach when encountering problems like this is to try a few random solutions, type error messages into google, read, generate some theories about what might be going wrong, try some more things, then mope. I think this is the least effective possible approach, but somehow I do it anyway. If you spend all your time generating theories and trying solutions it is easy to become frustrated and to overlook something important, so I started this post with the intention that I was not going to solve my wifi troubles, instead I would just try to document and properly understand the problem. Unfortunately at some point I accidentally fixed the problem without really knowing how I did it. Although the solution is not as satisfying as I would like because I don’t know what caused the problem in the first place, I found the process of documenting everything I was doing in the post quite helpful. Therefore I’m keeping the rest of the post as I originally wrote it in case it is useful to anyone else or in case someone has a better idea of what went wrong in the first place Continue reading