onConnect = function (socket) { let lcn = loadCellName(loadCellConfigSection); socket.send('info', {"client_info": { "name": "Klipper/ObservableHQ Websocket", "version": "v0.1"}}); socket.subscribe('load_cell/dump_force', {"load_cell": lcn}, (msg) => { if (msg.params && msg.params.data) { for (const sample of msg.params.data) { loadCellChartData.force.push(sample[1]); loadCellChartData.times.push(sample[0]); } while (loadCellChartData.force.length > 10000) { loadCellChartData.force.shift(); loadCellChartData.times.shift(); } loadCellChart.setOption({ xAxis: {data: loadCellChartData.times}, series: [{data: loadCellChartData.force}, {data: loadCellChartData.tare}] }); } else { console.log("load_cell/dump_force unknown message:", msg); } }); if (lcn === 'load_cell_probe') { socket.subscribe('load_cell_probe/dump_taps', {"load_cell_probe": lcn}, (msg) => { if (msg.params && msg.params.tap) { console.log("load_cell_probe/dump_tap event:", msg); let tap = msg.params.tap; console.log(tap); var time = tap.time; var force = tap.force; const points = tap.points || tap.tap_points; // truncate the time data so we dont show long approach sequences var start_time = 0; if (points && points.length) { start_time = points[0].time; var start_idx = 0; for (; start_idx < time.length; start_idx++) { if (time[start_idx] >= start_time) break; } console.log("start_time", start_time, "start_idx", start_idx) time = time.slice(start_idx) force = force.slice(start_idx) // zero base the time infromation const t_zero = time[0]; for (var i = 0; i < time.length; i++) { time[i] = time[i] - t_zero; } for (var i = 0; i < points.length; i++) { points[i].time = points[i].time - t_zero; } } const graph = [] for (let i = 0; i < time.length; i++) { graph.push({time: time[i], force: force[i]}); } const last_time = time[time.length - 1]; let marks = [ Plot.line(graph, {x: "time", y: "force"}), Plot.crosshair(graph, {x: "time", y: "force", stroke: ""}) ]; if (points && points.length) { marks.push(Plot.line(points, {x: "time", y: "force", stroke: "red"})); } if (tap.home_end_time) { marks.push(Plot.ruleX([tap.home_end_time - start_time], {stroke: "blue"})) } if (tap.pullback_start_time) { marks.push(Plot.ruleX([tap.pullback_start_time - start_time], {stroke: "green"})); } if (tap.pullback_end_time) { marks.push(Plot.ruleX([tap.pullback_end_time - start_time], {stroke: "red"})); } // X to Y scale is 25g to 100ms // Define scales const xTickSpacing = 0.1; // tick every 100ms const yTickSpacing = 25; // tick every 25g // Total data range const xRange = [Math.min(...time), Math.max(...time)]; const yRange = [Math.min(...force), Math.max(...force)]; // make sure force has tick marks exactly on the 25's: yRange[0] = Math.floor(yRange[0] / yTickSpacing) * yTickSpacing yRange[1] = Math.ceil(yRange[1] / yTickSpacing) * yTickSpacing // Scale factor: pixels per unit const pixelsTick = 50; // Compute width and height const width = ((xRange[1] - xRange[0]) / (xTickSpacing)) * pixelsTick; const height = ((yRange[1] - yRange[0]) / yTickSpacing) * pixelsTick; console.log("height:", height, "width:", width); //console.log('graphs_z:', graph[0].z); const plot = Plot.plot({ style: "display: inline;", grid: true, inset: 10, width: width, height: height, marginLeft: 60, x: { domain: xRange, ticks: d3.range(xRange[0], xRange[1] + xTickSpacing, xTickSpacing), label: "Time (seconds)" }, y: { domain: yRange, ticks: d3.range(yRange[0], yRange[1] + yTickSpacing, yTickSpacing), label: "Gram Force (g)" }, marks: marks }) //console.log("Plot OK"); const wrapper = document.createElement('div'); wrapper.appendChild(plot); if ('is_valid' in tap) { if (tap.is_valid === true) { wrapper.appendChild(htl.html`

Is Good Tap?: True

`); } else { wrapper.appendChild(htl.html`

Is Good Tap?: False

`); } } if (tap.error) { if (tap.error.error_code) { wrapper.appendChild(htl.html`

Tap Validation Error: ${tap.error.error_code} - ${tap.error.message}

`); } else if (tap.error.length) { wrapper.appendChild(htl.html`

Tap Validation Error: ${tap.error}

`); } } // max force if (points && points.length) { const compressionForce = Math.abs(Math.round(points[2].force - points[1].force)); wrapper.appendChild(htl.html`

Compression Force: ${compressionForce}g

`); const decompressionForce = Math.abs(Math.round(points[4].force - points[3].force)); const percentage = ((decompressionForce / compressionForce) * 100.0).toFixed(2) wrapper.appendChild(htl.html`

Decompression Force: ${decompressionForce}g (${percentage}%)

`); const forceDelta = Math.round(Math.abs(points[1].force - points[4].force)); const forceDeltaPercentage = ((forceDelta / compressionForce) * 100.0).toFixed(2) wrapper.appendChild(htl.html`

Baseline Force Delta: ${forceDelta}g (${forceDeltaPercentage}%)

`); } // angles if (tap.tap_angles && tap.tap_angles.length) { const compression_angle = 180 - Math.abs(tap.tap_angles[0]).toFixed(2) const decompression_angle = (180 - Math.abs(tap.tap_angles[3])).toFixed(2) wrapper.appendChild(htl.html`

Compression Angle: ${compression_angle}°

`); wrapper.appendChild(htl.html`

Decompression Angle: ${decompression_angle}°

`); } // delay to collect data in milliseconds if (tap.collection_time) { const collectionTime = Math.abs(Math.round(tap.collection_time * 1000)); wrapper.appendChild(htl.html`

Collection Time: ${collectionTime}ms

`); } // computation time taken in milliseconds if (tap.elapsed) { const analsysTime = Math.abs(Math.round(tap.elapsed * 1000)); wrapper.appendChild(htl.html`

Analysis Time: ${analsysTime}ms

`); } // copy button const probeJson = JSON.stringify(tap, null, 4); const jsonButton = htl.html``; wrapper.appendChild(jsonButton); document.querySelector("#probes").prepend(wrapper); } else { console.log("load_cell_probe/dump_taps unknown message:", msg); } }); } }