Creating the User Interface

The user interface and controls are both web based due to the ease of customisation and wide range of functions that can be achieved via the various web languages such as HTML, JavaScript and PHP.

Main Screen

interfaceFor the main viewing screen I have decided that the central focus should of course be the camera’s video feed. I decided to centre this, and then overlay a clear .png image of the same size in a separate ‘div’ on the page  to create the ‘artificial horizon’ overlay on the camera. I found however that when the screen resolution is changed, it moved the png from the correct position. This is mainly an issue when moving it from the computer that I am developing it on to the projector or other monitor that might be of a different resolution. I solved this by leaving one page with the video feed and png overlay, and creating a new page with an iframe in the centre of it.

Similarly, I decided that to make the main page as simple and flexible as possible that everything should be in iframes, so the code for the main page only consists of three iframes, each aligned to a spate part of the page.

For the telemetry and satellite displays I decided that they should occasionally change to reflect new data coming in. I looked into JavaScript’s random function for this, and I decided that it would require a too high of a refresh rate to achieve the effect that I wanted. I therefore opted to create looping .gif images instead. For the telemetry, I decided to use two separate .gifs on two separate pages, and have a JavaScript function that occasionally refreshes the page to the other one.

Control Interface


My Initial draft of the control interface.

For the first draft of the controls I have stuck to the triangular design for the buttons, and I have redesigned the .gif on the ‘waiting’ page that is called when using some of the controls so that it incorporates the font and feel that is used on the main viewer page.

Additionally, it only runs through once before returning to the previous page as opposed to the old gif that was on a loop.

Note that the wheel direction triangles change colour depending on what the current direction is.

Original .gif

Original .gif


For the final design I want to smarten up the interface and make the buttons resemble what they are more clearly. I want to keep the triangle theme, but I also would like to make it feel more like a professional user interface, whilst retaining some of the brightness to engage younger users.

Working with Electronics: Controlling the Electronic Speed Controller via the Web

The Electronic Speed Controller (ESC) can be controlled in the same way as the servo using the Raspberry Pi’s GPIO pins. The biggest difference is that theCapture pulse widths to control it are different.

To find out what pulses made it do what I decided that it would be easier to set the duty cycle to 10o and then to change the pulse widths based on this. I discovered that then at a pulse width of 15 the ESC made the motor go forwards, and after much trial and error, that a pulse width of 13 made it go backwards.

Control via PHP

PHP runs python scripts on page load, so I needed to have the control buttons link to a page with the python script called on it. I could do this in a similar way to how I did with the servo control and have several different pages that look the same but with different scripts called when they load, however this would leave me with over 10 different pages, and this seems like a lot.

I therefore decided that I would load a page that calls the ‘forwards’ or ‘backwards’ script, then goes back to the page the user was just on. To do this I needed some JavaScript.

<script type=”text/javascript”>

window.setTimeout(‘history.back();’, 1000); // waits a specified number of seconds before going back


This simple bit of script went into the <head> of my document. By changing the value ‘1000’ to another number you can change the time period that the page waits before going back. I then decided to add a simple message to the page that told the user that their previous command was currently in progress. I decided a .gif would make the page more interesting.



Working With Electronics: Controlling the Servo Over the Web

Python Scripts

Using the script that I had created in Python which allows the servo to turn to both extremes (left and right) and the neutral position, I thought about possible ways of the user selecting the direction that they want the rover to travel in and how I would create a Python script to do this.

  1. Allow the user to specify the exact angle that they wish the wheels to turn to (from 180 degrees as full right, to -180 degrees full left). This is the most preferable option as it gives the user maximum control of the vehicle and is probably closest to how Martian Rovers actually operate since the drivers would need a high level of precision to navigate tricky terrain. I therefore calculated the following formula(a/170)+1.5/20.00*100.00Where a is the angle that you wish to turn to. However, when using this in Python it did not seem to want to calculate it correctly. This would also require me to have Python edit the script based upon what the user inputted on the webpage.
  2. Have 3 options for wheel turn angle – Left, Centre and Right. This would allow me to use the values that I already know, and I could very easily create a script where only 1 value would need to be changed in order for this to work. I could do this with one script that takes feedback from the web, or I could do it with multiple scripts that activate when necessary.

Setting Up The Web Server
Using this Instructables tutorial, I managed to install Apache and php5 as well as clients to allow me to upload files to the Pi remotely. Once I figured out

the www folder

the /www/ folder

that the Raspberry Pi’s web server path /home/pi/www/ worked the same as any other web directory it was easy for me to create folders and pages within it that could easily be referenced through the HTML. I decided that all my images would go in /images and all my python scripts in /python.

Creating a Basic Control Interface

I discovered that in order to run python scripts from the web you need to call .php pages to open which have “<?php exec(‘sudo python /full/directory/here/’);?>” in their body. Therefore I figured out that I could link from the index.php page to a similar or identical page except that it calls the Python script on opening. This would cause the script to run and the servo to move.

I therefore created some basic images that said left, centre and right on them and put in some basic text that told the user what direction the wheels would now be facing and created two similar .php files – one with and one without the ‘exec’ function.

web<!DOCTYPE html>
<?php exec(‘sudo python /home/pi/www/python/’);?>
<a href= left.php><img src=”images/left.png” alt=”Turn Left”></a>
<a href= centre.php><img src=”images/centre.png” alt=”Centre Wheels”></a>
<a href= right.php><img src=”images/right.png” alt=”Turn Right”></a>
Current Wheel Direction: Left

Once I was sure that this worked, I then duplicated and edited the Python scripts appropriately, putting them in the /python folder and created the missing .php files using the above template, before ensuring everything linked up correctly.

This allowed me to remotely change the direction of the servos.