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

WEB + ARDUINO實在有夠潮

課程簡報分享

講者簡介Marty

KSDG、MOPCON 鐵柱

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

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

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

今天可以學到什麼呢？

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

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

清點器材

器材有缺損的請立即反應

單色 LED x3 三色 LED x1

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

電線 x10 杜邦接線 x4

伺服馬達 x1 齒輪組 x1

電池盒 x1三號電池 x4

工具盒 x1 麵包板 x1

Webduino 開發板 ( 小威 ) x1

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

專用電路板Arduino Pro Miniesp 8266 小威

認識 Arduino

Arduino TeamMassimo Banzi

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

器相關知識而誕生。

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

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

Arduino 的起源

Cappuccino?

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

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

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

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

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

Arduino 可以幹麻

Arduino 形形色色的板子

Arduino 豐富的元件和傳感器

Arduino IDE

Arduino 可以做什麼？

聲音感測器

馬達

LED 燈

風扇

攝影機

聲音感測器

馬達

揚聲器 ( 喇叭 )

投影機

讀卡機

空氣壓縮機

攝影機

溫濕度感測器

聲音感測器

馬達

揚聲器 ( 喇叭 )

輪子

攝影機

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

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

不過你要先具備一些

基本電子學常識

認識基本電子學

什麼是「麵包板」？

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

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

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

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

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

接了之後整列互通

從中間分開彼此不互通

每一列彼此不互通

WHY ?????

麵包板內部構造

測驗一下

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

接地

正電

接地

正電

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

什麼是「電阻」？

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

單位是「歐姆」。

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

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

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

電流

電阻

這個電阻是多少歐姆？

什麼是「電容」？

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

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

電荷容量越大。

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

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

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

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

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

一樣。

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

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

有重要的影響。

電路不穩定或有瑕疵的電

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

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

爆漿」。

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

什麼是「短路」？

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

阻為 0。

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

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

壞的情形發生。

歐姆定律

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

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

不過接著你還要會寫

別擔心現在有 Webduino 可以幫忙

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

直接用 HTML/JS 控制 LED

直接用 HTML/JS 控制超音波

直接用 HTML/JS 控制電風扇

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

作者：上課學員四萬

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

作者：上課學員 Eia

Webduino 與 Arduino 的差異

認識 Webduino

Webduino = WebComponents + Arduino

Server

Webduino 連上 Server

欲操控 Webduino 的網頁引入 WebComponents

Server

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

</web-arduino>

開發板的 HTML 寫法

<wa-led></wa-led>

LED 的 HTML 寫法

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

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

</web-arduino>

開發版連接 LED 的 HTML 寫法

</html>

完整 HTML

展示一下

Webduino啟動流程

影片介紹

STEP 1 STEP 2

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

小威接電源啟動

STEP 3 STEP 4

使用電腦或行動裝置

wifi 搜尋小威名稱

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

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

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

ssid:MPTC-MeetingL / pwd:0423692699

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

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

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

重新接上電源

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

STEP 7

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

http://webduino.io/device.html

控制 LED 燈

影片展示

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

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

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

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);

範例http://goo.gl/stU8GM

控制兩顆 LED 燈

影片展示

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

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>

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;}

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);

範例http://goo.gl/W7lFNK

練習時間

控制「三顆」 LED 燈

三色 LED 燈

影片展示

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

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>

其他顏色

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);

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);

範例http://goo.gl/kgPK1Z

三色 LED 燈調色盤

影片展示

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

PWMPulse Width Modulation

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>

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

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

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);

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); };

}, false);

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

}, false);

範例http://goo.gl/vJ22qw

超音波傳感器

影片展示

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

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>

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);

範例http://goo.gl/j0qUVi

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

影片展示

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>

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);

範例http://goo.gl/RLKn1A

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

影片展示

<!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>

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); });

範例http://goo.gl/aLiQ9L

練習一下

超音波傳感器 + 三色 LED 燈

影片展示

超音波

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

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

解答http://goo.gl/zVenBr

按鈕開關

開關簡介

紅外線開關按鈕開關

震動開關

水銀開關

開關種類

電阻關

開關

開關原理

接線

實際照片

按按鈕增加數字

<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">  <web-arduino id='board' device='你的 device 名稱'> <wa-button id='button' pin='11'></wa-button> </web-arduino> <div id="show"></div></body></html>

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; });

http://goo.gl/Ov0fR2範例

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

實戰一下

做個小遊戲：和電腦賽跑

影片展示

http://goo.gl/RB6sFq

兩人對戰

影片展示

http://goo.gl/J8ygL4

伺服馬達

影片展示

控制伺服馬達

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

完成圖

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>

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);

範例http://goo.gl/lN0vXC

官方網站

webduino.io 官方粉絲團

https://www.facebook.com/webduino

謝謝聆聽

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

Technology

arduino eğitimleri 3 - arduino programlama dili

arduino eğitimleri - 3 - arduino programlama dili

arduino eğitimleri - 4 - arduino programlama dili - 2

夠「 man 」不夠「俠」！ — 談《水滸傳》

safetyhandbook2013 chinese - 創新科學中心 ·...

arduino eğitimleri 4 - arduino programlama dili - 2

arduino · x arduino voor dummies arduino onder linux...

arduino im technikunterricht - baireuther...

g. gianni arduino configurazione completa arduino …

arduino day 2014 bh - hello world arduino

arduino day 2015 - introdução ao arduino:

arduino eğitimleri - 8 - arduino kalıcı hafıza...

arduino - einführung in die...

瞿潮庆 2012.10.23

arduino eğitimleri 2 - arduino platformuna giriş

arduino y los relés tutoriales arduino

低潮是高潮的前奏 the prelude to triumph

slides minicurso arduino - arduino day 2015

arduino curso práctico de...

2015 webconf - web + arduino 實在有夠潮