Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published unlisted
Edited
May 6, 2021
1 fork
viewof popup = {
const form = html`<form><button name=button>Connect to your bluetooth`;
form.value = null;
form.button.onclick = async event => {
event.preventDefault();
form.button.disabled = true;
try {
const popup = await getPopup();
form.value = popup;
} catch (error) {
form.value = null;
form.button.disabled = false;
}
form.dispatchEvent(new CustomEvent("input"));
};
return form;
}
data = {
if (!message) return null;
const enc = new TextDecoder("utf-8");
try {
return enc.decode(message.data);
} catch {
return message.data;
}
}
message = Generators.observe(notify => {
let lastTime = new Date();
function receiveMessage(event) {
// Do we trust the sender of this message? (might be
// different from what we originally opened, for example).
if (event.origin === popup.location.origin) {
console.log(event);
notify(event);
}
}
notify(null);
window.addEventListener("message", receiveMessage, false);
return () => window.removeEventListener("message", receiveMessage);
})
{
if (popup)
popup.postMessage({ test: "Hello from Observable" }, popup.location.origin);
}
getPopup = {
const url = URL.createObjectURL(
new Blob(
[
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello!</title>
</head>
<body>
<form>
<input
id="service"
type="text"
list="services"
autofocus
placeholder="Bluetooth Service"
value="4fafc201-1fb5-459e-8fcc-c5c9c331914b"
/>
<input
id="characteristic"
type="text"
list="characteristics"
placeholder="Bluetooth Characteristic"
value="beb5483e-36e1-4688-b7f5-ea07361b26a8"
/>
<button id="startNotifications">Start notifications</button>
<button id="stopNotifications">Stop notifications</button>
</form>
<script>
/*
* In the popup's scripts, running on <http://example.com>:
*/
function isWebBluetoothEnabled() {
if (navigator.bluetooth) {
return true;
} else {
console.log(
"Web Bluetooth API is not available. Please make sure the Experimental Web Platform features flag is enabled."
);
return false;
}
}
document
.querySelector("#startNotifications")
.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
if (isWebBluetoothEnabled()) {
onStartButtonClick();
}
});
document
.querySelector("#stopNotifications")
.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
if (isWebBluetoothEnabled()) {
onStopButtonClick();
}
});
var myCharacteristic;
function onStartButtonClick() {
let serviceUuid = document.querySelector("#service").value;
if (serviceUuid.startsWith("0x")) {
serviceUuid = parseInt(serviceUuid);
}
let characteristicUuid = document.querySelector("#characteristic")
.value;
if (characteristicUuid.startsWith("0x")) {
characteristicUuid = parseInt(characteristicUuid);
}
console.log("Requesting Bluetooth Device...");
navigator.bluetooth
.requestDevice({ filters: [{ services: [serviceUuid] }] })
.then(device => {
console.log("Connecting to GATT Server...");
return device.gatt.connect();
})
.then(server => {
console.log("Getting Service...");
return server.getPrimaryService(serviceUuid);
})
.then(service => {
console.log("Getting Characteristic...");
return service.getCharacteristic(characteristicUuid);
})
.then(characteristic => {
myCharacteristic = characteristic;
return myCharacteristic.startNotifications().then(_ => {
console.log("> Notifications started");
myCharacteristic.addEventListener(
"characteristicvaluechanged",
handleNotifications
);
});
})
.catch(error => {
console.log("Argh! " + error);
});
}
function onStopButtonClick() {
if (myCharacteristic) {
myCharacteristic
.stopNotifications()
.then(_ => {
console.log("> Notifications stopped");
myCharacteristic.removeEventListener(
"characteristicvaluechanged",
handleNotifications
);
})
.catch(error => {
console.log("Argh! " + error);
});
}
}
function handleNotifications(event) {
window.opener.postMessage(
event.target.value,
"${location.origin}"
);
let value = event.target.value;
let a = [];
// Convert raw data bytes to hex values just for the sake of showing something.
// In the "real" world, you'd use data.getUint8, data.getUint16 or even
// TextDecoder to process raw data bytes.
for (let i = 0; i < value.byteLength; i++) {
a.push("0x" + ("00" + value.getUint8(i).toString(16)).slice(-2));
}
console.log("> " + a.join(" "));
}
// Called sometime after postMessage is called
function receiveMessage(event) {
//
// event.source is window.opener
// event.data is "hello there!"
// Assuming you've verified the origin of the received message (which
// you must do in any case), a convenient idiom for replying to a
// message is to call postMessage on event.source and provide
// event.origin as the targetOrigin.
event.source.postMessage(
"hi there yourself! the secret response " + "is: rheeeeet!",
event.origin
);
console.log(event);
}
window.addEventListener("message", receiveMessage, false);
console.log("INININ");
</script>
</body>
</html>
`
],
{ type: "text/html" }
)
);
invalidation.then(() => URL.revokeObjectURL(url));
return function() {
return new Promise((resolve, reject) => {
const popup = window.open(url, "testWindow", "width=400,height=300");
resolve(popup);
// popup.addEventListener("submit", event => {
// event.preventDefault();
// popup.close();
// const login = event.target.login.value.trim();
// if (!login) return reject(new Error("empty"));
// resolve({login});
// });
// popup.addEventListener("unload", () => {
// if (popup.closed) reject(new Error("closed"));
// });
});
};
}
/*
popup = new Promise(async (resolve, reject) => {
const popup = window.open(url, name, 'width=500,height=300');
const lastTime = new Date();
const timeout = 10000; /// 10 seconds timeout
while (new Date() - lastTime < timeout) {
if (popup) {
popup.focus();
resolve(popup);
}
await Promises.delay(500);
}
reject(null);
})
*/
//https://observablehq.com/@mbostock/authentication-simulator
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
