2015 jsdc build anything with javascript

79

Upload: web-arduino

Post on 17-Jan-2017

1.640 views

Category:

Software


0 download

TRANSCRIPT

Page 1: 2015 JSDC Build Anything with JavaScript
Page 2: 2015 JSDC Build Anything with JavaScript

JavaScript 速度 x 100 倍

Page 3: 2015 JSDC Build Anything with JavaScript

JavaScript 速度破表

Page 4: 2015 JSDC Build Anything with JavaScript

JavaScript 速度破表

Page 5: 2015 JSDC Build Anything with JavaScript

JavaScript 速度破表

Page 6: 2015 JSDC Build Anything with JavaScript

JavaScript 統治了 Web 平台

Page 7: 2015 JSDC Build Anything with JavaScript

JavaScript 跑到後端

Page 8: 2015 JSDC Build Anything with JavaScript

JavaScript 跑到後端

Page 9: 2015 JSDC Build Anything with JavaScript

Raspberry Pi @@

Page 10: 2015 JSDC Build Anything with JavaScript

NodeJS 跑到 Raspberry Pi

Page 11: 2015 JSDC Build Anything with JavaScript

NodeJS 跑到 Raspberry Pi

Page 12: 2015 JSDC Build Anything with JavaScript

Arduino 串接感測器,收集資料上雲端

Page 13: 2015 JSDC Build Anything with JavaScript

Internet of Things ( IoT )

Page 14: 2015 JSDC Build Anything with JavaScript

能否放到 Arduino 裡面呢?

Page 15: 2015 JSDC Build Anything with JavaScript

Internet of Things ( IoT )

Flash Memory 32KB

SRAM 2KB

EEPROM 1KB

Clock Speed 16 MHz

Page 16: 2015 JSDC Build Anything with JavaScript

能否放到 Arduino 裡面呢?

Page 17: 2015 JSDC Build Anything with JavaScript

能否放到 Arduino 裡面呢?

Page 18: 2015 JSDC Build Anything with JavaScript

Arduino Yun (雲)

Page 19: 2015 JSDC Build Anything with JavaScript

Arduino Yun (雲)

Page 20: 2015 JSDC Build Anything with JavaScript

另一種選擇... Arduino Firmata

Page 21: 2015 JSDC Build Anything with JavaScript

設定指定腳位的功能Arduino Firmata

Byte Array 0xF4 0x0D 0x01

Page 22: 2015 JSDC Build Anything with JavaScript

0x91 0x10 0x00Byte Array

設定13腳輸出Arduino Firmata

Page 23: 2015 JSDC Build Anything with JavaScript

F4

0D

03

91

1000

Page 24: 2015 JSDC Build Anything with JavaScript
Page 25: 2015 JSDC Build Anything with JavaScript

目前支援的程式語言Arduino Firmata

Page 26: 2015 JSDC Build Anything with JavaScript
Page 27: 2015 JSDC Build Anything with JavaScript

用 Webduino 玩轉 Arduino- Open Source

- MIT License- 運行環境

- Browser- NodeJS

- 通訊方式- USB / WiFi

- 支援Blockly開發工具- JS Code generator

Page 28: 2015 JSDC Build Anything with JavaScript

NodeJSArduino Firmata

Page 29: 2015 JSDC Build Anything with JavaScript

Chrome + ChromeApp + Serial PortArduino Firmata

Page 30: 2015 JSDC Build Anything with JavaScript

Webduino Blockly

Page 31: 2015 JSDC Build Anything with JavaScript

Blockly → JS → Browser / NodeJSArduino Firmata

Page 32: 2015 JSDC Build Anything with JavaScript

Blockly → JS → Browser / NodeJSArduino Firmata

Page 33: 2015 JSDC Build Anything with JavaScript

Blockly → JS → Browser / NodeJS

// require('webduino-blockly');var dht;boardReady('3qad', function (board) { dht = getDht(board, 11); dht.read(function(evt){ window.alert(dht.temperature); }, 1000);});

Arduino Firmata

Page 34: 2015 JSDC Build Anything with JavaScript

更小更便宜?

行動電源

Page 35: 2015 JSDC Build Anything with JavaScript

更小更便宜?

行動電源

Page 36: 2015 JSDC Build Anything with JavaScript

ESP8266 誕生 !

ESP8266 Features● 802.11 b/g/n protocol● Wi-Fi Direct (P2P), soft-AP● Integrated TCP/IP protocol stack● +19.5dBm output power in 802.11b mode● Integrated temperature sensor● Power down leakage current of < 10uA● SDIO 2.0, SPI, UART● STBC, 1×1 MIMO, 2×1 MIMO● …

Page 37: 2015 JSDC Build Anything with JavaScript

直接用 HTML控制 LED

<wa-led id='led' pin='10' state='off'>

</wa-led>

Page 38: 2015 JSDC Build Anything with JavaScript

直接用 HTML控制 LED

<wa-led id='led' pin='10' state='on'>

</wa-led>

Page 39: 2015 JSDC Build Anything with JavaScript

WebComponents → WS/MQTT → Firmata

<web-arduino id='board' > <wa-dht id='dht' pin='10'></wa-dht></web-arduino>

dht.read( function (evt) {

var show =

"<br>溫度:" + evt.temperature + " ℃

<br> 溼度:" + evt.humidity + " %";

}

, 1000);

Page 40: 2015 JSDC Build Anything with JavaScript

WebComponents → WS/MQTT → Firmata

<web-arduino id='board' > <wa-ultrasonic id='snd' trig='11' echo='11'></wa-ultrasonic></web-arduino>

snd.ping(

function (cm) {

var show = "距離:" + cm + "公分";

}

, 1000);

Page 41: 2015 JSDC Build Anything with JavaScript

感測資料可以先經由RP2處理再上雲端

Page 42: 2015 JSDC Build Anything with JavaScript

HTML JS CSS http

tcp/ip

websocketmqtt

mqtt

Arduino Firmata

傳輸架構

Page 43: 2015 JSDC Build Anything with JavaScript

溫濕度結合 Google Chart 即時顯示

Page 44: 2015 JSDC Build Anything with JavaScript

Webduino 馬克一號韌體升級啦~

Ver 1.0 Ver 1.5

Page 45: 2015 JSDC Build Anything with JavaScript

Webduino 馬克一號 ver 1.5

Page 46: 2015 JSDC Build Anything with JavaScript

Webduino 馬克一號 Ver 1.0

Arduino

ESP8266

Page 47: 2015 JSDC Build Anything with JavaScript

Webduino 馬克一號 Ver 1.5

Arduino

ESP8266

Page 49: 2015 JSDC Build Anything with JavaScript
Page 51: 2015 JSDC Build Anything with JavaScript
Page 52: 2015 JSDC Build Anything with JavaScript

地上跑的~

Page 53: 2015 JSDC Build Anything with JavaScript

地上跑的~

Page 55: 2015 JSDC Build Anything with JavaScript

遙控車的控制方式 - 前輪

Page 56: 2015 JSDC Build Anything with JavaScript

遙控車的控制方式 - 後輪

Page 57: 2015 JSDC Build Anything with JavaScript

連接小威開發板

轉接訊號線

焊接控制線

Page 58: 2015 JSDC Build Anything with JavaScript
Page 59: 2015 JSDC Build Anything with JavaScript
Page 61: 2015 JSDC Build Anything with JavaScript

Webduino 馬克一號 Ver 1.5

Arduino

ESP8266

Page 62: 2015 JSDC Build Anything with JavaScript

其實應該是這樣

Arduino

ESP8266JavaScript

Page 63: 2015 JSDC Build Anything with JavaScript
Page 64: 2015 JSDC Build Anything with JavaScript
Page 65: 2015 JSDC Build Anything with JavaScript
Page 68: 2015 JSDC Build Anything with JavaScript

電源開關

充電孔

升壓板

Page 69: 2015 JSDC Build Anything with JavaScript
Page 70: 2015 JSDC Build Anything with JavaScript
Page 71: 2015 JSDC Build Anything with JavaScript
Page 72: 2015 JSDC Build Anything with JavaScript
Page 73: 2015 JSDC Build Anything with JavaScript
Page 74: 2015 JSDC Build Anything with JavaScript

前進

前進停止 後退停止

後退

Page 75: 2015 JSDC Build Anything with JavaScript

超簡單實現三軸控制

Page 77: 2015 JSDC Build Anything with JavaScript

F4

04

0B

00

F7

自訂命令

Page 78: 2015 JSDC Build Anything with JavaScript

自己感測器元件自己包

10月底前釋出

Arduino Firmware

Page 79: 2015 JSDC Build Anything with JavaScript

webduino