Download - 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果
![Page 1: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/1.jpg)
標題
內文文字
-
初體驗
![Page 3: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/3.jpg)
![Page 10: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/10.jpg)
如果你的手邊已經有 Arduino UNO
10
![Page 11: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/11.jpg)
只要按照以下步驟就可以用藍芽或序列埠操控
( USB 線 )
11
![Page 12: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/12.jpg)
下載 Arduino IDE( 其實目的只在於安裝 Arduino UNO 驅動程式 )
https://www.arduino.cc/en/Main/Software 12
![Page 13: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/13.jpg)
檢查是否正確安裝 driver( Windows 會看到 COM… Mac 會看到 /dev/…. )
( 開發板必須在 STA 模式 )
13
![Page 14: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/14.jpg)
進入 Chrome 線上應用程式商店( 搜尋 proxy api )
https://chrome.google.com/webstore/category/apps 14
![Page 15: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/15.jpg)
安裝這兩個( API Proxy for Google Chrome、API Proxy Agent for Google Chrome )
15
![Page 16: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/16.jpg)
確認啟用( 網址列輸入:chrome://extensions/ )
16
![Page 17: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/17.jpg)
打開應用程式( 網址列輸入:chrome://apps/ )
17
![Page 18: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/18.jpg)
複製序列埠路徑( Windows 會看到 COM… Mac 會看到 /dev/…. )
18
![Page 19: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/19.jpg)
選擇序列埠,貼上路徑( 同樣的方式,也可以讓開發板走藍芽控制 )
( 有時需重啟 Chrome )
19
![Page 20: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/20.jpg)
如果想要透過 Wi-Fi 控制例如:從家裡控制學校的裝置
20
![Page 21: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/21.jpg)
可以使用 Webduino 系列產品
Webduino Fly ( Arduino UNO 擴充板 ) Webduino 馬克1號 Webduino Smart21
![Page 22: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/22.jpg)
今天要用的:Arduino UNO + Webduino Fly
22
![Page 23: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/23.jpg)
正式開始
23
![Page 24: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/24.jpg)
![Page 25: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/25.jpg)
Blockly 積木式程式編輯工具
25
![Page 26: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/26.jpg)
Blockly 可產生程式碼
26
![Page 27: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/27.jpg)
精選教學範例
27
![Page 28: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/28.jpg)
上百篇 youtube 範例影片
28
![Page 29: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/29.jpg)
免註冊、免費使用打開連結
4月推出公開測試版打開連結
Webduino Blockly
![Page 30: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/30.jpg)
點亮第一盞燈
30
![Page 31: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/31.jpg)
長腳 10,短腳 GND
31
![Page 32: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/32.jpg)
設定為「off」,點選執行,LED 就會熄滅
設定時間為「0.5 秒」,點選執行,LED 就會開始閃爍
32
![Page 33: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/33.jpg)
用遙控器開關,遙控 LED選擇「遙控器」,用一些按鈕來遙控 LED 燈
33
![Page 34: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/34.jpg)
你還可以這樣玩
34
![Page 35: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/35.jpg)
行動裝置操控
35
![Page 36: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/36.jpg)
手機陀螺儀
http://blockly.webduino.io/#-KYT-jpk8Y02oDxsqfxc 36
![Page 37: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/37.jpg)
即時在 Google Map 上顯示燈泡狀態記得輸入 Device ID、地址、腳位
http://webduinoio.github.io/samples/content/googlemaps/button-led/ 37
![Page 38: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/38.jpg)
蜂鳴器
38
![Page 39: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/39.jpg)
11 + GND
39
![Page 40: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/40.jpg)
播放聲音蜂鳴器播放音樂
40
![Page 41: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/41.jpg)
鍵盤鋼琴使用「電腦鍵盤」,彈奏美好樂曲
41
![Page 42: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/42.jpg)
你還可以這樣玩
42
![Page 43: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/43.jpg)
製作音樂點選「說明」試試看
43
![Page 44: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/44.jpg)
44
![Page 45: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/45.jpg)
超音波傳感器
45
![Page 46: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/46.jpg)
VCC: 3.3v Trig: 11 GND: GND Echo:10
46
![Page 47: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/47.jpg)
偵測並顯示距離設定「顯示文字」,點選執行,顯示出偵測到的距離
47
![Page 48: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/48.jpg)
隔空改變圖片設定「圖片」,點選執行,用距離來改變圖片屬性
48
![Page 49: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/49.jpg)
隔空播放 Youtube設定「youtube」,點選執行,用距離來控制 Youtube 影音播放
https://blockly.webduino.io/#-KF-TspST-A3NaG-HcCT
49
![Page 50: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/50.jpg)
綜合練習倒車雷達實作
50
![Page 51: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/51.jpg)
51
![Page 52: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/52.jpg)
倒車雷達超音波 ( 10,11 ) + 蜂鳴器 (14) 綜合應用
http://blockly.webduino.io/#-KEsWHu8NqDBsHnm6Umo 52
![Page 53: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/53.jpg)
溫濕度
53
![Page 54: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/54.jpg)
開始之前要先認識「麵包板」
54
![Page 55: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/55.jpg)
什麼是「麵包板」?
因為麵包版可以重複使用於測試
電路設計與元件,即插即用,因為
便利性高,就像麵包一樣可以馬
上吃般便利,故取名麵包版 ( breadboard )
不過你也可以稱呼它為:免焊萬用電路板
55
![Page 56: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/56.jpg)
接了之後整列互通
接了之後整列互通
從中間分開彼此不互通
每一列彼此不互通
56
![Page 57: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/57.jpg)
先來條紅色電線
57
![Page 58: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/58.jpg)
接上麵包板,紅色區域通電
58
![Page 59: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/59.jpg)
先來條藍色電線
59
![Page 60: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/60.jpg)
接上麵包板,藍色區域通電,與紅色毫不相干
60
![Page 61: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/61.jpg)
紅色電線離開變包板紅色區域消失藍色區域保持通電
61
![Page 62: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/62.jpg)
將紅色電線移往別的地方
62
![Page 63: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/63.jpg)
接上紅色電線紅色區域通電
63
![Page 64: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/64.jpg)
綠色電線出現
64
![Page 65: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/65.jpg)
接上綠色電線綠色區域通電
65
![Page 66: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/66.jpg)
WHY ?????
66
![Page 67: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/67.jpg)
麵包板內部構造
67
![Page 68: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/68.jpg)
測驗一下
68
![Page 69: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/69.jpg)
問題 1. 燈泡接在哪裡才會亮?
接地
正電
A
C
B
69
![Page 70: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/70.jpg)
接地
正電
A
C
B
問題 2. 燈泡接在哪裡才會亮?
70
![Page 71: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/71.jpg)
正式來接線了
71
![Page 72: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/72.jpg)
腳位 3.3V , 8 , GND
72
![Page 73: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/73.jpg)
偵測溫度 or 濕度顯示環境的溫度或濕度
73
![Page 74: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/74.jpg)
同時顯示溫度濕度顯示環境的溫度與濕度
74
![Page 75: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/75.jpg)
儲存數據
75
![Page 76: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/76.jpg)
使用 Google 雲端硬碟建立試算表
76
![Page 77: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/77.jpg)
第一欄時間、第二欄溫度、第三欄濕度
77
![Page 78: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/78.jpg)
設定與他人共用:知道連結的人均可編輯設定完成後複製連結
78
![Page 79: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/79.jpg)
原本要讓大家用這種方法儲存資料
79
![Page 80: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/80.jpg)
只好打開這個網頁,儲存溫濕度數據記得輸入試算表網址、名稱、溫濕度傳感器腳位
http://webduinoio.github.io/samples/content/googlesheets/dht-save/
80
程式碼
![Page 81: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/81.jpg)
沒有意外的話,數據就會順利存入試算表
81
![Page 82: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/82.jpg)
地圖顯示
82
![Page 83: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/83.jpg)
打開這個網頁,在地圖上顯示溫濕度數據輸入名稱、地址、溫濕度傳感器腳位
http://webduinoio.github.io/samples/content/googlemaps/dht-show/ 83
程式碼
![Page 84: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/84.jpg)
LED 點矩陣
84
![Page 86: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/86.jpg)
VCC: 5v GND: GND DIN: 9 CS:10 CLK: 11
86
![Page 87: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/87.jpg)
播放自製圖案動動滑鼠,畫出可愛的圖案
87
![Page 88: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/88.jpg)
有趣的跑馬燈可以設定文字、數字、圖案的跑馬燈
88
![Page 89: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/89.jpg)
不同按鈕不同效果設定按鈕的動作,播放不同的效果
89
![Page 90: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/90.jpg)
試試看用手機操作在積木上按右鍵,點選「說明」
90
![Page 91: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/91.jpg)
91
![Page 92: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/92.jpg)
深度練習判斷土壤濕度打開水泵
92
積木解答
![Page 93: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/93.jpg)
加點距陣
測試
紅5v
棕色GND
11,10,9
紅5v
棕色GND
![Page 94: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/94.jpg)
加繼電器
測試
紅5v
棕色GND
A0
![Page 95: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/95.jpg)
加土壤
測試
A1
![Page 96: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/96.jpg)
加水泵
測試紅5v
黑色GND
繼電器輸出腳
![Page 97: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/97.jpg)
Facebook 粉絲團與社團( 搜尋 Webduino 就會看到 )
粉絲團https://www.facebook.com/webduino/
技術討論社團https://www.facebook.com/groups/webduino.group
97
![Page 98: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果](https://reader033.vdokument.com/reader033/viewer/2022042402/5f1252ab6aaf687bf700573e/html5/thumbnails/98.jpg)
謝謝聆聽
98