Webduino 學習手冊網站即將改版,提供您更好的閱讀體驗!

搶先試用

超音波 ( 改變圖片大小 )

在基礎教學裡我們了解了超音波傳感器的運作原理,在這個範例就來做點應用,藉由超音波傳感器回傳的公分數值,對應到網頁裡頭圖片的寬度,就可以非常輕鬆地做出一個利用超音波傳感器控制圖片大小的實例囉。

超音波基礎教學:超音波偵測

範例影片展示

接線與實作

把超音波傳感器的 VCC 接在 3.3v,Trig 接在 11,Echo 接在 10,GND 就接在 GND 的腳位,你可以用麵包板接出來,也可以直接就把超音波傳感器跟 Webduino 開發板組合即可。

由於 Webduino 支援開發板種類只會越來越多,接線圖先使用馬克一號與 Fly 示範,對於其他開發板來說,只要 Trig 和 Echo 接數位腳 ( 數字 ),仍會有一樣的效果

馬克一號接線示意圖:

馬克一號接線超音波

Fly 接線示意圖:

Fly 接線超音波

操作解析

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io ),因為這個範例會用網頁「控制圖片」來對圖片做放大縮小或旋轉的控制,所以要先點選右上方「網頁互動測試」的按鈕,打開內嵌測試的網頁,用下拉選單選擇「控制圖片」,就會出現一張圖片,我們會將超音波所測得的距離來控制這張圖片。

網頁互動控制圖片

把開發板放到編輯畫面裡,填入對應的 Webduino 開發板名稱,開發板內放入超音波積木,名稱設定為 ultrasonic,腳位設定為 Trig 11,Echi 10。

超音波偵測相關積木在「輸入輸出 > 超音波」目錄下。

設定超音波傳感器腳位積木

接著放入每 500 毫秒偵測一次的積木,接著把左側網頁互動裡,控制圖片角度的積木擺放進去,讓圖片旋轉的角度就是超音波偵測到的距離。( 可以把原本的數值 0 刪除,放入偵測到的距離 )

超音波距離控制圖片旋轉角度

或是你也可以用超音波的數值設定為圖片的長寬。

超音波距離控制圖片大小

如果不想按照 1:1 的比例,也可以用數學式來計算長寬。

數學式與數字的積木在「基本功能 > 數學式」目錄下。

超音波距離控制圖片大小

如果想要使用自己的圖片,只要更換圖片的網址就可以。

更換圖片積木

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,使用手或是遮蔽物在超音波感測器前面晃動,就可以看到圖片旋轉或是放大縮小。

範例解答:https://goo.gl/sWlPn6

相關參考