2015 jsdc build anything with javascript
TRANSCRIPT
![Page 1: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/1.jpg)
![Page 2: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/2.jpg)
JavaScript 速度 x 100 倍
![Page 3: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/3.jpg)
JavaScript 速度破表
![Page 4: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/4.jpg)
JavaScript 速度破表
![Page 5: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/5.jpg)
JavaScript 速度破表
![Page 6: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/6.jpg)
JavaScript 統治了 Web 平台
![Page 7: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/7.jpg)
JavaScript 跑到後端
![Page 8: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/8.jpg)
JavaScript 跑到後端
![Page 9: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/9.jpg)
Raspberry Pi @@
![Page 10: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/10.jpg)
NodeJS 跑到 Raspberry Pi
![Page 11: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/11.jpg)
NodeJS 跑到 Raspberry Pi
![Page 12: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/12.jpg)
Arduino 串接感測器,收集資料上雲端
![Page 13: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/13.jpg)
Internet of Things ( IoT )
![Page 14: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/14.jpg)
能否放到 Arduino 裡面呢?
![Page 15: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/15.jpg)
Internet of Things ( IoT )
Flash Memory 32KB
SRAM 2KB
EEPROM 1KB
Clock Speed 16 MHz
![Page 16: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/16.jpg)
能否放到 Arduino 裡面呢?
![Page 17: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/17.jpg)
能否放到 Arduino 裡面呢?
![Page 18: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/18.jpg)
Arduino Yun (雲)
![Page 19: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/19.jpg)
Arduino Yun (雲)
![Page 20: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/20.jpg)
另一種選擇... Arduino Firmata
![Page 21: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/21.jpg)
設定指定腳位的功能Arduino Firmata
Byte Array 0xF4 0x0D 0x01
![Page 22: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/22.jpg)
0x91 0x10 0x00Byte Array
設定13腳輸出Arduino Firmata
![Page 23: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/23.jpg)
F4
0D
03
91
1000
![Page 24: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/24.jpg)
![Page 25: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/25.jpg)
目前支援的程式語言Arduino Firmata
![Page 26: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/26.jpg)
![Page 27: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/27.jpg)
用 Webduino 玩轉 Arduino- Open Source
- MIT License- 運行環境
- Browser- NodeJS
- 通訊方式- USB / WiFi
- 支援Blockly開發工具- JS Code generator
![Page 28: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/28.jpg)
NodeJSArduino Firmata
![Page 29: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/29.jpg)
Chrome + ChromeApp + Serial PortArduino Firmata
![Page 30: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/30.jpg)
Webduino Blockly
![Page 31: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/31.jpg)
Blockly → JS → Browser / NodeJSArduino Firmata
![Page 33: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/33.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/34.jpg)
更小更便宜?
行動電源
![Page 35: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/35.jpg)
更小更便宜?
行動電源
![Page 36: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/36.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/37.jpg)
直接用 HTML控制 LED
<wa-led id='led' pin='10' state='off'>
</wa-led>
![Page 38: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/38.jpg)
直接用 HTML控制 LED
<wa-led id='led' pin='10' state='on'>
</wa-led>
![Page 39: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/39.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/40.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/41.jpg)
感測資料可以先經由RP2處理再上雲端
![Page 42: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/42.jpg)
HTML JS CSS http
tcp/ip
websocketmqtt
mqtt
Arduino Firmata
傳輸架構
![Page 44: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/44.jpg)
Webduino 馬克一號韌體升級啦~
Ver 1.0 Ver 1.5
![Page 46: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/46.jpg)
Webduino 馬克一號 Ver 1.0
Arduino
ESP8266
![Page 47: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/47.jpg)
Webduino 馬克一號 Ver 1.5
Arduino
ESP8266
![Page 49: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/49.jpg)
![Page 51: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/51.jpg)
![Page 52: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/52.jpg)
地上跑的~
![Page 53: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/53.jpg)
地上跑的~
![Page 55: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/55.jpg)
遙控車的控制方式 - 前輪
![Page 56: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/56.jpg)
遙控車的控制方式 - 後輪
![Page 57: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/57.jpg)
連接小威開發板
轉接訊號線
焊接控制線
![Page 58: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/58.jpg)
![Page 59: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/59.jpg)
![Page 60: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/60.jpg)
Web 的威力
![Page 61: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/61.jpg)
Webduino 馬克一號 Ver 1.5
Arduino
ESP8266
![Page 62: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/62.jpg)
其實應該是這樣
Arduino
ESP8266JavaScript
![Page 63: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/63.jpg)
![Page 64: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/64.jpg)
![Page 65: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/65.jpg)
![Page 66: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/66.jpg)
視頻遙控車
![Page 67: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/67.jpg)
相關資源
● UV4L WebRTC● tracking.js● raspi-webRTC● 用JavaScript實現人臉追蹤
![Page 68: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/68.jpg)
電源開關
充電孔
升壓板
![Page 69: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/69.jpg)
![Page 70: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/70.jpg)
![Page 71: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/71.jpg)
![Page 72: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/72.jpg)
![Page 73: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/73.jpg)
![Page 74: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/74.jpg)
前進
前進停止 後退停止
後退
![Page 75: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/75.jpg)
超簡單實現三軸控制
![Page 77: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/77.jpg)
F4
04
0B
00
F7
自訂命令
![Page 78: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/78.jpg)
自己感測器元件自己包
10月底前釋出
Arduino Firmware
![Page 79: 2015 JSDC Build Anything with JavaScript](https://reader034.vdocument.in/reader034/viewer/2022051300/587e11471a28abbc2e8b46e9/html5/thumbnails/79.jpg)
webduino