29:null 2a:["$","title",null,{"children":"2 Channel Monitor | garethky | Observable"}] 2f:T53c,---- # Klipper/Moonraker Websocket Connection Instructions This is what you need to do to get this website, ObservableHQ, to talk to the websocket in Moonraker on your local network. ### 1. You must add these entries in the CORS domains in `moonraker.config` ``` [authorization] cors_domains: *.static.observableusercontent.com *.observablehq.com ``` ### 2. You must set up HTTPS To allow this web page to work with your local klipper instance it must communicate over HTTPS. #### 2.1 Enable the secure port in `moonraker.config` ``` [server] ssl_port: 7130 ``` #### 2.2 Use OpenSSL to generate a self signed cert for Moonraker: This assumes you set up Moonraker in the default location in `/home/pi/`: ``` cd /home/pi/printer_data/certs sudo openssl req -new -x509 -days 365 -nodes -out moonraker.cert -keyout moonraker.key chmod +r ./* ``` This creates a certificate that lasts for a year and adds read permissions to the file so Moonraker can open it. ### 3. Restart Moonraker You can usually do this via your front end of choice. Or run: ``` sudo service moonraker restart ``` ### 4. Get your browser to accept the self signed cert Visit https://your-printer.local:7130/ to load a page with the cert. You will get a warning about the cert, after you accept the warning you will be able to connect to the web socket30:T67a,class BridgeSocket{ constructor(server, onConnect) { this.bridge_ws = new WebSocket(`wss://${server}:7130/klippysocket`); this.bridge_ws.onerror = (err) => { console.log("Klippy Bridge Error: "); console.log(err) this.bridge_ws.close(); }; this.handlers = {}; this.bridge_ws.onopen = () => { console.log("Klippy Bridge Socket connected"); onConnect(this); }; this.bridge_ws.onclose = (e) => { console.log("Klippy Bridge Socket close"); }; this.bridge_ws.onmessage = (e) => { let jdata = JSON.parse(e.data); if (jdata.id != null) { if (this.handlers[jdata.id]) { this.handlers[jdata.id](jdata); } else { console.log("Received Klippy Bridge Response"); console.log(jdata); } } }; }; requestId() { return Math.floor(Math.random() * 100000); } send(method, params, requestId) { requestId = requestId || this.requestId(); params = params || {}; params.response_template = {}; params.response_template.id = requestId; let api_request = {method: method, id: requestId, params: params}; this.bridge_ws.send(JSON.stringify(api_request)); return requestId; } subscribe (method, params, handler) { let requestId = this.requestId(); this.handlers[requestId] = handler; this.send(method, params, requestId); } } 31:T1f95,onConnect = function (socket) { let lcn = loadCellName(loadCellConfigSection); let once = false; 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) { if (once == false) { once = true; console.dir(msg.params); } for (const sample of msg.params.data) { loadCellChartData.force.push(sample[1]); loadCellChartData.times.push(sample[0]); // channel 0 channel0ChartData.times.push(sample[0]); channel0ChartData.counts.push(sample[5]); // channel 1 channel1ChartData.times.push(sample[0]); channel1ChartData.counts.push(sample[7]); } while (loadCellChartData.force.length > 200) { loadCellChartData.force.shift(); loadCellChartData.times.shift(); channel0ChartData.times.shift(); channel0ChartData.counts.shift(); channel1ChartData.times.shift(); channel1ChartData.counts.shift(); } loadCellChart.setOption({ xAxis: {data: loadCellChartData.times}, series: [{data: loadCellChartData.force}, {data: loadCellChartData.tare}] }); channel0Chart.setOption({ xAxis: {data: channel0ChartData.times}, series: [{data: channel0ChartData.counts}] }); channel1Chart.setOption({ xAxis: {data: channel1ChartData.times}, series: [{data: channel1ChartData.counts}] }); } 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); } }); } }32:[] 2d:{"id":"83e51eb18f58bf6f","slug":null,"title":"2 Channel Monitor","thumbnail":"20e095439d3e01ab31b6c3bf6247f94d1743684dd58ae87213a6ba8bd6db2d69","access_level":"public","create_time":"$D2026-04-17T21:41:47.245Z","update_time":"$D2026-04-18T04:37:06.861Z","view_time":null,"first_public_time":"$D2026-04-17T21:41:47.245Z","fork":{"id":"c2038f808409ac93","slug":"klipper-load-cell-debugging-tool","title":"Klipper Load Cell & Load Cell Probe Live Monitor Tool","owner":{"id":"d4b043bd397f52ae","login":"garethky","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d4b043bd397f52ae","login":"garethky","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f6fe0061a4ae2fc523e238ba171e9981f45eb48ba3a85b00d89c2240da70f094","tier":"starter_2024"},"version":1092,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"75591c4ab4a249df","login":"garethky","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f6fe0061a4ae2fc523e238ba171e9981f45eb48ba3a85b00d89c2240da70f094","tier":null}],"members":[{"type":"individual","id":"75591c4ab4a249df","login":"garethky","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f6fe0061a4ae2fc523e238ba171e9981f45eb48ba3a85b00d89c2240da70f094","tier":null,"role":"editor"},{"type":"team","id":"d4b043bd397f52ae","login":"garethky","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f6fe0061a4ae2fc523e238ba171e9981f45eb48ba3a85b00d89c2240da70f094","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2 Channel Monitor","cells":[{"id":539,"value":"# 2 Channel Monitor\n\n**Please** check through the [Klipper/Moonraker Websocket Connection Requirements](https://observablehq.com/@garethky/klipper-load-cell-debugging-tool#cell-4) section to connect this page to Moonraker on your printer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof server = Inputs.bind(Inputs.text({label: \"Moonraker hostname\", placeholder: \"printer.local\"}), localStorageView(\"server\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"viewof loadCellConfigSection = Inputs.bind(Inputs.text({label: \"[load_cell], [load_cell name] or [load_cell_probe]\", placeholder: \"[load_cell]\"}), localStorageView(\"loadCellConfigSection\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"## Load Cell Force in Grams","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":510,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"

Channel 1 Counts

Channel 2 Counts

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":886,"value":"viewof button = Inputs.button(\"Copy To Clipboard\", {value: null, reduce: copyLoadCellData});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"# Probe Samples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":552,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":736,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":378,"value":"echarts = require(\"https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"import {localStorageView} from \"@tomlarkworthy/local-storage-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"// extract the load cell or load cell probename from the input box\nloadCellName = function(name) {\n if (name.startsWith(\"[\")) {\n name = name.substring(1, name.length - 1)\n }\n // if [load_cell name]\n if (name.indexOf(\" \")) {\n name = name.substring(name.indexOf(\" \") + 1)\n }\n console.log(name);\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"loadCellChart = {\n let chartDom;\n while (!(chartDom = document.querySelector(\"#load-cell-data\"))) await Promises.delay(50);\n \n const loadCellChart = echarts.init(chartDom);\n var option = {\n xAxis: loadCellChartData.xAxis,\n series: loadCellChartData.series,\n yAxis: {\n type: 'value',\n name: \"Grams\",\n boundaryGap: ['0%', '0%'],\n },\n animation: false,\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'line'\n },\n position: { top: 0, right: 0 },\n },\n }\n\n loadCellChart.setOption(option);\n return loadCellChart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"channel0Chart = {\n let chartDom;\n while (!(chartDom = document.querySelector(\"#channel-0-data\"))) await Promises.delay(50);\n \n const channel0Chart = echarts.init(chartDom);\n var option = {\n xAxis: channel0ChartData.xAxis,\n yAxis: channel0ChartData.yAxis,\n series: channel0ChartData.series,\n animation: false,\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'line'\n },\n position: { top: 0, right: 0 },\n },\n }\n\n channel0Chart.setOption(option);\n return channel0Chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"channel1Chart = {\n let chartDom;\n while (!(chartDom = document.querySelector(\"#channel-1-data\"))) await Promises.delay(50);\n \n const channel1Chart = echarts.init(chartDom);\n var option = {\n xAxis: channel1ChartData.xAxis,\n yAxis: channel1ChartData.yAxis,\n series: channel1ChartData.series,\n animation: false,\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'line'\n },\n position: { top: 0, right: 0 },\n },\n }\n\n channel1Chart.setOption(option);\n return channel1Chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"loadCellChartData = {\n const force = [];\n const time = [];\n const series = [\n {\n data: force,\n name: 'Force (g)',\n type: 'line',\n step: 'start',\n showSymbol: false,\n sampling: 'lttb',\n zlevel: 1,\n lineStyle: {\n opacity: 1.0,\n width: 1\n },\n }\n ];\n const xAxis = {\n type: 'category',\n data: time\n }\n const loadCellChartData = {\n xAxis: xAxis,\n series: series,\n force: force,\n times: time\n }\n return loadCellChartData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1055,"value":"channel0ChartData = {\n const counts = [];\n const time = [];\n const series = [\n {\n data: counts,\n name: 'Counts',\n type: 'line',\n step: 'start',\n showSymbol: false,\n sampling: 'lttb',\n zlevel: 1,\n lineStyle: {\n opacity: 1.0,\n width: 1\n },\n }\n ];\n const xAxis = {\n type: 'category',\n data: time\n }\n const loadCellChartData = {\n xAxis: xAxis,\n yAxis: {\n type: 'value',\n min: 'dataMin',\n max: 'dataMax',\n },\n series: series,\n counts: counts,\n times: time\n }\n return loadCellChartData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1058,"value":"channel1ChartData = {\n const counts = [];\n const time = [];\n const series = [\n {\n data: counts,\n name: 'Counts',\n type: 'line',\n step: 'start',\n showSymbol: false,\n sampling: 'lttb',\n zlevel: 1,\n lineStyle: {\n opacity: 1.0,\n width: 1\n },\n }\n ];\n const xAxis = {\n type: 'category',\n data: time\n };\n const loadCellChartData = {\n xAxis: xAxis,\n yAxis: {\n type: 'value',\n min: 'dataMin',\n max: 'dataMax',\n },\n series: series,\n counts: counts,\n times: time\n }\n return loadCellChartData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"rawAdcChartData = {\n const points = [];\n const times = [];\n const series = [\n {\n data: points,\n name: 'Counts',\n type: 'line',\n step: 'start',\n showSymbol: false,\n //sampling: 'lttb',\n zlevel: 6,\n yAxisIndex: 0,\n }\n ];\n const xAxis = {\n type: 'category',\n data: times\n }\n const rawChartData = {\n xAxis: xAxis,\n series: series,\n points: points,\n times: times,\n }\n return rawChartData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"function dualAxisY(data, {y, ticks = 0.1, tickFormat, ...options} = {}) {\n const [y1, y2] = d3.extent(Plot.valueof(data, y));\n const scale = d3.scaleLinear().domain([y1, y2]);\n return Plot.axisY(d3.ticks(y1, y2, ticks), {...options, y: scale, tickFormat: scale.tickFormat(ticks, tickFormat)});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"function copyLoadCellData() {\n navigator.clipboard.writeText(JSON.stringify({force: loadCellChartData.force, time: loadCellChartData.times}));\n return 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"socket = {\n let elem;\n while (!(elem = document.querySelector(\"#load-cell-data\"))) await Promises.delay(50);\n return new BridgeSocket(server, onConnect);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"