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

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

講者簡介
Marty
KSDG、MOPCON 鐵柱
南部社群有誰不認識 Marty 呢？
張小彥
又名 OXXO、前端+設計
綜藝節目有誰不認識張小燕呢？

今天可以學到什麼呢？

認識 Arduino、基本電路學知識、Webduino 的開發
流程、實際用 Webduino 做應用...

器材有缺損的請立即反應

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

Webduino 開發板 ( 小威 ) x1

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

Arduino 起源於義大利，是為了幫助學生學習電子和傳感
器相關知識而誕生。
Arduino 是一個開放原始碼的單晶片微控制器，所有人都
可以製作相同的板子，但如果上面要掛上 Arduino logo，就
必須要支付商標費用。
Arduino 的起源
Cappuccino?

Arduino 是一塊比手掌還小的電路控制板，也是微型電腦，
使用者可以接上任何裝置與傳感器，例如 LED 燈、超音波
傳感器、馬達、喇叭、溫溼度傳感器...等。
配合自動控制的程式，可以輕鬆地做個機器人、飛行器、監
控、照護或遠距離感測器。
Arduino 可以幹麻

Arduino 豐富的元件和傳感器

聲音感測器
馬達
LED 燈
風扇
攝影機

聲音感測器
馬達
揚聲器 ( 喇叭 )
投影機
讀卡機
空氣壓縮機
攝影機
溫濕度感測器

聲音感測器
馬達
揚聲器 ( 喇叭 )
輪子
攝影機
LED

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

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

不過你要先具備一些
基本電子學常識

什麼是「麵包板」？
因為麵包版可以重複使用於測試
電路設計與元件，即插即用，因為
便利性高，就像麵包一樣可以馬
上吃般便利，故取名麵包版 (
breadboard )
不過你也可以稱呼它為：免焊萬用電路板

接了之後整列互通
接了之後整列互通
從中間分開彼此不互通
每一列彼此不互通

問題 1. 燈泡接在哪裡才會亮？
接地
正電
Ａ
Ｃ
Ｂ
4

接地
正電
Ａ
Ｃ
Ｂ
問題 2. 燈泡接在哪裡才會亮？

什麼是「電阻」？
阻礙電流流動的因素叫「電阻」，
單位是「歐姆」。
假如電流是水流，電阻就像河裡的石頭或細小的渠道，
可以阻礙電流流動，因此，電阻可以降低和分散電子元
件所承受的電壓與電流，避免元件損壞。

這個電阻
是多少歐姆？

什麼是「電容」？
「電容」就是指電的容器，單位是
「法拉」，數值越大，表示儲存的
電荷容量越大。
電容就像蓄水池或水庫，除了儲水，更有調節水量的功
能，當直流電或訊號會受到環境的影響，就會出現干擾
的波動，這些波動可能會造成某些元件或整個電路無
法正常運作，例如瞬間有比較大量的電流湧入，通過電
容之後就可以繼續保持穩定輸出，就像洩洪池的原理
一樣。

「洞庭湖」是最有名的洩洪
池之一，對於調節長江水量
有重要的影響。

電路不穩定或有瑕疵的電
解電容，往往因為電解液受
熱產生的氫氣，產生「電容
爆漿」。

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

什麼是「短路」？
「短路」指的是一段電路間的電
阻為 0。
例如把正極與負極直接連接，短路會造成瞬間過大的
電流，而產生強大的能量造成發熱，進而導致爆炸或損
壞的情形發生。

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

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

不過接著你還要會寫
C++

別擔心
現在有 Webduino 可以幫忙

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

直接用 HTML/JS 控制超音波

直接用 HTML/JS 控制電風扇

直接用 HTML/JS 讓小小兵舉手
作者：上課學員四萬

直接用 HTML/JS 讓手機玩夾娃娃機
作者：上課學員 Eia

Webduino 與 Arduino
的差異

Webduino = WebComponents + Arduino

欲操控 Webduino 的網頁
引入 WebComponents

<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>
<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
展示一下

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 的長腳接在 10 的位置，
短腳接在 GND 的位置，
接完 LED 之後接上電源。
37

HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LED</title>
<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>

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

Javascript
window.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);

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

HTML
<!DOCTYPE html>
<html>
<head>
<title>LED</title>
<link rel='import' href='http://webduino.io/components/webduino/wa-led.html' />
</head>
<body>
<div id='light-red' class="off">
</div>
<div id='light-green' class="off">
</div>
<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{
}
#light-red.on img:last-child, #light-green.on img:last-child{
}

Javascript
lightRed.addEventListener('click', function() {
if(lightRed.className == 'on'){
red.off();
lightRed.className = 'off';
}else{
red.on();
lightRed.className = 'on';
}
}, false);
lightRed = document.getElementById('light-red'),
lightGreen = document.getElementById('light-green');
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);

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

HTML
<!DOCTYPE html>
<html>
<head>
<title>三色 LED</title>
<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);
rgb.setColor(255, 255, 0); //黃光
}, false);
rgb.setColor(255, 0, 255); //紫光
}, false);
rgb.setColor(0, 255, 255); //青光
}, false);

Javascript
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');
rgb.setColor(255, 0, 0); //亮紅光
}, false);
rgb.setColor(0, 255, 0); //亮綠光
}, false);
rgb.setColor(0, 0, 255); //亮藍光
}, false);
cleanBtn.addEventListener('click', function () {
rgb.setColor(0, 0, 0); //全部燈光熄滅
}, false);
});
}, false);

V : VCC
R : 腳位 6
B : 腳位 9
G : 腳位 10
PWM
Pulse Width Modulation

HTML
<!DOCTYPE html>
<html>
<head>
<title>三色 LED 調色盤</title>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"
></script>
<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
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
r = 0,
g = 0,
b = 0;
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);

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)';
};
r = 0,
g = 0,
b = 0;
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
}
};
});
}, false);

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

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

HTML<!DOCTYPE html>
<html>
<head>
<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>
<wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic>
</web-arduino>
</body>
</html>

Javascript
var ultrasonic = document.getElementById('ultrasonic'),
show = document.getElementById('show');
ultrasonic.ping(function(cm) {
show.innerHTML = cm;
}, 1000);
});
}, false);

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

HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>超音波傳感器控制圖片大小 </title
</head>
<body>
<img id='img' src='//www.hua.com/flower_picture/meiguihua/images/r17.jpg'></img>
</web-arduino>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<title>超音波傳感器改變音量</title>
<link rel='import' href='//webduino.io/components/webduino/wa-rgbled.html' />
</head>
<body>
</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

player = document.getElementById('player'),
bar = document.getElementById('bar'),
a,
b;
player.play();
ultrasonic.ping(function (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) {
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
86

超音波傳感器 + 三色 LED 燈

超音波
VCC : 3.3V Trig : 腳位 11
Echo : 腳位 10 GND : GND
三色 LED
V : VCC R：6
G：7 B：8

解答
http://goo.gl/zVenBr
99

紅外線開關
按鈕開關
震動開關
水銀開關
開關種類

電阻
關
開
開關
開關原理

<html>
<head>
<title>按鈕改變數字</title>
<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>
</body>
</html>
HTML

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

做個小遊戲：和電腦賽跑

控制伺服馬達
紅色 : 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>
<link rel='import' href='//webduino.io/components/webduino/wa-servo.html' />
</head>
<body>
<input id="r" type="range" min='-80' max='80' step='10' value='0'></input>
<wa-servo id='servo' pin='9'></wa-servo>
</web-arduino>
</body>
</html>

Javascript
r = document.getElementById('r'),
show = document.getElementById('show');
show.innerText = 0;
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);

官方網站
webduino.io
官方粉絲團
https://www.facebook.com/webduino

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web + Arduino 實在有夠潮 ( 課程簡報 )

Similar to Web + Arduino 實在有夠潮 ( 課程簡報 ) (20)

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