<!DOCTYPE html>
<html>
<head>
<title>Smartbin GUI</title>
<meta charset="utf-8">
<script>
const serviceUUID = 'a66d80ca-5390-11ed-bdc3-0242ac120002';
const optionalServicesUUID = [
"a66d80cb-5390-11ed-bdc3-0242ac120002",
"a66d80cc-5390-11ed-bdc3-0242ac120002",
"a66d80cd-5390-11ed-bdc3-0242ac120002"
];
//Smartbin
const smartbinServicesUUID = 'a66d80ca-5390-11ed-bdc3-0242ac120002';
const temperatureCharacteristicUUID = "a66d80cb-5390-11ed-bdc3-0242ac120002";
const humidityCharacteristicUUID = "a66d80cc-5390-11ed-bdc3-0242ac120002";
const pressureCharacteristicUUID = "a66d80cd-5390-11ed-bdc3-0242ac120002";
var bleDevice;
var bleServer;
var uiService;
var tempChar;
var humidityChar;
var pressureChar;
window.onload = function() {
document.querySelector('#connect').addEventListener('click', connect);
document.querySelector('#disconnect').addEventListener('click', disconnect);
};
function connect() {
if (!navigator.bluetooth) {
return log('Web Bluetooth API is not available in browser.');
}
log('=============================');
log('Requesting Bluetooth Device...');
// RequestDevice must be in click handler (or other user inited events)
navigator.bluetooth.requestDevice({
filters: [{
//services: [serviceUUID],
//optionalServices: optionalServicesUUID,
"name": "Smartbin"
}]
})
.then(device => {
bleDevice = device;
console.log({
Name: device.name,
Id: device.id,
UUIDs: device.uuids,
Device: device
});
log('Connected to device: ' + device.name);
return device.gatt.connect();
})
.then(server => {
bleServer = server;
log('Found Server', server);
})
.then(() => bleServer.getPrimaryService(smartbinServicesUUID))
.then(service => {
log('Found Smartbin service', service);
uiService = service;
})
.then(() => uiService.getCharacteristic(temperatureCharacteristicUUID))
.then(characteristic => {
log('Found temperature characteristic');
tempChar = characteristic;
return tempChar.startNotifications();
})
.then(() => {
log('Notifications for temperature enabled');
tempChar.addEventListener('characteristicvaluechanged', handleNotifyTemperature);
})
.then(() => uiService.getCharacteristic(humidityCharacteristicUUID))
.then(characteristic => {
log('Found humidity characteristic');
humidityChar = characteristic;
return humidityChar.startNotifications();
})
.then(() => {
log('Notifications for humidity enabled');
humidityChar.addEventListener('characteristicvaluechanged', handleNotifyHumidity);
})
.then(() => {
log('=========== READY ===========');
})
.catch(error => {
log('Connection Error: ' + error);
});
}
function disconnect() {
if (!bleDevice) {
log('No Bluetooth Device found...');
return;
}
log('Disconnecting from Bluetooth Device...');
if (bleDevice.gatt.connected) {
bleDevice.gatt.disconnect();
log('Bluetooth Device connected: ' + bleDevice.gatt.connected);
} else {
log('Bluetooth Device is already disconnected');
}
}
function handleNotifyTemperature(event) {
let temperatureValue = event.target.value;
const tempInteger = temperatureValue.getInt16(0, true);
const temperatureFloat = tempInteger/100
console.log("temperature:",temperatureFloat);
document.getElementById("tmp").innerHTML = temperatureFloat;
}
function handleNotifyHumidity(event) {
let humidityValue = event.target.value;
const humidityInteger = humidityValue.getInt16(0, true);
const humidityFloat = humidityInteger/10
console.log("humidity:",humidityFloat);
document.getElementById("hum").innerHTML = humidityFloat;
}
function handleNotifyPressure(event) {
let pressureValue = event.target.value;
const pressureInteger = pressureValue.getInt16(0, true);
const pressureFloat = pressureInteger/100
console.log("pressure:",pressureFloat);
document.getElementById("pre").innerHTML = pressureFloat;
}
function log(text) {
console.log(arguments);
const logElm = document.querySelector('#log');
logElm.textContent = text + '\n' + logElm.textContent;
}
</script>
</head>
<body>
<button id="connect">Connect</button>
<button id="disconnect">Disconnect</button>
<br/>
<br/>
<span>Temperature in garbage bin: <span id="tmp"></span> *C</span>
<br/>
<span>Humidity in garbage bin: <span id="hum"></span> %</span>
<br/>
<div><pre id="log"></pre></div>
</body>
</html>
Comments