web + arduino 實在有夠潮 ( 課程簡報 )

167
WEB + ARDUINO 實在有課程簡報分享

Upload: web-arduino

Post on 17-Jan-2017

5.530 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Web + Arduino 實在有夠潮 ( 課程簡報 )

WEB + ARDUINO實在有夠潮

課程簡報分享

Page 2: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 3: Web + Arduino 實在有夠潮 ( 課程簡報 )

講者簡介Marty

KSDG、MOPCON 鐵柱

南部社群有誰不認識 Marty 呢?

張小彥又名 OXXO、前端+設計

綜藝節目有誰不認識張小燕呢?

Page 4: Web + Arduino 實在有夠潮 ( 課程簡報 )

今天可以學到什麼呢?

Page 5: Web + Arduino 實在有夠潮 ( 課程簡報 )

認識 Arduino、基本電路學知識、Webduino 的開發

流程、實際用 Webduino 做應用...

Page 6: Web + Arduino 實在有夠潮 ( 課程簡報 )

清點器材

Page 7: Web + Arduino 實在有夠潮 ( 課程簡報 )

器材有缺損的請立即反應

Page 8: Web + Arduino 實在有夠潮 ( 課程簡報 )

單色 LED x3 三色 LED x1

Page 9: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波傳感器 x1 按鈕 x1 電阻 x1

Page 10: Web + Arduino 實在有夠潮 ( 課程簡報 )

電線 x10 杜邦接線 x4

Page 11: Web + Arduino 實在有夠潮 ( 課程簡報 )

伺服馬達 x1 齒輪組 x1

Page 12: Web + Arduino 實在有夠潮 ( 課程簡報 )

電池盒 x1三號電池 x4

Page 13: Web + Arduino 實在有夠潮 ( 課程簡報 )

工具盒 x1 麵包板 x1

Page 14: Web + Arduino 實在有夠潮 ( 課程簡報 )

Webduino 開發板 ( 小威 ) x1

Page 15: Web + Arduino 實在有夠潮 ( 課程簡報 )

小威 = 專用電路板 + Arduino Pro Mini + esp8266

專用電路板Arduino Pro Miniesp 8266 小威

Page 16: Web + Arduino 實在有夠潮 ( 課程簡報 )

認識 Arduino

Page 17: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino TeamMassimo Banzi

Page 18: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino 起源於義大利,是為了幫助學生學習電子和傳感

器相關知識而誕生。

Arduino 是一個開放原始碼的單晶片微控制器,所有人都

可以製作相同的板子,但如果上面要掛上 Arduino logo,就必須要支付商標費用。

Arduino 的起源

Cappuccino?

Page 19: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino 是一塊比手掌還小的電路控制板,也是微型電腦,

使用者可以接上任何裝置與傳感器,例如 LED 燈、超音波

傳感器、馬達、喇叭、溫溼度傳感器...等。

配合自動控制的程式,可以輕鬆地做個機器人、飛行器、監

控、照護或遠距離感測器。

Arduino 可以幹麻

Page 20: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino 形形色色的板子

Page 21: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 22: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 23: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 24: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 25: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino 豐富的元件和傳感器

Page 26: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 27: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 28: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino IDE

Page 29: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 30: Web + Arduino 實在有夠潮 ( 課程簡報 )

Arduino 可以做什麼?

Page 31: Web + Arduino 實在有夠潮 ( 課程簡報 )

聲音感測器

馬達

LED 燈

風扇

攝影機

Page 32: Web + Arduino 實在有夠潮 ( 課程簡報 )

聲音感測器

馬達

揚聲器 ( 喇叭 )

投影機

讀卡機

空氣壓縮機

攝影機

溫濕度感測器

Page 33: Web + Arduino 實在有夠潮 ( 課程簡報 )

聲音感測器

馬達

揚聲器 ( 喇叭 )

輪子

攝影機

LED

Page 34: Web + Arduino 實在有夠潮 ( 課程簡報 )

你一定以為那些只在電影動畫出現

Page 35: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 36: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 40: Web + Arduino 實在有夠潮 ( 課程簡報 )

看完這麼多有趣的應用是不是想磨刀霍霍試試看呢?

Page 41: Web + Arduino 實在有夠潮 ( 課程簡報 )

不過你要先具備一些

基本電子學常識

Page 42: Web + Arduino 實在有夠潮 ( 課程簡報 )

認識基本電子學

Page 43: Web + Arduino 實在有夠潮 ( 課程簡報 )

什麼是「麵包板」?

因為麵包版可以重複使用於測試

電路設計與元件,即插即用,因為

便利性高,就像麵包一樣可以馬

上吃般便利,故取名麵包版 ( breadboard )

不過你也可以稱呼它為:免焊萬用電路板

Page 44: Web + Arduino 實在有夠潮 ( 課程簡報 )

接了之後整列互通

接了之後整列互通

從中間分開彼此不互通

每一列彼此不互通

Page 45: Web + Arduino 實在有夠潮 ( 課程簡報 )

WHY ?????

Page 46: Web + Arduino 實在有夠潮 ( 課程簡報 )

麵包板內部構造

Page 47: Web + Arduino 實在有夠潮 ( 課程簡報 )

測驗一下

Page 48: Web + Arduino 實在有夠潮 ( 課程簡報 )

問題 1. 燈泡接在哪裡才會亮?

接地

正電

4

Page 49: Web + Arduino 實在有夠潮 ( 課程簡報 )

接地

正電

問題 2. 燈泡接在哪裡才會亮?

Page 50: Web + Arduino 實在有夠潮 ( 課程簡報 )

什麼是「電阻」?

阻礙電流流動的因素叫「電阻」,

單位是「歐姆」。

假如電流是水流,電阻就像河裡的石頭或細小的渠道,

可以阻礙電流流動,因此,電阻可以降低和分散電子元

件所承受的電壓與電流,避免元件損壞。

Page 51: Web + Arduino 實在有夠潮 ( 課程簡報 )

電流

電阻

Page 52: Web + Arduino 實在有夠潮 ( 課程簡報 )

這個電阻是多少歐姆?

Page 53: Web + Arduino 實在有夠潮 ( 課程簡報 )

什麼是「電容」?

「電容」就是指電的容器,單位是

「法拉」,數值越大,表示儲存的

電荷容量越大。

電容就像蓄水池或水庫,除了儲水,更有調節水量的功

能,當直流電或訊號會受到環境的影響,就會出現干擾

的波動,這些波動可能會造成某些元件或整個電路無

法正常運作,例如瞬間有比較大量的電流湧入,通過電

容之後就可以繼續保持穩定輸出,就像洩洪池的原理

一樣。

Page 54: Web + Arduino 實在有夠潮 ( 課程簡報 )

「洞庭湖」是最有名的洩洪

池之一,對於調節長江水量

有重要的影響。

Page 55: Web + Arduino 實在有夠潮 ( 課程簡報 )

電路不穩定或有瑕疵的電

解電容,往往因為電解液受

熱產生的氫氣,產生「電容

爆漿」。

Page 56: Web + Arduino 實在有夠潮 ( 課程簡報 )

區分固態電容與電解電容 其實還有陶磁電阻

Page 57: Web + Arduino 實在有夠潮 ( 課程簡報 )

什麼是「短路」?

「短路」指的是一段電路間的電

阻為 0。

例如把正極與負極直接連接,短路會造成瞬間過大的

電流,而產生強大的能量造成發熱,進而導致爆炸或損

壞的情形發生。

Page 58: Web + Arduino 實在有夠潮 ( 課程簡報 )

歐姆定律

電壓 (V) = 電流(I) x 電阻(R)當電阻為 0,則電流會非常大,導致線路毀損

Page 61: Web + Arduino 實在有夠潮 ( 課程簡報 )

恭喜你已經擁有了電子學的基本常識

Page 62: Web + Arduino 實在有夠潮 ( 課程簡報 )

不過接著你還要會寫

C++

Page 63: Web + Arduino 實在有夠潮 ( 課程簡報 )

別擔心現在有 Webduino 可以幫忙

Page 64: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 65: Web + Arduino 實在有夠潮 ( 課程簡報 )

只要會寫網頁,就能做出物聯網應用

Page 66: Web + Arduino 實在有夠潮 ( 課程簡報 )

直接用 HTML/JS 控制 LED

Page 67: Web + Arduino 實在有夠潮 ( 課程簡報 )

直接用 HTML/JS 控制超音波

Page 68: Web + Arduino 實在有夠潮 ( 課程簡報 )

直接用 HTML/JS 控制電風扇

Page 69: Web + Arduino 實在有夠潮 ( 課程簡報 )

直接用 HTML/JS 讓小小兵舉手

作者:上課學員 四萬

Page 70: Web + Arduino 實在有夠潮 ( 課程簡報 )

直接用 HTML/JS 讓手機玩夾娃娃機

作者:上課學員 Eia

Page 71: Web + Arduino 實在有夠潮 ( 課程簡報 )

Webduino 與 Arduino 的差異

Page 72: Web + Arduino 實在有夠潮 ( 課程簡報 )
Page 73: Web + Arduino 實在有夠潮 ( 課程簡報 )

認識 Webduino

Page 74: Web + Arduino 實在有夠潮 ( 課程簡報 )

Webduino = WebComponents + Arduino

Page 75: Web + Arduino 實在有夠潮 ( 課程簡報 )

Server

Webduino 連上 Server

Page 76: Web + Arduino 實在有夠潮 ( 課程簡報 )

欲操控 Webduino 的網頁引入 WebComponents

Page 77: Web + Arduino 實在有夠潮 ( 課程簡報 )

Server

Page 78: Web + Arduino 實在有夠潮 ( 課程簡報 )

<web-arduino device="????">

</web-arduino>

開發板的 HTML 寫法

Page 79: Web + Arduino 實在有夠潮 ( 課程簡報 )

<wa-led></wa-led>

LED 的 HTML 寫法

Page 80: Web + Arduino 實在有夠潮 ( 課程簡報 )

<web-arduino device="????">

<wa-led pin='10'></wa-led>

</web-arduino>

開發版連接 LED 的 HTML 寫法

Page 81: Web + Arduino 實在有夠潮 ( 課程簡報 )

<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 device="你的 Device 名稱"> <wa-led pin='10' state='on'></wa-led> </web-arduino></body>

</html>

完整 HTML

展示一下

Page 82: Web + Arduino 實在有夠潮 ( 課程簡報 )

Webduino啟動流程

Page 84: Web + Arduino 實在有夠潮 ( 課程簡報 )

STEP 1 STEP 2

將按鈕扳動至下圖的位置 ( 左側 )就可以開始進行初始化設定。

小威接電源啟動

Page 85: Web + Arduino 實在有夠潮 ( 課程簡報 )

STEP 3 STEP 4

使用電腦或行動裝置

wifi 搜尋小威名稱

連線指定裝置( 需輸入卡片上的裝置密碼 )

打開 Chrome鍵入 http://192.168.4.1進入小威上網設定頁面

( 此處的 SSID 為 AP 的,不是小威的,別混淆喔 )

ssid:MPTC-MeetingL / pwd:0423692699

Page 86: Web + Arduino 實在有夠潮 ( 課程簡報 )

STEP 5 STEP 6輸入 AP 的 SSID 以及密碼

按下 submit 後出現 Save OK表示小威設定成功

此時就可以移除電源,將按鈕扳到右側

重新接上電源

小威的紅色 LED 燈熄滅,表示連線成功

Page 87: Web + Arduino 實在有夠潮 ( 課程簡報 )

STEP 7

輸入網址或拍QRCode輸入 Device ID,確認小威是否成功上網

http://webduino.io/device.html

Page 88: Web + Arduino 實在有夠潮 ( 課程簡報 )

控制 LED 燈

Page 90: Web + Arduino 實在有夠潮 ( 課程簡報 )

將 LED 的長腳接在 10 的位置,短腳接在 GND 的位置,接完 LED 之後接上電源。

37

Page 91: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LED</title>

<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='http://webduino.io/components/webduino/wa-led.html' /></head><body>

<div id='light' class="off"> <img src='http://i.imgur.com/T5H4MHE.png'></img> <img src='http://i.imgur.com/8qFj2Ou.png'></img> </div> <web-arduino id="board" device='你的 device 名稱'> <wa-led id='led' pin='10'></wa-led> </web-arduino></body></html>

Page 92: Web + Arduino 實在有夠潮 ( 課程簡報 )

#light img{ width:100%; display:none;}#light.off img:first-child{ display:inline-block;}#light.on img:last-child{ display:inline-block;}

CSS

Page 93: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascriptwindow.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'),

light = document.getElementById('light');

board.on('ready',function ready() { var led = document.getElementById('led');

light.addEventListener('click', function() { if(light.className == 'on'){ led.off(); light.className = 'off'; }else{ led.on(); light.className = 'on'; } }, false); }); }, false);

Page 94: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/stU8GM

Page 95: Web + Arduino 實在有夠潮 ( 課程簡報 )

控制兩顆 LED 燈

Page 97: Web + Arduino 實在有夠潮 ( 課程簡報 )

將 LED 的接在 10 和 11,短腳共用 GND 的位置,接完 LED 之後接上電源。

Page 98: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LED</title> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='http://webduino.io/components/webduino/wa-led.html' /></head><body> <div id='light-red' class="off"> <img src='http://i.imgur.com/T5H4MHE.png'></img> <img src='http://i.imgur.com/8qFj2Ou.png'></img> </div> <div id='light-green' class="off"> <img src='http://i.imgur.com/T5H4MHE.png'></img> <img src='http://i.imgur.com/8qFj2Ou.png'></img> </div> <web-arduino id="board" device='你的 device 名稱'> <wa-led id='led-red' pin='10'></wa-led> <wa-led id='led-green' pin='11'></wa-led> </web-arduino></body></html>

Page 99: Web + Arduino 實在有夠潮 ( 課程簡報 )

CSS#light-red img, #light-green img{ width:50%; display:none;}#light-red.off img:first-child, #light-green.off img:first-child{ display:inline-block;}#light-red.on img:last-child, #light-green.on img:last-child{ display:inline-block;}

Page 100: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascript

lightRed.addEventListener('click', function() { if(lightRed.className == 'on'){ red.off(); lightRed.className = 'off'; }else{ red.on(); lightRed.className = 'on'; } }, false);

window.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'), lightRed = document.getElementById('light-red'), lightGreen = document.getElementById('light-green');

board.on('ready',function ready() { var red = document.getElementById('led-red'); var green = document.getElementById('led-green');

lightRed.addEventListener('click', function() { if(lightRed.className == 'on'){ red.off(); lightRed.className = 'off'; }else{ red.on(); lightRed.className = 'on'; } }, false);

lightGreen.addEventListener('click', function() { if(lightGreen.className == 'on'){ green.off(); lightGreen.className = 'off'; }else{ green.on(); lightGreen.className = 'on'; } }, false);

}); }, false);

Page 101: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/W7lFNK

Page 102: Web + Arduino 實在有夠潮 ( 課程簡報 )

練習時間

Page 103: Web + Arduino 實在有夠潮 ( 課程簡報 )

控制「三顆」 LED 燈

Page 104: Web + Arduino 實在有夠潮 ( 課程簡報 )

三色 LED 燈

Page 106: Web + Arduino 實在有夠潮 ( 課程簡報 )

V : VCC R : 腳位 6 B : 腳位 7 G : 腳位 8

Page 107: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>三色 LED</title> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'/></head><body> <button id='redBtn'>red</button> <button id='greenBtn'>green</button> <button id='blueBtn'>blue</button> <button id='cleanBtn'>clean</button>

<web-arduino id='board' device='你的 device 名稱'> <wa-rgbled id='rgb' red='6' blue='7' green='8'></wa-rgbled> </web-arduino></body></html>

Page 108: Web + Arduino 實在有夠潮 ( 課程簡報 )

其他顏色

redBtn.addEventListener('click', function () { rgb.setColor(255, 0, 0); //紅光

}, false); greenBtn.addEventListener('click', function () { rgb.setColor(0, 255, 0); //綠光

}, false); blueBtn.addEventListener('click', function () { rgb.setColor(0, 0, 255); //藍光

}, false);

redBtn.addEventListener('click', function () { rgb.setColor(255, 255, 0); //黃光

}, false); greenBtn.addEventListener('click', function () { rgb.setColor(255, 0, 255); //紫光

}, false); blueBtn.addEventListener('click', function () { rgb.setColor(0, 255, 255); //青光

}, false);

Page 109: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascriptwindow.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'); board.on('ready',function() { var redBtn = document.getElementById('redBtn'), greenBtn = document.getElementById('greenBtn'), blueBtn = document.getElementById('blueBtn'), cleanBtn = document.getElementById('cleanBtn'), rgb = document.getElementById('rgb');

redBtn.addEventListener('click', function () { rgb.setColor(255, 0, 0); //亮紅光

}, false); greenBtn.addEventListener('click', function () { rgb.setColor(0, 255, 0); //亮綠光

}, false); blueBtn.addEventListener('click', function () { rgb.setColor(0, 0, 255); //亮藍光

}, false); cleanBtn.addEventListener('click', function () { rgb.setColor(0, 0, 0); //全部燈光熄滅

}, false);

}); }, false);

Page 110: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/kgPK1Z

Page 111: Web + Arduino 實在有夠潮 ( 課程簡報 )

三色 LED 燈調色盤

Page 113: Web + Arduino 實在有夠潮 ( 課程簡報 )

V : VCC R : 腳位 6 B : 腳位 9 G : 腳位 10

PWMPulse Width Modulation

Page 114: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>三色 LED 調色盤</title> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'/></head><body> <div> <label>red:</label> <input id='redBtn' type='range' min='0' max='255' step='5' value='0'> </div> <div> <label>green: </label> <input id='greenBtn' type='range' min='0' max='255' step='5' value='0'> </div> <div> <label>blue: </label> <input id='blueBtn' type='range' min='0' max='255' step='5' value='0'> </div> <div id="show"></div> <web-arduino id='board' device="你的 device 名稱"> <wa-rgbled id='rgb' red='6' blue='9' green='10'></wa-rgbled> </web-arduino></body></html>

Page 115: Web + Arduino 實在有夠潮 ( 課程簡報 )

CSS #show{ width: 100%; max-width: 250px; height:100px; border:1px solid #000;

background:#000000; margin-top: 15px; margin-left: 5px; }

Page 116: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascript var redBtn = document.getElementById('redBtn'), greenBtn = document.getElementById('greenBtn'), blueBtn = document.getElementById('blueBtn'), rgb = document.getElementById('rgb'), show = document.getElementById('show'), r = 0, g = 0, b = 0;

window.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board');

board.on('ready',function() { var redBtn = document.getElementById('redBtn'), greenBtn = document.getElementById('greenBtn'), blueBtn = document.getElementById('blueBtn'), rgb = document.getElementById('rgb'), show = document.getElementById('show'), r = 0, g = 0, b = 0;

var handler = function(evt) { var target = evt.target, id = target.id;

switch (id) { case 'redBtn': r = target.value; break; case 'greenBtn': g = target.value; break; case 'blueBtn': b = target.value; break; }

show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)'; rgb.setColor(r, g, b); };

redBtn.addEventListener('change', handler, false); greenBtn.addEventListener('change', handler, false); blueBtn.addEventListener('change', handler, false);

});

}, false);

Page 117: Web + Arduino 實在有夠潮 ( 課程簡報 )

var handler = function(evt) { var target = evt.target, id = target.id;

switch (id) { case 'redBtn': r = target.value; break; case 'greenBtn': g = target.value; break; case 'blueBtn': b = target.value; break; }show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)';rgb.setColor(r, g, b); };

window.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board');

board.on('ready',function() { var redBtn = document.getElementById('redBtn'), greenBtn = document.getElementById('greenBtn'), blueBtn = document.getElementById('blueBtn'), rgb = document.getElementById('rgb'), show = document.getElementById('show'), r = 0, g = 0, b = 0;

var handler = function(evt) { var target = evt.target, id = target.id;

switch (id) { case 'redBtn': r = target.value; break; case 'greenBtn': g = target.value; break; case 'blueBtn': b = target.value; break; }

show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)'; rgb.setColor(r, g, b); };

redBtn.addEventListener('change', handler, false); greenBtn.addEventListener('change', handler, false); blueBtn.addEventListener('change', handler, false);

});

}, false);

Page 118: Web + Arduino 實在有夠潮 ( 課程簡報 )

redBtn.addEventListener('change', handler, false);greenBtn.addEventListener('change', handler, false);blueBtn.addEventListener('change', handler, false);

window.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board');

board.on('ready',function() { var redBtn = document.getElementById('redBtn'), greenBtn = document.getElementById('greenBtn'), blueBtn = document.getElementById('blueBtn'), rgb = document.getElementById('rgb'), show = document.getElementById('show'), r = 0, g = 0, b = 0;

var handler = function(evt) { var target = evt.target, id = target.id;

switch (id) { case 'redBtn': r = target.value; break; case 'greenBtn': g = target.value; break; case 'blueBtn': b = target.value; break; }

show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)'; rgb.setColor(r, g, b); };

redBtn.addEventListener('change', handler, false); greenBtn.addEventListener('change', handler, false); blueBtn.addEventListener('change', handler, false);

});

}, false);

Page 119: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/vJ22qw

Page 120: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波傳感器

Page 122: Web + Arduino 實在有夠潮 ( 課程簡報 )

VCC : 3.3V Trig : 腳位 11 Echo : 腳位 10 GND : GND

Page 123: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超音波傳感器</title> <script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='//webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' /></head><body> <p id='show'></p>

<web-arduino id='board' device="你的 device 名稱"> <wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic> </web-arduino></body></html>

Page 124: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascriptwindow.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'); board.on('ready',function() { var ultrasonic = document.getElementById('ultrasonic'), show = document.getElementById('show');

ultrasonic.ping(function(cm) { show.innerHTML = cm; }, 1000); }); }, false);

Page 125: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/j0qUVi

Page 126: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波傳感器控制圖片大小

Page 128: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<!DOCTYPE html><html><head> <meta charset="utf-8" <title>超音波傳感器控制圖片大小 </title <script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='//webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' /></head><body> <img id='img' src='//www.hua.com/flower_picture/meiguihua/images/r17.jpg'></img>

<web-arduino id='board' device="你的 device 名稱"> <wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic> </web-arduino></body></html>

Page 129: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascriptwindow.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'); board.on('ready',function() { var ultrasonic = document.getElementById('ultrasonic'), img = document.getElementById('img');

ultrasonic.ping(function(cm) { img.style.width = cm*20 + 'px'; img.style.height = cm*20 + 'px'; }, 1000); }); }, false);

Page 130: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/RLKn1A

Page 131: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波傳感器 + 音樂大小聲

Page 133: Web + Arduino 實在有夠潮 ( 課程簡報 )

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超音波傳感器 改變音量</title> <script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='//webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' /> <link rel='import' href='//webduino.io/components/webduino/wa-rgbled.html' /></head><body> <web-arduino id='board' device="你的 device 名稱"> <wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic> </web-arduino>

<div id="show">0</div> <div id="bar"></div> <audio id='player' loop="loop" value="1"> <source src="https://webduinoio.github.io/event20150408/demo/minions/music.mp3" type="audio/mpeg"> <source src="https://webduinoio.github.io/event20150408/demo/minions/music.ogg" type="audio/ogg"> </audio></body></html>

HTML

Page 134: Web + Arduino 實在有夠潮 ( 課程簡報 )

window.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'); board.on('ready',function() { var ultrasonic = document.getElementById('ultrasonic'), show = document.getElementById('show'), player = document.getElementById('player'), bar = document.getElementById('bar'), a, b;

player.play();

ultrasonic.ping(function (cm) { show.innerHTML = cm; a = cm/100; b = cm; if(a>=1){ a=1; } player.volume = a; if(b>255){ b=255; } bar.style.background = 'rgba('+b+','+(255-b)+',0,1 )'; bar.style.width = (10+b)+'px'; }, 300); }); }, false);

Javascript

ultrasonic.ping(function (cm) { show.innerHTML = cm; a = cm/100; b = cm; if(a>=1){ a=1; } player.volume = a; if(b>255){ b=255; } bar.style.background = 'rgba('+b+','+(255-b)+',0,1 )'; bar.style.width = (10+b)+'px'; }, 300); });

Page 135: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/aLiQ9L

86

Page 136: Web + Arduino 實在有夠潮 ( 課程簡報 )

練習一下

Page 137: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波傳感器 + 三色 LED 燈

Page 139: Web + Arduino 實在有夠潮 ( 課程簡報 )

超音波

VCC : 3.3V Trig : 腳位 11 Echo : 腳位 10 GND : GND

三色 LEDV : VCC R:6G:7 B:8

Page 140: Web + Arduino 實在有夠潮 ( 課程簡報 )

解答http://goo.gl/zVenBr

99

Page 141: Web + Arduino 實在有夠潮 ( 課程簡報 )

按鈕開關

Page 142: Web + Arduino 實在有夠潮 ( 課程簡報 )

開關簡介

Page 143: Web + Arduino 實在有夠潮 ( 課程簡報 )

紅外線開關按鈕開關

震動開關

水銀開關

開關種類

Page 144: Web + Arduino 實在有夠潮 ( 課程簡報 )

電阻關

開關

開關原理

Page 145: Web + Arduino 實在有夠潮 ( 課程簡報 )

接線

Page 146: Web + Arduino 實在有夠潮 ( 課程簡報 )

實際照片

Page 147: Web + Arduino 實在有夠潮 ( 課程簡報 )

按按鈕增加數字

Page 148: Web + Arduino 實在有夠潮 ( 課程簡報 )

<html><head> <meta charset="utf-8"> <title>按鈕改變數字</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-button.html'></link></head><body id="body"> <!-- 放按鈕的 device --> <web-arduino id='board' device='你的 device 名稱'> <wa-button id='button' pin='11'></wa-button> </web-arduino> <div id="show"></div></body></html>

HTML

Page 149: Web + Arduino 實在有夠潮 ( 課程簡報 )

window.addEventListener('WebComponentsReady', function() { var board = document.getElementById('board');

board.on('ready', function() { boardsReady(); }); }, false);

function boardsReady() { var button = document.getElementById('button'), show = document.getElementById('show'), a=0; button.on('pressed',function(){ a=a+1; show.innerHTML = a; }); }

Javascript

button.on('pressed',function(){ a=a+1; show.innerHTML = a; });

Page 150: Web + Arduino 實在有夠潮 ( 課程簡報 )

http://goo.gl/Ov0fR2範例

Page 151: Web + Arduino 實在有夠潮 ( 課程簡報 )

http://goo.gl/uIkNpQ改變圖片位置

Page 152: Web + Arduino 實在有夠潮 ( 課程簡報 )

實戰一下

Page 153: Web + Arduino 實在有夠潮 ( 課程簡報 )

做個小遊戲:和電腦賽跑

Page 155: Web + Arduino 實在有夠潮 ( 課程簡報 )

http://goo.gl/RB6sFq

Page 156: Web + Arduino 實在有夠潮 ( 課程簡報 )

兩人對戰

Page 158: Web + Arduino 實在有夠潮 ( 課程簡報 )

http://goo.gl/J8ygL4

Page 159: Web + Arduino 實在有夠潮 ( 課程簡報 )

伺服馬達

Page 161: Web + Arduino 實在有夠潮 ( 課程簡報 )

控制伺服馬達

紅色 : Vin 黑色/棕色:GND 澄色: 9

Page 162: Web + Arduino 實在有夠潮 ( 課程簡報 )

完成圖

Page 163: Web + Arduino 實在有夠潮 ( 課程簡報 )

HTML<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>servo</title> <script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script> <link rel='import' href='//webduino.io/components/webduino/web-arduino.html' /> <link rel='import' href='//webduino.io/components/webduino/wa-servo.html' /></head> <body><div id="show"></div><input id="r" type="range" min='-80' max='80' step='10' value='0'></input> <web-arduino id="board" device='你的 device 名稱'> <wa-servo id='servo' pin='9'></wa-servo></web-arduino></body></html>

Page 164: Web + Arduino 實在有夠潮 ( 課程簡報 )

Javascriptwindow.addEventListener('WebComponentsReady', function () { var board = document.getElementById('board'), r = document.getElementById('r'), show = document.getElementById('show');

show.innerText = 0; board.on('ready',function ready() { var servo = document.getElementById('servo'), a = 0;

servo.angle= -a + 90; show.innerText = a;

r.addEventListener('change',function(e){ var t = e.target; a = t.value; servo.angle= -a + 90; show.innerText = a; }); },false);}, false);

Page 165: Web + Arduino 實在有夠潮 ( 課程簡報 )

範例http://goo.gl/lN0vXC

Page 166: Web + Arduino 實在有夠潮 ( 課程簡報 )

官方網站

webduino.io 官方粉絲團

https://www.facebook.com/webduino

Page 167: Web + Arduino 實在有夠潮 ( 課程簡報 )

謝謝聆聽