Arduino Nano 33 BLE與Web應用程序通信

描述

什么是 BLE？

BLE（低功耗藍牙）以低能耗處理硬件和軟件之間的無線通信。它是創建智能家居設備、可穿戴設備和各種物聯網項目的非常方便的工具。然而，構建一個定制的應用程序來與設備通信對于初學者來說可能會讓人感到困惑和恐懼。

什么是 p5.ble.js？

p5.ble.js是一個 JavaScript 庫，可以在 BLE 設備和 p5 草圖之間進行通信。它使用 Web 藍牙 API 并將復雜的設置變成幾個簡單的功能。它可以幫助您創建與支持 BLE 的電路交互的定制 Web 應用程序。

關于本教程

本教程將通過一個示例向您展示 p5.ble.js 的一些基本功能：讀取、寫入和訂閱。按照本教程，您將讓您的 Arduino Nano 33 BLE 與運行在 Chrome 瀏覽器上的 Web 應用程序通信。

第 1 步：組裝電路

Arduino Nano 33 BLE 或 Arduino Nano 33 BLE Sense 可能沒有焊接頭針。你需要焊接頭針。使用面包板可以幫助您對齊插頭引腳。

然后，將按鈕連接到數字引腳 4。

第 2 步：安裝庫

要對 Arduino Nano 33 BLE 進行編程，我們需要安裝相應的庫。轉到工具>>板>>板管理器，搜索Arduino Nano 33 BLE，單擊安裝（如果您以前安裝過，則單擊更新）。

安裝后，進入工具>>板，選擇Arduino Nano 33 BLE。

注意：Arduino Nano 33 BLE 和 Arduino Nano 33 BLE Sense 使用相同的板設置。Arduino Nano IoT 使用不同的。請在編程之前仔細檢查您的 Arduino 名稱。

董事會經理

?

然后，轉到工具 >> 管理庫，搜索 ArduinoBLE，單擊安裝（或更新，如果您以前安裝過）。

圖書館經理

?

然后，我們準備對 Arduino Nano 33 BLE 進行編程。

第 3 步：對 Arduino 進行編程

在本教程中，我們將使用示例草圖。轉到文件 >> 示例 >> ArduinoBLE >> 外圍設備，打開示例 ButtonLED

驗證草圖并對其進行編程。

編程完成后，打開串行監視器，您應該看到“藍牙設備處于活動狀態，等待連接...”

串行監視器

?

如果您按下面包板上的按鈕，您應該會看到板載 LED 亮起并且串行監視器中打印“LED on”。這是為了驗證您的電路是否正確接線。如果您沒有看到 LED 或打印，請檢查您的接線。

第 4 步：添加 p5.ble.js 庫

在 Chrome 瀏覽器中打開p5.js Editor，點擊箭頭圖標打開index.html文件。如下所示粘貼以下代碼行。

<script src="https://unpkg.com/p5ble@0.0.4/dist/p5.ble.js" type="text/javascript">script>

添加 p5.ble.js 庫

?

第 5 步：p5 編程

首先，我們將聲明服務和特征的 UUID。這些是我們 Arduino 草圖中特征的唯一標識符。

const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";
const characteristicsUUID = {
 led:"19b10011-e8f2-537e-4f6c-d104768a1214",
 button:"19b10012-e8f2-537e-4f6c-d104768a1214"
}

然后，我們需要在 p5 草圖中創建 BLE 對象和特征的實例。

let buttonCharacteristic;
let ledCharacteristic;
let myBLE;

接下來，我們將創建一個全局變量來保存從按鈕讀取的值

let buttonValue = 0;

在setup函數內部，我們將啟動 BLE 對象和界面按鈕。

function setup() {
 createCanvas(400, 400);
 myBLE = new p5ble();
 createCanvas(600, 400);
 background("#FFF");
 const connectButton = createButton('Connect and Start Notifications')
 connectButton.mousePressed(connectAndStartNotify);
 const toggleButton = createButton('Toggle');
 toggleButton.position(15, 15);
 toggleButton.mousePressed(toggleLED);
}

然后，我們將聲明每個動作對應的回調函數：當connectButton被按下時， connectAndStartNotify函數將被觸發。當 toggleButton 被按下時，toggleLED函數將被觸發。

function connectAndStartNotify() {
 myBLE.connect(serviceUuid, gotCharacteristics);
}
function gotCharacteristics(error, characteristics) 
 if (error) console.log('error: ', error);
 console.log(characteristics[1].uuid);
 for(let i = 0; i < characteristics.length;i++){
   if(characteristics[i].uuid == characteristicsUUID.button){
     buttonCharacteristic = characteristics[i];
     myBLE.startNotifications(buttonCharacteristic, handleButton);
   }else if(characteristics[i].uuid == characteristicsUUID.led){
     ledCharacteristic = characteristics[i];
   }else{
     console.log("nothing");
   }
 }
function handleButton(data) {
 console.log('Button: ', data);
 buttonValue = Number(data);
}
function toggleLED(){
 myBLE.read(ledCharacteristic, handleLED);
}
function handleLED(error, data){
 if (error) console.log('error: ', error);
 console.log('LED: ', data);
 myBLE.write(ledCharacteristic, !data);
}

然后，在draw函數內部，我們將使用buttonValue來繪制一個正方形。

function draw() {
  noStroke();
 if(buttonValue>0){
   fill(color(200, 200, 200));
 }else{
   fill(color(100, 200, 200));
 }
 rect(15, 40, 60, 60);
}

現在，我們準備運行 p5 草圖。

第 6 步：運行 p5 草圖

單擊編輯器左上角的播放按鈕，我們可以運行草圖。當草圖運行時，您會看到連接和開始通知按鈕。單擊該按鈕，您將在瀏覽器中看到一個彈出窗口。這是選擇 BLE 設備的窗口。如果只有一個帶有 ButtonLED 草圖編程和供電的 Arduino，那么您應該只會在窗口中看到一個選項。配對。

配對窗口

?

然后，您應該在控制臺中看到以下日志：

控制臺日志

?

現在，如果您單擊面包板上的按鈕，網絡應用程序中的方塊將改變顏色。如果您單擊 Web 應用程序中的按鈕，板載 LED 將切換。

現在，您已經成功運行了您的第一個p5.ble.js項目。您可以按照示例為您的 Arduino BLE 項目創建自己的 Web 應用程序。

提示

• 如果您遇到多個 BLE 項目，最好將示例中的服務 UUID 更改為不同的 UUID。您可以使用UUID 生成器來生成它。請不要忘記替換 Arduino 草圖和 p5 草圖中的 UUID。
• 如果您無法將 p5 草圖正確連接到您的 Arduino，您可以使用通用 BLE 移動應用程序，例如 LightBlue，首先測試您的 Arduino。