2015 webconf - web + arduino 實在有夠潮
TRANSCRIPT
Arduino 開發板
Arduino 豐富的元件和傳感器
Arduino 開發工具
從Web開發角度思考Arduino
vc
如果每個傳感器都是一個HTML標籤 …
<led state='on'></led>
點亮LED燈
馬達轉90度
<motor rotate='90'></motor>
<arduino> <led state='on'></arduino>
乾脆Arduino也是HTML標籤
使用Arduino從來沒有如此簡單過...
插電就 IoT !!!
用HTML/JS 控制 Arduino
比較項目 Arduino Webduino開發語言 C / C++ HTML / JavaScript
開發環境 Arduino IDE 瀏覽器 / ...
連接方式 USB WiFi
更新程式 連接燒錄 立即更新
直接用 HTML控制 LED
<wa-led id='led' pin='10' state='off'>
</wa-led>
直接用 HTML控制 LED
<wa-led id='led' pin='10' state='on'>
</wa-led>
直接用 JS控制按鈕
var btn = document.getElementById('button');btn.on('pressed', function() { //dosomething...});
通過最嚴酷的網路環境 - 高鐵
Webduino = WebComponents + Arduino
用 HTML/JS 控制 Arduino，玩轉 IoT
http://webcomponents.org/ http://arduino.cchttp://fb.me/webduino
Internet
小威須透過WiFi分享器上網
Internet
或透過手機分享WiFi上網
如何連線?1. 用WebComponent 整合 Breakout2. 用WebSocket (Firmata) 和後端Server交互3. 後端Server走TCP/IP (Firmata) 控制 Webduino
Internet
Internet
BrowserCode
CodeRuntime
Runtime
Code
運行環境
BrowserCode
Runtime
Code
控制Webduino的HTML寫法
<web-arduino device="????">
</web-arduino>
Web Components - 組裝元件
<web-arduino device="????"> <wa-led pin='10'></wa-led>
</web-arduino>
<web-arduino device="????">
<wa-ultrasonic trig="11" echo="10"> </wa-ultrasonic>
</web-arduino>
Web Components - 組裝元件
<html><head> //Web Components http://webcomponents.org/ <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"> </script>
//Arduino板子 <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html'> </link>
.
.
.
</head>
HTML需引入js、arduino元件
// 按鈕 <link rel='import' href='http://webduino.io/components/webduino/wa-button.html'></link>
// LED <link rel='import' href='http://webduino.io/components/webduino/wa-led.html'></link>
// 3色全彩LED <link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'></link>
// 伺服馬達元件 <link rel='import' href='http://webduino.io/components/webduino/wa-servo.html'></link>
// 超音波元件 <link rel='import' href='http://webduino.io/components/webduino/wa-ultrasonic.html'></link>
目前元件清單
// 人體紅外線 <link rel='import' href='http://webduino.io/components/webduino/wa-pir.html'></link>
// 水銀傾斜開關 <link rel='import' href='http://webduino.io/components/webduino/wa-mercury.html'></link>
// 振動開關 <link rel='import' href='http://webduino.io/components/webduino/wa-shock.html'></link>
// 溫濕度感測 <link rel='import' href='http://webduino.io/components/webduino/wa-dht11.html'></link>
// 步進馬達 <link rel='import' href='http://webduino.io/components/webduino/wa-stepper.html'></link>
目前元件清單
點亮 LED 燈
<html> <head> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html'></link> <link rel='import' href='http://webduino.io/components/webduino/wa-led.html'></link> </head> <body> <web-arduino id='board' device='MNW?'> <wa-led id='led' pin='10' state='on'></wa-led> </web-arduino> <h1>LED On</h1> </body></html>
HTML
HTML控制LED寫法
HTML Code
超音波縮放圖片
<html><head> ...略...</head><body> <web-arduino id='board' device='reJx'> <wa-ultrasonic id='ultrasonic' trig='11' echo='10'> </wa-ultrasonic> </web-arduino> <img id='img' src='image.jpg'></img></body></html>
window.addEventListener('WebComponentsReady', function() {
var board = document.getElementById('board');
board.on('ready', function() {
var ultrasonic = document.getElementById('ultrasonic');
var img = document.getElementById('img');
ultrasonic.ping(function(cm) {
img.style.width = cm*20 + 'px';
img.style.height = cm*20 + 'px';
}, 300);
});
}, false);
#img { width: 200px; transition:.3s;}
HTML
CSS
JavaScript
超音波縮放圖片
<!DOCTYPE html><html>
<head> <meta name="description" content="webduino ultrasound"> <title>UltraSound Alert</title> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html'></link> <link rel='import' href='http://webduino.io/components/webduino/wa-servo.html'></link></head>
<body> <web-arduino id='board' device='MND0'> <wa-servo id='servo' pin='9' angle='10'></wa-servo> </web-arduino></body></html>
HTML
<web-arduino id='board' device='????'> <wa-button id='button' pin='10'> </wa-button></web-arduino>
用HTML宣告電路接法
更多的傳感器即將現身~
謝謝聆聽