皆さんどうもこんにちは。ブログの書き方を何も覚えていません。カンでいきます。
今回は、
ESP32
……WiFiやBluetoothを扱えるマイコン
Web Bluetooth API
……ウェブページからBluetoothデバイスを制御できる
の合わせ技で、ブラウザから直接マイコンを制御してLEDを光らせようと思います。
↓こーゆー感じです
専門用語が多く厳密に解説をしているとキリがありませんので、とにかく動かすまでの説明をします。細かいところはChatGPTやGoogle先生に聞こう。ココなりTwitterにコメントあれば駆け付けます。
必要なもの
ESP32
種類がたくさんあるので注意が必要です。いや、基本は同じなので違うやつでも動く可能性はあります。ですがひとまず私の使ってるやつを書いておきます。
これの場合USB microB端子のケーブルが必要になります。
DIP化キットなどを買えばより安く済みますが、書き込みのできる環境等整える必要はあります。
その他電子部品
LEDを光らせたいのでLEDと抵抗が必要です。ESP32の電源の供給は3.3Vなので、それを使うなら330Ωの抵抗を使って10mA流すのがいいでしょうかね
別に1KΩとかでも光ると思います
他、ブレッドボードやジャンパー線が必要です ESP32の幅がデカいので、幅広めのブレッドボードにするか二個つなげるのがいいです
ブレッドボードの幅→穴がAからJ
→0.1インチ×11→1.1インチ→27.94mm
ESP32-DevKitC-32E(今回買ったやつ)のピンの幅
→25.4mm→穴一つしか余らない
どうしてこんなギリギリの設計に？？そもそも収まってるだけでありがたいです！！！！！
プログラムについて
概要
プログラムはgithubに置いてあるのでそこからまとめてダウンロードできます。
ざっくり言うと、ESP32側のコードでBluetoothの設定をし、Valueの「on」「off」を受け取るかで25番ピンのHIGH/LOWを制御し、結果としてLEDが点灯/消灯します。
web_interfaceのHTMLでウェブページのボタンを作り、JavascriptでBluetoothの接続、ボタンを押したときのValueの受け渡しを行っています。
ESP32側
Arduino IDEから以下のコードをESP32に突っ込みます。
ボード:ESP32 Dev Module
ポート:USB差して増えた場所 デバイスマネージャー等から確認すると確実です
↑のCOM5のやつ 最初上手くいかなかったのでドライバ入れなおしたらうまくいったとかはありました
#include "BLEDevice.h"
#include "BLEUtils.h"
#include "BLEServer.h"
BLEServer *pServer = nullptr;
BLECharacteristic *pCharacteristic = nullptr;
bool deviceConnected = false;
class MyServerCallbacks: public BLEServerCallbacks {
void onConnect(BLEServer* pServer) {
deviceConnected = true;
};
void onDisconnect(BLEServer* pServer) {
deviceConnected = false;
}
};
void setup() {
Serial.begin(115200);
pinMode(25, OUTPUT);
// BLEデバイスの初期化
BLEDevice::init("ESP32_BLE");
// BLEサービスの作成
pServer = BLEDevice::createServer();
pServer->setCallbacks(new MyServerCallbacks());
BLEService *pService = pServer->createService("YOUR_SERVICE_UUID");
// BLEキャラクタリスティックの作成
pCharacteristic = pService->createCharacteristic(
"YOUR_CHARACTERISTIC_UUID",
BLECharacteristic::PROPERTY_READ | BLECharacteristic::PROPERTY_WRITE);
pService->start();
// BLE広告の開始
BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
pAdvertising->addServiceUUID(pService->getUUID());
pAdvertising->setScanResponse(true);
pAdvertising->setMinPreferred(0x06);
pAdvertising->setMinPreferred(0x12);
BLEDevice::startAdvertising();
}
void loop() {
// デバイスが接続されている場合にコマンドを処理する
if (deviceConnected && pCharacteristic->getValue().length() > 0) {
String value = pCharacteristic->getValue().c_str();
if (value == "on") {
digitalWrite(25, HIGH); // 25番ピンをHIGHに設定
}else if(value == "off"){
digitalWrite(25, LOW);
}
}
}もうちょっと綺麗にソースコード貼れるはず……
ピン番号やBluetoothのUUIDは自分のものに合わせてください。UUIDは↓のサイトで生成したりするのがいいと思います。
ウェブページ側
HTMLは↓みたいなページが出てきます。
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Bluetooth Control</title>
</head>
<body>
<button id="connect">Bluetooth接続</button>
<button id="on">点灯</button>
<button id="off">消灯</button>
<script src="script.js"></script>
</body>
</html>Javascript(ファイル名:script.js)
let device, characteristic;
// Bluetooth接続を行う関数
document.getElementById('connect').addEventListener('click', async () => {
try {
// ユーザーにデバイスの選択を求める
device = await navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['YOUR_SERVICE_UUID'] // ここにESP32のサービスUUIDを入れる
});
// 選択されたデバイスに接続
const server = await device.gatt.connect();
const service = await server.getPrimaryService('YOUR_SERVICE_UUID'); // ここにESP32のサービスUUIDを入れる
characteristic = await service.getCharacteristic('YOUR_CHARACTERISTIC_UUID'); // ここにESP32のキャラクタリスティックUUIDを入れる
console.log('Bluetoothデバイスに接続しました！');
} catch (error) {
console.log('Bluetooth接続に失敗しました: ' + error);
}
});
// コマンドをESP32に送信する関数
function sendCommand(command) {
if (device && characteristic) {
characteristic.writeValue(new TextEncoder().encode(command));
}
}
// 各方向ボタンにイベントリスナーを設定
['on', 'off'].forEach(direction => {
document.getElementById(direction).addEventListener('click', () => {
sendCommand(direction);
console.log('コマンド送信: ' + direction);
});
});何かするたびにコンソールにいちいち出力して開発者ツールで見とくのをおすすめします
まとめ
LEDを光らせられるならモーターだって回る ラジコンでも作りましょうかね
コメント