Road to JavaScript Maker

用JavaScript實現微電腦自動控制不是夢！

Cheton Wu (cheton_wu@trend.com.tw)

SaaS Lead Frontend Developer

GitHub: http://github.com/cheton

JavaScript is Everywhere

var arDrone = require('ar-drone');
var client = arDrone.createClient();

client.takeoff();

client
    .after(5000, function() {
        this.clockwise(0.5); // range from 0 to 1
    })
    .after(3000, function() {
        this.animate('flipLeft', 15); // 15ms
    })
    .after(1000, function() {
        this.stop();
        this.land();
    });
            

要用JavaScript統治物聯網之前

你首先要知道...

如何用微處理器(Arduino)
去控制電路元件

如何建立一個
可以正常運作的電路

如何運用JavaScript
跟Arduino建立通訊

Arduino

Arduino Board

Arduino IDE

Arduino Board

Arduino Nano

Arduino Nano Expansion

Arduino IDE

Direct Serial Port Access

var SerialPort = require('serialport').SerialPort;
var board = new SerialPort('/dev/tty-usbserial1', {
    baudrate: 115200
});

board.on('data', function(data) {
    console.log('data:', data);
    board.write('It works!\n');
});

board.on('error', function(err) {
    console.log('error:', err);
});
            

Take Your Chance

Supported Hardware

LED

DC Motor

Servo Motor

Stepper Motor

LCD

Accelerometer

Compass

Joystick

http://johnny-five.io/examples/

Example: LED

https://github.com/rwaldron/johnny-five/wiki/LED

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
    // Creates a led object on pin 13
    var led = new five.Led(13);

    // "blink" the led in 500ms on-off phase periods
    led.blink(500);
});
            

Example: Motor

https://github.com/rwaldron/johnny-five/wiki/Motor

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
    var motor = new five.Motor(5);

    motor.on('start', function() {
        // Demostrate motor stop in 2 seconds
        board.wait(2000, function() {
            motor.stop();
        });
    });

    // Start the motor at maximum speed
    motor.start(255);
});
            

Example: Servo

https://github.com/rwaldron/johnny-five/wiki/Servo

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
    var servo = new five.Servo({
        pin: 11,
        range: [0, 180]
    });

    // Set horn to 45°
    servo.to(45);

    // Angle change takes 500ms to complete
    servo.to(60, 500);

    // Set horn to 90°
    servo.center();
});
            

Example: LCD - I²C

https://github.com/rwaldron/johnny-five/wiki/LCD

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
    var lcd = new five.LCD({ 
        controller: 'PCF8574', // I²C LCD, PCF8574
        rows: 2,
        cols: 16
    });

    lcd.cursor(0, 0) // Sets the cursor position
       .print('Loading...');

    this.wait(1000, function() {
        lcd.clear() // Clears all text on the LCD
           .home() // Sets the cursor position to row 0, column 0
           .print('Hello, JSDC 2015');
    });
});
            

Live Demos

IoT Weather Display

GitHub

https://github.com/cheton/iot-weather-display

API Usage

http://api.openweathermap.org/data/2.5/weather?units=metric&q=Taipei

var request = require('request');
var qs = '?q=Taipei&units=metric';
var url = 'http://api.openweathermap.org/data/2.5/weather' + qs;

request(url, function(err, rsp, body) {
    var data = JSON.parse(body);
        :   :  :
    lcd.cursor(0, 0)
       .print(dt);
    lcd.cursor(1, 0)
       .print(name + ' (' + weather + ')');
    lcd.cursor(2, 0)
       .print('T:' + temp + ' (' + tempMin + '-' + tempMax + ')');
    lcd.cursor(3, 0)
       .print('H:' + humidity + '%  W:' + windSpeed + 'km/h');
});

機械手臂到底能做些甚麼呢？

沒錯！好吃又好玩！

GitHub

https://github.com/cheton/robotarm

Control Robot Arm with Joystick

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
    // Claw servo controller
    var claw = new five.Servo(11);

    // Joystick controller
    var joystick = new five.Joystick({
        pins: ['A0', 'A1'] // X (claw), Y (none)
    });

    // Center the claw servo
    claw.center();

    joystick.on('change', function() {
        var degree = five.Fn.scale(this.x, -1, 1, 130, 180);
        claw.to(degree); // Range: 130°-180°
    });
});
            

Robot Arm with Automation

Install

$ npm install johnny-five
$ npm install robotarm
            

var five = require('johnny-five');
var RobotArm = require('robotarm');
var board = new five.Board();

board.on('ready', function() {
    var robotarm = new RobotArm({
        axis: {
            claw: new five.Servo({
                pin: 11,
                range: [130, 180]
            })
        }
    });
    robotarm
        .then(function(next) {
            claw.to(130, 1000); // Open the claw in 1000ms
            setTimeout(next, 1500); // Wait for completion
        })
        .then(function(next) {
            claw.to(180, 1000); // Close the claw in 1000ms
            setTimeout(next, 1500); // Wait for completion
        })
        .play({ loop: true });
});
            

還記得前面提過的...

JavaScript也能幫忙做木工？

先來看看之前的作品

經過三個月不眠不休的努力過後...

每天回家工作到半夜

老婆都快要瘋掉了XD

硬體部分

電機部分

GitHub

https://github.com/grbl/grbl

https://github.com/grbl/grbl/wiki

An open source, embedded, high performance g-code-parser and CNC milling controller written in optimized C that will run on a straight Arduino.

Grbl's Pins

軟體部分

身為一個專業的FED

怎麼可以缺少了UI

又經過一個月後...

GitHub

https://github.com/cheton/cnc.js

Powered By

• React - https://github.com/facebook/react
• socket.io - https://github.com/socketio/socket.io
• three.js - https://github.com/mrdoob/three.js
• i18next - https://github.com/i18next/i18next
• webappengine - https://github.com/cheton/webappengine