2011年3月12日 星期六

用 NETLab Toolkit 把 Processing 與 Arduino 連接起來

實驗目的

練習使用 NETLab Toolkit 把 Processing 與 Arduino 連接起來,使用可變電阻 (potentiometer) 來控制 Processing 畫面上的矩形的水平移動。

image

註: 這篇跟「使用 Firmata 協定連接 Processing 與 Arduino」一文所用的例子是一樣的,文中部份內容會重覆,對沒有看到該文的朋友來說,這樣比較方便閱讀。

情境說明

image

你將做三件事:

  1. 在 Arduino 跑 Firmata 程式
  2. 在電腦上跑 NETLab Hub 程式。NETLab Hub 會使用 Firmata 協定與 Arduino 通訊,並且將序列通訊轉換成網路通訊。
  3. 最後,寫一支 Processing 程式,利用 socket 與 NETLab Hub 建立網路通訊。你的 Processing 程式要在畫布上畫出一個 50 x 50 的矩形,並讀取可變電阻的讀值來控制矩形的水平移動 。
必備知識

在你繼續往下進行時,我假設你看過「NETLab Toolkit 介紹」一文對 NETLab Toolkit 已有足夠的了解,並且也已經把 NETLab Toolkit 下載解壓縮到你的電腦了,如果你還沒下載 NETLab Toolkit,請參考「NETLab Toolkit and Flash 入門 (1)」這篇的介紹。

材料與接線
  • 麵包板 x 1
  • Arduino 板子 x 1
  • 可變電阻 x 1
  • 單心線 x N

    接線很簡單,參考下圖,把可變電阻中間腳位接到類比輸入 (Analog Input) pin 0,剩下的兩支腳位,一支接到 5V,另外一支接到 GND:

    image

    Arduino 程式

    打開 Arduino IDE,點選 File > Examples > Firmata > StandardFirmata 並將程式上傳到 Arduino 板子上:

    image
    ▲ Arduino IDE

    要注意一件事,StandardFirmata 這支 Arduino 程式所用的序列通訊速率是 57600 bps,所以當你在寫 Processing 端的程式在開啟 Serial port 時,記得也要把通訊速率設成 57600 bps,這樣 Arduino 跟 Processing 兩邊才能溝通。

    image

    啟動 NETLab Hub

    點兩下 NETLabHub.exe 打開 NETLab Hub 應用程式:

    image
    ▲ NETLab 開在 port 51000

    我們不需要知道太多有關 Hub 的細節,因此,你只要把 Hub 打開放著就行了。

    Processing 程式第一版

    底下是第一版的 Processing 程式 (NLTKProcessingV1.pde)。我們首先先跟 NETLab Hub 建立網路通訊,確定可以透過 Hub 收到 Sensor 的資料。

    我們使用 Client 建立 socket 網路通訊跟 NETLab Hub 取得連線,NETLab Hub 它用的 socket port 號碼是 51000。接著送出起始動作讓 Hub 打開 Serial Port, 通訊速率為 57600 bps:

    然後送出讀取 Arduino 類比輸入 pin 0 的指令:

    送出上面這個指令後,當資料從 Hub 端傳進來時,訊息會自動送到 clientEvent() 處理函式,我們就可以在 clientEvent() 裏取出訊息,並利用 println(inputString); 把訊息印到 Processing 的狀態視窗,如下圖所示:

    image

    值得注意的是,NETLab Hub 送過來的訊息是像 /service/arduino/reader-writer/analogin/0/value 705 這種 OSC (Open Sound Control) 格式的字串,sensor 的讀值就包在訊息中(如 705)。

    Processing 程式第二版

    接著來撰寫第二版的 Processing 程式 (NLTKProcessingV2.pde),你現在只要從 OSC 字串從取出 Sensor 讀值,然後再利用 Sensor 的讀值控制矩形的水平移動就行了:

    可變電阻的讀值會存放在 sensorValue 裏。rect(sensorValue, 80, 50, 50); 這一行會在 (x, y) 座標為 (sensorValue, 80) 的位置畫出一個 50 x 50 的矩形。因為是水平移動,所以我們把 sensorValue 當作是 x 軸的位置變數,而 y 軸固定在 80 的位置。

    當你執行第二版的 Processing 程式時 (NLTKProcessingV2.pde),會看到一個「背景為白色,視窗中有一個紅色的矩形」的視窗,如下:

    image
    ▲ 旋轉可變電阻可以讓矩形水平移動

    延伸閱讀

    0 意見: