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.


For the web elements of my project I think Google Fonts is a useful resource as the fonts can be downloaded so that I can use them in images, but also they can be linked in the stylesheet for the web pages so that any written text can be in a matching font.


Looking at NASA and ESA telemetry data, they tend to prefer monospaced fonts such as courier for the distinctiveness of each letter and number so that there is no confusion.

Based on this, I looked at the fonts in the monospace category on Google Fonts. I wanted something that was reasonably clear to read, but I also wanted it to be interesting from a design point of view (so Courier was not an option).

fontsI decided upon the font ‘VT323’, because it looks slightly pixelated and I thought this looked interesting especially at large font sizes, and makes it seem as though it is part of a text-based computing system.


Design: The User Interface

I would like the user’s interaction with the project to simulate a job working with NASA or another space agency driving the rover. Therefore I want the environment to simulate a control room, with a large projection or screens showing the video feed and other data, and another monitor where the main user will sit to control the rover. This will allow watchers to view what is going on, but only allow one user to use the controls.

roverproposalI would like there to be the possibility that users could see the rover in action on the terrain, and so I would allow them to go past the curtain once they had finished in the ‘control room’ aspect of the piece.



data For the main viewing screen I want to include several things. Over the video feed I would like to have an artificial horizon to show the orientation of the camera/rover. I would like to include various graphic displays including perhaps satellite location, and I would also like to include telemetry data from the rover itself.

The design of the control interface has had to change due to the actions occurring directly after the button being clicked, rather than on the click of an execute button. The three different directions that the wheels can turn to also require buttons therefore, however I still want it to stay simple. The design I have chosen for the buttons is triangular as this infers direction without having to use arrows. Therefore, even without the text it would not be incredibly difficult to guess what the buttons do.fwd1




Creation of the Rover Body

Although the main purpose of the rover is that the user views everything from the on-board camera, I have decided that it would make it visually more appealing if it could be seen in its terrain environment afterwards and if it could resemble an actual Martian rover.

Having to use the RC car chassis however does limit what I am able to achieve, although it does provide a solid base from which to start.

Possible Materials:

ABS Plastic construction.

ABS Plastic construction struts and sheet material.

  • Strong
  • Easy to drill, saw and sand
  • Paintable
  • Easy to glue with poly cement

Balsa Wood

  • Light
  • Cheap
  • Easy to glue


  • Free
  • Widely available
  • Easy to cut
  • Lightweight


  • Lightweight
  • Sturdy
  • Easy to glue and paint
  • Cheap

I decided that my initial design should be in cardboard due to the availability and economic benefits, and then could be more easily measured up for creation in balsa wood, plastic or foamboard.


Final Prototype Design


Designing the Rover

After ordering in the parts that I need for the electronics to control the rover, I measured their dimensions and used this to plan the size of the Rover. Asiderover3 from fitting all the components, I need to be able to access the Pi and the battery pack to recharge and reboot the rover.

I intend to use plastics for the casing, and have identified 2mm thick PVC as being a good option, as it has a high mechanical and tensile strength for the price. The structure will likely be held together with 3mm threaded steel rods that have nuts supporting the plastic platforms.

The structure will be then hidden underneath the ‘solar’ panels, which are for aesthetic purposes only.

Rover Design Idea 2

roverid2The principle behind this design is that the rover is a micro-rover, similar to the Sojourner.

>Has 6 wheels

>Is a very small and compact size but everything is housed within the body

>Camera is in fixed position

>Could also have a simulated ‘base unit’ on the terrain that users can drive onto and find out about

>However ground clearance would be comparatively low