Spot Beacon Event Library for JavaScript (spot_jsbelib.js) 提供開發者一個 Javascript 函式庫,在行動裝置上開發能夠與 iBeacon 互動的 HTML 5 內容。Spot Beacon Event Library 中,加入了由 beacon 距離變化所驅動的 beacon event ,可以基於此 event 建立相關功能。

從 GitHub 下載 spot-jsbelib

安裝

函式庫基於 jQurey library. 在 HTML 中將 jQuery library 和 spot-jsbelib.js 導入:

<script type="text/javascript" src="/jquery.min.js">
</script><script type="text/javascript" src="/spot_jsbelib.js"></script>

語法

建立物件

var beaconManager=new spotJsBEL(); 

宣告一個 callback 函式,用來處理接收到 beacon 陣列後的動作。

var beaconHandler = function(beaconArray) {
    // Do-Something with beaocn array
};

將這個 callback 函式指定給 onBeaconChanged 事件。

beaconManager.onBeaconChanged(beaconHandler);

在 dom ready 後,呼叫起始函式。

$(window).ready(function() {
    beaconManager.init();
};

Beacon Array

當偵測到周圍的 beacon 距離變化時,callback 函式被呼叫,傳入一個 Beacon 陣列。

陣列中包含 json 物件,格式說明如下:

{id:<String>, name: <String>, px: <Number> }
  • id and name: 可由 Spot Project Hub 的後台指定與取得。
  • px: 根據 Apple's iBeacon 規格, 數值代表的 beacon 距離:
    • 0 : Unknown (> 30 m )
    • 1 : Immediate (< 50 cm)
    • 2 : Near (< 2 m)
    • 3 : Far (< 30 m)

小提醒: 當一個 beacon 距離超過 30m 之後,由於不再收到無線訊號,該 beacon 有可能不再出現在陣列中,而不是 px=0。

測試 Beacon Event

如果您沒有 Project Hub 雲端帳號,可以用以下的方式,直接在 console 上測試 beacon event.

beaconManager.updateBeaconData('{"b":[{"id":"1-1-1", "name":"test", "px":2}],"d":true,"o":true}');

亦可直接使用 SPOT Porject Hub 所提供的模擬器,測試當 Beacon 的距離位置變化時,所開發的 HTML 5 的互動行為。


範例程式

 

Official iBeacon Licensee

© 2014 KKlabs Inc., All rights reserved

Add 1F., No. 16-1, Ln. 106, Songjiang Rd.,
Taipei City 10459, Taiwan
Email service@kkbooks.tw
Tel +886 2 2563 2260