使用 GaussSense Desktop 開發 Web 應用

教學文件 - GaussToys Developers

透過 GaussSense Desktop 應用程式可以在 Mac OS X / Windows 作業系統下快速使用 GaussSense,GaussSense Desktop 透過 WebSocket 傳送磁場資訊到 Web,讓我們能直接使用 text editor 開發 HTML/JavaScript/CSS 網頁應用打造互動原型。

🙋🏻 開始前請先確認您的 Arduino 與 GaussSense 已完成接線與上傳好 Arduino code
若還未完成請先參考 👉 詳細步驟教學

1. 準備 GaussSense Desktop

安裝 GaussSense Desktop 和連結 Mini GaussSense 可參考 開始使用 GaussSense Desktop

2. 嵌入 GaussSense JavaScript Library

連結後,GaussSense Desktop 會建立 WebSocket server 傳送磁場資訊,port 為 5100,可以在 body 標籤裡引入 GaussSense.js 即可接收目前 GaussSense 偵測的磁場資訊:

<script src="http://gausstoys.com/libs/gausssense.js"></script>

嵌入後可直接取用 GaussSense 物件:

var gs = new GaussSense();

各種 HTML/CSS/JS 專案只要嵌入 GaussSense JavaScript Library (gausssense.js) 即可連結磁場資訊。

使用 GaussSense.js 與 p5.js 開發視覺化介面

查看範例:GaussSense.js 與 p5.js 範例應用 (JS Bin)

p5.js 算是 Processing 在 JavaScript 的移植版,使用方法非常簡易,一樣在 body 內引入 p5.js 檔案:

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

如此一來即可開始一個 p5.js 專案,最主要的兩個 function 為 setup() 和 draw(),setup() 為最開始瀏覽器重新整理會執行一次,draw() 為不斷重複的迴圈更新 canvas 的畫面。

gs.getNorthPoint(), gs.getSouthPoint() 和 gs.getBipolarMidpoint() 可以分別取出目前 GaussSense 偵測到的 N 極 (紅色) 和 S 極 (藍色) 的重心位置,與兩極的中點位置,N 極和 S 極有二維座標位置 (x, y) 與磁場強度 intensity,雙極中點有二維座標位置 (x, y) 與磁場強度,還有指向 N 極的旋轉角度 rotation angle,以及傾斜角度 pitch。

當磁場被偵測到時,x, y 座標位置範圍在 0 <= x <= 1, 0 <= y <= 1 之間,當磁場沒有偵測到時, x, y 皆為 -1。

回到教學目錄