Skip to content
This repository was archived by the owner on Nov 20, 2023. It is now read-only.

Commit 14354cb

Browse files
SizzinSealSizzinSeal
committed
added path downloading/uploading
1 parent 533fd06 commit 14354cb

File tree

3 files changed

+240
-30
lines changed

3 files changed

+240
-30
lines changed

‎index.html‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,85 +14,89 @@
1414

1515
<div class="sliderContainer">
1616
<input type="range" value="10" min="1" max="50" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lookahead">
17-
<output class="text">10</output>
17+
<output class="text" id="lookaheadVal">10</output>
1818
<label for="lookahead" class="text">Lookahead</label>
1919
<input type="range" value="20" min="0" max="100" step="0.01" oninput="this.nextElementSibling.value = this.value" id="decel">
20-
<output class="text">20</output>
20+
<output class="text" id="decelVal">20</output>
2121
<label for="decel" class="text">Decel</label>
2222
<input type="range" value="62.83" min="0" max="100" step="0.01" oninput="this.nextElementSibling.value = this.value" id="maxSpeed">
23-
<output class="text">62.83</output>
23+
<output class="text" id="maxSpeedVal">62.83</output>
2424
<label for="maxSpeed" class="text">Max Speed</label>
2525
<input type="range" value="50" min="0.1" max="100" step="0.01" oninput="this.nextElementSibling.value = this.value" id="multiplier">
26-
<output class="text">50</output>
26+
<output class="text" id="multiplierVal">50</output>
2727
<label for="multiplier" class="text">Multiplier</label>
2828
<input type="range" value="100" min="20" max="1000" step="1" oninput="this.nextElementSibling.value = this.value" id="precision">
29-
<output class="text">100</output>
29+
<output class="text" id="precisionVal">100</output>
3030
<label for="precision" class="text">Precision</label>
3131
<input type="range" value="2" min="0.5" max="10" step="0.01" oninput="this.nextElementSibling.value = this.value" id="inchesPerPoint">
32-
<output class="text">2</output>
32+
<output class="text" id="inchesPerPointVal">2</output>
3333
<label for="inchesPerPoint" class="text">Inches Per Point</label>
3434
<input type="range" value="18" min="1" max="30" step="0.01" oninput="this.nextElementSibling.value = this.value" id="trackWidth">
35-
<output class="text">18</output>
35+
<output class="text" id="trackWidthVal" >18</output>
3636
<label for="trackWidth" class="text">Track Width</label>
3737
<input type="range" value="5" min="0.1" max="10" step="0.01" oninput="this.nextElementSibling.value = this.value" id="deactivate">
38-
<output class="text">5</output>
38+
<output class="text" id="deactivateVal">5</output>
3939
<label for="deactivate" class="text">Deactivate Dist</label>
4040

41-
<button type="button" id="downloadBtn">Download</button>
42-
<button type="button" id="uploadBtn">Upload</button>
41+
<button type="button" id="downloadRobotBtn">Download Robot Data</button>
42+
<button type="button" id="downloadPathBtn">Download Path Data</button>
43+
<input type="file" id="uploadDebugBtn"></input>
44+
<label for="uploadDebugBtn" id="uploadDebugLabel">Upload Robot Debug Data</label>
45+
<input type="file" id="uploadPathBtn"></input>
46+
<label for="uploadPathBtn" id="uploadPathLabel">Upload Path Data</label>
4347
</div>
4448

4549
<div class="sliderContainer">
4650
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lF">
47-
<output class="text">1</output>
51+
<output class="text" id="lFVal">1</output>
4852
<label for="lF" class="text">Left F</label>
4953
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lA">
50-
<output class="text">1</output>
54+
<output class="text" id="lAVal">1</output>
5155
<label for="lA" class="text">Left A</label>
5256
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lJ">
53-
<output class="text">1</output>
57+
<output class="text" id="lJVal">1</output>
5458
<label for="lJ" class="text">Left J</label>
5559
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lP">
56-
<output class="text">1</output>
60+
<output class="text" id="lPVal">1</output>
5761
<label for="lP" class="text">Left P</label>
5862
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lI">
59-
<output class="text">1</output>
63+
<output class="text" id="lIVal">1</output>
6064
<label for="lI" class="text">Left I</label>
6165
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lD">
62-
<output class="text">1</output>
66+
<output class="text" id="lDVal">1</output>
6367
<label for="lD" class="text">Left D</label>
6468
<input type="range" value="0" min="0" max="1" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lB">
65-
<output class="text">1</output>
69+
<output class="text" id="lBVal">0</output>
6670
<label for="lB" class="text">Left B</label>
6771
<input type="range" value="0" min="0" max="1" step="0.01" oninput="this.nextElementSibling.value = this.value" id="lG">
68-
<output class="text">1</output>
72+
<output class="text" id="lGVal">0</output>
6973
<label for="lG" class="text">Left G</label>
7074
</div>
7175

7276
<div class="sliderContainer">
7377
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rF">
74-
<output class="text">1</output>
78+
<output class="text" id="rFVal">1</output>
7579
<label for="rF" class="text">Right F</label>
7680
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rA">
77-
<output class="text">1</output>
81+
<output class="text" id="rAVal">1</output>
7882
<label for="rA" class="text">Right A</label>
7983
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rJ">
80-
<output class="text">1</output>
84+
<output class="text" id="rJVal">1</output>
8185
<label for="rJ" class="text">Right J</label>
8286
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rP">
83-
<output class="text">1</output>
87+
<output class="text" id="rPVal">1</output>
8488
<label for="rP" class="text">Right P</label>
8589
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rI">
86-
<output class="text">1</output>
90+
<output class="text" id="rIVal">1</output>
8791
<label for="rI" class="text">Right I</label>
8892
<input type="range" value="1" min="0" max="5" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rD">
89-
<output class="text">1</output>
93+
<output class="text" id="rDVal">1</output>
9094
<label for="rD" class="text">Right D</label>
9195
<input type="range" value="0" min="0" max="1" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rB">
92-
<output class="text">1</output>
96+
<output class="text" id="rBVal">0</output>
9397
<label for="rB" class="text">Right B</label>
9498
<input type="range" value="0" min="0" max="1" step="0.01" oninput="this.nextElementSibling.value = this.value" id="rG">
95-
<output class="text">1</output>
99+
<output class="text" id="rGVal">0</output>
96100
<label for="rG" class="text">Right G</label>
97101
</div>
98102

‎scripts/index.js‎

Lines changed: 177 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const path = new Path(); // robot path
1+
let path = new Path(); // robot path
22

33

44
/**
@@ -239,6 +239,7 @@ function getInput() {
239239
// update PID constants
240240
lF = lFSlider.value;
241241
lA = lASlider.value;
242+
lJ = lJSlider.value;
242243
lP = lPSlider.value;
243244
lI = lISlider.value;
244245
lD = lDSlider.value;
@@ -247,6 +248,7 @@ function getInput() {
247248

248249
rF = rFSlider.value;
249250
rA = rASlider.value;
251+
rJ = rJSlider.value;
250252
rP = rPSlider.value;
251253
rI = rISlider.value;
252254
rD = rDSlider.value;
@@ -330,7 +332,7 @@ function drawSpline() {
330332
/**
331333
* @brief log the path for use in the robot
332334
*/
333-
downloadBtn.onclick = function() {
335+
downloadRobotBtn.onclick = function() {
334336
// mega string
335337
let out = '';
336338

@@ -365,6 +367,63 @@ downloadBtn.onclick = function() {
365367
out += x + ', ' + y + ', ' + velocity + '\n';
366368
}
367369

370+
const blob = new Blob([out], {type: 'text/csv'});
371+
if (window.navigator.msSaveOrOpenBlob) {
372+
window.navigator.msSaveBlob(out, 'robot.txt');
373+
} else {
374+
const elem = window.document.createElement('a');
375+
elem.href = window.URL.createObjectURL(blob);
376+
elem.download = 'robot.txt';
377+
document.body.appendChild(elem);
378+
elem.click();
379+
document.body.removeChild(elem);
380+
}
381+
};
382+
383+
384+
/**
385+
* @brief log the path for use in the simulator
386+
*/
387+
downloadPathBtn.onclick = function() {
388+
// mega string
389+
let out = '';
390+
391+
// log slider values
392+
out += lookahead + '\n';
393+
out += decel + '\n';
394+
out += maxSpeed + '\n';
395+
out += curveMultiplierSlider.value + '\n';
396+
out += precision + '\n';
397+
out += inchesPerPoint + '\n';
398+
out += trackWidth + '\n';
399+
out += deactivateDist + '\n';
400+
out += lF + '\n';
401+
out += lA + '\n';
402+
out += lJ + '\n';
403+
out += lP + '\n';
404+
out += lI + '\n';
405+
out += lD + '\n';
406+
out += lB + '\n';
407+
out += lG + '\n';
408+
out += rF + '\n';
409+
out += rA + '\n';
410+
out += rJ + '\n';
411+
out += rP + '\n';
412+
out += rI + '\n';
413+
out += rD + '\n';
414+
out += rB + '\n';
415+
out += rG + '\n';
416+
417+
// log splines
418+
for (let i = 0; i < path.splines.length; i++) {
419+
const p1 = path.splines[i].p1;
420+
const p2 = path.splines[i].p2;
421+
const p3 = path.splines[i].p3;
422+
const p4 = path.splines[i].p4;
423+
out += p1.x + ', ' + p1.y + ', ' + p2.x + ', ' + p2.y + ', ' + p3.x + ', ' + p3.y + ', ' + p4.x + ', ' + p4.y + '\n';
424+
}
425+
426+
// download the file
368427
const blob = new Blob([out], {type: 'text/csv'});
369428
if (window.navigator.msSaveOrOpenBlob) {
370429
window.navigator.msSaveBlob(out, 'path.txt');
@@ -377,3 +436,119 @@ downloadBtn.onclick = function() {
377436
document.body.removeChild(elem);
378437
}
379438
};
439+
440+
441+
/**
442+
* @brief upload path data from file
443+
*/
444+
uploadPathBtn.onchange = function() {
445+
const file = uploadPathBtn.files[uploadPathBtn.files.length];
446+
const reader = new FileReader();
447+
let data = '';
448+
449+
// event fired when file reading finished
450+
reader.onload=function() {
451+
data = reader.result;
452+
453+
// split the data into lines
454+
const lines = data.split('\n');
455+
456+
// init path
457+
path = new Path();
458+
459+
// get the slider values
460+
lookahead = parseFloat(lines[0]);
461+
decel = parseFloat(lines[1]);
462+
maxSpeed = parseFloat(lines[2]);
463+
curvatureMultiplier = parseFloat(lines[3]);
464+
precision = parseFloat(lines[4]);
465+
inchesPerPoint = parseFloat(lines[5]);
466+
trackWidth = parseFloat(lines[6]);
467+
deactivateDist = parseFloat(lines[7]);
468+
lF = parseFloat(lines[8]);
469+
lA = parseFloat(lines[9]);
470+
lJ = parseFloat(lines[10]);
471+
lP = parseFloat(lines[11]);
472+
lI = parseFloat(lines[12]);
473+
lD = parseFloat(lines[13]);
474+
lB = parseFloat(lines[14]);
475+
lG = parseFloat(lines[15]);
476+
rF = parseFloat(lines[16]);
477+
rA = parseFloat(lines[17]);
478+
rJ = parseFloat(lines[18]);
479+
rP = parseFloat(lines[19]);
480+
rI = parseFloat(lines[20]);
481+
rD = parseFloat(lines[21]);
482+
rB = parseFloat(lines[22]);
483+
rG = parseFloat(lines[23]);
484+
485+
let i = 24;
486+
487+
// read splines
488+
path.splines = [];
489+
while (i < lines.length-1) {
490+
// read spline
491+
const line = lines[i].split(', ');
492+
const p1 = new Point(parseFloat(line[0]), parseFloat(line[1]));
493+
const p2 = new Point(parseFloat(line[2]), parseFloat(line[3]));
494+
const p3 = new Point(parseFloat(line[4]), parseFloat(line[5]));
495+
const p4 = new Point(parseFloat(line[6]), parseFloat(line[7]));
496+
const spline = new Spline(p1, p2, p3, p4);
497+
path.addSpline(spline)
498+
i++;
499+
}
500+
501+
// update the sliders
502+
lookaheadSlider.value = lookahead;
503+
decelSlider.value = decel;
504+
maxSpeedSlider.value = maxSpeed;
505+
curveMultiplierSlider.value = curvatureMultiplier;
506+
precisionSlider.value = precision;
507+
inchesPerPointSlider.value = inchesPerPoint;
508+
trackWidthSlider.value = trackWidth;
509+
deactivateDistSlider.value = deactivateDist;
510+
lFSlider.value = lF;
511+
lASlider.value = lA;
512+
lJSlider.value = lJ;
513+
lPSlider.value = lP;
514+
lISlider.value = lI;
515+
lDSlider.value = lD;
516+
lBSlider.value = lB;
517+
lGSlider.value = lG;
518+
rFSlider.value = rF;
519+
rASlider.value = rA;
520+
rJSlider.value = rJ;
521+
rPSlider.value = rP;
522+
rISlider.value = rI;
523+
rDSlider.value = rD;
524+
rBSlider.value = rB;
525+
rGSlider.value = rG;
526+
527+
// update the text
528+
lookaheadVal.innerHTML = lookahead;
529+
decelVal.innerHTML = decel;
530+
maxSpeedVal.innerHTML = maxSpeed;
531+
curveMultiplierVal.innerHTML = curvatureMultiplier;
532+
precisionVal.innerHTML = precision;
533+
inchesPerPointVal.innerHTML = inchesPerPoint;
534+
trackWidthVal.innerHTML = trackWidth;
535+
deactivateDistVal.innerHTML = deactivateDist;
536+
lFVal.innerHTML = lF;
537+
lAVal.innerHTML = lA;
538+
lJVal.innerHTML = lJ;
539+
lPVal.innerHTML = lP;
540+
lIVal.innerHTML = lI;
541+
lDVal.innerHTML = lD;
542+
lBVal.innerHTML = lB;
543+
lGVal.innerHTML = lG;
544+
rFVal.innerHTML = rF;
545+
rAVal.innerHTML = rA;
546+
rJVal.innerHTML = rJ;
547+
rPVal.innerHTML = rP;
548+
rIVal.innerHTML = rI;
549+
rDVal.innerHTML = rD;
550+
rBVal.innerHTML = rB;
551+
rGVal.innerHTML = rG;
552+
}
553+
reader.readAsText(this.files[0]);
554+
}

‎scripts/userInput.js‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,40 @@ const rDSlider = document.getElementById('rD');
3030
const rBSlider = document.getElementById('rB');
3131
const rGSlider = document.getElementById('rG');
3232

33+
// slider values
34+
const lookaheadVal = document.getElementById('lookaheadVal');
35+
const decelVal = document.getElementById('decelVal');
36+
const maxSpeedVal = document.getElementById('maxSpeedVal');
37+
const curveMultiplierVal = document.getElementById('multiplierVal');
38+
const precisionVal = document.getElementById('precisionVal');
39+
const inchesPerPointVal = document.getElementById('inchesPerPointVal');
40+
const trackWidthVal = document.getElementById('trackWidthVal');
41+
const deactivateDistVal = document.getElementById('deactivateVal');
42+
43+
const lFVal = document.getElementById('lFVal');
44+
const lAVal = document.getElementById('lAVal');
45+
const lJVal = document.getElementById('lJVal');
46+
const lPVal = document.getElementById('lPVal');
47+
const lIVal = document.getElementById('lIVal');
48+
const lDVal = document.getElementById('lDVal');
49+
const lBVal = document.getElementById('lBVal');
50+
const lGVal = document.getElementById('lGVal');
51+
52+
const rFVal = document.getElementById('rFVal');
53+
const rAVal = document.getElementById('rAVal');
54+
const rJVal = document.getElementById('rJVal');
55+
const rPVal = document.getElementById('rPVal');
56+
const rIVal = document.getElementById('rIVal');
57+
const rDVal = document.getElementById('rDVal');
58+
const rBVal = document.getElementById('rBVal');
59+
const rGVal = document.getElementById('rGVal');
60+
61+
3362
// buttons
34-
const downloadBtn = document.getElementById('downloadBtn');
35-
const uploadBtn = document.getElementById('uploadBtn');
63+
const downloadRobotBtn = document.getElementById('downloadRobotBtn');
64+
const downloadPathBtn = document.getElementById('downloadPathBtn');
65+
const uploadDebugBtn = document.getElementById('uploadDebugBtn');
66+
const uploadPathBtn = document.getElementById('uploadPathBtn');
3667

3768
// user settings
3869
let lookahead = 0.5; // lookahead

0 commit comments

Comments
 (0)