HTML5 Arduino WLAN-Robot

Based on the latest arduino-blogpost 10.12.2010 I have played around with the arduino-cpu to control a small electrical-motor-engine with WLAN-Technology.

Aims and purpose was to control a small robot platform over the internet and display the request-video-images in an interactive web interface, optimized for smartphones.

The Frontend-Web-Application was based on the easle-Framework/HTML5 and implemented touch- and mouse-gestures.

With some kind of an animated track-point or joystick the user could control the robot-platform.

Screenshot HTML5 Arduino Robot

Screenshot HTML5 Arduino Robot


To control the platform over the internet / WLAN we needed two more components for our Arduino-Board.

The Arduino controls the functionality between the Redfly-WLAN-Shield and the MotorShield.

Arduino Robot Shields

Arduino Robot Shields


A little self-programmed Webserver on the Arduino-Chip interpretated the incoming GET-Variables. For every incoming variable the arduino settings were changed and the outgoing pins of the board send a signal to the motorshield.

The motorshield had a secondary 9V-Powerinput and controled the engine-directions and speed.

The IP of our small webserver could be defined in our webserver-code-snipped and should be the same main-IP like our Webserer-WLAN.

We could get the images of our robot-plattform over an IP-CAM-Andoid-App, send as an JPEG-Stream from auch Smartphone.


Arduino Robot Plattform

Arduino Robot Plattform


With the right configuration of our webserver the robot platform could be controlled worldwide over the www.

Get the Flash Player to see this content.

Sourcecode – Arduino Motorshield Webserver

Sourcecode – EASLE-HTML-Frontend

7 responses to “HTML5 Arduino WLAN-Robot”

  1. christian says:

    Cooles Projekt! Mach weiter so!

  2. Carsten says:


  3. Martin says:

    Sehr geiles Projekt. Macht Lust auf mehr Arduino-Programmierung.


  4. […] Arduino WLAN Roboter von Matthias Rosenthal: Ein WLAN-gesteuerterRoboter, welcher in Echtzeit über ein aufmontiertes Smartphone Live-Bilder an das User-Interface zurückgibt. Ähnliche Beiträge: […]

  5. roman says:

    Matthias, wäre es möglich den Code des Html-Frontend mit easle.js zu veröffentlichen?

  6. Matthias says:

    Hi Roman,

    ich hab dir das HTML-Frontend oben als Source-Link am Post angehängt.
    Die Screengröße ist für das HTC-Desire optimiert, müsste also noch für andere Smartphones dynamisch angepasst werden.

    Bei Fragen kannst du dich auch gerne noch mal bei mir melden.


  7. roman says:

    Vielen Dank!
    Diesen Robotor nachzubauen steht definitiv auf meiner TODO-List 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *