node-poweredup/examples/web_bluetooth.html
Nathan Kellenicki 225b60f752
Some checks failed
continuous-integration/drone/push Build is failing
Devices now cache notified values for easy retrieval without events
2020-01-13 12:59:43 -08:00

115 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Web Bluetooth node-poweredup Example</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/node-poweredup@latest/dist/browser/poweredup.js"></script> -->
<script src="../dist/browser/poweredup.js"></script>
<link rel="stylesheet" type="text/css" href="./web_bluetooth.css" />
<script>
const poweredUP = new PoweredUP.PoweredUP();
poweredUP.on("discover", async (hub) => { // Wait to discover hubs
hub.on("attach", (device) => {
log(`Device ${device.typeName} attached to port ${device.portName}`) ;
});
hub.on("detach", (device) => {
log(`Device ${device.typeName} detached to port ${device.portName}`) ;
});
await hub.connect(); // Connect to hub
log(`Connected to ${hub.name}!`);
hub.on("disconnect", () => {
log(`Disconnected ${hub.name}`);
})
hub.on("tilt", (device, { x, y, z }) => {
log(`Tilt detected on port ${device.portName} (X: ${x}, Y: ${y}${z !== undefined ? `, Z: ${z}`: ""})`);
});
hub.on("distance", (device, { distance }) => {
log(`Motion detected on port ${device.portName} (Distance: ${distance})`);
});
hub.on("rotate", (device, { degrees }) => {
log(`Rotation detected on port ${device.portName} (Degrees: ${degrees})`);
});
hub.on("button", ({ event }) => {
log(`Green button press detected (Event: ${event})`);
});
hub.on("remoteButton", (device, { event }) => {
log(`Remote control button press detected on port ${device.portName} (Event: ${event})`);
});
renderHub(hub);
});
let color = 1;
setInterval(() => {
const hubs = poweredUP.getHubs(); // Get an array of all connected hubs
document.getElementById("color").style.backgroundColor = PoweredUP.Consts.ColorNames[color];
hubs.forEach(async (hub) => {
const led = await hub.waitForDeviceByType(PoweredUP.Consts.DeviceType.HUB_LED);
led.setColor(color); // Set the color
})
color++;
if (color > 10) {
color = 1;
}
}, 2000);
const log = function (str) {
const element = document.getElementById("console");
element.innerHTML += `${str}<br />`;
element.scrollTop = element.scrollHeight;
}
const renderHub = function (hub) {
const element = document.createElement("tr");
element.setAttribute("id", `hub-${encodeURIComponent(hub.uuid)}`);
element.innerHTML = `<td>${hub.name}</td><td>${PoweredUP.Consts.HubTypeNames[hub.type]}</td><td class="disconnect_btn"><a href="#" onclick="disconnect('${encodeURIComponent(hub.uuid)}');">Disconnect</a></td>`;
document.getElementById("hubs").appendChild(element);
}
const scan = function () {
if (PoweredUP.isWebBluetooth) {
poweredUP.scan(); // Start scanning for hubs
} else {
alert("Your browser does not support the Web Bluetooth specification.");
}
}
const disconnect = function (uuid) {
poweredUP.getHubByUUID(decodeURIComponent(uuid)).disconnect();
document.getElementById(`hub-${uuid}`).remove();
}
</script>
</head>
<body>
<div><h1>Web Bluetooth node-poweredup Example</h1></div>
<div>
<a class="button" href="#" onclick="scan();">Add new Hub</a>
</div>
<div id="current_color">
<span>Current Color: </span><div id="color">&nbsp;</div>
</div>
<div>
<table id="hubs">
<thead class="headings"><td>Name</td><td>Type</td></thead>
</table>
</div>
<div id="console"></div>
</body>
</html>