WT32-ETH01 - Web Bluetooth - hoyo 學習紀錄

使用 demo 參照 sample 互相驗證較容易搞懂，UUID 必須使用完整格式

運作條件

網頁必須 HTTPS
手機瀏覽器版本必須符合 Browser compatibility

範例：使用 Web Bluetooth 控制 WT32-ETH01 上的 LED

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Web Bluetooth</title>
    <script src="/3rdParty/jquery-1.11.3.min.js"></script>
    <script src="/3rdParty/php.js"></script>
    <link rel="stylesheet" href="/3rdParty/bootstrap-4.3.1/css/bootstrap.min.css">

    <!--  -->
    <link rel="stylesheet" href="/3rdParty/bootstrap4-toggle/css/bootstrap4-toggle.min.css">
    <script src="/3rdParty/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
</head>
<body>
<div class="container">
    <div>
        <button type="button" class="btn btn-info" onclick="a()">配對</button>
    </div>

    <div class="toggle_box">
        <label><input type="checkbox" class="input_toggle" data-style="fast" data-toggle="toggle"></label>
    </div>
</div>

<script>
    var myCharacteristic;
    var bluetoothDevice;

    // 不能網頁載入就執行  必須手動觸發
    function a(){
        var options = {
            // acceptAllDevices: true
            filters: [
                { namePrefix: 'ESP32' }
            ],
            optionalServices: [ 'f5c8924c-86e9-11eb-8dcd-0242ac130003' ]
        };

        // 掃描
        bluetoothDevice = null;
        navigator.bluetooth.requestDevice(options).then(function ( device ){
            bluetoothDevice = device;
            return device.gatt.connect();
        })
        .then(function(server){
            return server.getPrimaryService('f5c8924c-86e9-11eb-8dcd-0242ac130003');
        })
        .then(function(service){
            return service.getCharacteristic('fea784d6-86e9-11eb-8dcd-0242ac130003');
        })
        .then(function(characteristic){
            myCharacteristic = characteristic;
        })
        .catch(function ( error ){
        });
    }

    // switch button
    $('.input_toggle').change(function() {
        point_click($(this).prop('checked'));
    });

    function point_click($power){
        if ($power) control = 'on';
        else        control = 'off';
        if ( myCharacteristic ){
            var encoder = new TextEncoder('utf-8');
            var sendMsg = '{"led":"'+ control +'"}';
            myCharacteristic.writeValue(encoder.encode(sendMsg));
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Web Bluetooth</title>

</head>

<body>

<div>

</div>

</div>

var myCharacteristic;

var bluetoothDevice;

// 不能網頁載入就執行必須手動觸發

function a(){

var options = {

// acceptAllDevices: true

filters: [

{ namePrefix: 'ESP32' }

optionalServices: [ 'f5c8924c-86e9-11eb-8dcd-0242ac130003' ]

};

// 掃描

bluetoothDevice = null;

navigator.bluetooth.requestDevice(options).then(function ( device ){

bluetoothDevice = device;

return device.gatt.connect();

})

.then(function(server){

return server.getPrimaryService('f5c8924c-86e9-11eb-8dcd-0242ac130003');

})

.then(function(service){

return service.getCharacteristic('fea784d6-86e9-11eb-8dcd-0242ac130003');

})

.then(function(characteristic){

myCharacteristic = characteristic;

})

.catch(function ( error ){

});

}

// switch button

$('.input_toggle').change(function() {

point_click($(this).prop('checked'));

});

function point_click($power){

if ($power) control = 'on';

else control = 'off';

if ( myCharacteristic ){

var encoder = new TextEncoder('utf-8');

var sendMsg = '{"led":"'+ control +'"}';

myCharacteristic.writeValue(encoder.encode(sendMsg));

}

</script>

</body>

</html>

Arduino

#include <Arduino.h>
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>
#include <ArduinoJson.h>

#define BAUDRATE 115200
#define SERVICE_UUID        "f5c8924c-86e9-11eb-8dcd-0242ac130003"
#define CHARACTERISTIC_UUID "fea784d6-86e9-11eb-8dcd-0242ac130003"

// 
BLEServer *pServer;
BLEService *pService;
BLECharacteristic *pCharacteristic;
bool deviceConnected = false;
std::string rxValue = "";

// 
class MyServerCallbacks : public BLEServerCallbacks
{
    void onConnect(BLEServer *pServer)
    {
        Serial.println("= Connected =");
        deviceConnected = true;
    }
    void onDisconnect(BLEServer *pServer)
    {
        Serial.println("= Disonnected =");
        deviceConnected = false;
    }
};

class MyCallbacks : public BLECharacteristicCallbacks
{
    void onWrite(BLECharacteristic *pCharacteristic)
    {
        // Serial.println("= Receive =");
        rxValue = pCharacteristic->getValue();
        String rx_str = rxValue.c_str();
        Serial.println(rx_str);

        // JSON 處理
        StaticJsonDocument<256> doc;
        char json_val[rx_str.length()+1];
        rx_str.toCharArray(json_val, rx_str.length()+1);
        deserializeJson(doc, json_val, rx_str.length());
        String val = doc["led"];
        Serial.println(val);

        if (val == "on")
        {
            digitalWrite(5, LOW);
        }
        if (val == "off")
        {
            digitalWrite(5, HIGH);
        }
    }
};

void setup()
{
    Serial.begin(BAUDRATE);
    pinMode(5, OUTPUT);

    BLEDevice::init("ESP32");
    pServer = BLEDevice::createServer();
    pServer->setCallbacks(new MyServerCallbacks());
    pService = pServer->createService(SERVICE_UUID);
    pCharacteristic = pService->createCharacteristic( CHARACTERISTIC_UUID, BLECharacteristic::PROPERTY_NOTIFY | BLECharacteristic::PROPERTY_WRITE);
    pCharacteristic->addDescriptor(new BLE2902());
    pCharacteristic->setCallbacks(new MyCallbacks());
    pService->start();
    pServer->getAdvertising()->start();
}

void loop()
{
}

#include <Arduino.h>

#include <BLEDevice.h>

#include <BLEServer.h>

#include <BLEUtils.h>

#include <BLE2902.h>

#include <ArduinoJson.h>

#define BAUDRATE 115200

#define SERVICE_UUID "f5c8924c-86e9-11eb-8dcd-0242ac130003"

#define CHARACTERISTIC_UUID "fea784d6-86e9-11eb-8dcd-0242ac130003"

BLEServer *pServer;

BLEService *pService;

BLECharacteristic *pCharacteristic;

bool deviceConnected = false;

std::string rxValue = "";

class MyServerCallbacks : public BLEServerCallbacks

{

void onConnect(BLEServer *pServer)

{

Serial.println("= Connected =");

deviceConnected = true;

}

void onDisconnect(BLEServer *pServer)

{

Serial.println("= Disonnected =");

deviceConnected = false;

}

};

class MyCallbacks : public BLECharacteristicCallbacks

{

void onWrite(BLECharacteristic *pCharacteristic)

{

// Serial.println("= Receive =");

rxValue = pCharacteristic->getValue();

String rx_str = rxValue.c_str();

Serial.println(rx_str);

// JSON 處理

StaticJsonDocument<256> doc;

char json_val[rx_str.length()+1];

rx_str.toCharArray(json_val, rx_str.length()+1);

deserializeJson(doc, json_val, rx_str.length());

String val = doc["led"];

Serial.println(val);

if (val == "on")

{

digitalWrite(5, LOW);

}

if (val == "off")

{

digitalWrite(5, HIGH);

}

};

void setup()

{

Serial.begin(BAUDRATE);

pinMode(5, OUTPUT);

BLEDevice::init("ESP32");

pServer = BLEDevice::createServer();

pServer->setCallbacks(new MyServerCallbacks());

pService = pServer->createService(SERVICE_UUID);

pCharacteristic = pService->createCharacteristic( CHARACTERISTIC_UUID, BLECharacteristic::PROPERTY_NOTIFY | BLECharacteristic::PROPERTY_WRITE);

pCharacteristic->addDescriptor(new BLE2902());

pCharacteristic->setCallbacks(new MyCallbacks());

pService->start();

pServer->getAdvertising()->start();

}

void loop()

{

}

演示

配對時，什麼可以選擇的時機很迷，控制的 LED 是右側的綠色 LED

問題

BLE arduino send values over 20 bytes

BLE notify 最長只能 20 bytes

1,320 total views, 2 views today

WT32-ETH01 - Web Bluetooth

範例：使用 Web Bluetooth 控制 WT32-ETH01 上的 LED

演示

問題

Related Post

發佈留言

WT32-ETH01 - Web Bluetooth

範例：使用 Web Bluetooth 控制 WT32-ETH01 上的 LED

演示

問題

Related Post

網頁的前、後端如何區分

PWA 漸進式網路應用程式 - 3. 桌面版瀏覽網頁通知

網頁前端 - 滑鼠點擊特效

發佈留言