119 lines
3.3 KiB
HTML
119 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
|
|
|
|
await hub.connect(); // Connect to hub
|
|
log(`Connected to ${hub.name}!`);
|
|
|
|
hub.on("disconnect", () => {
|
|
log(`Disconnected ${hub.name}`);
|
|
})
|
|
|
|
hub.on("tilt", (port, x, y, z) => {
|
|
log(`Tilt detected on port ${port} (X: ${x}, Y: ${y}${z !== "undefined" ? `, Z: ${z}`: ""})`);
|
|
});
|
|
|
|
hub.on("accel", (port, x, y, z) => {
|
|
log(`Accelerometer detected on port ${port} (X: ${x}, Y: ${y}, Z: ${z})`);
|
|
});
|
|
|
|
|
|
hub.on("distance", (port, distance) => {
|
|
log(`Motion detected on port ${port} (Distance: ${distance})`);
|
|
});
|
|
|
|
hub.on("color", (port, color) => {
|
|
log(`Color detected on port ${port} (Color: ${color})`);
|
|
});
|
|
|
|
hub.on("rotate", (port, rotation) => {
|
|
log(`Rotation detected on port ${port} (Rotation: ${rotation})`);
|
|
});
|
|
|
|
hub.on("button", (button, state) => {
|
|
log(`Button press detected (Button: ${button}, State: ${state})`);
|
|
});
|
|
|
|
hub.on("attach", (port, device) => {
|
|
log(`Device attached to port ${port} (Device ID: ${device})`) ;
|
|
});
|
|
|
|
hub.on("detach", (port) => {
|
|
log(`Device detached from port ${port}`) ;
|
|
});
|
|
|
|
renderHub(hub);
|
|
|
|
});
|
|
|
|
let color = 1;
|
|
setInterval(() => {
|
|
|
|
const hubs = poweredUP.getConnectedHubs(); // Get an array of all connected hubs
|
|
document.getElementById("color").style.backgroundColor = PoweredUP.Consts.ColorNames[color];
|
|
hubs.forEach((hub) => {
|
|
hub.setLEDColor(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.getConnectedHubByUUID(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"> </div>
|
|
</div>
|
|
<div>
|
|
<table id="hubs">
|
|
<thead class="headings"><td>Name</td><td>Type</td></thead>
|
|
</table>
|
|
</div>
|
|
<div id="console"></div>
|
|
</body>
|
|
|
|
</html> |