CONSTRUYENDO UN ROBOT 100% JAVASCRIPT

Jon Rojí Taboada - Codemotion 2017

Jon Rojí Taboada

@jnroji

 

 

 

Frontend Reference Leader 

 

 

 

Angular teacher

geeks
hype
is real

can do a lot of useful things!

AND... OTHER THINGS NOT SO USEFULL...

fuck it

lets make

a robot

lets build it

first!

Select a main board

EaSY TO CONNECT

MULTIPLE ANALOGIC AND DIGITAL I/O 

greaT community

ALL THE CODE YOU NEED IS ON INTERNET

lower capabilities

NOT GREAT AT BIG CALCULATIONS

And a restricted Arduino's environment

arduino

arduino

multiple modules

CAMERA, BLUETOOTH, ETC...

greaT community

ALL THE CODE YOU NEED IS ON INTERNET

great capabilities

CAN DO HEAVIER TASKS

And can do whatever you want

raspberry pi

ODROID

 

NANOPC

 

MINOWBOARD

 

BEAGLEBONE

 

BANANA PI

 

CUBIEBOARD

 

. . .

the no js parts

  • Chasis
  • 4 x DC Motor
  • 4 x Wheels
  • Battery module

 

 

 

 

                              13.99 €

things we need

things we need

  • Webcam 
  • Raspi Cam Module

 

 

 

 

 

 

          13.99 € / 29.90 €

things we need

things we need

const Raspistill = require('node-raspistill').Raspistill;

...

class ImageAnalyzer {

  constructor() {
    this.camera = new Raspistill({
        fileName: 'test',
        verticalFlip: true,
        width: 640,
        height: 480
    });
  }
  
...

  async capture() {
    let photo = await this.camera.takePhoto();
  }

...
}

things we need

  • L298N Motor controller

 

 

 

 

 

                               5.99 €

GPIO (General Purpose Input/Output) refers to a generic pin in a chipset and whose behaviour can be programmed by the user

things we need

things we need

things we need

  // SET MOTOR PINS
  const motors = {
    leftFront: 16,
    rightFront: 18
  };

  // SET PINS I/O MODE
  async.parallel([
      (callback) => { gpio.setup(motors.leftFront, gpio.DIR_OUT, callback); },
      (callback) => { gpio.setup(motors.rightFront, gpio.DIR_OUT, callback); },
  ], goForward);

  
  // SEND 1 
  goForward() {
    async.parallel([
      (callback) => { gpio.write(this.motors.leftFront, true, callback)},
      (callback) => { gpio.write(this.motors.rightFront, true, callback)}
    ], callback);
  }

https://pinout.xyz/

Raspberry Pi Pinout guide

things we need

things we need

the js parts

 

     Have to move by remote control

     Have to send images

     Have to interact with the world

WHAT I NEED?

remote control

remote control

remote control

remote control

RPI-GPIO

class Robot {

  constructor(firebaseRef) {
    if (!firebaseRef) {
      firebase.initializeApp(CONFIG.firebase);
      firebaseRef = firebase.database().ref('orders');
    }

    this.direction;
    this.motors = this.initPins();
    this.firebaseRef = firebaseRef;
    this.listenOrders();
  }


  listenOrders() {
    this.firebaseRef.on('value', (snapshot) => {
      const direction = snapshot.val().direction;
      this.updateDirection(direction);
    });
  }

  ....

remote control

 initPins() {
    const motors = {
      leftFront: 16,
      leftBack: 13,
      rightFront: 18,
      rightBack: 15
    };

    async.parallel([
      (callback) => { gpio.setup(motors.leftFront, gpio.DIR_OUT, callback); },
      (callback) => { gpio.setup(motors.leftBack, gpio.DIR_OUT, callback); },
      (callback) => { gpio.setup(motors.rightFront, gpio.DIR_OUT, callback); },
      (callback) => { gpio.setup(motors.rightBack, gpio.DIR_OUT, callback); },
    ]);

    return motors;
  }

  goForward() {
    async.parallel([
      (callback) => { gpio.write(this.motors.leftFront, true, callback)},
      (callback) => { gpio.write(this.motors.rightFront, true, callback)}
    ]);
  }

remote control

WHAT I NEED?

 

     Have to move by remote control

     Have to send images

     Have to interact with the world

sending images

(Not selected solution)

sending images

?

sending images

Headless Chrome Node Api

sending images


const browser = await puppeteer.launch({
  headless: true,
  args: [
    "--allow-running-insecure-content",
    "--ignore-certificate-errors", 
    "--use-fake-ui-for-media-stream",
     "--unsafely-treat-insecure-origin-as-secure"
  ],
  userDataDir: "/Users/jroji/tmp/puppeteer/Chrome",
});
await page.goto('https://appr.tc/r/910993264', {
    waitUntil: 'networkidle'
});

await page.click("#confirm-join-button");

sending images

sending images

STORAGE

sending images

sending images

WHAT I NEED?

 

     Have to move by remote control

     Have to send images

     Have to interact with the world

interacting

A world of sensors

Humidity

Distance

Temperature

Motion

...

 

interacting

interacting

interacting

Google Cloud Platform API  KEY

Google Vision API 

interacting

interacting

interacting

 /**
   * Construct request body for the petition
   * @param {string} image
   * @param {string} type
   */
  constructRequest(image = this.imageURI, type = 'LABEL_DETECTION') {
    return {
      "requests": [
        {
          "features": [
            {
              // TYPE OF THE DETECTION, LABEL BY DEFAULT
              "type": type
            }
          ],
          "image": {
            "source": {
              // IMAGE TO BE ANALYZED
              "imageUri": image
            }
          }
        }
      ]
    };
  }
}

storage

interacting

Banana

interacting

 

     Have to move by remote control

     Have to send images

     Have to interact with the world

WHAT I NEED?

 

     Have to move by remote control

     Have to send images

     Have to interact with the world

DEMO

TIME!

Just in case...

Chromium and Raspberry Arch limitations

Care with voltage difference

Low quality of some components

https://github.com/jroji/raspibot

deal with it

other options

Files upload

Image / Video recognition

https://es.pinout.xyz/

https://github.com/mirceageorgescu/raspi-tank-2

https://diyhacking.com/control-a-dc-motor-with-an-l298-controller-and-raspberry-pi/

https://github.com/jroji/raspibot

https://amazon.es

references

thank

YOU

https://github.com/jroji/raspibot

Raspibot

By Jon Rojí

Raspibot

  • 1,712