Bluetooth link

31:Ta05,md`# Dash Robot SDK for Observable Dot and Dash robots were one of the best edutainment toys I got for my kids. We have had them for 3 years now, since my kids were 2, and we have played with them on-and-off throughout. Whats amazing is there is so many layers to them. At first they were just RC toys. Later they taught the basics of programming. Like all good general purpose modular things, Dash can be integrated into many different play activities. ![](${resize(await FileAttachment("image@4.png").url())}) To take my 5 year olds to the next level, we need to programming them and add our own sensors using the [LEGO adapters](https://store.makewonder.com/products/building-brick-connectors). ![](${resize(await FileAttachment("image@2.png").url())}) We added a camera phone for teleoperation. Next step add a cameraphone for Simultaneous Localization and Mapping ([SLAM](https://de.wikipedia.org/wiki/Simultaneous_Localization_and_Mapping)) and we will be nearing undergraduate level. ![](${resize(await FileAttachment("image@5.png").url())}) Note the robot has IR distance sensors, wheel encoders, gyros, a 2DOF actuated head, buttons and LEDs. Its expensive but powerful, and now, thanks to this notebook, custom programming can be done right within a browser without installing anything! Works on a phone!!!! _(sidenote: This is the 2nd time I have integrated Dash, I did it [once](https://www.youtube.com/watch?v=4H1N0gbyup0) with a Raspberry PI and the [morseapi](https://github.com/IlyaSukhanov/morseapi) in Python but the comms kept [dropping out](https://github.com/IlyaSukhanov/morseapi/issues/3) and required too many reboots. This setup is much more robust, more extensible and less fiddly)_ ## Demo (1:30) ## Keyboard controls Arrow keys moves dash around, my kids find this much easier than the phone touch controls. You can also programatically script it using the SDK. ~~~js sdk.drive(forward, turn) ~~~ To get the Bluetooth connection working, click ${ bluetoothLink.outerHTML } to open a top level page proxy to this notebook (this gets around the iframe sandbox security restrictions). ## WIP I am am translating mostly from https://github.com/IlyaSukhanov/morseapi as I needed. Feel free to leave a comment to prioritize a feature, or suggestions welcome. `32:Ta77,bluetoothLink = { const baseLink = deploy("bluetooth", (req, res) => { res.send(` Bluetooth link

Turn your robot on, click connect below and pair over Bluetooth. Once connected you can return to @tomlarkworthy/wonder

`); }); return html`bluetooth`; }33:[{"id":"6a8d0366ebb206ae2c11f58ed669963a9e1289398b5d2f67166a2f126a19645253a8c2ba4269b75dfe4f5e2536f702c5879416b97db8300430f119e2c311730e","href":"https://static.observableusercontent.com/files/6a8d0366ebb206ae2c11f58ed669963a9e1289398b5d2f67166a2f126a19645253a8c2ba4269b75dfe4f5e2536f702c5879416b97db8300430f119e2c311730e","name":"image.png","type":"image/png","lastModified":1620060745065.504,"size":204664},{"id":"fe45b4483b4df8f77a9d857b8810549a2c47a3b784ef07caecfe2d4a25b766abdc39fdfe91e562820e5f0edab450684ea87b839ef2a3801907e5c45d7f962f0c","href":"https://static.observableusercontent.com/files/fe45b4483b4df8f77a9d857b8810549a2c47a3b784ef07caecfe2d4a25b766abdc39fdfe91e562820e5f0edab450684ea87b839ef2a3801907e5c45d7f962f0c","name":"image@2.png","type":"image/png","lastModified":1620201825661.932,"size":1298514},{"id":"5a7b4e5199c42d7f3e980f2abe3019fc962bb0f4ec56c97174aecf767868ad5dc4ecb047cb578444cef3d6b5f0416666c7eb644b18aa4be05ada80d8b77ea670","href":"https://static.observableusercontent.com/files/5a7b4e5199c42d7f3e980f2abe3019fc962bb0f4ec56c97174aecf767868ad5dc4ecb047cb578444cef3d6b5f0416666c7eb644b18aa4be05ada80d8b77ea670","name":"image@3.png","type":"image/png","lastModified":1620202215100.71,"size":2276816},{"id":"d0ebe2dfa390251eaca7094eb58baf31affa8d3f50a1ab9ffef9d345a42262d992b9a173a2c3f91296a3b3521febb56909190117636854782ca4499e611a2eb9","href":"https://static.observableusercontent.com/files/d0ebe2dfa390251eaca7094eb58baf31affa8d3f50a1ab9ffef9d345a42262d992b9a173a2c3f91296a3b3521febb56909190117636854782ca4499e611a2eb9","name":"image@4.png","type":"image/png","lastModified":1620202401080.885,"size":4816001},{"id":"f6a77ae26432d008c2d48148b63f4393959f098d549b70b48755009d9c8ab76cf31822368c91ae1f01dff83e9da72b93af803d119fb54db05830f4ece5e09b51","href":"https://static.observableusercontent.com/files/f6a77ae26432d008c2d48148b63f4393959f098d549b70b48755009d9c8ab76cf31822368c91ae1f01dff83e9da72b93af803d119fb54db05830f4ece5e09b51","name":"image@5.png","type":"image/png","lastModified":1620202702854.078,"size":1708686}] 2f:{"title":"Dash Robot SDK for Observable","cells":[{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"startupscript = {\n // Will resend when link reestablishes\n sdk.playSound(\"SYSTAIRPORTJET\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"viewof brightness = Range([0, 255], {\n label: \"eye\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"viewof earLeftR = Range([0, 255], {\n label: \"ear left R\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof earLeftG = Range([0, 255], {\n label: \"ear left G\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"viewof earLeftB = Range([0, 255], {\n label: \"ear left B\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof earRightR = Range([0, 255], {\n label: \"ear right R\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof earRightB = Range([0, 255], {\n label: \"ear right B\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"viewof earRightG = Range([0, 255], {\n label: \"ear right G\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof forward = Range([-1023, 1023], {\n label: \"forward\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"pitch = to_int((dotData[4] & 0xf0) << 4 | dotData[2], 12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"viewof turn = Range([-1023, 1023], {\n label: \"turn\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"pitchDelta = to_int(\n (dashData[4] & 0x30) << 4 | dashData[3],\n 10\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"roll = to_int((dotData[4] & 0xf) << 8 | dotData[3], 12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"roll_delta = to_int(\n (dashData[4] & 0x3) << 8 | dashData[5],\n 10\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"yaw = to_int((dashData[13] << 8) | dashData[12], 12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"buttons = [\n (dotData[8] & 0x10) > 0,\n (dotData[8] & 0x20) > 0,\n (dotData[8] & 0x40) > 0,\n (dotData[8] & 0x80) > 0\n ]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"proximity = [\n dashData[6],\n dashData[7],\n dashData[8], // rear\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"wheels = [\n (dashData[15] << 8) | dashData[14], // left\n (dashData[17] << 8) | dashData[16]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"wheelDistance = to_int(\n (dashData[9] & 0xf) << 12 | dashData[11] << 8 | dashData[10],\n 16\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"mutable jogTurn = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"mutable jogForward = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"keyboard = {\n const keyup = e => {\n switch (e.keyCode) {\n case 38: // UP\n case 40: // DOWN\n case 87: // W\n case 83: // S\n mutable jogForward = 0;\n break;\n case 37: // LEFT\n case 39: // RIGHT\n case 65: // A\n case 68: // D\n mutable jogTurn = 0;\n break;\n }\n };\n const keydown = e => {\n switch (e.keyCode) {\n case 38: // UP\n case 87: // W\n mutable jogForward = 1;\n break;\n case 40: // DOWN\n case 83: // S\n mutable jogForward = -1;\n break;\n case 37: // LEFT\n case 65: // A\n mutable jogTurn = -1;\n break;\n case 39: // RIGHT\n case 68: // D\n mutable jogTurn = 1;\n break;\n }\n };\n window.addEventListener('keyup', keyup);\n window.addEventListener('keydown', keydown);\n\n invalidation.then(() => {\n window.removeEventListener('keyup', keyup);\n window.removeEventListener('keydown', keydown);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`### Actions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"eyeBrightness = {\n var data = new Uint8Array(2);\n data[0] = 8;\n data[1] = brightness;\n controller.proxy.writeValue(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"leftEar = {\n var data = new Uint8Array(4);\n data[0] = 11;\n data[1] = earLeftR;\n data[2] = earLeftG;\n data[3] = earLeftB;\n controller.proxy.writeValue(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"RightEar = {\n var data = new Uint8Array(4);\n data[0] = 12;\n data[1] = earRightR;\n data[2] = earRightG;\n data[3] = earRightB;\n controller.proxy.writeValue(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"drive = {\n // If negative value, shift sign bit into correct position\n var forwardSpeed =\n forward < 0 ? parseInt(forward) + 0x800 : parseInt(forward);\n var turnSpeed = turn < 0 ? parseInt(turn) + 0x800 : parseInt(turn);\n\n if (jogTurn != 0) turnSpeed = -jogTurn * 300;\n if (jogForward != 0) forwardSpeed = jogForward * 200;\n\n var data = new Uint8Array(4);\n data[0] = 0x02;\n data[1] = 0xff & forwardSpeed;\n data[2] = 0xff & turnSpeed;\n data[3] = ((0x700 & forwardSpeed) >> 8) | ((0x700 & turnSpeed) >> 5);\n controller.proxy.writeValue(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"md`### Sensors\n\nI was unable to use comlink transfer or proxy to efficiently get sensor data here, in the end I JSONified it but thats ok.\n\nSee https://github.com/IlyaSukhanov/morseapi/blob/master/morseapi/sensors.py#L61\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"(dotData[8]& 0x20) > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"dashData = {\n while (true) {\n try {\n yield await controller.proxy.fetchDashData()\n } catch (err) {\n await new Promise(resolve => setTimeout(resolve, 1000))\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"dotData = {\n while (true) {\n try {\n yield await controller.proxy.fetchDotData()\n } catch (err) {\n await new Promise(resolve => setTimeout(resolve, 1000))\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"to_int = (value, bits) => {\n if (value > ((1<<(bits-1))-1))\n return value - (1< {\n viewof forward.value = forward;\n viewof turn.value = turn;\n viewof forward.dispatchEvent(new Event('input'));\n viewof turn.dispatchEvent(new Event('input'));\n },\n playSound: sound => {\n var data = new Uint8Array(1 + sound.length);\n data[0] = 24;\n for (var i = 0; i < sound.length; i++) {\n data[i + 1] = sound.charCodeAt(i);\n }\n controller.proxy.writeValue(data);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"md`## Communication`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"controller = {\n refresh; // reset\n await new Promise(resolve => (ifr.onload = resolve));\n const controller = comlink.wrap(\n comlink.windowEndpoint(\n ifr.contentWindow,\n self,\n \"https://endpointservice.web.app\"\n )\n );\n\n return {\n proxy: controller\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`### Communication Watchdog\n\nRegularly checks the bluetooth page can be reached. If it cannot, it restarts the cross-origin bridge with a refresh.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"mutable refresh = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"mutable lastPing = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"mutable lastReset = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"pinger = {\n // Send a message to the top level page\n controller;\n while (true) {\n const val = Math.random();\n\n console.log(`${await controller.proxy.ping()}`);\n mutable lastPing = new Date();\n yield Promises.delay(1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"watchDog = {\n now; // often check\n // auto restart comms if pings are 5 seconds behind\n if (new Date() - lastPing > 5000 && new Date() - lastReset > 5000) {\n mutable lastReset = new Date();\n mutable refresh++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`### Cross-origin bridge to child iframe\n\nThe bridge is a child iframe of the observable notebook. As such it cannot open a bluetooth session. However, even though it is cross-origin it can communicate with the parent bidirectionally using postMessage. So we use this to create a converter to https://endpointservice.web.app domain.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"comlink = require(\"comlink\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"ifr = html`` ||\n refresh","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"iframeHtml = deploy(\"bridge\", (req, res) => {\n res.send(`\nIframe bridge\n

Iframe bridge

\n`);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`### Bluetooth Page\n\nThe Bluetooth page has to be its own top level page so it can call bluetooth API. It is on https://endpointservice.web.app domain, so it can can also communicate using Broadcast channel with the bridge iframe who is on same-origin, just click the link below to open it!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md`\n### References\nThis page would not be possible without the help of\n- https://www.maissan.net/articles/dash-and-dot\n- https://github.com/IlyaSukhanov/morseapi\n- https://github.com/playi/WonderPy\n- https://github.com/GoogleChromeLabs/comlink\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"import { Range } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"session = {\n // We try to keep the session ID stable but generate one first time so BroadcastChannels are impossible to guess.\n const KEY = \"bluetoothsession\";\n var session;\n if (!(session = localStorage.getItem(KEY))) {\n session = randomId(30);\n localStorage.setItem(KEY, session);\n }\n return session;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"import { randomId } from '@tomlarkworthy/randomid'","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { deploy } from '@endpointservices/serverless-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"import { localStorage } from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"import { resize } from '@endpointservices/resize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1093,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}