About IOT(2)Using BLE in Javascript(bluejely)
Following the previous article, I would like to discuss actual BLE communication in this article. First, let’s try the simplest way to communicate with BLE, using a javascript library called bluejelly.
bluejelly is a wrapper for a lavascript library called Web Bluetooth API, and it works with only three files: html file, bluejelly.js, and style.css. For example For example, the simplest code in the sample that scans for external BLE devices looks like the following. (Excerpt of sample code from bluejelly.js)
<!doctype html>
<!--Copyright 2017-2020 JellyWare Inc. All Rights Reserved.-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="BlueJelly">
<meta name="viewport" content="width=640, maximum-scale=1.0, user-scalable=yes">
<title>BlueJelly</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="bluejelly.js"></script>
<h1></h1>
<div class="container">
<div class="title margin">
<p id="title">BlueJelly Sample</p>
<p id="subtitle">Hello, BLE</p>
</div>
<div class="contents margin">
<button id="scan" class="button">Scan</button>
<hr>
<div id="device_name"> </div>
</div>
</div>
<script>
//--------------------------------------------------
//Global変数
//--------------------------------------------------
//BlueJellyのインスタンス生成
const ble = new BlueJelly();
//--------------------------------------------------
//ロード時の処理
//--------------------------------------------------
window.onload = function () {
//UUIDの設定
ble.setUUID("UUID1", "00000000-0000-0000-0000-000000000000", "00000000-0000-0000-0000-000000000000");
}
//--------------------------------------------------
//Scan後の処理
//--------------------------------------------------
ble.onScan = function (deviceName) {
document.getElementById('device_name').innerHTML = deviceName;
}
//-------------------------------------------------
//ボタンが押された時のイベント登録
//--------------------------------------------------
document.getElementById('scan').addEventListener('click', function() {
ble.scan('UUID1');
});
</script>
</body>
</html>Open this html file in your browser and it will work. A “scan” button appears in the browser, and when you press it, it detects Bluetooth devices around you and displays them. However, depending on the version of the browser, it may or may not work, and the latest version of SAFARI on mac did not work, but chrome did. The only part of this code that interacts with BLE is the ble.scan function, and the rest is very simple and mostly related to display.
As a library with a little more flexibility, there is noble that runs on node. I will introduce them in the next article.
コメント