內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87....

98
標題 文文字 - 初體驗

Transcript of 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87....

Page 1: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

標題

內文文字

-

初體驗

Page 2: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

https://goo.gl/bV31WY今天簡報

2

Page 3: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果
Page 5: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

標題

內文文字

-

Page 6: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

超級機器人大亂鬥Webduino + 機器人模型 + 手機控制

6

Page 7: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

鐵路平交道結合多台開發版 + 傳感器

7

Page 8: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

互動商店街Webduino + 樂高積木

8

Page 9: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

同時聲控多台自走車

9

Page 10: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

如果你的手邊已經有 Arduino UNO

10

Page 11: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

只要按照以下步驟就可以用藍芽或序列埠操控

( USB 線 )

11

Page 12: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

下載 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. 不同按鈕不同效果

檢查是否正確安裝 driver( Windows 會看到 COM… Mac 會看到 /dev/…. )

( 開發板必須在 STA 模式 )

13

Page 14: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

進入 Chrome 線上應用程式商店( 搜尋 proxy api )

https://chrome.google.com/webstore/category/apps 14

Page 15: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

安裝這兩個( 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. 不同按鈕不同效果

確認啟用( 網址列輸入:chrome://extensions/ )

16

Page 17: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

打開應用程式( 網址列輸入:chrome://apps/ )

17

Page 18: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

複製序列埠路徑( Windows 會看到 COM… Mac 會看到 /dev/…. )

18

Page 19: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

選擇序列埠,貼上路徑( 同樣的方式,也可以讓開發板走藍芽控制 )

( 有時需重啟 Chrome )

19

Page 20: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

如果想要透過 Wi-Fi 控制例如:從家裡控制學校的裝置

20

Page 21: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

可以使用 Webduino 系列產品

Webduino Fly ( Arduino UNO 擴充板 ) Webduino 馬克1號 Webduino Smart21

Page 22: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

今天要用的:Arduino UNO + Webduino Fly

22

Page 23: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

正式開始

23

Page 24: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果
Page 25: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

Blockly 積木式程式編輯工具

25

Page 26: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

Blockly 可產生程式碼

26

Page 27: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

精選教學範例

27

Page 28: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

上百篇 youtube 範例影片

28

Page 29: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

免註冊、免費使用打開連結

4月推出公開測試版打開連結

Webduino Blockly

Page 30: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

點亮第一盞燈

30

Page 31: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

長腳 10,短腳 GND

31

Page 32: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

設定為「off」,點選執行,LED 就會熄滅

設定時間為「0.5 秒」,點選執行,LED 就會開始閃爍

32

Page 33: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

用遙控器開關,遙控 LED選擇「遙控器」,用一些按鈕來遙控 LED 燈

33

Page 34: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

你還可以這樣玩

34

Page 35: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

行動裝置操控

35

Page 36: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

手機陀螺儀

http://blockly.webduino.io/#-KYT-jpk8Y02oDxsqfxc 36

Page 37: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

即時在 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. 不同按鈕不同效果

蜂鳴器

38

Page 39: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

11 + GND

39

Page 40: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

播放聲音蜂鳴器播放音樂

40

Page 41: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

鍵盤鋼琴使用「電腦鍵盤」,彈奏美好樂曲

41

Page 42: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

你還可以這樣玩

42

Page 43: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

製作音樂點選「說明」試試看

43

Page 44: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

44

Page 45: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

超音波傳感器

45

Page 46: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

VCC: 3.3v Trig: 11 GND: GND Echo:10

46

Page 47: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

偵測並顯示距離設定「顯示文字」,點選執行,顯示出偵測到的距離

47

Page 48: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

隔空改變圖片設定「圖片」,點選執行,用距離來改變圖片屬性

48

Page 49: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

隔空播放 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. 不同按鈕不同效果

綜合練習倒車雷達實作

50

Page 51: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

51

Page 52: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

倒車雷達超音波 ( 10,11 ) + 蜂鳴器 (14) 綜合應用

http://blockly.webduino.io/#-KEsWHu8NqDBsHnm6Umo 52

Page 53: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

溫濕度

53

Page 54: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

開始之前要先認識「麵包板」

54

Page 55: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

什麼是「麵包板」?

因為麵包版可以重複使用於測試

電路設計與元件,即插即用,因為

便利性高,就像麵包一樣可以馬

上吃般便利,故取名麵包版 ( breadboard )

不過你也可以稱呼它為:免焊萬用電路板

55

Page 56: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接了之後整列互通

接了之後整列互通

從中間分開彼此不互通

每一列彼此不互通

56

Page 57: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

先來條紅色電線

57

Page 58: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接上麵包板,紅色區域通電

58

Page 59: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

先來條藍色電線

59

Page 60: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接上麵包板,藍色區域通電,與紅色毫不相干

60

Page 61: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

紅色電線離開變包板紅色區域消失藍色區域保持通電

61

Page 62: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

將紅色電線移往別的地方

62

Page 63: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接上紅色電線紅色區域通電

63

Page 64: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

綠色電線出現

64

Page 65: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接上綠色電線綠色區域通電

65

Page 66: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

WHY ?????

66

Page 67: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

麵包板內部構造

67

Page 68: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

測驗一下

68

Page 69: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

問題 1. 燈泡接在哪裡才會亮?

接地

正電

69

Page 70: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

接地

正電

問題 2. 燈泡接在哪裡才會亮?

70

Page 71: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

正式來接線了

71

Page 72: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

腳位 3.3V , 8 , GND

72

Page 73: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

偵測溫度 or 濕度顯示環境的溫度或濕度

73

Page 74: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

同時顯示溫度濕度顯示環境的溫度與濕度

74

Page 75: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

儲存數據

75

Page 76: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

使用 Google 雲端硬碟建立試算表

76

Page 77: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

第一欄時間、第二欄溫度、第三欄濕度

77

Page 78: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

設定與他人共用:知道連結的人均可編輯設定完成後複製連結

78

Page 79: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

原本要讓大家用這種方法儲存資料

79

Page 80: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

只好打開這個網頁,儲存溫濕度數據記得輸入試算表網址、名稱、溫濕度傳感器腳位

http://webduinoio.github.io/samples/content/googlesheets/dht-save/

80

程式碼

Page 81: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

沒有意外的話,數據就會順利存入試算表

81

Page 82: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

地圖顯示

82

Page 83: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

打開這個網頁,在地圖上顯示溫濕度數據輸入名稱、地址、溫濕度傳感器腳位

http://webduinoio.github.io/samples/content/googlemaps/dht-show/ 83

程式碼

Page 84: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

LED 點矩陣

84

Page 85: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

標題

內文文字

-

Page 86: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

VCC: 5v GND: GND DIN: 9 CS:10 CLK: 11

86

Page 87: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

播放自製圖案動動滑鼠,畫出可愛的圖案

87

Page 88: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

有趣的跑馬燈可以設定文字、數字、圖案的跑馬燈

88

Page 89: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

不同按鈕不同效果設定按鈕的動作,播放不同的效果

89

Page 90: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

試試看用手機操作在積木上按右鍵,點選「說明」

90

Page 91: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

91

Page 97: 內文文字210.60.36.74/download/106/class/01.pdf · 動動滑鼠,畫出可愛的圖案 87. 有趣的跑馬燈 可以設定文字、數字、圖案的跑馬燈 88. 不同按鈕不同效果

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. 不同按鈕不同效果

謝謝聆聽

98