diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 04283fdf7..000000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore index b15977be6..18a841a87 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules dist src -index.html.gz \ No newline at end of file +index.html.gz +.DS_Store diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 000000000..e69de29bb diff --git a/www/css/tablet.css b/www/css/tablet.css index 5770afcdc..ca02bb079 100644 --- a/www/css/tablet.css +++ b/www/css/tablet.css @@ -758,11 +758,8 @@ textarea { .caltable { width: 100%; - font-size: 10pt; -} - -.caltable table { - font-size: 10px; + font-size: x-small !important; + height: 600px; } .caltable textarea { diff --git a/www/index.html b/www/index.html index 72024c27f..ed4e5b743 100644 --- a/www/index.html +++ b/www/index.html @@ -1,63 +1,59 @@ - - - - - - - ESP3D WebUI - - - - - - - - - - - - - - - - + + + + + + + ESP3D WebUI + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/js/app.js b/www/js/app.js index 60f0e4dc0..5ebc1bf3f 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -77,21 +77,6 @@ function browser_is(bname) { return false } -window.onload = function () { - //to check if javascript is disabled like in anroid preview - displayNone('loadingmsg') - console.log('Connect to board') - connectdlg() - //ugly hack for IE - console.log(navigator.userAgent) - if (browser_is('IE')) { - id('control-body').className = 'panel-body' - id('command-body').className = 'panel-body' - id('file-body').className = 'panel-body panel-height panel-max-height panel-scroll' - } - tabletInit() -} - var wsmsg = '' function startSocket() { diff --git a/www/js/calculatesCalibrationStuff.js b/www/js/calculatesCalibrationStuff.js index 5f68642d6..aac8487fd 100644 --- a/www/js/calculatesCalibrationStuff.js +++ b/www/js/calculatesCalibrationStuff.js @@ -211,7 +211,7 @@ function magneticallyAttractedLinesFitness(measurement, individual) { measurement.TLtension = TL measurement.TRtension = TR - drawLines(tlLine, trLine, blLine, brLine, individual); + drawLines(tlLine, trLine, blLine, brLine, individual, measurement); return { fitness: finalFitness, lines: { tlLine: tlLine, trLine: trLine, blLine: blLine, brLine: brLine } } } diff --git a/www/js/calibrationDraw.js b/www/js/calibrationDraw.js index e7fff4707..3df39d5ab 100644 --- a/www/js/calibrationDraw.js +++ b/www/js/calibrationDraw.js @@ -18,9 +18,12 @@ function measurementsChanged() { } function updateCalibrationSave(caldata) { - SavedMeasurements = caldata; - calibrationTableUpdate(); - document.querySelector('button#compute-sim-button').disabled = false; + let id=0; + SavedMeasurements = caldata.map(m=>({...m, id: id++})); + calibrationTableUpdate(); + document.querySelector('button#compute-sim-button').disabled = false; + // draw one... + computeLinesFitness(SavedMeasurements, initialGuess); } function computeSim() { @@ -69,76 +72,63 @@ function changeStrokeStyle(inputValue) { * @param {Object} line4 - An object containing the x and y coordinates of the beginning and end of the fourth line. * @returns {void} */ -function drawLines(line1, line2, line3, line4, guess) { - - //Compute the tensions in the upper two belts - //const { TL, TR } = calculateTensions(line1.xEnd, line1.yEnd, guess); //This assumes the ends are in the same place which they aren't at first - - var canvas = document.getElementById("CursorLayer"); - var ctx = canvas.getContext("2d"); - - // Set the stroke color to a lighter grey - ctx.strokeStyle = "#999"; - - // Draw the four lines - ctx.setLineDash([5, 5]); - - //Top left line - ctx.beginPath(); - ctx.moveTo(line1.xBegin / 4, flipY(line1.yBegin / 4)); - ctx.lineTo(line1.xEnd / 4, flipY(line1.yEnd / 4)); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(line1.xEnd / 4, flipY(line1.yEnd / 4), 2, 0, 2 * Math.PI); - ctx.fill(); - - //Top right line - ctx.beginPath(); - ctx.moveTo(line2.xBegin / 4, flipY(line2.yBegin / 4)); - ctx.lineTo(line2.xEnd / 4, flipY(line2.yEnd / 4)); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(line2.xEnd / 4, flipY(line2.yEnd / 4), 2, 0, 2 * Math.PI); - ctx.fill(); - - ctx.beginPath(); - ctx.moveTo(line3.xBegin / 4, flipY(line3.yBegin / 4)); - ctx.lineTo(line3.xEnd / 4, flipY(line3.yEnd / 4)); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(line3.xEnd / 4, flipY(line3.yEnd / 4), 2, 0, 2 * Math.PI); - ctx.fill(); - - ctx.beginPath(); - ctx.moveTo(line4.xBegin / 4, flipY(line4.yBegin / 4)); - ctx.lineTo(line4.xEnd / 4, flipY(line4.yEnd / 4)); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(line4.xEnd / 4, flipY(line4.yEnd / 4), 2, 0, 2 * Math.PI); - ctx.fill(); +function drawLines(line1, line2, line3, line4, guess, measurement) { + + //Compute the tensions in the upper two belts + //const { TL, TR } = calculateTensions(line1.xEnd, line1.yEnd, guess); //This assumes the ends are in the same place which they aren't at first + + var canvas = document.getElementById("CursorLayer"); + var ctx = canvas.getContext("2d"); + + // Set the stroke color to a lighter grey + ctx.strokeStyle = "#999"; + + // Draw the four lines + ctx.setLineDash([5, 5]); + + //Top left line + ctx.beginPath(); + ctx.moveTo(line1.xBegin / 4, flipY(line1.yBegin / 4)); + ctx.lineTo(line1.xEnd / 4, flipY(line1.yEnd / 4)); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(line1.xEnd / 4, flipY(line1.yEnd / 4), 2, 0, 2 * Math.PI); + ctx.fill(); + + //Top right line + ctx.beginPath(); + ctx.moveTo(line2.xBegin / 4, flipY(line2.yBegin / 4)); + ctx.lineTo(line2.xEnd / 4, flipY(line2.yEnd / 4)); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(line2.xEnd / 4, flipY(line2.yEnd / 4), 2, 0, 2 * Math.PI); + ctx.fill(); + + ctx.beginPath(); + ctx.moveTo(line3.xBegin / 4, flipY(line3.yBegin / 4)); + ctx.lineTo(line3.xEnd / 4, flipY(line3.yEnd / 4)); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(line3.xEnd / 4, flipY(line3.yEnd / 4), 2, 0, 2 * Math.PI); + ctx.fill(); + + ctx.beginPath(); + ctx.moveTo(line4.xBegin / 4, flipY(line4.yBegin / 4)); + ctx.lineTo(line4.xEnd / 4, flipY(line4.yEnd / 4)); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(line4.xEnd / 4, flipY(line4.yEnd / 4), 2, 0, 2 * Math.PI); + ctx.fill(); + if (measurement.id != undefined) { + // update grid + gridApi.applyTransaction({ + update: [{ ...measurement, line1, line2, line3, line4 }], + }); + } else{ + console.log('no id', measurement); + } } function calibrationTableUpdate() { - const table = document.querySelector("#caltable"); - if (table.rows.length) { - for (let i=table.rows.length; i>0;i--) { - table.deleteRow(0); - } - } - const headr = table.insertRow(); - headr.insertCell(-1).innerText = "Action"; - headr.insertCell(-1).innerText = "Top Left"; - headr.insertCell(-1).innerText = "Top Right"; - headr.insertCell(-1).innerText = "Bottom Right"; - headr.insertCell(-1).innerText = "Bottom Left"; - SavedMeasurements.forEach( - m => { - const row = table.insertRow(); - row.insertCell(-1).innerText = ""; - row.insertCell(-1).innerText = "" + m.tl; - row.insertCell(-1).innerText = "" + m.tr; - row.insertCell(-1).innerText = "" + m.br; - row.insertCell(-1).innerText = "" + m.bl; - } - ) + gridApi?.setGridOption('rowData', SavedMeasurements); } \ No newline at end of file diff --git a/www/js/grid.js b/www/js/grid.js new file mode 100644 index 000000000..266006a93 --- /dev/null +++ b/www/js/grid.js @@ -0,0 +1,74 @@ +// Grid Options: Contains all of the grid configurations +const agGridOptions = { + rowData: [], + columnDefs: [ + { + field: "id", + headerName: "ID", + width: 80, + }, + { + field: "tl", + headerName: "Top Left", + width: 100, + }, + { + field: "tr", + headerName: "Top Right", + width: 100, + }, + { + field: "bl", + headerName: "Bottom Left", + width: 120, + }, + { + field: "br", + headerName: "Bottom Right", + width: 120, + }, + ], + onRowDoubleClicked: (p) => { + console.log(p); + if (p.data.line1) { + var canvas = document.getElementById("CursorLayer"); + var ctx = canvas.getContext("2d"); + highlightLine(p.data.line1, ctx, 3000); + highlightLine(p.data.line2, ctx, 3000); + highlightLine(p.data.line3, ctx, 3000); + highlightLine(p.data.line4, ctx, 3000); + } + }, + onGridReady: (params) => { + gridApi = params.api; + console.log("my grid is ready", params); + }, + getRowId: (params) => params.data.id, +}; + +const myGridElement = document.querySelector("#caltable"); +agGrid.createGrid(myGridElement, agGridOptions); +// Use this to update/ interact. +let gridApi = null; + +function highlightLine(line, ctx, time) { + ctx.fillStyle = "red"; + ctx.strokeStyle = "red"; + doDrawLine(line, ctx); + ctx.fillStyle = "black"; + ctx.strokeStyle = "#999"; + setTimeout(() => { + doDrawLine(line, ctx); + }, time); +} + +function doDrawLine(line, ctx) { + ctx.setLineDash([5, 5]); + ctx.beginPath(); + ctx.moveTo(line.xBegin / 4, flipY(line.yBegin / 4)); + ctx.lineTo(line.xEnd / 4, flipY(line.yEnd / 4)); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(line.xEnd / 4, flipY(line.yEnd / 4), 2, 0, 2 * Math.PI); + ctx.fill(); +} diff --git a/www/sub/calibrationtab.html b/www/sub/calibrationtab.html index b8b522100..b561f53c6 100644 --- a/www/sub/calibrationtab.html +++ b/www/sub/calibrationtab.html @@ -1,10 +1,10 @@

Maslow 4 Standalone Calibration Simulator

-

Warning: Unofficial and Experimental! This uses the calibration algorithm from firmware version 0.68. +

Warning: Unofficial and Experimental! This uses the calibration algorithm from firmware version 0.68. To use this tab to plot calibration data, copy and paste the line that starts with "CLBM:" in the serial messages, paste it here, and click "Compute".

CLBM Input: -
+
Fitness:
@@ -14,13 +14,13 @@

Maslow 4 Standalone Calibration Simulator

Calibration visualization:
-
+
Calibration table: -
+
- +
Calibration log: