Web Interface Control: Graphic Design

Here's my initial idea for a web interface for the robot: a 5x5 grid of buttons.

Since the robot is on a truck chassis, there aren't controls for rotating in place, but there are directional buttons for forward, reverse, forward right & left and reversing right and left indicated by the single chevron.

The double chevron indicates faster movement in that direction.

X button in center is all stop/off.

Top row has options for toggling LED lights and an ultrasonic range check.

Left column has an audio buzzer and the eye icon makes the robot go into security mode, which is motion activated.

Right column is placeholder for controls to move something like an arm up, down, and home position.

Bottom row is space for other left/right controls (home button would reset these as well).

I have plenty of space for expansion should a few other ideas strike me.

The wireless IP cameras I am leaning toward have IR night vision and two way audio, but those controls will be on the camera view window along with its own pan/tilt & resolution controls.

I would love input for other ideas!

Link to larger version

As for an update on parts, etc. I have decided to eliminate several communication relays (website to ethernet shield to FM transmitter to arduino) and ordered a CC3000 wifi shield so communication is straight from website to arduino.

Remote Controls

I have tried using concentric colored “rings” that the icons lay on top of, or coloring the icons themselves can help when you have a lot of buttons that have a lot of similarity.

My bot was able to pan to any compass point (I has icons for 16 different compass directions), pan in any relative direction, rotate to any relative or compass direction, or drive in any direction.  This could mean 64+ different buttons.  With colored rings, the buttons can be made small and round and often don’t need icons if they are laid out in a big set of colored rings, with things like stop in the center.

That approach was ok, later I tried something different, with horizontal rows of colored buttons that all represent a similar function…like body rotation…center being zero, leftmost button being something like “<180”, which would mean do a left 180 degree rotation.  All the rotation icons would be one color, while all the pan buttons or drive buttons would be another.

Another option which I am trying now is to have separate web pages for topic specific remote controls…one for driving, another for video, another for emotions, another for sonar map, etc., so that someone can open up multiple remotes on their screen at the same time and position the way they want.  The same rules apply though in the use of colored bars.  This is being built for multiple robots, so a given person would simply not open a remote that wasn’t relevant to what they were doing at the time or wasn’t applicable to their bot.  I think I’m going to like this last approach.