# Webduino 模組實驗 -- Smart 板內建

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

[TOC]

## 三色 LED

Webduino Smart 開發板有內建了一個微型三色 LED 燈 ( 共陰 )，預設的接腳為紅 15，綠 12，藍 13，這表示我們可以直接透過 Smart 發出各種顏色。

打開 Webduino Blockly 編輯工具 ( [https://blockly.webduino.io](https://blockly.webduino.io) )，在畫面中放入開發板積木，開發板下拉選單選擇 Smart 以及使用 Wi-fi 連線，後方文字輸入積木填入 Smart 開發板的 Device ID，接著放入**三色共陰** LED 燈的積木，命稱設定為 rgbled，並設定腳位紅色 15，綠 12，藍 13。


因為要使用網頁按鈕，打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「按鈕行為」，此時畫面中會出現五個網頁按鈕，右下角也會出現對應的積木功能可以選擇。


放入點擊按鈕的行為，讓點擊五顆按鈕分別都會發出不同顏色的光，如果設定為黑色，代表把三色 LED 關閉。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，點擊網頁按鈕，就可以看到 Smart 上頭的三色 LED 發出不同顏色的光線了。

> 範例程式碼：[https://goo.gl/yDjjPP](https://goo.gl/yDjjPP)


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

透過簡單的「迴圈」和「等待」功能，實現出三色LED色彩輪播的效果。

**<u>參考解答</u>**

> 等待功能在「*進階功能 > 等待*」目錄下，此外，**如果使用「無窮迴圈」，切記一定要使用「等待」的功能**，避免無窮迴圈在短時間內耗光瀏覽器效能。（參考連結：https://tutorials.webduino.io/zh-tw/docs/smart/basic/rgbled-colorful.html)


<br><br>

## 光敏電阻

Webduino Smart 開發板的右上角內建了一顆光敏電阻 ( ==腳位為 A0，也就是開發板的 AD 腳位== )，由這個光敏電阻我們就可以偵測環境的光線，做出許多簡單的光線偵測效果，不過也因為光敏電阻使用了 Smart 開發板的 AD 腳位，AD 腳位的插孔就不能給其他需要類比腳的感測器使用，要特別注意。

> 開發板的積木在「*開發板控制*」目錄下，光敏電阻的積木在「*環境偵測 > 光敏 ( 可變 ) 電阻*」目錄下。


因為待會要顯示光敏電阻偵測的數值，打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「顯示文字」，此時畫面中會出現文字顯示的區域，右下角也會出現對應的積木功能可以選擇。


放入 photocell 開始偵測的積木，再偵測到數值的同時，透過顯示的積木將數值顯示在網頁互動測試區裡。


由於類比訊號讀入數值會有一大堆小數點，也常常不是理想的數值區間，所以可以透過「四捨五入」和「尺度轉換」兩種積木，將光敏電阻的數值，轉換成某個區間 ( 例如 0 到 100 )，或是小數點兩位的數值顯示。


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，用光線照射光敏電阻，就可以看到網頁的數值發生變化了。

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

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

利用 Smart 內建的光敏電阻偵測光線，並把數值對應到不同的顏色，透過三色 LED 呈現出來。（例如：當數值在 0 ~ 20 之間就發出紅色光，如果在 20 ~ 40 之間就發出綠色光，如果大於 40 就關閉三色 LED）

**<u>參考解答</u>**

> 數字功能在「*基本功能 > 數學式*」目錄下，邏輯功能在「*基本功能 > 邏輯*」目錄下，**點選「藍色小齒輪」可以新增邏輯判斷**。（參考連結：https://tutorials.webduino.io/zh-tw/docs/smart/basic/rgbled-photocell.html)


<br>
<font style="color:blue">

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

自動小夜燈：利用 Smart 內建的光敏電阻偵測光線，結合上次所做的智慧插座和LED燈，當光線被遮斷時，LED自動點亮。</font>

<br><br>

## 按鈕開關

Webduino Smart 開發板的 USB 電源接孔附近有一個微型按鈕開關 ( 腳位為 4 )，我們可以透過這個按鈕開關，執行「按下」、「放開」或「長按」等動作，進一步操控網頁元素或電子零件。

雖然按鈕開關使用了 4 號腳位，但如果不使用按鈕開關的時候，我們仍然可以透過 4 號腳作為訊號的輸出 ( 不過要注意如果同時又使用了按鈕開關，就也會觸發開關的行為 )。


> 開發板的積木在「*開發板控制*」目錄下，按鈕開關的積木在「*輸入輸出 > 按鈕開關*」目錄下。


因為待會要顯示開關的狀態，所以要打開 Webduino Blockly 的網頁互動測試區，下拉選單選擇「顯示文字」，此時畫面中會出現文字顯示的區域，右下角也會出現對應的積木功能可以選擇。


> 文字輸入的積木在「*基本功能 > 文字*」目錄下。
> （參考連結：https://tutorials.webduino.io/zh-tw/docs/smart/basic/rgbled-button.html)


填入裝置 Device ID，確認開發板上線，點選右上方紅色按鈕執行，用手指按壓 Smart 開發板上的按鈕開關，就可以看到網頁顯示對應的文字。

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

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

利用 Smart 內建的微型按鈕開關，製作如下功能：當按下按鈕時，隨機設定LED的顏色；當長按按鈕時，則關閉LED燈（設成黑色）。

**<u>參考解答</u>**

> 隨機顏色功能在「*基本功能 > 顏色*」目錄下。


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

利用 Smart 內建的微型按鈕開關，製作如下功能：當按下按鈕時，LED顏色隨機改變；當長按按鈕時，則關閉LED燈（設成黑色）。

**<u>參考解答</u>**

> 無窮迴圈的功能在「*基本功能 > 迴圈*」目錄下，等待功能在「*進階功能 > 等待*」目錄下。
> （參考連結：https://tutorials.webduino.io/zh-tw/docs/smart/basic/rgbled-button.html)


**<u>進階練習</u>**

利用 Smart 內建的微型按鈕開關，操控 Youtube 的影片播放。

**<u>參考解答</u>**

> 打開網頁互動測試區，下拉選單選擇 Youtube 後就可以使用 Youtube 相關功能積木，此處先載入 Youtube 模組，影片填入 Youtube 的影片網址即可。
>
> 一個網頁僅需載入一個 Youtube 模組，勿放入多個模組，**需使用原始網址，勿使用縮網址或短網址**。


> PS：其實除了控制單一段影片外，如果載入 Youtube 模組選擇「影片清單」，填入影片清單的網址，亦可控制清單的播放。Youtube 影片清單通常可以個人建立，許多 Youtube 頻道也都會有建立自己的播放清單，以 Webduino 的頻道來說，「範例展示」的清單網址就是：<https://www.youtube.com/playlist?list=PLVmvOKlcwG6ztBaIvctKa-Rcm5kVAmbtb>，**需使用原始網址，勿使用縮網址或短網址**。
>
> 這時候只要將按鈕開關的行為稍做修改，按下開關的時候播放清單的下一段，如果長按按鈕，就回到清單的第一段。


<br>
<font style="color:blue">

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

小檯燈：利用 Smart 內建的按鈕做為開關，結合上次所做的智慧插座和LED燈，當按鈕被按下時，可以切換LED燈。
</font>