透過 SPOT Project Hub 雲端平台,加上 SPOT-JSBEL 函式庫,即可用 HTML + Javascript 開發可以偵測周圍 Beacon 並提供互動。

本範例適用於需要巡視實體空間並回報的情境,當使用者持手機裝置進入不同 Beacon 範圍時,程式將會根據 Beacon 顯示地點資訊,並以亮標標示特定部分表單段落,以提醒使用者相關表單內容。

在範例中,我們將逐步示範如何製作能隨著感應不同 Beacon 而動態顯示表單的內容。

準備事項

1. 註冊 SPOT Project Hub 帳號
2. 準備任何一個可以發布 HTML 網頁的空間。
3. (非必要) 如果要進行實機測試,請準備一隻 iOS 或 Android 手機,安裝 SPOT App (AppStore / GoolgePlay) ,並準備 SPOT Beacon 或相容硬體。另外,如果尚未取得 Beacon 硬體,也可以使用另一隻 iOS 系統的手機,並安裝 SPOT Beacon Manager (AppStore),來模擬測試。

步驟一: 在 SPOT Project Hub 上,設定一個與多顆 Beacon 互動的 HTML 5 programme

在本範例中,希望將 3 顆 Beacon 的訊號,都由同一個 HTML 的頁面來處理,所以,我們在 SPOT Project Hub 上,建立一個 Group ,然後把 3 顆 Beacon 放入這一個群組內。詳細步驟如下:

1-1 將 3 顆 Beacon 分別設定名稱為: area01 , area02 , area03 , TRIGGER DISTANCE 設為 FAR

1-2 建立新 Group , 取名為: smartPatrol

1-3 將 3 顆 Beacon 均移入該群組內

1-4 建立一個新的 Programme

1-5 在 Programme 中新增一個 HTML 5 Embedded 模組

1-6 設定網址:請填入你要撰寫 HTML 的網址。也可以暫時先填入展示用的網址: https://event.spot.ms/patrolFormDemo/index.html
並啟用 Enable Vertical Page Scrolling 選項。

步驟二: 撰寫 HTML 與 Javascript

完整的範例程式,可直接在github下載。詳細的撰寫方式說明如下:

2-1 導入必要的函式庫: jQuery 與 spot_jsbelib

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

2-2 創建 beaconManager 實體物件

var beaconManager=new spotJsBEL();

2-3 定義 beacon 事件的 handler function: 每當偵測到周圍 Beacon 發生變化,所呼叫的事件。

var beaconHandler = function(beaconArray) { };
beaconManager.onBeaconChanged(beaconHandler);

2-4 於 beaconHandler 的 function 中,設定程式根據傳入的 beaconArray 來顯示使用者所在區域名稱,並同時以亮標將相關問卷段落標記出來:

var beaconHandler = function(beaconArray) {
// traversal each beacon data and determine which area is nearest
var nearestArea=0;
for(var i=0;i<beaconArray.length;i++)
{
if(beaconArray[i].name=="area01" && beaconArray[i].px==1 )
{
nearestArea=1;
}
else if(beaconArray[i].name=="area02" && beaconArray[i].px==1)
{
nearestArea=2;
}
else if(beaconArray[i].name=="area03" && beaconArray[i].px==1)
{
nearestArea=3;
}
}
var locationDisplayName = ["front door","hall","kitchen"];
// hightlight the nearest area
if(nearestArea!=0)
{
lastNearestArea=nearestArea;
$(".itemArea").removeClass("currentArea");
$("#itemArea"+nearestArea).addClass("currentArea");
$("#locationName").html(locationDisplayName[nearestArea-1]);
}
else
{
$(".itemArea").removeClass("currentArea");
}
}


2-5 撰寫拍照功能的 function : 透過手機照相後,直接回傳到 HTML 中

function takePhoto()
{
beaconManager.requestPhotoCamera(600,600, function(result) {

if(result!="0" && lastNearestArea!=0 )
{
$("#imageArea"+lastNearestArea).append("<img id='p"+imgCounter+"' style='width: 80vw;padding: 5px;'>");
$("#p"+imgCounter).attr("src",result);
imgCounter++;
}
});
}

2-6 在 HTML 完成載入後,呼叫 beaconManager.init() ,以起始 beaconManager 的運作。

$(window).load(function() {
  // init beaconManager
beaconManager.init(); })


2-7 在 HTML 的 body 中,撰寫能隨 Beacon 改變而動態展示的表單內容。表單主要由數個 div 區塊所組成,當使用者進入不同的 Beacon 區域範圍時, Javascript 會改變 div 的 CSS class

<body>
<h3>iBeacon Smart Patrol </h3>
Your current location: <span id="locationName">unknown</span>
<br/>
<input type="button" onclick="takePhoto()" value="take a photo"/>
<hr/>
<div id="itemArea1" class="itemArea">
Question 1:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 2:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 3:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/>
<div id="imageArea1"></div>
</div>
<br/>
<div id="itemArea2" class="itemArea">
Question 4:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 5:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 6:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/>
<div id="imageArea2"></div>
</div>
<br>

<div id="itemArea3" class="itemArea">
Question 7:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 8:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/><br/>
Question 9:
<select>
<option value="">TBS</option>
<option value="normal">Normal</option>
<option value="fc">Further Check</option>
</select>
<br/>
<div id="imageArea3"></div>
</div>
<br/>
</body>


步驟三: 進行模擬器測試

發布 HTML 檔案後,即可以進行測試。您可以直接使用 SPOT Project Hub 的模擬器進行測試:

3-1 在右側的模擬距離選單中選擇任一距離,代表模擬器已進入您所選擇的 Beacon 範圍內,此時已觸發內容,模擬器將顯示表單。

3-2 在距離模擬中選擇靠近區域 2 (area02) ,代表觸發第二區的 Beacon 內容,模擬器會顯示出所在位址,並且以亮標註記表單的第二部分

3-3 在模擬距離中選擇離開區域 2 ,並靠近區域 3 (area03) ,代表手機裝置離開區域二並進入區域三。模擬器會顯示出所在位址,並且以亮標註記表單的第三部分

若需要測試相機的功能,需要以實體手機測試。

步驟四: 進行實機測試

如果有 Beacon 硬體裝置,請將裝置與 SPOT Project Hub 完成連結設定。如果沒有 Beacon 硬體,則可以使用 iOS 系統手機,並安裝 SPOT Beacon Manager (AppleStore / Goolge Play),來模擬測試。

4-1 開啟 Beacon 硬體,開始發射 Beacon 訊號

4-2 進入任一個 Beacon 的範圍內,螢幕會顯示表單

4-3 手機靠近區域2 (area02) 時,螢幕顯示出所在位址,並且以亮色標記表單的第二部分

4-4 手機靠近區域3 (area03) 時,螢幕顯示出所在位址,並且以亮色標記表單的第二部分

4-5 若按下照相按鈕,則會進行照相。拍照成功後,照片會自動貼入表單中。


步驟五: 修改並創造自己的互動方式

以您可以參考我們的建議,針對自己的互動應用開發做進一步的修正與調整:

1. 如果需要調整區域的判斷方式,可以根據回傳的 beaconArray 中,距離的 px 值來決定。例如: px=2 代表手機與該 Beacon 的距離在 2 公尺左右。

2. Beacon 訊號可能會被周圍環境干擾,而造成訊號強度不穩定,而影響程式判斷。一般而言,Beacon 訊號更新頻率為每秒鐘更新一次,平台上已經利用演算法調整,將 Beacon 訊號的變動值的穩定度提升,提供較為精確的訊號資訊。也因此,若您所設計的互動內容會隨著 Beacon 訊號變化而產生內容變動,建議可以將較短時間內發生的訊號變化視為雜訊,不需要顯示。另外,定位資訊略有誤差,適合將定位資訊作為輔助性的提示用途,不建議作為絕對的資訊使用。

 

 

 

 

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