Arduino Nano 33 BLE與Web應(yīng)用程序通信

描述

什么是 BLE？

BLE（低功耗藍(lán)牙）以低能耗處理硬件和軟件之間的無線通信。它是創(chuàng)建智能家居設(shè)備、可穿戴設(shè)備和各種物聯(lián)網(wǎng)項(xiàng)目的非常方便的工具。然而，構(gòu)建一個(gè)定制的應(yīng)用程序來與設(shè)備通信對(duì)于初學(xué)者來說可能會(huì)讓人感到困惑和恐懼。

什么是 p5.ble.js？

p5.ble.js是一個(gè) JavaScript 庫，可以在 BLE 設(shè)備和 p5 草圖之間進(jìn)行通信。它使用 Web 藍(lán)牙 API 并將復(fù)雜的設(shè)置變成幾個(gè)簡單的功能。它可以幫助您創(chuàng)建與支持 BLE 的電路交互的定制 Web 應(yīng)用程序。

關(guān)于本教程

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

第 1 步：組裝電路

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

然后，將按鈕連接到數(shù)字引腳 4。

第 2 步：安裝庫

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

安裝后，進(jìn)入工具>>板，選擇Arduino Nano 33 BLE。

注意：Arduino Nano 33 BLE 和 Arduino Nano 33 BLE Sense 使用相同的板設(shè)置。Arduino Nano IoT 使用不同的。請(qǐng)?jiān)诰幊讨白屑?xì)檢查您的 Arduino 名稱。

董事會(huì)經(jīng)理

?

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

圖書館經(jīng)理

?

然后，我們準(zhǔn)備對(duì) Arduino Nano 33 BLE 進(jìn)行編程。

第 3 步：對(duì) Arduino 進(jìn)行編程

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

驗(yàn)證草圖并對(duì)其進(jìn)行編程。

編程完成后，打開串行監(jiān)視器，您應(yīng)該看到“藍(lán)牙設(shè)備處于活動(dòng)狀態(tài)，等待連接...”

串行監(jiān)視器

?

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

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

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

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

添加 p5.ble.js 庫

?

第 5 步：p5 編程

首先，我們將聲明服務(wù)和特征的 UUID。這些是我們 Arduino 草圖中特征的唯一標(biāo)識(shí)符。

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

然后，我們需要在 p5 草圖中創(chuàng)建 BLE 對(duì)象和特征的實(shí)例。

let buttonCharacteristic;
let ledCharacteristic;
let myBLE;

接下來，我們將創(chuàng)建一個(gè)全局變量來保存從按鈕讀取的值

let buttonValue = 0;

在setup函數(shù)內(nèi)部，我們將啟動(dòng) BLE 對(duì)象和界面按鈕。

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);
}

然后，我們將聲明每個(gè)動(dòng)作對(duì)應(yīng)的回調(diào)函數(shù)：當(dāng)connectButton被按下時(shí)， connectAndStartNotify函數(shù)將被觸發(fā)。當(dāng) toggleButton 被按下時(shí)，toggleLED函數(shù)將被觸發(fā)。

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函數(shù)內(nèi)部，我們將使用buttonValue來繪制一個(gè)正方形。

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

現(xiàn)在，我們準(zhǔn)備運(yùn)行 p5 草圖。

第 6 步：運(yùn)行 p5 草圖

單擊編輯器左上角的播放按鈕，我們可以運(yùn)行草圖。當(dāng)草圖運(yùn)行時(shí)，您會(huì)看到連接和開始通知按鈕。單擊該按鈕，您將在瀏覽器中看到一個(gè)彈出窗口。這是選擇 BLE 設(shè)備的窗口。如果只有一個(gè)帶有 ButtonLED 草圖編程和供電的 Arduino，那么您應(yīng)該只會(huì)在窗口中看到一個(gè)選項(xiàng)。配對(duì)。

配對(duì)窗口

?

然后，您應(yīng)該在控制臺(tái)中看到以下日志：

控制臺(tái)日志

?

現(xiàn)在，如果您單擊面包板上的按鈕，網(wǎng)絡(luò)應(yīng)用程序中的方塊將改變顏色。如果您單擊 Web 應(yīng)用程序中的按鈕，板載 LED 將切換。

現(xiàn)在，您已經(jīng)成功運(yùn)行了您的第一個(gè)p5.ble.js項(xiàng)目。您可以按照示例為您的 Arduino BLE 項(xiàng)目創(chuàng)建自己的 Web 應(yīng)用程序。

提示

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