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