Download as PDF, PPTX
Uploaded byWeb Arduino
Web + Arduino 實在有夠潮 ( 課程簡報 )
本课程介绍了Arduino及其基本电子学知识，涉及Webduino的开发流程与应用。参与者将学习如何使用Arduino进行电路设计，以及如何通过Web技术（HTML/JavaScript）控制Arduino设备。文中还详细描述了Arduino的组成、基本电路原理及其应用实例。
Web + Arduino 實在有夠潮 ( 課程簡報 )
- 1.
- 3. 講者簡介 Marty KSDG、MOPCON 鐵柱 南部社群有誰不認識 Marty呢？ 張小彥 又名 OXXO、前端+設計 綜藝節目有誰不認識張小燕呢？
- 4.
- 5. 認識 Arduino、基本電路學知識、Webduino 的開發 流程、實際用Webduino 做應用...
- 6.
- 7.
- 8. 單色 LED x3三色 LED x1
- 9. 超音波傳感器 x1 按鈕x1 電阻 x1
- 10.
- 11.
- 12.
- 13.
- 14. Webduino 開發板 (小威 ) x1
- 15. 小威 = 專用電路板+ Arduino Pro Mini + esp8266 專用電路板Arduino Pro Miniesp 8266 小威
- 16.
- 17.
- 18. Arduino 起源於義大利，是為了幫助學生學習電子和傳感 器相關知識而誕生。 Arduino 是一個開放原始碼的單晶片微控制器，所有人都 可以製作相同的板子，但如果上面要掛上Arduino logo，就 必須要支付商標費用。 Arduino 的起源 Cappuccino?
- 19. Arduino 是一塊比手掌還小的電路控制板，也是微型電腦， 使用者可以接上任何裝置與傳感器，例如 LED燈、超音波 傳感器、馬達、喇叭、溫溼度傳感器...等。 配合自動控制的程式，可以輕鬆地做個機器人、飛行器、監 控、照護或遠距離感測器。 Arduino 可以幹麻
- 20.
- 25.
- 28.
- 30.
- 31.
- 32. 聲音感測器 馬達 揚聲器 ( 喇叭) 投影機 讀卡機 空氣壓縮機 攝影機 溫濕度感測器
- 33. 聲音感測器 馬達 揚聲器 ( 喇叭) 輪子 攝影機 LED
- 34.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. 歐姆定律 電壓 (V) =電流(I) x 電阻(R) 當電阻為 0，則電流會非常大，導致線路毀損
- 61.
- 62.
- 63.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 73.
- 74. Webduino = WebComponents+ Arduino
- 75.
- 76. 欲操控 Webduino 的網頁 引入WebComponents
- 77.
- 78.
- 79.
- 80.
- 81. <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 展示一下
- 82.
- 83.
- 84. STEP 1 STEP2 將按鈕扳動至下圖的位置 ( 左側 ) 就可以開始進行初始化設定。 小威接電源啟動
- 85. STEP 3 STEP4 使用電腦或行動裝置 wifi 搜尋小威名稱 連線指定裝置 ( 需輸入卡片上的裝置密碼 ) 打開 Chrome鍵入 http://192.168.4.1 進入小威上網設定頁面 ( 此處的 SSID 為 AP 的，不是小威的，別混淆喔 ) ssid:MPTC-MeetingL / pwd:0423692699
- 86. STEP 5 STEP6 輸入 AP 的 SSID 以及密碼 按下 submit 後出現 Save OK 表示小威設定成功 此時就可以移除電源，將按鈕扳到右側 重新接上電源 小威的紅色 LED 燈熄滅，表示連線成功
- 87. STEP 7 輸入網址或拍QRCode 輸入 DeviceID，確認小威是否成功上網 http://webduino.io/device.html
- 88.
- 89.
- 90. 將 LED 的長腳接在10 的位置， 短腳接在 GND 的位置， 接完 LED 之後接上電源。 37
- 91. HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LED</title> <scriptsrc="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>
- 92. #light img{ width:100%; display:none; } #light.off img:first-child{ display:inline-block; } #light.onimg:last-child{ display:inline-block; } CSS
- 93. 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);
- 94.
- 95.
- 96.
- 97. 將 LED 的接在10 和 11， 短腳共用 GND 的位置， 接完 LED 之後接上電源。
- 98. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LED</title> <scriptsrc="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>
- 99. CSS #light-red img, #light-greenimg{ 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; }
- 100. 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);
- 101.
- 102.
- 103.
- 104.
- 105.
- 106. V : VCC R: 腳位 6 B : 腳位 7 G : 腳位 8
- 107. 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>
- 108. 其他顏色 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);
- 109. Javascript 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'), 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);
- 110.
- 111.
- 112.
- 113. V : VCC R: 腳位 6 B : 腳位 9 G : 腳位 10 PWM Pulse Width Modulation
- 114. 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>
- 115. CSS #show{ width: 100%; max-width: 250px; height:100px; border:1pxsolid #000; background:#000000; margin-top: 15px; margin-left: 5px; }
- 116. 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);
- 117. 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);
- 118. 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);
- 119.
- 120.
- 121.
- 122. VCC : 3.3VTrig : 腳位 11 Echo : 腳位 10 GND : GND
- 123. HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超音波傳感器</title> <scriptsrc="//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>
- 124. Javascript window.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);
- 125.
- 126.
- 127.
- 128. 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>
- 129. Javascript window.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);
- 130.
- 131.
- 132.
- 133. <!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
- 134. 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); });
- 135.
- 136.
- 137. 超音波傳感器 + 三色LED 燈
- 138.
- 139. 超音波 VCC : 3.3VTrig : 腳位 11 Echo : 腳位 10 GND : GND 三色 LED V : VCC R：6 G：7 B：8
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148. <html> <head> <meta charset="utf-8"> <title>按鈕改變數字</title> <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script> <linkrel='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
- 149. window.addEventListener('WebComponentsReady', function() { varboard = 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; });
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161. 控制伺服馬達 紅色 : Vin黑色/棕色:GND 澄色: 9
- 162.
- 163. 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>
- 164. Javascript window.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);
- 165.
- 166.
- 167.