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

Commit 9fa7fb1

Browse files
SizzinSealSizzinSeal
committed
debugging set except for time scrolling
1 parent bb9235a commit 9fa7fb1

File tree

6 files changed

+231
-80
lines changed

6 files changed

+231
-80
lines changed

‎index.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ body {
77
float: left;
88
}
99

10+
11+
/**
12+
* This css is used to style the sliders when in create mode
13+
*/
1014
.sliderContainer {
1115
display: flex;
1216
flex-wrap: wrap;
@@ -37,3 +41,39 @@ body {
3741
flex-basis: 100%;
3842
color: black;
3943
}
44+
45+
46+
/**
47+
* This css is used to style the sliders when in debug mode
48+
*/
49+
.debugContainer {
50+
display: flex;
51+
flex-wrap: wrap;
52+
padding-left: 0;
53+
padding-top: 49px;
54+
}
55+
56+
.debugContainer input {
57+
list-style: none;
58+
flex-basis: 40%;
59+
color: white;
60+
}
61+
62+
.debugContainer output {
63+
list-style: none;
64+
flex-basis: 10%;
65+
color: white;
66+
}
67+
68+
.debugContainer label {
69+
list-style: none;
70+
flex-basis: 40%;
71+
color: white;
72+
}
73+
74+
.debugContainer button {
75+
list-style: none;
76+
flex-basis: 100%;
77+
color: black;
78+
}
79+

‎index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@
4040

4141
<button type="button" id="downloadRobotBtn">Download Robot Data</button>
4242
<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>
4543
<input type="file" id="uploadPathBtn"></input>
4644
<label for="uploadPathBtn" id="uploadPathLabel">Upload Path Data</label>
4745
</div>
@@ -103,6 +101,11 @@
103101
<div class="modeContainer">
104102
<button type="button" id="modeBtn">mode</button>
105103
</div>
104+
105+
<div class="debugContainer">
106+
<input type="file" id="uploadDebugBtn"></input>
107+
<label for="uploadDebugBtn" id="uploadDebugLabel">Upload Robot Debug Data</label>
108+
</div>
106109

107110
<script src="scripts/point.js"></script>
108111
<script src="scripts/userInput.js"></script>

‎scripts/events.js‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ uploadPathBtn.onchange = function() {
431431
* @brief upload the robot debug data
432432
*/
433433
uploadDebugBtn.onchange = function() {
434-
const file = uploadPathBtn.files[uploadPathBtn.files.length];
434+
const file = uploadDebugBtn.files[uploadDebugBtn.files.length];
435435
const reader = new FileReader();
436436
let data = '';
437437

@@ -443,24 +443,22 @@ uploadDebugBtn.onchange = function() {
443443

444444
// loop to get path points
445445
let i = 0;
446-
while (lines[i] != 'debug') {
447-
i++;
446+
while (lines[i].substr(0, 5) != 'debug') {
448447
const line = lines[i].split(', ');
449448
const x = parseFloat(line[0]);
450449
const y = parseFloat(line[1]);
451450
const velocity = parseFloat(line[2]);
452451
const p = new Point(x, y);
453452
p.velocity = velocity;
454453
debugPath.push(p);
454+
i++;
455455
}
456456

457-
458-
/*
459-
* Debug Data Format
460-
* timestamp, rbtX, rbtY, rbtH, closestX, closestY, lookaheadX, lookaheadY,
461-
* curvature, targetVel, leftTargetVel, rightTargetVel,
462-
* leftVel, rightVel
463-
*/
457+
// Debug Data Format
458+
// timestamp, rbtX, rbtY, rbtH, closestX, closestY, lookaheadX, lookaheadY,
459+
// curvature, targetVel, leftTargetVel, rightTargetVel,
460+
// leftVel, rightVel
461+
//
464462
// loop to get debug data
465463
for (i++; i < lines.length; i++) {
466464
const line = lines[i].split(', ');
@@ -478,12 +476,14 @@ uploadDebugBtn.onchange = function() {
478476
const rightTargetVel = parseFloat(line[11]);
479477
const leftVel = parseFloat(line[12]);
480478
const rightVel = parseFloat(line[13]);
481-
const debugData = new DebugData(timestamp, rbtX, rbtY, rbtH, closestX,
482-
closestY, lookaheadX, lookaheadY, curvature, targetVel,
479+
const debugData = new DebugDataPoint(timestamp, rbtX, rbtY, rbtH,
480+
closestX, closestY, lookaheadX, lookaheadY, curvature, targetVel,
483481
leftTargetVel, rightTargetVel, leftVel, rightVel);
484482
debugDataList.push(debugData);
483+
debugSet = true;
485484
}
486485
};
486+
reader.readAsText(this.files[this.files.length-1]);
487487
};
488488

489489

@@ -492,15 +492,26 @@ uploadDebugBtn.onchange = function() {
492492
*/
493493
modeBtn.onclick = function() {
494494
const cols = document.getElementsByClassName('sliderContainer');
495+
const cols2 = document.getElementsByClassName('debugContainer');
495496
if (cols[0].style.display === 'none') {
496497
mode = 0;
498+
// show create mode sliders
497499
for (i = 0; i < cols.length; i++) {
498500
cols[i].style.display = 'flex';
499501
}
502+
// hide debug mode sliders
503+
for (i = 0; i < cols2.length; i++) {
504+
cols2[i].style.display = 'none';
505+
}
500506
} else {
501507
mode = 1;
508+
// hide create mode sliders
502509
for (i = 0; i < cols.length; i++) {
503510
cols[i].style.display = 'none';
504511
}
512+
// show debug mode sliders
513+
for (i = 0; i < cols2.length; i++) {
514+
cols2[i].style.display = 'flex';
515+
}
505516
}
506517
};

‎scripts/index.js‎

Lines changed: 138 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
const path = new Path(); // robot path
1+
let path = new Path(); // robot path
22
let debugPath = [];
3+
let debugDataList = [];
4+
let debugDataTime = 0;
5+
let debugSet = false;
36

47

58
// program mode
@@ -30,7 +33,7 @@ function hslToHex(h, s, l) {
3033
return Math.round(255 * color).toString(16).padStart(2, '0');
3134
};
3235
return `#${f(0)}${f(8)}${f(4)}`;
33-
}
36+
};
3437

3538

3639
/**
@@ -68,77 +71,151 @@ function getInput() {
6871

6972

7073
/**
71-
* @brief draw the spline
74+
* @brief function to create a field
7275
*/
73-
function render() {
74-
// clear the canvas
75-
ctx.clearRect(0, 0, canvas.width, canvas.height);
76-
// draw the field
77-
ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
78-
0, 0, canvas.width, canvas.height); // destination rectangle
76+
function renderCreate() {
77+
// init
78+
getInput();
79+
const finalSpacing = Math.round(path.length / inchesPerPoint);
80+
path.genPoints(precision, finalSpacing);
7981

80-
// create mode render
81-
if (mode == 0) {
82-
// init
83-
getInput();
84-
const finalSpacing = Math.round(path.length / inchesPerPoint);
85-
path.genPoints(precision, finalSpacing);
86-
87-
// draw control points
88-
for (let i = 0; i < path.splines.length; i++) {
89-
const p1 = coordToPx(path.splines[i].p1);
90-
const p2 = coordToPx(path.splines[i].p2);
91-
const p3 = coordToPx(path.splines[i].p3);
92-
const p4 = coordToPx(path.splines[i].p4);
93-
ctx.fillStyle = hslToHex(140, 50, 50);
94-
ctx.strokeStyle = hslToHex(0, 0, 0);
95-
// draw the lines between the control points
82+
// draw control points
83+
for (let i = 0; i < path.splines.length; i++) {
84+
const p1 = coordToPx(path.splines[i].p1);
85+
const p2 = coordToPx(path.splines[i].p2);
86+
const p3 = coordToPx(path.splines[i].p3);
87+
const p4 = coordToPx(path.splines[i].p4);
88+
ctx.fillStyle = hslToHex(140, 50, 50);
89+
ctx.strokeStyle = hslToHex(0, 0, 0);
90+
// draw the lines between the control points
91+
ctx.beginPath();
92+
ctx.moveTo(p1.x, p1.y);
93+
ctx.lineTo(p2.x, p2.y);
94+
ctx.stroke();
95+
ctx.closePath();
96+
ctx.beginPath();
97+
ctx.moveTo(p3.x, p3.y);
98+
ctx.lineTo(p4.x, p4.y);
99+
ctx.stroke();
100+
ctx.closePath();
101+
// draw the control points
102+
ctx.beginPath();
103+
ctx.arc(p1.x, p1.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
104+
ctx.arc(p2.x, p2.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
105+
ctx.fill();
106+
ctx.closePath();
107+
ctx.beginPath();
108+
ctx.arc(p3.x, p3.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
109+
ctx.arc(p4.x, p4.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
110+
ctx.fill();
111+
ctx.closePath();
112+
}
113+
114+
// draw spline
115+
for (let i = 0; i < path.points2.length; i++) {
116+
const p1 = coordToPx(path.points2[i]);
117+
// draw the points
118+
const radiusSetting = 0.5;
119+
const radius = radiusSetting * imgPixelsPerInch;
120+
ctx.fillStyle = hslToHex((path.points2[i].velocity/maxSpeed)*180,
121+
100, 50);
122+
ctx.strokeStyle = ctx.fillStyle;
123+
ctx.beginPath();
124+
ctx.arc(p1.x, p1.y, radius, 0, 2 * Math.PI);
125+
ctx.stroke();
126+
ctx.fill();
127+
ctx.closePath();
128+
// draw the lines
129+
if (i < path.points2.length - 1) {
130+
const p2 = coordToPx(path.points2[i + 1]);
96131
ctx.beginPath();
97132
ctx.moveTo(p1.x, p1.y);
98133
ctx.lineTo(p2.x, p2.y);
99134
ctx.stroke();
100135
ctx.closePath();
101-
ctx.beginPath();
102-
ctx.moveTo(p3.x, p3.y);
103-
ctx.lineTo(p4.x, p4.y);
104-
ctx.stroke();
105-
ctx.closePath();
106-
// draw the control points
107-
ctx.beginPath();
108-
ctx.arc(p1.x, p1.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
109-
ctx.arc(p2.x, p2.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
110-
ctx.fill();
111-
ctx.closePath();
112-
ctx.beginPath();
113-
ctx.arc(p3.x, p3.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
114-
ctx.arc(p4.x, p4.y, controlPointRadius*imgPixelsPerInch, 0, 2*Math.PI);
115-
ctx.fill();
116-
ctx.closePath();
117136
}
137+
}
138+
};
139+
118140

119-
// draw spline
120-
for (let i = 0; i < path.points2.length; i++) {
121-
const p1 = coordToPx(path.points2[i]);
122-
// draw the points
123-
const radiusSetting = 0.5;
124-
const radius = radiusSetting * imgPixelsPerInch;
125-
ctx.fillStyle = hslToHex((path.points2[i].velocity/maxSpeed)*180,
126-
100, 50);
127-
ctx.strokeStyle = ctx.fillStyle;
141+
/**
142+
* @brief render for debug mode
143+
*/
144+
function renderDebug() {
145+
// render the path
146+
for (let i = 0; i < debugPath.length; i++) {
147+
const p1 = coordToPx(debugPath[i]);
148+
// draw the points
149+
const radiusSetting = 0.5;
150+
const radius = radiusSetting * imgPixelsPerInch;
151+
ctx.fillStyle = hslToHex((debugPath[i].velocity/maxSpeed)*180,
152+
100, 50);
153+
ctx.strokeStyle = ctx.fillStyle;
154+
ctx.beginPath();
155+
ctx.arc(p1.x, p1.y, radius, 0, 2 * Math.PI);
156+
ctx.stroke();
157+
ctx.fill();
158+
ctx.closePath();
159+
// draw the lines
160+
if (i < debugPath.length - 1) {
161+
const p2 = coordToPx(debugPath[i + 1]);
128162
ctx.beginPath();
129-
ctx.arc(p1.x, p1.y, radius, 0, 2 * Math.PI);
163+
ctx.moveTo(p1.x, p1.y);
164+
ctx.lineTo(p2.x, p2.y);
130165
ctx.stroke();
131-
ctx.fill();
132166
ctx.closePath();
133-
// draw the lines
134-
if (i < path.points2.length - 1) {
135-
const p2 = coordToPx(path.points2[i + 1]);
136-
ctx.beginPath();
137-
ctx.moveTo(p1.x, p1.y);
138-
ctx.lineTo(p2.x, p2.y);
139-
ctx.stroke();
140-
ctx.closePath();
141-
}
142167
}
143168
}
169+
170+
// draw the robot at the current time stamp
171+
const robotPos = new Point();
172+
let robotPosPx = new Point();
173+
const heading = Math.PI/2 - degToRad(debugDataList[debugDataTime].heading);
174+
robotPos.x = debugDataList[debugDataTime].x;
175+
robotPos.y = debugDataList[debugDataTime].y;
176+
robotPosPx = coordToPx(robotPos);
177+
ctx.beginPath();
178+
ctx.fillStyle = hslToHex(0, 0, 0);
179+
ctx.strokeStyle = hslToHex(0, 0, 0);
180+
ctx.arc(robotPosPx.x, robotPosPx.y, 2*imgPixelsPerInch, 0, 2 * Math.PI);
181+
ctx.fill();
182+
ctx.closePath();
183+
ctx.beginPath();
184+
ctx.arc(robotPosPx.x, robotPosPx.y, 9*imgPixelsPerInch, 0, 2 * Math.PI);
185+
ctx.stroke();
186+
ctx.closePath();
187+
188+
// draw the robot's heading
189+
const headingVec = new Point();
190+
headingVec.x = robotPos.x + 5*Math.cos(heading);
191+
headingVec.y = robotPos.y + 5*Math.sin(heading);
192+
const headingVecPx = coordToPx(headingVec);
193+
ctx.strokeStyle = hslToHex(184, 100, 63);
194+
ctx.beginPath();
195+
ctx.lineWidth = 0.5*imgPixelsPerInch;
196+
ctx.moveTo(robotPosPx.x, robotPosPx.y);
197+
ctx.lineTo(headingVecPx.x, headingVecPx.y);
198+
ctx.stroke();
199+
ctx.closePath();
200+
};
201+
202+
203+
/**
204+
* @brief draw the spline
205+
*/
206+
function render() {
207+
// clear the canvas
208+
ctx.clearRect(0, 0, canvas.width, canvas.height);
209+
// draw the field
210+
ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
211+
0, 0, canvas.width, canvas.height); // destination rectangle
212+
// reset line width
213+
ctx.lineWidth = 1.0;
214+
215+
// create mode render
216+
if (mode == 0) {
217+
renderCreate();
218+
} else if (debugSet) {
219+
renderDebug();
220+
}
144221
};

0 commit comments

Comments
 (0)