O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

Web + Arduino 實在有夠潮系列課程,於北中南都各進行過兩次,這堂課主要針對 Webduino 的入門者所開設,課程當中介紹了一些基本的電子零件與應用,希望手邊有 Webduino 的朋友,可以透過簡報,玩轉出更多好玩的創意。

Webduino 團隊目前正準備推出嶄新的課程,也請大家繼續給予我們支持和鼓勵!
更多資訊請參考官方網站:https://webduino.io
加入我們的粉絲團:https://www.facebook.com/webduino

  • Entre para ver os comentários

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

  1. 1. WEB + ARDUINO 實在有夠潮 課程簡報分享
  2. 2. 講者簡介 Marty KSDG、MOPCON 鐵柱 南部社群有誰不認識 Marty 呢? 張小彥 又名 OXXO、前端+設計 綜藝節目有誰不認識張小燕呢?
  3. 3. 今天可以學到什麼呢?
  4. 4. 認識 Arduino、基本電路學知識、Webduino 的開發 流程、實際用 Webduino 做應用...
  5. 5. 清點器材
  6. 6. 器材有缺損的請立即反應
  7. 7. 單色 LED x3 三色 LED x1
  8. 8. 超音波傳感器 x1 按鈕 x1 電阻 x1
  9. 9. 電線 x10 杜邦接線 x4
  10. 10. 伺服馬達 x1 齒輪組 x1
  11. 11. 電池盒 x1三號電池 x4
  12. 12. 工具盒 x1 麵包板 x1
  13. 13. Webduino 開發板 ( 小威 ) x1
  14. 14. 小威 = 專用電路板 + Arduino Pro Mini + esp8266 專用電路板Arduino Pro Miniesp 8266 小威
  15. 15. 認識 Arduino
  16. 16. Arduino Team Massimo Banzi
  17. 17. Arduino 起源於義大利,是為了幫助學生學習電子和傳感 器相關知識而誕生。 Arduino 是一個開放原始碼的單晶片微控制器,所有人都 可以製作相同的板子,但如果上面要掛上 Arduino logo,就 必須要支付商標費用。 Arduino 的起源 Cappuccino?
  18. 18. Arduino 是一塊比手掌還小的電路控制板,也是微型電腦, 使用者可以接上任何裝置與傳感器,例如 LED 燈、超音波 傳感器、馬達、喇叭、溫溼度傳感器...等。 配合自動控制的程式,可以輕鬆地做個機器人、飛行器、監 控、照護或遠距離感測器。 Arduino 可以幹麻
  19. 19. Arduino 形形色色的板子
  20. 20. Arduino 豐富的元件和傳感器
  21. 21. Arduino IDE
  22. 22. Arduino 可以做什麼?
  23. 23. 聲音感測器 馬達 LED 燈 風扇 攝影機
  24. 24. 聲音感測器 馬達 揚聲器 ( 喇叭 ) 投影機 讀卡機 空氣壓縮機 攝影機 溫濕度感測器
  25. 25. 聲音感測器 馬達 揚聲器 ( 喇叭 ) 輪子 攝影機 LED
  26. 26. 你一定以為那些只在電影動畫出現
  27. 27. 看完這麼多有趣的應用 是不是想磨刀霍霍試試看呢?
  28. 28. 不過你要先具備一些 基本電子學常識
  29. 29. 認識基本電子學
  30. 30. 什麼是「麵包板」? 因為麵包版可以重複使用於測試 電路設計與元件,即插即用,因為 便利性高,就像麵包一樣可以馬 上吃般便利,故取名麵包版 ( breadboard ) 不過你也可以稱呼它為:免 焊萬用電路板
  31. 31. 接了之後整列互通 接了之後整列互通 從中間分開彼此不互通 每一列彼此不互通
  32. 32. WHY ?????
  33. 33. 麵包板內部構造
  34. 34. 測驗一下
  35. 35. 問題 1. 燈泡接在哪裡才會亮? 接地 正電 A C B 4
  36. 36. 接地 正電 A C B 問題 2. 燈泡接在哪裡才會亮?
  37. 37. 什麼是「電阻」? 阻礙電流流動的因素叫「電阻」, 單位是「歐姆」。 假如電流是水流,電阻就像河裡的石頭或細小的渠道, 可以阻礙電流流動,因此,電阻可以降低和分散電子元 件所承受的電壓與電流,避免元件損壞。
  38. 38. 電流 電阻
  39. 39. 這個電阻 是多少歐姆?
  40. 40. 什麼是「電容」? 「電容」就是指電的容器,單位是 「法拉」,數值越大,表示儲存的 電荷容量越大。 電容就像蓄水池或水庫,除了儲水,更有調節水量的功 能,當直流電或訊號會受到環境的影響,就會出現干擾 的波動,這些波動可能會造成某些元件或整個電路無 法正常運作,例如瞬間有比較大量的電流湧入,通過電 容之後就可以繼續保持穩定輸出,就像洩洪池的原理 一樣。
  41. 41. 「洞庭湖」是最有名的洩洪 池之一,對於調節長江水量 有重要的影響。
  42. 42. 電路不穩定或有瑕疵的電 解電容,往往因為電解液受 熱產生的氫氣,產生「電容 爆漿」。
  43. 43. 區分固態電容與電解電容 其實還有陶磁電阻
  44. 44. 什麼是「短路」? 「短路」指的是一段電路間的電 阻為 0。 例如把正極與負極直接連接,短路會造成瞬間過大的 電流,而產生強大的能量造成發熱,進而導致爆炸或損 壞的情形發生。
  45. 45. 歐姆定律 電壓 (V) = 電流(I) x 電阻(R) 當電阻為 0,則電流會非常大,導致線路毀損
  46. 46. 恭喜你已經擁有了電子學的基本常識
  47. 47. 不過接著你還要會寫 C++
  48. 48. 別擔心 現在有 Webduino 可以幫忙
  49. 49. 只要會寫網頁,就能做出物聯網應用
  50. 50. 直接用 HTML/JS 控制 LED
  51. 51. 直接用 HTML/JS 控制超音波
  52. 52. 直接用 HTML/JS 控制電風扇
  53. 53. 直接用 HTML/JS 讓小小兵舉手 作者:上課學員 四萬
  54. 54. 直接用 HTML/JS 讓手機玩夾娃娃機 作者:上課學員 Eia
  55. 55. Webduino 與 Arduino 的差異
  56. 56. 認識 Webduino
  57. 57. Webduino = WebComponents + Arduino
  58. 58. Server Webduino 連上 Server
  59. 59. 欲操控 Webduino 的網頁 引入 WebComponents
  60. 60. Server
  61. 61. <web-arduino device="????"> </web-arduino> 開發板的 HTML 寫法
  62. 62. <wa-led></wa-led> LED 的 HTML 寫法
  63. 63. <web-arduino device="????"> <wa-led pin='10'></wa-led> </web-arduino> 開發版連接 LED 的 HTML 寫法
  64. 64. <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 展示一下
  65. 65. Webduino 啟動流程
  66. 66. 影片介紹
  67. 67. STEP 1 STEP 2 將按鈕扳動至下圖的位置 ( 左側 ) 就可以開始進行初始化設定。 小威接電源啟動
  68. 68. STEP 3 STEP 4 使用電腦或行動裝置 wifi 搜尋小威名稱 連線指定裝置 ( 需輸入卡片上的裝置密碼 ) 打開 Chrome鍵入 http://192.168.4.1 進入小威上網設定頁面 ( 此處的 SSID 為 AP 的,不是小威的,別混淆喔 ) ssid:MPTC-MeetingL / pwd:0423692699
  69. 69. STEP 5 STEP 6 輸入 AP 的 SSID 以及密碼 按下 submit 後出現 Save OK 表示小威設定成功 此時就可以移除電源,將按鈕扳到右側 重新接上電源 小威的紅色 LED 燈熄滅,表示連線成功
  70. 70. STEP 7 輸入網址或拍QRCode 輸入 Device ID,確認小威是否成功上網 http://webduino.io/device.html
  71. 71. 控制 LED 燈
  72. 72. 影片展示
  73. 73. 將 LED 的長腳接在 10 的位置, 短腳接在 GND 的位置, 接完 LED 之後接上電源。 37
  74. 74. 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>
  75. 75. #light img{ width:100%; display:none; } #light.off img:first-child{ display:inline-block; } #light.on img:last-child{ display:inline-block; } CSS
  76. 76. 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);
  77. 77. 範例 http://goo.gl/stU8GM
  78. 78. 控制兩顆 LED 燈
  79. 79. 影片展示
  80. 80. 將 LED 的接在 10 和 11, 短腳共用 GND 的位置, 接完 LED 之後接上電源。
  81. 81. 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>
  82. 82. 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; }
  83. 83. 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);
  84. 84. 範例 http://goo.gl/W7lFNK
  85. 85. 練習時間
  86. 86. 控制「三顆」 LED 燈
  87. 87. 三色 LED 燈
  88. 88. 影片展示
  89. 89. V : VCC R : 腳位 6 B : 腳位 7 G : 腳位 8
  90. 90. 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>
  91. 91. 其他顏色 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);
  92. 92. 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);
  93. 93. 範例 http://goo.gl/kgPK1Z
  94. 94. 三色 LED 燈調色盤
  95. 95. 影片展示
  96. 96. V : VCC R : 腳位 6 B : 腳位 9 G : 腳位 10 PWM Pulse Width Modulation
  97. 97. 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>
  98. 98. CSS #show{ width: 100%; max-width: 250px; height:100px; border:1px solid #000; background:#000000; margin-top: 15px; margin-left: 5px; }
  99. 99. 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);
  100. 100. 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);
  101. 101. 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);
  102. 102. 範例 http://goo.gl/vJ22qw
  103. 103. 超音波傳感器
  104. 104. 影片展示
  105. 105. VCC : 3.3V Trig : 腳位 11 Echo : 腳位 10 GND : GND
  106. 106. 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>
  107. 107. 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);
  108. 108. 範例 http://goo.gl/j0qUVi
  109. 109. 超音波傳感器控制圖片大小
  110. 110. 影片展示
  111. 111. 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>
  112. 112. 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);
  113. 113. 範例 http://goo.gl/RLKn1A
  114. 114. 超音波傳感器 + 音樂大小聲
  115. 115. 影片展示
  116. 116. <!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
  117. 117. 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); });
  118. 118. 範例 http://goo.gl/aLiQ9L 86
  119. 119. 練習一下
  120. 120. 超音波傳感器 + 三色 LED 燈
  121. 121. 影片展示
  122. 122. 超音波 VCC : 3.3V Trig : 腳位 11 Echo : 腳位 10 GND : GND 三色 LED V : VCC R:6 G:7 B:8
  123. 123. 解答 http://goo.gl/zVenBr 99
  124. 124. 按鈕開關
  125. 125. 開關簡介
  126. 126. 紅外線開關 按鈕開關 震動開關 水銀開關 開關種類
  127. 127. 電阻 關 開 開關 開關原理
  128. 128. 接線
  129. 129. 實際照片
  130. 130. 按按鈕增加數字
  131. 131. <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
  132. 132. 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; });
  133. 133. http://goo.gl/Ov0fR2 範例
  134. 134. http://goo.gl/uIkNpQ 改變圖片位置
  135. 135. 實戰一下
  136. 136. 做個小遊戲:和電腦賽跑
  137. 137. 影片展示
  138. 138. http://goo.gl/RB6sFq
  139. 139. 兩人對戰
  140. 140. 影片展示
  141. 141. http://goo.gl/J8ygL4
  142. 142. 伺服馬達
  143. 143. 影片展示
  144. 144. 控制伺服馬達 紅色 : Vin 黑色/棕色:GND 澄色: 9
  145. 145. 完成圖
  146. 146. 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>
  147. 147. 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);
  148. 148. 範例 http://goo.gl/lN0vXC
  149. 149. 官方網站 webduino.io 官方粉絲團 https://www.facebook.com/webduino
  150. 150. 謝謝聆聽

×