Published February 6, 2016 © GPL3+

Brick Droid

Using a Particle Photon, a few servos, and some toy building bricks....you can build your own autonomous droid with the kids!

BeginnerFull instructions provided1,726

Things used in this project

Hardware components

Particle Photon

Full Rotation Servo

Piezo Speaker

Servos (Tower Pro MG996R)

Breadboard (generic)

USB Battery Pack

Jumper wires (generic)

2 inch wheels

General Purpose Transistor NPN

Resistor 221 ohm

Ball Caster Metal - 3/8"

SparkFun microB USB Breakout

USB-A to Micro-USB Cable

Hand tools and fabrication machines

Hot glue gun (generic)

Story

The kids and I wanted to build a star wars themed droid out of toy bricks over Christmas break. This is what we came up with,

Now, let's take a look at demonstration:

Hope you enjoy this project.

Basics

The Droid has 3 modes:

Autonomous / Self Drive

Manual

Cantina

Manual Mode (the user controls how the droid moves with with a mobile device), Self Drive Mode (the droid autonomously drives around avoiding obstacles and mapping its movements), and Cantina Mode (the droid dances around the room with random movements).

How it works

When the Particle Photon boots up using the BrickDroid.ino file (provided in code section below), it will setup 3 REST services:

Service 1: To set Droid Mode

Service 2: Commands to control Droid movement (when in Manual Mode)

Service 3: To provice tracking information (when in Self Drive Mode)

The HTML page acts as a client application to these REST services. Using JQuery to call the REST services when buttons are pressed, the HTML page will control the droid using these services (HTML page's code is also provided in the code section below).

Setup

Step 1: Setup Particle Photon

Setup your particle photon using the Getting Started Guide on their site. Go thru the examples of blinking an LED light and then blinking an LED light over the internet. Very good tutorials. When going thru the 'Blinking an LED over the Net' demo, make note of your Photon Device ID and your Particle.io access token. We will use those later.

When you setup your Particle Photon, be sure to notedown it's Device ID and Access Token. It will be required in Step 5 when we setup HTML WebPage Client.

Step 2: Wire Up

Wire up the servos, speaker and ping))) according to circuit diagram below:

Step 3: Compile Sketch & Flash Photon

Compile and push the BrickDroid.INO file to your photon (either using the Web IDE or the local Particle Dev IDE).

After flashing your Photon, when it boots up, the piezo speaker should beep and the LED on the particle photon should be "breathing" cyan. Whenever the droid starts up or changes mode, it will beep to identify "ready".

Step 4: Assemble Droid

Assemble the Droid as you want it to be. Here are some snapshots of my assembly:

Before assembling your droid and placing wires and motors into the droid, test out your wiring by loading the included HTML file (either on your phone or on your computer). This will verify that once you get everything assembled, you will be able to communicate and control everything.

Assembly without outer body

Also test it out using your fully charged battery power supply (see below on setting up the battery power supply to the breadboard), just to make sure you are getting enough power to all your devices, motors, and sensors.

Powering your droid with a battery pack requires creating a simple USB cable Type A to breadboard inputs (Red/Black). To do this you can either:

OPTION A: Use the Sparkfun Micro Breakout board. With this, use a simple micro to type A USB cable and only connect the ground (negative) and VCC (positive) from the breakout board to your breadboard (ignore the other connections from the breakout board).

OPTION B: I found a simple "power only" USB type A to USB micro cable that came with my wireless headphones. It only had 2 wires in it (red and black). I cut the micro end off and stripped the red and black wires down to expose the copper (Red is positive, black is negative/ground). Then I cut one end off of two basic breadboard jumper wires and striped them down to their copper. I soldered (or you can just twist/elec tape) the stripped jumper wires ends onto the ends of my now stripped USB Type A cable and seal the connections with electrical tape to make it easy to connect the USB type A to the breadboard (see image in slide show). ) Assemble your droid with all wires, sensors, motors and batteries and give it a go.

USB Type A to Breadboard power only cable

Design and build your droid using the toy bricks however you wish. We put our idea on paper first to make sure we had room for everything and that the droid will still be balanced. I provided images of us building ours and how we mounted the servos and castors. I used a hot glue gun to connect certain bricks to the motors, breadboards, and servo horns (see photos).

NOTE: In the Bill of Materials I listed some wheels, but I only used the rubber rings of the wheels. I put those on the circular horn (the geared thing that attaches to the servo...each servo comes with a variety of horns: Straight, cross, six way, wheel) and it made a nice snug fit. I thought this was easier then trying to find a way to attach the wheels to one of the other horns using screws. See image slideshow for a closeup on the wheels to get a visual.

Assembling Slideshow

1 / 26 • Foot assembled with castors but no servo

Sealing up

1 / 3 • Assembling droid with sensors, motors and Photon

Step 5: HTML WebPage Client

Save the BrickDroid.HTML file (provided in code section below) to your local computer and modify the HTML page to replace the "DEVICE ID HERE" and "ACCESS TOKEN HERE" with the information you got from Step 1 when you went thru the demo of 'Blinking a LED over the Net'.

Modify HTML page with Device ID and Token ID

Now, open the webpage we just modified with Particle Photon ID and Access Token. You can also host this web-page via XAMPP so you can access it over mobile devices, too.

Unaware with XAMPP? Refer this tutorial.

Once the file is rendered in a browser, you should see motors spinning and speaker making noise when you click buttons on the HTML Page.

HTML page rendered in a browser

Having trouble?

Troubleshooting Tidbits:

To load the BrickDroid.HTML file on your iphone or ipad, I used Dropbox. Their App allows you to load an HTML page from the cloud and view it locally...since the IPhone and Ipad dont allow you to copy HTML files locally and load them into a browser.

To load the BrickDroid.HTML file on your android phone or tablet, just copy it over to the SD card (maybe into the downloads folder) and load it up into Chrome using the URL: file:///sdcard/Download/BrickDroid.HTML

When running into problems with the photon this REST route came in handy in seeing what data has been pushed to the photon and what REST routes are exposed: GET https://api.particle.io/v1/devices/YOUR_DEVICE_ID?access_token=YOUR_API_TOKEN using a tool like POSTMAN in Chrome makes troubleshooting much easier.

The Forums for particle were a big help in troubleshooting issues. Searching the forums found many people who ran into the same issues I did with Key files, reclaiming device IDs, changing WIFI passwords, re-setting up your photon, and what the different flashing colors of the Photon LED mean.

Code

//BRICK DROID AI

//configurable values...change these based on your specifics (ie) if 
// you want to use other pins or if your droid needs longer
// time to turn.
int leftLegPin = D0;
int rightLegPin = D1;
int headPin = D2;
int pingPin = D3;
int beepPin = D4;
int pingRetries = 3;
int distanceThreasholdInCm = 30;
int delayToTurnNinty=750;
int delayForward=100;

//public varibles for the servos
Servo leftLeg;
Servo rightLeg;
Servo head;
//servo movement values for the legs and head
int FORWARD=0;
int BACKWARD=180;
int STOP=90;
int RIGHT=0;
int LEFT=180;
int CENTER=90;
int currentAction=1;  //set initial startup value to be manual/web controlled

//beep/sound definitions...delays in milliseconds of piezo on/off
//              on   off  on  off  on  off  on
int sound1[] = {200, 50, 100, 100, 50, 250, 400};
int sound2[] = {100, 200, 300, 50, 300, 200, 100};
int sound3[] = {100, 200, 100, 50, 300, 400, 100};
int sound4[] = {50, 300, 400, 200, 100, 100, 50};
int sound5[] = {300, 100, 100, 100, 100, 200, 100};
int sound6[] = {200, 50, 100, 400, 100, 100, 200};
int numSounds=6;
int* sounds[7];

//tracking definitions.   Data to keep track where the droid has gone in Self
//      drive mode to report to the REST service / HTML UI.
const int TrackingSize=100;
char tracing[TrackingSize];
int tcount;
int forwardTraceTick=10;
int forwardTraceCounter=0;

//init startup method...runs only once
void setup()
{
  resetTracing();
  //assign sounds to array to pick from
  sounds[0]=sound1;
  sounds[1]=sound2;
  sounds[2]=sound3;
  sounds[3]=sound4;
  sounds[4]=sound5;
  sounds[5]=sound6;

  //setup REST service for mode control
  Spark.function("droidmode",droidMode);

  //setup REST service for manual mode
  Spark.function("droidcontrol",manualControl);

  //set REST service for tracing in self drive mode
  Spark.variable("droidtrack", tracing, STRING);

  //attach pins to servos
  rightLeg.attach(rightLegPin);
  leftLeg.attach(leftLegPin);
  head.attach(headPin);

  //setup piezo buzzer
  pinMode(beepPin, OUTPUT);

  Serial.begin(9600);
  delay(1000);

  //announce that your droid is ready to operate
  beep();
}

//ongoing "loop" method...runs continuously after startup.
void loop()
{
  if(currentAction==1)
  {
    //manual/web controlled mode...do nothing in loop and
    //     wait for rest methods to be called
  }

  if(currentAction==2)
  {
    //self driving robot, that avoids obstancles
    selfDrive();
  }

  if(currentAction==3)
  {
    //cantina mode...dancing around in a small area.
    cantinaMode();
  }
}


// REST service for configuring the "mode" of the droid
int droidMode(String setmode) {
  resetTracing();
  if(setmode=="manual")
  {
    leftLeg.write(STOP);
    rightLeg.write(STOP);
    beep();
    currentAction=1;
    return 1;
  }
  if(setmode=="selfdrive")
  {
    beep();
    currentAction=2;
    return 1;
  }
  if(setmode=="cantina")
  {
    beep();
    currentAction=3;
    return 1;
  }
  return 0;
}

//vv MANUAL DRIVE MODE
//  REST service for controlling the droid in manual mode.
int manualControl(String command) {
  Serial.print("manualControl");
  Serial.print(command);
  Serial.println();
    if (command=="left") {
        leftLeg.write(FORWARD);
        rightLeg.write(FORWARD);
        delay(delayToTurnNinty);
        leftLeg.write(STOP);
        rightLeg.write(STOP);
        return 1;
    }
    if (command=="right") {
        leftLeg.write(BACKWARD);
        rightLeg.write(BACKWARD);
        delay(delayToTurnNinty);
        leftLeg.write(STOP);
        rightLeg.write(STOP);
        return 1;
    }
    if (command=="forward") {
        leftLeg.write(BACKWARD);
        rightLeg.write(FORWARD);
        return 1;
    }
    if (command=="backward") {
        leftLeg.write(FORWARD);
        rightLeg.write(BACKWARD);
        return 1;
    }
    if (command=="stop") {
        leftLeg.write(STOP);
        rightLeg.write(STOP);
        return 1;
    }
    if (command=="headleft") {
        head.write(LEFT);
        return 1;
    }
    if (command=="headright") {
        head.write(RIGHT);
        return 1;
    }
    if (command=="headcenter") {
        head.write(CENTER);
        return 1;
    }
    return 0;
}
//^^ MANUAL DRIVE MODE


//vv SELF DRIVE MODE
void selfDrive()
{
  //self controlled mode, obstacle avoiding movement
  long distance = pingDistance();
  Serial.print("ForwardDistance");
  Serial.print(distance);
  Serial.println();
  if(distance > distanceThreasholdInCm)
  {
    //we have space in front of us, go foward
    if(forwardTraceCounter==forwardTraceTick)
    {
      pushTrace('F');
      forwardTraceCounter=0;
    }
    else
    {
      forwardTraceCounter++;
    }
    leftLeg.write(BACKWARD);
    rightLeg.write(FORWARD);
    delay(delayForward);
  }
  else
  {
    //no space in front, find a way left or right to turn
    leftLeg.write(STOP);
    rightLeg.write(STOP);
    beep();
    forwardTraceCounter=0;
    head.write(RIGHT);
    delay(500);
    //look right
    long openDistanceRight = pingDistance();
    delay(100);
    head.write(LEFT);
    delay(1000);
    //look left
    long openDistanceLeft = pingDistance();
    delay(100);
    head.write(CENTER);
    delay(500);
    Serial.print("openDistanceLeft");
    Serial.print(openDistanceLeft);
    Serial.println();
    Serial.print("openDistanceRight");
    Serial.print(openDistanceRight);
    Serial.println();

    if(openDistanceLeft > openDistanceRight && openDistanceLeft > distanceThreasholdInCm)
    {
      //turn left
      pushTrace('L');
      Serial.println("turn left");
      leftLeg.write(FORWARD);
      rightLeg.write(FORWARD);
      delay(delayToTurnNinty);
    }
    else
    {
      if(openDistanceRight > openDistanceLeft && openDistanceRight > distanceThreasholdInCm)
      {
        //turn right
        pushTrace('R');
        Serial.println("turn right");
        leftLeg.write(BACKWARD);
        rightLeg.write(BACKWARD);
        delay(delayToTurnNinty);
      }
      else
      {
        //neither have good line of sight, turn around
        pushTrace('B');
        Serial.println("turn around");
        leftLeg.write(FORWARD);
        rightLeg.write(FORWARD);
        delay(delayToTurnNinty * 2);
      }
    }
  }
}

long pingDistance()
{
  //grabbed from arduino.cc/en/Tutorial/Ping

    // establish variables for duration of the ping,
    // and the distance result in inches and centimeters:
    long duration, cm;

    //I added a loop thru a set of retries
    //....sometimes my ping ))) comes back with false 0s.
    for(int loop=0;loop<pingRetries;loop++)
    {
      Serial.println("ping loop1");
      // The PING))) is triggered by a HIGH pulse of 2 or more microseconds.
      // Give a short LOW pulse beforehand to ensure a clean HIGH pulse:
      pinMode(pingPin, OUTPUT);
      delayMicroseconds(2);
      digitalWrite(pingPin, LOW);
      delayMicroseconds(2);
      digitalWrite(pingPin, HIGH);
      delayMicroseconds(5);
      digitalWrite(pingPin, LOW);

      // The same pin is used to read the signal from the PING))): a HIGH
      // pulse whose duration is the time (in microseconds) from the sending
      // of the ping to the reception of its echo off of an object.
      pinMode(pingPin, INPUT);
      duration = pulseIn(pingPin, HIGH);

      // convert the time into a distance
      cm = microsecondsToCentimeters(duration);
      //if non-zero, break out of retry loop
      if(cm>0)
      {
        break;
      }
    }
    return cm;
}

long microsecondsToCentimeters(long microseconds) {
  // The speed of sound is 340 m/s or 29 microseconds per centimeter.
  // The ping travels out and back, so to find the distance of the
  // object we take half of the distance travelled.
  return microseconds / 29 / 2;
}
//^^ SELF DRIVE

//vv CANTINA MODE
void cantinaMode()
{
  //randomly pick an action and do it
  int action = random(0,9);
  if(action==0)
  {
    //drive forward
    leftLeg.write(FORWARD);
    rightLeg.write(FORWARD);
    delay(1000);
  }
  if(action==1)
  {
    //turn right
    leftLeg.write(BACKWARD);
    rightLeg.write(FORWARD);
    delay(delayToTurnNinty);
  }
  if(action==2)
  {
    //turn left
    leftLeg.write(FORWARD);
    rightLeg.write(BACKWARD);
    delay(delayToTurnNinty);
  }
  if(action==3)
  {
    //drive backwards
    leftLeg.write(BACKWARD);
    rightLeg.write(BACKWARD);
    delay(1000);
  }
  if(action==4)
  {
    //drive backwards
    leftLeg.write(FORWARD);
    rightLeg.write(BACKWARD);
    delay(delayToTurnNinty*2);
  }
  if(action==5)
  {
    //turn head to left
    head.write(LEFT);
  }
  if(action==6)
  {
    //turn head center
    head.write(CENTER);
  }
  if(action==7)
  {
    //turn head right
    head.write(RIGHT);
  }
  if(action==8)
  {
    //make sound
    beep();
  }
  leftLeg.write(STOP);
  rightLeg.write(STOP);
}

//^^ CANTINA MODE

//vv Misc methods
void beep(){
  int mySoundPick = random(0,numSounds);
  int *mySound = sounds[mySoundPick];
  int current=LOW;
  for (int i = 0; i < 7; i++) {
    if(current==LOW)
    {
      current=HIGH;
    }
    else
    {
      current=LOW;
    }
    digitalWrite(beepPin, current);
    delay(mySound[i]);
  }
  digitalWrite(beepPin, LOW);
}

void resetTracing(){
  forwardTraceCounter=0;

  //zero out tracking array
  for(int tloop = 0; tloop < TrackingSize; tloop++)
  {
    tracing[tloop]=NULL;
  }
  tcount=0;
}

void pushTrace(char direction)
{
  //push the latest value onto the tracing array

  //have not taken more then 100 moves, pop on end
  if(tcount<TrackingSize-1)
  {
    Serial.print("corky here");
    tracing[tcount]=direction;
    tcount=tcount+1;
  }
  else
  {
    //we are up to 100 moves, shift everything forward
    //   then pop on end
    for(int tloop = 0; tloop < TrackingSize-2; tloop++)
    {
      tracing[tloop] = tracing[tloop+1];
    }
    tracing[TrackingSize-1]=direction;
  }
}

//^^ Misc Methods

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <script>
          //update these values with the ID of your particle device and the token generated to call rest services
          //  see particle.io documentation on setting up your particle photon and generating a token.
            var particleID = "YOUR PARTICLE PHOTON DEVICE ID HERE";
            var particleToken = "YOUR PARTICLE.IO TOKEN HERE";
            var timer;

            function setDroidMode(newMode) {
                if (timer!=undefined)
                  window.clearInterval(timer);  //make sure to clear the timer so tracking stops when the mode changes

                //call rest service to change the droids mode
                $.post("https://api.particle.io/v1/devices/" + particleID + "/droidmode/", { params: newMode, access_token: particleToken },
                      function(data){
                      });
            }

            function sendManualCommand(newCommand) {
                //call rest service to manually control droid with a command
                $.post("https://api.particle.io/v1/devices/" + particleID + "/droidcontrol/", { params: newCommand, access_token: particleToken },
                      function(data){
                      });
            }

            function startTracing() {
              //setup timer to fire every so often, to call rest service to get the movement of the droid,
              //   and draw those movements on a HTML5 canvas
              timer = window.setInterval(function () {
                      $.get("https://api.particle.io/v1/devices/" + particleID + "/droidtrack?access_token=" + particleToken,
                      function(data){
                        //setup canvas to draw
                        var c = document.getElementById("myCanvas");
                        var ctx = c.getContext("2d");
                        //clear canvas
                        ctx.clearRect(0, 0, c.width, c.height);
                        var startposx=c.width/2;   //keep track of start position X
                        var startposy=c.height/2;  //keep track of start position Y
                        var curposx=c.width/2;   //keep track of ongoing current position X
                        var curposy=c.height/2;  //keep track of ongoing current position Y
                        curdir=1;  //keep track of ongoing direction  1=N  2=S  3=E  4=W
                        var s = data.result;  //set s to be the result of the rest call
                        var moveDist=10  //number of distance to move on each move
                        ctx.moveTo(curposx,curposy);
                        for (var i = 0; i < s.length; i++) {
                          if(s.charAt(i)=="F")
                          {
                            //draw forward line
                            if(curdir==1)//N
                              curposy = curposy-moveDist;
                            if(curdir==2)//S
                              curposy=curposy+moveDist;
                            if(curdir==3)//E
                              curposx=curposx+moveDist;
                            if(curdir==4)//W
                              curposx=curposx-moveDist;

                            ctx.lineTo(curposx, curposy);
                            //no need to change direction...
                          }

                          //turning 180 degrees around
                          if(s.charAt(i)=="B")
                          {
                            //update lines with U turn and draw them
                            if(curdir==1)//N
                            {
                              curposx = curposx+moveDist/2;
                              ctx.lineTo(curposx, curposy);
                              curposy = curposy+moveDist;
                              ctx.lineTo(curposx, curposy);
                            }
                            if(curdir==2)//S
                            {
                              curposx = curposx+moveDist/2;
                              ctx.lineTo(curposx, curposy);
                              curposy = curposy-moveDist;
                              ctx.lineTo(curposx, curposy);
                            }
                            if(curdir==3)//E
                            {
                              curposy = curposy+moveDist/2;
                              ctx.lineTo(curposx, curposy);
                              curposx = curposx-moveDist;
                              ctx.lineTo(curposx, curposy);
                            }
                            if(curdir==4)//W
                            {
                              curposy = curposy+moveDist/2;
                              ctx.lineTo(curposx, curposy);
                              curposx = curposx+moveDist;
                              ctx.lineTo(curposx, curposy);
                            }
                            //update current direction
                            if(curdir==1)//N
                              curdir=2;
                            else if(curdir==2)//S
                              curdir=1;
                            else if(curdir==3)//E
                              curdir=4;
                            else if(curdir==4)//W
                              curdir=3;
                          }

                          //turning right
                          if(s.charAt(i)=="R")
                          {
                            //draw new line based on right turn
                            if(curdir==1)//N
                              curposx = curposx+moveDist;
                            if(curdir==2)//S
                              curposx=curposx-moveDist;
                            if(curdir==3)//E
                              curposy=curposy+moveDist;
                            if(curdir==4)//W
                              curposy=curposy-moveDist;
                            //draw new line
                            ctx.lineTo(curposx, curposy);
                            //update to new direction
                            if(curdir==1)//N
                                curdir=3;
                            else if(curdir==2)//S
                              curdir=4;
                            else if(curdir==3)//E
                              curdir=2;
                            else if(curdir==4)//W
                              curdir=1;
                          }

                          //turning left
                          if(s.charAt(i)=="L")
                          {
                            //update line based on left turn
                            if(curdir==1)//N
                              curposx = curposx-moveDist;
                            if(curdir==2)//S
                              curposx=curposx+moveDist;
                            if(curdir==3)//E
                              curposy=curposy-moveDist;
                            if(curdir==4)//W
                              curposy=curposy+moveDist;

                            //draw new line
                            ctx.lineTo(curposx, curposy);

                            //update direction
                            if(curdir==1)//N
                              curdir=4;
                            else if(curdir==2)//S
                              curdir=3;
                            else if(curdir==3)//E
                              curdir=1;
                            else if(curdir==4)//W
                              curdir=2;
                          }
                        }
                        ctx.stroke();  //draw the lines layed out in loop

                        //draw end circle empty
                        ctx.beginPath();
                        ctx.arc(curposx, curposy, 5, 0, Math.PI*2, true);
                        ctx.closePath();
                        ctx.stroke();
                        //draw start circle  filled
                        ctx.beginPath();
                        ctx.arc(startposx, startposy, 5, 0, Math.PI*2, true);
                        ctx.closePath();
                        ctx.fill();
                      });
                    }, 7000);  //update javascript UI with tracing every XXXX milliseconds
            }

            function stopTracing() {
              window.clearInterval(timer);
            }
        </script>

        <style>
        body, table, td {
            font-family: "Gotham SSm A","Gotham SSm B",proxima-nova,"Helvetica Neue",helvetica,arial,sans-serif;
        }
        </style>
    </head>
    <body>
        <H1>Robot Control</H1>
        <TABLE>
            <TR>
              <TD VALIGN=TOP ALIGN=LEFT>
                Droid Mode:
              </TD>
              <TD ALIGN=LEFT>
                <button style="height:50px;width:100px" onclick="javascript:setDroidMode('manual');">Manual</button>
              </TD>
              <TD>
                <button style="height:50px;width:100px" onclick="javascript:setDroidMode('selfdrive');">Self Driving</button>
              </TD>
              <TD ALIGN=RIGHT>
                <button style="height:50px;width:100px" onclick="javascript:setDroidMode('cantina');">Cantina</button>
              </TD>
          </TR>
          <TR>
            <TD>
              <BR><BR><BR>
            </TD>
          </TR>
          <TR>
            <TD VALIGN=TOP ALIGN=LEFT>
              Manual Mode Controls:
            </TD>
            <TD ALIGN=LEFT COLSPAN=3>
              <TABLE>
                  <TR>
                    <TD ALIGN=LEFT>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('headleft');">Head Left</button>
                    </TD>
                    <TD>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('headcenter');">Head Center</button>
                    </TD>
                    <TD ALIGN=RIGHT>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('headright');">Head Right</button>
                    </TD>
                  </TR>
                  <TR>
                    <TD>
                        <BR><BR>
                    </TD>
                  </TR>
                  <TR>
                    <TD ALIGN=CENTER COLSPAN=3>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('forward');">Forward</button>
                    </TD>
                  </TR>
                  <TR>
                    <TD ALIGN=LEFT>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('left');">Left</button>
                    </TD>
                    <TD>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('stop');">Stop</button>
                    </TD>
                    <TD ALIGN=RIGHT>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('right');">Right</button>
                    </TD>
                  </TR>
                  <TR>
                    <TD ALIGN=CENTER COLSPAN=3>
                      <button style="height:50px;width:100px" onclick="javascript:sendManualCommand('backward');">Backward</button>
                    </TD>
                  </TR>
              </TABLE>
            </TD>
          </TR>
          <TR>
            <TD COLSPAN=4>
              <BR><BR>
            </TD>
        </TR>
          <TR>
            <TD VALIGN=TOP ALIGN=LEFT>
                Self Driving Tracking:
            </TD>
            <TD>
              <button style="height:50px;width:100px" onclick="javascript:startTracing();">Turn On</button>
            </TD>
            <TD>
              <button style="height:50px;width:100px" onclick="javascript:stopTracing();">Turn Off</button>
            </TD>
            <TD>
            </TD>
        </TR>
        </TABLE>
        <CANVAS id="myCanvas" width="300" height="300">
        </CANVAS>
    </body>
</html>

Credits

Sean McCormick

5 projects • 27 followers

20+ year software engineer. #Learn, #Make, #Help

Brick Droid

Things used in this project

Hardware components

Hand tools and fabrication machines

Story

Basics

How it works

Setup

Having trouble?

Schematics

Brick Droid Wiring Diagram

Code

BrickDroid.INO

BrickDroid.HTML

Credits

Sean McCormick

Comments

Embed the widget on your own site

Brick Droid

Brick Droid

Things used in this project

Hardware components

Hand tools and fabrication machines

Story

Basics

How it works

Setup

Having trouble?

Schematics

Brick Droid Wiring Diagram

Code

BrickDroid.INO

BrickDroid.HTML

Credits

Sean McCormick

Comments

Related channels and tags