Web Bluetooth 開發心得

搭配 Arduino 建立建構可互動 Web System

Metal Sheep
Mar 5, 2022

之所以研究 Web Bluetooth 是因為想遠端控制 Braidiy,一種下廚時搭配教學影片的 Web 系統,因為下廚時通常手油油的或是手機放的遠遠的不好碰觸,所以開始思考如何透過遠端按鈕去操作系統。

準備

雖然主角是 Web Bluetooth,但這篇文章主要是提供一個整體方案,所以咱們先從硬體開始處理。

首先,主角是過年大掃除翻出來的藍牙晶片,搭配一些電子零件行買的按鈕組成,材料如下:

  1. LinkIt 7697
  2. Seeed Technology Co., Ltd 103020092
  3. 杜邦線 * 6
  4. 按鈕 * 3
  5. 任一行動電源

流程設計

起初是想透過 WebSocket 進行雙向控制,因此我考量了以下幾點:

  1. 硬體如何連上 Wi-Fi 等無線網路?是否意味著還要建立連線設定介面?
  2. 我需要一個 WebSocket Server 。
  3. 我要如何驗證我的 WebSocket 身份來確定機器發送對象正確?需要建立一組資料庫?

突然間我就感到一陣疲倦,我只是不想手油油的碰到手機而已…卻得付出驚人的成本。

因此決定透過 Bluetooth 溝通,只要走的通,上面的鳥事通通可以無視。

Bluetooth?那務必獲取更高的作業系統權限,代表只要透過 Cordova 包版成 App 就可以了,畢竟 Braidiy 還有在 GooglePlay 上架呢。

但不知道為什麼怎麼設置都拿不到 Bluetooth 的權限,天真以為一天能搞定的我花了兩天都沒有進展,正當感到絕望之際,發現了 WebBluetooth API

溫故知新,有這麼新奇的方法還管什麼 App

硬體

韌體設計思路很簡單,不接收任何資料,只不斷讀取指定 pin 的電壓,在按下按鈕瞬間就把低電壓的 pin 帶入藍牙傳輸的變數中即可。

程式碼如下:

電力供應方案,不知道為什麼 6v 串在一起的電池會導致不斷重開機,不過7697 有 Micro USB,所幸就拿行動電源作為 5v 電力提供的來源惹。

最後再翻開 LinkIt 7697 的文件,把線插進對應 pin 再接到任意 gnd 即可。

最終成品如下:

小技巧:使用老虎鉗咬死杜邦線,可以省下焊接的過程
透過厚紙板建立外框
丈量高度
最終完成品

Web Site

設計思路是這樣的,從背景不斷輪詢 Bluetooth 傳遞的資料,然後解析現在已案下的按鈕,再透過 event 發送給應用端,改變現在播放的區塊。

Windows 系統上要透過 getCharacteristics 去取得另一組 uuid 才能連線成功,而 android 只要配對韌體定義的即可,這點我蠻不解的,有誰可以告訴我為什麼?

至於 Braidiy 是如何應用的這裡不做贅述,你都在看這麼這麼新潮的文章了,應該不需要說明太多,這裡只展示已封裝的模塊,稍微看一下應該就知道如何運作:

展示

結論

Web Bluetooth API 是一個強大的工具,可以讓 Web 應用有更多的可能,可惜的是,依照蘋果公司的策略應該是不可能讓 IOS 支援,因此很難使用在現階段的商業軟體上。

但或許能在某些特殊場合用上,例如公司內部的硬體控制、遙控器,或是小型物聯網系統的建立等等,透過這個方法都比建立一個正規的溝通手段還要方便許多,也可以當作 MVP 的先行方案等等。

--

--