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

Preview:

Citation preview

標題

內文文字

-

初體驗

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

2

標題

內文文字

-

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

6

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

7

互動商店街Webduino + 樂高積木

8

同時聲控多台自走車

9

如果你的手邊已經有 Arduino UNO

10

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

( USB 線 )

11

下載 Arduino IDE( 其實目的只在於安裝 Arduino UNO 驅動程式 )

https://www.arduino.cc/en/Main/Software 12

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

( 開發板必須在 STA 模式 )

13

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

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

安裝這兩個( API Proxy for Google Chrome、API Proxy Agent for Google Chrome )

15

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

16

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

17

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

18

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

( 有時需重啟 Chrome )

19

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

20

可以使用 Webduino 系列產品

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

今天要用的:Arduino UNO + Webduino Fly

22

正式開始

23

Blockly 積木式程式編輯工具

25

Blockly 可產生程式碼

26

精選教學範例

27

上百篇 youtube 範例影片

28

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

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

Webduino Blockly

點亮第一盞燈

30

長腳 10,短腳 GND

31

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

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

32

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

33

你還可以這樣玩

34

行動裝置操控

35

手機陀螺儀

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

即時在 Google Map 上顯示燈泡狀態記得輸入 Device ID、地址、腳位

http://webduinoio.github.io/samples/content/googlemaps/button-led/ 37

蜂鳴器

38

11 + GND

39

播放聲音蜂鳴器播放音樂

40

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

41

你還可以這樣玩

42

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

43

44

超音波傳感器

45

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

46

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

47

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

48

隔空播放 Youtube設定「youtube」,點選執行,用距離來控制 Youtube 影音播放

https://blockly.webduino.io/#-KF-TspST-A3NaG-HcCT

49

綜合練習倒車雷達實作

50

51

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

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

溫濕度

53

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

54

什麼是「麵包板」?

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

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

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

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

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

55

接了之後整列互通

接了之後整列互通

從中間分開彼此不互通

每一列彼此不互通

56

先來條紅色電線

57

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

58

先來條藍色電線

59

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

60

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

61

將紅色電線移往別的地方

62

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

63

綠色電線出現

64

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

65

WHY ?????

66

麵包板內部構造

67

測驗一下

68

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

接地

正電

69

接地

正電

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

70

正式來接線了

71

腳位 3.3V , 8 , GND

72

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

73

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

74

儲存數據

75

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

76

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

77

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

78

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

79

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

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

80

程式碼

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

81

地圖顯示

82

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

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

程式碼

LED 點矩陣

84

標題

內文文字

-

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

86

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

87

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

88

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

89

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

90

91

Facebook 粉絲團與社團( 搜尋 Webduino 就會看到 )

粉絲團https://www.facebook.com/webduino/

技術討論社團https://www.facebook.com/groups/webduino.group

97

謝謝聆聽

98

Recommended