# Webduino 模組實驗 -- 使用 Smart 開發板

本篇文稿大部份文字參考或引用了Webduino官網上的 [Dr. Smart教學](https://tutorials.webduino.io/zh-tw/docs/smart/) 以及 [基礎教學](https://tutorials.webduino.io/zh-tw/docs/basic/index.html) 上的說明，若有任何疑問，可直接連至Webduino官網上面查看。

[TOC]

## LED

Smart 開發板除了本身的三色 LED、光敏電阻與按鈕開關外，也可以透過 LED 的程式積木操控 LED 燈基本元件，然而同樣的控制方式，更可以實際應用在智慧插座、水泵...等日常生活裡。

LED 的接線方法很簡單，只需將 LED 的長腳接在 Smart 開發板的 5 號腳，短腳接在 GND。

> 因為 Smart 的部分腳位已經使用於內建元件，例如三色 LED ( 15、13、12 )、按鈕開關 ( 4 )、光敏電阻 ( A0 )，因此接線上會先避開這些內建的腳位。


除了開、關、閃爍這些基本應用外，我們更可以透過一個設計好的網頁遙控器來操控，要使用網頁遙控器，可以點選右上方的「網頁互動測試區」，打開測試區之後，下拉選單選擇「遙控器」，就可以使用相對應的功能積木。


接著就把遙控器的按鈕，一一綁定對應的 LED 事件，例如點擊按鈕 1 的時候 LED 會切換狀態，按下按鈕 2 的時候 LED 會亮、放開按鈕 2 則會熄滅，點擊 3 會閃爍...等。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以開始使用網頁遙控器來操控 LED 燈了。

> 範例解答：<https://goo.gl/5HkBUj>

**<u>行動裝置操控 LED</u>**

過去要使用行動裝置操控 LED，必須使用額外學習 APP 的編輯工具，或是必須得購買一台蘋果電腦才能辦到 ( 開發 iOS APP ) ，不過如果今天我們使用 Webduino 來實作，**只需要用行動裝置 ( 不限作業系統 ) 打開網頁遙控器的網頁，不用安裝任何 APP，就可以輕鬆操控 LED 或是其他傳感器裝置**。

要使用行動裝置操控很簡單，在我們編輯完成網頁遙控器程式後，只需要點選右上方的「產生即時預覽 QRCode」，就會將網頁遙控器包裝成網頁並產生 QRCode。


這時候只要用行動裝置掃描 QRCode，就可以看到遙控器的畫面出現在行動裝置裡，點選按鈕就可以操控 LED 了。


<br><br>

## 蜂鳴器

透過 Webduino 的輔助，可以藉由 HTML 或 javascript 就可以編輯音樂，或是透過 Webduino Blockly 填入音符代碼，每個代碼都將對應到蜂鳴器聲音的頻率，透過蜂鳴器發聲以及演奏音樂。

蜂鳴器的接線方法很簡單，蜂鳴器有兩支針腳，只需將其中一支接在 Smart 開發板的 5 號腳位，另一支腳接在 GND。


再來直接用蜂鳴器來播放音樂，音樂的設定可以單純透過音符與節奏來設定，「音符」第一個下拉選單有「無聲、C、CS、D、DS、E、F、FS、G、GS、A、AS、B」，第二個下拉選單就是有幾個八度音，這裏可以設定七個八度音，數字越大聲越高，「節奏」就是幾分之一秒，最少可以到 1/10 秒。

> 音符的英文字母，可以想像成鋼琴的黑鍵與白鍵，C 就是 Do，D 就是 Re，而後方有 S 的就是黑鍵


除了一個音符一個音符的擺入外，還可以直接填入音符與節奏的字串來表現。

> 節奏數字的數量如果小於音符的數量，不足的節奏會以最後一個節奏補足，例如音符有五個，但節奏只有三個數字 6,7,8，最終呈現的節奏會是 8,8,8,8,8 五個 8。


如果要使用預設的音樂，直接使用現成音樂的積木，下拉選單選擇音樂即可。


此外，也可以透過積木的組裝，組裝單一個音符或、音符字串和音樂。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以聽到蜂鳴器發出音樂了。

> 範例程式碼：<https://goo.gl/jT6gfE>

如果覺得這樣做音樂還是不太方便的話，可以用滑鼠在蜂鳴器的積木上面「按右鍵」，點選「小工具」，就會打開虛擬的鋼琴網頁。


在網頁裡填入 Device ID，選擇蜂鳴器的腳位，點選設定，連線成功之後就可以使用虛擬鋼琴，在鋼琴上彈奏的同時就會聽到蜂鳴器發出聲音了。

> 虛擬鋼琴可以紀錄彈奏的音樂，點擊「開始記錄」的按鈕，彈奏時就會將音符與節奏紀錄，點選播放就會播放所記錄的音樂。


<br><br>

## LED 點矩陣

LED 點矩陣顧名思義，就是用許多 LED 燈所組成的元件，在這篇教學裡將會使用 8 × 8 的 LED 點矩陣，型號為 MAX7219，可以做出 8 × 8 的圖形或是文字，甚至只要幾個步驟，就可能輕鬆做出動畫或是跑馬燈的效果。

MAX7219 LED 點矩陣有五支接腳，分別是 VCC、GND、Din ( Dout )、CS ( 晶片選擇 ) 和 CLK ( 時脈 )，在這裡把 Din 接 16、CS 接 14，CLK 接 5，VCC 接 VCC，GND 接 GND。

> 在 Smart 的接線上，如果腳位足夠，會盡量避開 4、12、13、15、A0 這幾個腳位，因這幾個腳位已經預設使用於按鈕開關、三色 LED 與光敏電阻。


開發板內放入 LED 點矩陣的積木，腳位設定 Din 16、CS 14，CLK 5。


接著放入 LED 點矩陣顯示圖形的積木，在後方放入的是一串 16 個字元的 16 進位代碼，顯示的圖形為一個笑臉。

> 16 個字元內每兩個字元為一個單位，所以共有八組 ( 對應到 LED 點矩陣的八列 )，透過十六進位與二進位之間的轉換，表示出該亮哪些燈。


由於十六進位的呈現方式相當不直覺，所以要使用比較方便的繪圖工具，在 LED 點矩陣的積木裡選擇 8x8 的矩陣積木，透過勾選的方式，就可以直接繪製圖案。


除了直接繪製圖案，也可以使用英文、數字與顯示預設圖案的積木，直接顯示英文數字或圖案。

> 此處需注意一個小細節，如欲直接顯示英文字母，則必須使用「英文 ( A~Z , a~z )」的積木，欲顯示數字則必須使用「數字 ( 0~99 )」的積木。


此外，我們也可以透過「顯示動畫」，放入圖案的列表，就可以用動畫的方式逐格顯示。

> 列表的積木在「*基本功能 > 列表*」的目錄中。


如果想做跑馬燈的效果，可以使用「跑馬燈」的積木，選擇左右的方向，就會看到圖案或文字開始移動。


最後，打開網頁互動測試區，下拉選單選擇「遙控器」，透過遙控器的按鈕，讓 LED 點矩陣顯示不同的圖案，或是顯示動畫、跑馬燈。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以透過網頁遙控器，操控 LED 點矩陣了。

> 範例程式碼：<https://goo.gl/44LECn>

LED 點矩陣除了可以透過 Webduino Blockly 操控外，其實還有內嵌了一個有趣的小功能，使用滑鼠在 LED 點矩陣的積木上按右鍵，點選「小工具」。


在網頁裡填入 Device ID，選擇 LED 點矩陣的腳位，按下連線，連線成功後就可以透過下方模擬畫面，即時操控 LED 點矩陣了。

> 網址：<http://webduinoio.github.io/demo/max7219/>。


<br><br>

## 超音波偵測

超音波傳感器的目的在於測量距離，透過超音波碰撞到物體之後反射回來的時間差，就可以計算超音波傳感器與相對應物體之間的距離。

這裏使用的超音波傳感器的型號為 HC-SR04，接線的方式只要將 VCC 接在 3.3Ｖ 或 VCC 的位置，GND 接在 GND 的位置，Trig 接在 16，Echo 接在 14。

> 超音波要接在 3.3V 或 VCC 必須看傳感器本身的規格而定，若偵測時候發現距離偵測不準確，可先更換 3.3V 或 VCC 的接線。


在開發板內放入超音波傳感器的積木，Trig 腳位設定 16，Echo 腳位設定 14。

> 

放入使用超音波偵測的積木，設定為每 500 毫秒 ( 0.5 秒 ) 偵測一次，並用網頁互動測試區的「顯示文字」顯示偵測到的距離，入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以看到偵測到的距離顯示在網頁裡了。

> 因為距離的偵測，是透過超音波的一來一往時間差所計算出，所以如果受測的物體是傾斜狀態、待測物會吸收聲波、或待測物完全遮住超音波傳感器 ( 距離為 0 )，測出來的距離就會有不準確的情形發生。


除了利用「每 500 毫秒偵測一次」的偵測方式，也可以透過超音波「擷取距離」的積木，即時偵測距離，若使用擷取距離來偵測，偵測的間隔時間為「一次發送與接收」( 速度遠快於 500 毫秒 )。


因為偵測只有「一次發送與接收」，所以若要連續偵測，可透過「無窮迴圈」來實現，因此可以在畫面中放入「迴圈」，將迴圈設定為「直到」，最後使用網頁互動測試區的「顯示文字」顯示偵測到的距離。

> 迴圈積木在「*基本功能 > 迴圈*」目錄下，若迴圈**設定為「直到」，表示直到發生什麼事情迴圈會停下，設定為「當」表示當發生什麼事情，迴圈會啟動**。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以即時的用超音波偵測距離了。

> 範例程式碼：<https://goo.gl/eYnBnq>

**<u>練習</u>**

距離感測燈：利用超音波偵測距離，結合上次所做的智慧插座和LED燈，當距離在一定範圍內時，讓LED燈自動亮起來。

<br><br>

## 溫濕度偵測

溫濕度傳感器是接收外界環境變數最基本的傳感器，透過溫濕度傳感器，可以準確的偵測溫度與溼度的即時變化，若再搭配一些樣式表、圖表工具或後端資料庫，就可以整合成為非常有用的數據收集應用。

溫濕度傳感器有四支針腳，格子狀的一面面朝自己，左邊數來第一支針腳為 v ( 接 3.3V )，第二支為 data ( 接 5 )，第三支沒有作用，第四支為 GND。


因為溫濕度的針腳較細，如果使用杜邦線連接會鬆脫，可使用麵包板進行連接。


在開發板內放入溫濕度傳感器的積木，腳位設定 5。


放入使用溫濕度傳感器偵測的積木，設定為每 1000 毫秒 ( 0.5 秒 ) 偵測一次，並用網頁互動測試區的「顯示文字」顯示偵測到的數值，透過下拉選單可以選擇偵測溫度或是濕度，溫度單位為「攝氏幾度」，濕度則是「百分比」。


如果要同時顯示溫濕度，可以使用「建立字串」的積木來組合字串，一開始建立字串積木預設只有兩個缺口，透過點選藍色小齒輪，增加缺口的數量。

> 建立字串、文字積木在「*基本功能 > 文字*」目錄裡。


增加了缺口後，在缺口內填入對應的文字以及偵測到的溫濕度，如果需要換行，可輸入`<br/>`就可以換行。


同時也可以指定顯示文字的大小、行高的設定。

> 如果要使用文字大小、行高的積木，必須先打開「網頁互動測試區」，下拉選單選擇「顯示文字」，相關功能就會出現在左側「*顯示文字*」的目錄內。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，就可以開始偵測環境的溫濕度了。

> 如果偵測到的數值顯示 undefined，表示溫濕度接觸不良，通常稍微調整接觸的針腳即可解決。
>
> 範例程式碼：<https://goo.gl/O3ueY3>

**<u>練習</u>**

溫溼度感測燈：利用溫溼度感測器偵測環境中的溫溼度，結合上次所做的智慧插座和LED燈，當測量值在一定範圍內時，讓LED燈自動亮起來。

<br><br>

## 紅外線接收

紅外線發射與接收，常見於我們日常生活的電器用品，舉凡電視機、冷氣機、遙控電風扇、玩具...等，只要有「遙控器」的電器，大多都是利用紅外線發射與接收的原理，這篇教學將會介紹如何透過 Webduino，時做出可以偵測遙控器紅外線訊號，以及發送紅外線訊號的實際案例。

將紅外線接收器上頭靠近「-」的腳接上 GND，中間的腳是 3.3V，靠近「S」的腳接到 02 的腳位。


打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「顯示文字」，此時在右下角會出現對應的積木功能可以選擇。


把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入紅外線接收器的積木，名稱設定為 irrecv，腳位設定為 02。

> 紅外線接收的積木，在「*輸入輸出 > 紅外線接收*」目錄下

放入「irrecv 開始接收」以及「顯示」的積木，在偵測的時候將紅外線收器接收到的代碼，顯示在網頁裡。

> 如果需要透過紅外線發射器發射訊號，這個步驟可以先用電腦或紙筆記下接收到的代碼。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，用電視機遙控器或紅外線遙控器，對準接收器按壓開關，就可以看到網頁上出現偵測到的紅外線代碼。

**<u>練習</u>**

紅外線遙控燈：利用紅外線接收器，結合上次所做的智慧插座和LED燈，當收到使用者按壓遙控器上特定的按鈕時，LED燈會自動亮起來。

<br><br>

## 聲音偵測

聲音偵測傳感器類似一個微型的麥克風，不過它的功能並不如麥克風一般的強大，主要作用為偵測是否有聲音，在聲音偵測傳感器上頭有一個小型的十字旋鈕，可以用螺絲起子旋轉調整零敏度，靈敏度如果太高，可能連同一些風吹草動的聲音都會偵測到，靈敏度過低可能拍手拍得再大聲都偵測不到，而且由於聲音傳感器本身有傳輸的時間差，因此在接收到聲音後也會有些微的延遲現象。

聲音傳感器有三隻針腳，第一隻針腳為 GND ( 接 GND )，第二隻為 OUT ( 接任一個數位腳，假設接 14 )，第三隻為 5V，接在 5V 或 VCC。

因為這個範例會用聲音震測傳感器偵測聲音，有變化的話就把網頁燈泡圖片點亮，沒有偵測到聲音變化就把燈泡圖片切換成熄滅的樣子，所以會用到「點擊燈泡」的功能，打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「點擊燈泡」，此時畫面中會出現一張熄滅的燈泡圖案，右下角也會出現對應的積木功能可以選擇。


把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入聲音偵測積木，名稱設定為 sound，腳位設定為 14。

> 聲音偵測相關的積木在「*環境偵測 > 聲音偵測*」目錄下。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，用對著聲音偵測傳感器發出聲音，就可以看到燈泡圖片被點亮，一秒之後就會熄滅。

<br><br>
## RFID

RFID 是 Radio Frequency IDentification 的縮寫，中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，透過 RFID 識別裝置 ( 讀卡器 ) 所產生的「電磁場」，能讓附著在物品上的「電子標籤」獲得能量進而發送無線電頻率的訊號，RFID 在今日相當的普及，常見於庫存、資產、人員等的追蹤與管理，甚至許多的防偽、畜產管理也都有 RFID 的身影存在。

這裏我們使用的 RFID 識別裝置的型號為 RC522，RC522 主要針對 13.56MHZ 的無線電頻率識別，工作電壓為 3.3V ，上頭共有八支接腳，分別是 SDA、SCK、MOSI、MISO、IRQ、GND、RST、VCC，其中 SDA、SCK、MOSI、MISO 負責訊號的輸入和輸出。


使用 Smart 開發板時，把 15 接 SDA，14 接 SCK，13 接 MOSI，12 接 MISO，GND 接 GND，3.3V 接 3.3V 的位置。

> 如果要使用 Smart 操控，請使用 [雲端平台](https://tutorials.webduino.io/zh-tw/docs/cloud/index.html) 更新韌體，韌體版本有 reg 標記表示有支援 RFID。


實際接線照片：


打開 Webduino Blockly 編輯工具 ( [https://blockly.webduino.io](https://blockly.webduino.io/) )，因為這個範例會用網頁「顯示文字」來顯示偵測到的每張 RFID 磁卡卡號，所以要先打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「顯示文字」，此時在右下角會出現對應的積木功能可以選擇。


把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，開發板內放入 RFID 積木，名稱設定為 rfid，腳位設定為 SDA 15、SCK 14、MOSI 13、MISO 12

> RFID 相關的積木在「*無線感應 > RFID*」目錄下。

擺入 rfid 偵測訊號的積木，透過網頁顯示偵測到的代碼。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，用 RFID 磁卡去接觸感應器，就可以看到每張卡的對應的卡號了。

> 執行的時候有可能會發生「腳位選錯但仍正確讀取到卡號」的狀況，這是*因為 RFID 程式底層不是使用數字，而是使用 SDA、SCK、MOSI 和 MISO 操控*，在積木上的腳位則是方便使用者接線識別，不過如果實際接線接錯，仍然是無法順利運作的，要特別注意。