2b:null 2c:["$","title",null,{"children":"OpenHPS Example: Motor Movement Tracking | OpenHPS | Observable"}] 31:Ta1a,/** * We create a custom source node that converts a motor PWM signal * to linear and angular velocity. **/ class MotorSource extends core.SourceNode { constructor(source) { super(source); this.leftPWM = 0; this.rightPWM = 0; this.maxSpeed = 2.0; } /** * Move the robot by controlling the left and right motor PWM * @param leftPWM Left motor PWM * @param rightPWM Right motor PWM **/ move(leftPWM, rightPWM) { // Make sure that the PWM is between 0 and 100 this.leftPWM = Math.min(100, Math.max(0, leftPWM)); this.rightPWM = Math.min(100, Math.max(0, rightPWM)); // Update the position and push the frame return this.updatePosition(); } updatePosition() { return new Promise((resolve, reject) => { // Our max linear velocity with one motor is this.maxSpeed meters per second on 100% const speedLeft = this.maxSpeed * (this.leftPWM / 100.); const speedRight = this.maxSpeed * (this.rightPWM / 100.); // We are going to make an inaccurate simulation // where we manipulate the angular velocity // based on the left and right motor PWM. // In this example we do not take the rotation // axis into account. const linearVelocity = new core.LinearVelocity( speedLeft + speedRight, 0, 0 ); const angularVelocity = new core.AngularVelocity( 0, 0, 2 * Math.PI * 0.5 * (speedRight - speedLeft) ); // Get the stored position and add the linear and angular velocity this.model .findDataService(core.DataObject) .findByUID(this.source.uid) .then(storedObj => { const position = storedObj.getPosition(); position.timestamp = core.TimeService.now(); position.linearVelocity = linearVelocity; position.angularVelocity = angularVelocity; const frame = new core.DataFrame(storedObj); frame.createdTimestamp = core.TimeService.now(); frame.source.setPosition(position); return this.push(frame); }) .then(() => { resolve(); }) .catch(ex => { reject(ex); }); }); } onPull() { // Pull received, load last stored data and push again without changes return this.model .findDataService(core.DataObject) .findByUID(this.source.uid) .then(storedObj => { const frame = new core.DataFrame(storedObj); frame.createdTimestamp = core.TimeService.now(); return this.push(frame); }); } }32:T442,model = await core.ModelBuilder.create() .addService(timeService) .from(motorSource) .via(new core.TimedPullNode(250, core.TimeUnit.MILLI)) .via(new core.VelocityProcessingNode()) .via( new core.CallbackNode(frame => { // This node prevents the robot from going off-screen const position = frame.source.getPosition(); position.x = Math.min(20, Math.max(0, position.x)); position.y = Math.min(20, Math.max(0, position.y)); frame.source.setPosition(position); }) ) .to( new core.CallbackSinkNode(frame => { const position = frame.source.getPosition(); const positionPlot = { x: position.x, y: position.y }; // Check if the last position is different // if not, we do not want to overlay it if ( JSON.stringify(data[data.length - 1]) !== JSON.stringify(positionPlot) ) { // Add the new location to the plot data.push(positionPlot); if (data.length > 100) { data.shift(); } chart.plot(data); } }) ) .build()33:T571,html`

${Object.assign(html``, { onclick: () => { Promise.resolve(motorSource.move(50, 100)); } })}	${Object.assign(html``, { onclick: () => { Promise.resolve(motorSource.move(100, 100)); } })}	${Object.assign(html``, { onclick: () => { Promise.resolve(motorSource.move(100, 50)); } })}
${Object.assign( html``, { onclick: () => { Promise.resolve(motorSource.move(0, 100)); } } )}	${Object.assign(html``, { onclick: () => { Promise.resolve(motorSource.move(0, 0)); } })}	${Object.assign( html``, { onclick: () => { Promise.resolve(motorSource.move(100, 0)); } } )}

`34:[] 2f:{"id":"1673bf0f04655577","slug":null,"title":"OpenHPS Example: Motor Movement Tracking","thumbnail":"98d625d2c7478ebc5561801431d1d384f19e2c4ecfefa7369bdea21cf9cc0da0","access_level":"unlisted","create_time":"$D2020-07-29T14:14:09.722Z","update_time":"$D2021-01-07T19:53:14.304Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a25f06c59ebf123d","login":"openhps","name":"OpenHPS","avatar_url":"https://avatars-next.observableusercontent.com/1bd6e42aba2de78973d8b849f41ffc53f7804de15b439d90e5d3fa27f458ba50","tier":"starter_2024"},"version":767,"publish_version":767,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8bb01f0a4d4ed4c","login":"openhps","name":"OpenHPS","avatar_url":"https://avatars-next.observableusercontent.com/1bd6e42aba2de78973d8b849f41ffc53f7804de15b439d90e5d3fa27f458ba50","tier":null}],"members":[{"type":"individual","id":"c8bb01f0a4d4ed4c","login":"openhps","name":"OpenHPS","avatar_url":"https://avatars-next.observableusercontent.com/1bd6e42aba2de78973d8b849f41ffc53f7804de15b439d90e5d3fa27f458ba50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"OpenHPS Example: Motor Movement Tracking","cells":[{"id":0,"value":"md`\n# OpenHPS Example: Motor Movement Tracking\n## Using @openhps/core linear and angular velocity\nThis is a basic example of robot movement tracking using @openhps/core linear and angular velocity.\nIn this example, we will manually set the velocity based on the motor control.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\n### Scenario\nWe control a tank-like robot by providing a PWM percentage (Pulse Width Modulation) to the left and right motor(s). The PWM control the speed of the left and right motors. \n\nIn our positioning model, we will convert this percentage to linear and angular velocity. This velocity will be processed to get the predicted position of our robot after a certain amount of time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"core = require('https://cdn.jsdelivr.net/npm/@openhps/core@0.2.0-alpha.7/')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md`We will use a custom reference time for simplifying this notebook. By default, OpenHPS would use the current system time for the calculations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"time = new (class Time {\n constructor() {\n this.time = 0;\n this._timer = undefined;\n this.start();\n }\n get() {\n return this.time;\n }\n set(t) {\n this.time = t;\n }\n increment() {\n this.time++;\n }\n start() {\n this._timer = setInterval(() => {\n // Increment time\n this.increment();\n }, 1);\n }\n stop() {\n clearInterval(this._timer);\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"timeService = new core.TimeService(() => time.get(), core.TimeUnit.MILLI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`\n#### Input Source\nIn this example of our positioning model, we create a custom motor input source with simple functions for moving the robot forward, left, right and stopping its movement.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`\nWe create a new instance of this source for our data object with uid \"robot\". This allows us to manually call the functions for controlling the movement in this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"motorSource = new MotorSource(new core.DataObject(\"robot\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md`\n### Positioning Model\nWe are going to create a positioning model that constist of:\n- The custom motor source.\n- A timed pull node that automatically pulls a new frame every 250 ms.\n- A velocity processing node that computes the position from the linear and angular velocity. This velocity processing node uses our time function.\n- Callback sink that pushes the position to the visual plot\n\nIn addition, it also contains a custom time service that will be used instead of the system time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`\n### Robot Start Position\nThe start position of the robot is set to the origin (10, 10) with a default orientation. The data object and starting position is pushed to the model.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n const robot = new core.DataObject(\"robot\");\n const position = new core.Absolute2DPosition(10, 10);\n position.timestamp = core.TimeService.now();\n robot.setPosition(position);\n model.push(new core.DataFrame(robot));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n### Robot Control\nIn this scenario we control the movement of the robot by manipulating the motors.\nThis notebook is interactive, you are able to control the speed of the left and right motors and the time when the motor signal takes place.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"chart.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`\nControlling the robot is done by sending a PWM signal to the left and right motor using:\n~~~typescript\nmotorSource.move(100,100);\n~~~\nTurning is done by lowering the PWM speed on the side that you want to turn to. Depending on the different from left to right, this will influence the turning speed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`---\n\n\n## Appendix\nThis section contains information for loading the visual aspects of this notebook. It is not relevant to the demonstration of OpenHPS.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"trajectoryGradient = {\n return d3\n .scaleSequential()\n .domain([0, 100])\n .interpolator(d3.interpolatePuBu);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg.append(\"g\").call(grid);\n\n const plot = function(data) {\n svg\n .append(\"g\", \".dot\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"none\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"stroke\", d =>\n trajectoryGradient(100 - data.length + data.indexOf(d))\n )\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 1);\n };\n plot(data);\n\n return Object.defineProperty(svg, \"plot\", { get: () => plot });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"data = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"x = d3\n .scaleLinear()\n .domain([0, 20])\n .nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"y = d3\n .scaleLinear()\n .domain([0, 20])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"grid = g =>\n g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom)\n )\n .call(g =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"import { style as faStyle, fa, far, fab, fas } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"faStyle({ regular: true, solid: true, brands: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"