HTML과 JavaScript만으로 BLE 통신할 수 있습니까?
브라우저로부터 BLE 통신할 수 있는 Web Bluetooth API를 사용하는 것으로 간단하게 할 수 있습니다.
Xcode, Android Studio, Visual Studio와 같은 개발 환경은 전혀 필요하지 않으며 Chrome과 텍스트 편집기 만 사용할 수 있습니다. 웹 앱이므로 스마트 폰 앱을 만들 때 번거로운 작업도 필요하지 않으며 사용자 측도 설치없이 사용할 수 있습니다.
소스 코드는 이것만
bluejelly.js라는 라이브러리를 이용하는 것으로, 설명은 단지 이것뿐입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BlueJelly</title>
<script type="text/javascript" src="bluejelly.js"></script>
</head>
<body>
<div id="text1">Hello, BlueJelly!</div>
<button id="button1">READ</button>
<script>
//Global
var ble = new BlueJelly();
//onLoad
window.onload = function(){
ble.setUUID("UUID1", "713d0000-503e-4c75-ba94-3148f18d941e",
"713d0002-503e-4c75-ba94-3148f18d941e");
}
//ClickEvent
document.getElementById("button1").addEventListener("click", function(){
ble.read("UUID1");
});
//onRead
ble.onRead = function(data, uuid){
value = data.getInt16(0);
document.getElementById("text1").innerHTML = value;
}
</script>
</body>
</html>
이것만으로, Scan을 실시해, 선택한 BLE 디바이스에 Connect하고, 지정한 UUID의 Service/Characteristic로부터 Value를 Read, HTML에 표시하고 있습니다. 이것은 Read의 예이지만 Write와 Notify도 마찬가지로 쉽게 할 수 있습니다.
BlueJelly는 GitHub에 게시되었습니다.
동작 환경에 주의!
Web Bluetooth는 아직 나왔던 기술이라는 것도 있어, 동작할 수 있는 OS에 조건이 있습니다.
브라우저는 Chrome 전용입니다.
【대응 OS】
· Mac (OS X Yosemite 이상)
・Android (Android 6.0 Marshmallow 이후)
· Linux (Kernel 3.19 이상 및 BlueZ 5.41 이상)
· Chrome OS
참고: iOS와 Windows는 지원되지 않음(2017년 11월 기준)
BLE 디바이스 측은 어떻게 하는가?
BLE 디바이스측의 UUID와 데이터 포맷만 알면, 방금전의 HTML 파일을 조금 변경하는 것만으로 기존의 BLE 디바이스에도 액세스 가능합니다.
또, 이런 식으로 BLE 마이크로컴 보드를 사용하면, 브레드 보드와 조합해, 납땜 없이 BLE 디바이스를 완성시키는 것도 가능합니다. 펌웨어도 Arduino나 Mbed등을 사용해 Web컴파일로 빨리 할 수 있습니다.
참고가 되는 사이트
오리지날의 BLE 디바이스도 아울러 만들고 싶은 사람은, 이 사이트를 참고로 하면 최단으로 할 수 있다고 생각합니다.
웹 엔지니어를 위해 작성되었으므로 하드 내용은 초보자에게도 알기 쉽습니다.
하드웨어 전문가가 가르치는 웹 엔지니어를 위한 IoT 강좌
관련 이벤트
Web Bluetooth API로 BLE 앱 개발 핸즈온!
즐기고 BLE 앱을 개발합시다! 그럼 또.
Reference
이 문제에 관하여(HTML과 JavaScript만으로 BLE 통신할 수 있습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ElectricBaka/items/0a319be20874a6817ed0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BlueJelly</title>
<script type="text/javascript" src="bluejelly.js"></script>
</head>
<body>
<div id="text1">Hello, BlueJelly!</div>
<button id="button1">READ</button>
<script>
//Global
var ble = new BlueJelly();
//onLoad
window.onload = function(){
ble.setUUID("UUID1", "713d0000-503e-4c75-ba94-3148f18d941e",
"713d0002-503e-4c75-ba94-3148f18d941e");
}
//ClickEvent
document.getElementById("button1").addEventListener("click", function(){
ble.read("UUID1");
});
//onRead
ble.onRead = function(data, uuid){
value = data.getInt16(0);
document.getElementById("text1").innerHTML = value;
}
</script>
</body>
</html>
Web Bluetooth는 아직 나왔던 기술이라는 것도 있어, 동작할 수 있는 OS에 조건이 있습니다.
브라우저는 Chrome 전용입니다.
【대응 OS】
· Mac (OS X Yosemite 이상)
・Android (Android 6.0 Marshmallow 이후)
· Linux (Kernel 3.19 이상 및 BlueZ 5.41 이상)
· Chrome OS
참고: iOS와 Windows는 지원되지 않음(2017년 11월 기준)
BLE 디바이스 측은 어떻게 하는가?
BLE 디바이스측의 UUID와 데이터 포맷만 알면, 방금전의 HTML 파일을 조금 변경하는 것만으로 기존의 BLE 디바이스에도 액세스 가능합니다.
또, 이런 식으로 BLE 마이크로컴 보드를 사용하면, 브레드 보드와 조합해, 납땜 없이 BLE 디바이스를 완성시키는 것도 가능합니다. 펌웨어도 Arduino나 Mbed등을 사용해 Web컴파일로 빨리 할 수 있습니다.
참고가 되는 사이트
오리지날의 BLE 디바이스도 아울러 만들고 싶은 사람은, 이 사이트를 참고로 하면 최단으로 할 수 있다고 생각합니다.
웹 엔지니어를 위해 작성되었으므로 하드 내용은 초보자에게도 알기 쉽습니다.
하드웨어 전문가가 가르치는 웹 엔지니어를 위한 IoT 강좌
관련 이벤트
Web Bluetooth API로 BLE 앱 개발 핸즈온!
즐기고 BLE 앱을 개발합시다! 그럼 또.
Reference
이 문제에 관하여(HTML과 JavaScript만으로 BLE 통신할 수 있습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ElectricBaka/items/0a319be20874a6817ed0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
오리지날의 BLE 디바이스도 아울러 만들고 싶은 사람은, 이 사이트를 참고로 하면 최단으로 할 수 있다고 생각합니다.
웹 엔지니어를 위해 작성되었으므로 하드 내용은 초보자에게도 알기 쉽습니다.
하드웨어 전문가가 가르치는 웹 엔지니어를 위한 IoT 강좌
관련 이벤트
Web Bluetooth API로 BLE 앱 개발 핸즈온!
즐기고 BLE 앱을 개발합시다! 그럼 또.
Reference
이 문제에 관하여(HTML과 JavaScript만으로 BLE 통신할 수 있습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ElectricBaka/items/0a319be20874a6817ed0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(HTML과 JavaScript만으로 BLE 통신할 수 있습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ElectricBaka/items/0a319be20874a6817ed0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
