Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2015 WebConf - Web + Arduino 實在有夠潮

5,307 views

Published on

WiFi remote controlled Arduino with HTML/JavaScript

Published in: Education
  • DOWNLOAD FULL MOVIE, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. MOVIE 4K,FHD,HD,480P here { https://tinyurl.com/yybdfxwh }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2015 WebConf - Web + Arduino 實在有夠潮

  1. 1. Arduino 開發板
  2. 2. Arduino 豐富的元件和傳感器
  3. 3. Arduino 開發工具
  4. 4. 從Web開發角度 思考Arduino
  5. 5. v c
  6. 6. 如果每個傳感器都是一個 HTML標籤 …
  7. 7. <led state='on'> </led> 點亮LED燈
  8. 8. 馬達轉90度 <motor rotate='90'> </motor>
  9. 9. <arduino> <led state='on'> </arduino> 乾脆Arduino也是HTML標籤
  10. 10. 使用Arduino 從來沒有如此簡單過...
  11. 11. 插電就 IoT !!!
  12. 12. 用HTML/JS 控制 Arduino
  13. 13. 比較項目 Arduino Webduino 開發語言 C / C++ HTML / JavaScript 開發環境 Arduino IDE 瀏覽器 / ... 連接方式 USB WiFi 更新程式 連接燒錄 立即更新
  14. 14. 直接用 HTML控制 LED <wa-led id='led' pin='10' state='off'> </wa-led>
  15. 15. 直接用 HTML控制 LED <wa-led id='led' pin='10' state='on'> </wa-led>
  16. 16. 直接用 JS控制按鈕 var btn = document.getElementById('button'); btn.on('pressed', function() { //dosomething... });
  17. 17. 輕鬆整合既有網頁遊戲 多人同時即時互動
  18. 18. 通過最嚴酷的網路環境 - 高鐵
  19. 19. Webduino = WebComponents + Arduino 用 HTML/JS 控制 Arduino,玩轉 IoT http://webcomponents.org/ http://arduino.cchttp://fb.me/webduino
  20. 20. Internet 小威須透過 WiFi分享器上網 Internet 或透過手機分享 WiFi上網
  21. 21. 如何連線? 1. 用WebComponent 整合 Breakout 2. 用WebSocket (Firmata) 和後端Server交互 3. 後端Server走TCP/IP (Firmata) 控制 Webduino Internet
  22. 22. Internet Browser Code CodeRuntime Runtime Code 運行環境 Browser Code Runtime Code
  23. 23. 控制Webduino的HTML寫法 <web-arduino device="????"> </web-arduino>
  24. 24. Web Components - 組裝元件 <web-arduino device="????"> <wa-led pin='10'></wa-led> </web-arduino>
  25. 25. <web-arduino device="????"> <wa-ultrasonic trig="11" echo="10"> </wa-ultrasonic> </web-arduino> Web Components - 組裝元件
  26. 26. <html> <head> //Web Components http://webcomponents.org/ <script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"> </script> //Arduino板子 <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html'> </link> . . . </head> HTML需引入js、arduino元件
  27. 27. // 按鈕 <link rel='import' href='http://webduino.io/components/webduino/wa-button.html'></link> // LED <link rel='import' href='http://webduino.io/components/webduino/wa-led.html'></link> // 3色全彩LED <link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'></link> // 伺服馬達元件 <link rel='import' href='http://webduino.io/components/webduino/wa-servo.html'></link> // 超音波元件 <link rel='import' href='http://webduino.io/components/webduino/wa-ultrasonic.html'></link> 目前元件清單
  28. 28. // 人體紅外線 <link rel='import' href='http://webduino.io/components/webduino/wa-pir.html'></link> // 水銀傾斜開關 <link rel='import' href='http://webduino.io/components/webduino/wa-mercury.html'></link> // 振動開關 <link rel='import' href='http://webduino.io/components/webduino/wa-shock.html'></link> // 溫濕度感測 <link rel='import' href='http://webduino.io/components/webduino/wa-dht11.html'></link> // 步進馬達 <link rel='import' href='http://webduino.io/components/webduino/wa-stepper.html'></link> 目前元件清單
  29. 29. 點亮 LED 燈
  30. 30. <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 id='board' device='MNW?'> <wa-led id='led' pin='10' state='on'></wa-led> </web-arduino> <h1>LED On</h1> </body> </html> HTML HTML控制LED寫法
  31. 31. HTML Code 超音波縮放圖片
  32. 32. <html> <head> ...略... </head> <body> <web-arduino id='board' device='reJx'> <wa-ultrasonic id='ultrasonic' trig='11' echo='10'> </wa-ultrasonic> </web-arduino> <img id='img' src='image.jpg'></img> </body> </html> window.addEventListener('WebComponentsReady', function() { var board = document.getElementById('board'); board.on('ready', function() { var ultrasonic = document.getElementById('ultrasonic'); var img = document.getElementById('img'); ultrasonic.ping(function(cm) { img.style.width = cm*20 + 'px'; img.style.height = cm*20 + 'px'; }, 300); }); }, false); #img { width: 200px; transition:.3s; } HTML CSS JavaScript 超音波縮放圖片
  33. 33. 控制伺服馬達 HTML Code
  34. 34. <!DOCTYPE html> <html> <head> <meta name="description" content="webduino ultrasound"> <title>UltraSound Alert</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-servo.html'></link> </head> <body> <web-arduino id='board' device='MND0'> <wa-servo id='servo' pin='9' angle='10'></wa-servo> </web-arduino> </body> </html> HTML
  35. 35. <web-arduino id='board' device='????'> <wa-button id='button' pin='10'> </wa-button> </web-arduino> 用HTML宣告電路接法
  36. 36. 更多的傳感器即將現身~
  37. 37. 更多的有趣應用~
  38. 38. http://webduino.io webduino
  39. 39. 謝謝聆聽

×