Show the superstructure sensor positions
Make a table of them.
Change-Id: I9481b6ab3f8ecd14763656c8083d5ab3f3e1c571
diff --git a/y2019/vision/server/www/index.html b/y2019/vision/server/www/index.html
index 4e6e316..c970ce1 100644
--- a/y2019/vision/server/www/index.html
+++ b/y2019/vision/server/www/index.html
@@ -2,9 +2,69 @@
<html>
<head>
<title>Vision Debug Server</title>
+ <style type="text/css">
+ * {margin: 0; padding: 0;}
+ #field {
+ float: left;
+ display: inline-block;
+ border: 1px solid;
+ }
+ #debugdata {
+ float: right;
+ display: inline-block;
+ }
+ .dof_container {
+ padding: 5px;
+ overflow: hidden;
+ }
+ .dof_name {
+ float: left;
+ padding-right: 15px;
+ display: inline-block;
+ }
+ .dof {
+ float: right;
+ display: inline-block;
+ }
+ </style>
</head>
<body style="overflow:hidden">
- <canvas id="field" style="border: 1px solid"></canvas>
+ <div style="overflow:hidden">
+ <canvas id="field"></canvas>
+ <div id="debugdata">
+ <div class="dof_container">
+ <div class="dof_name">
+ wrist
+ </div>
+ <div id="wrist" class="dof">
+ </div>
+ </div>
+
+ <div class="dof_container">
+ <div class="dof_name">
+ elevator
+ </div>
+ <div id="elevator" class="dof">
+ </div>
+ </div>
+
+ <div class="dof_container">
+ <div class="dof_name">
+ intake
+ </div>
+ <div id="intake" class="dof">
+ </div>
+ </div>
+
+ <div class="dof_container">
+ <div class="dof_name">
+ stilts
+ </div>
+ <div id="stilts" class="dof">
+ </div>
+ </div>
+ </div>
+ </div>
</body>
<script src="visualizer_bundle.min.js"></script>
</html>
diff --git a/y2019/vision/server/www/main.ts b/y2019/vision/server/www/main.ts
index ed06bc1..1f90527 100644
--- a/y2019/vision/server/www/main.ts
+++ b/y2019/vision/server/www/main.ts
@@ -18,8 +18,23 @@
private targetTheta = 0;
private cameraFrames : Frame[];
+ private wrist: number = -1;
+ private elevator: number = -1;
+ private intake: number = -1;
+ private stilts: number = -1;
+
+ private wrist_div: HTMLDivElement;
+ private elevator_div: HTMLDivElement;
+ private intake_div: HTMLDivElement;
+ private stilts_div: HTMLDivElement;
+
constructor() {
const canvas = <HTMLCanvasElement>document.getElementById('field');
+ this.wrist_div = <HTMLDivElement>document.getElementById('wrist');
+ this.elevator_div = <HTMLDivElement>document.getElementById('elevator');
+ this.intake_div = <HTMLDivElement>document.getElementById('intake');
+ this.stilts_div = <HTMLDivElement>document.getElementById('stilts');
+
const ctx = canvas.getContext('2d');
const server = location.host;
@@ -45,6 +60,11 @@
this.targetTheta = j.lineFollowDebug.goalTarget.theta;
}
this.cameraFrames = j.cameraDebug;
+
+ this.wrist = j.sensors.wrist;
+ this.elevator = j.sensors.elevator;
+ this.intake = j.sensors.intake;
+ this.stilts = j.sensors.stilts;
});
socket.addEventListener('close', (event) => {
setTimeout(() => {
@@ -66,6 +86,11 @@
const M_TO_PX = size / FIELD_WIDTH
ctx.scale(M_TO_PX, M_TO_PX);
ctx.lineWidth = 1 / M_TO_PX;
+
+ this.wrist_div.textContent = "";
+ this.elevator_div.textContent = "";
+ this.intake_div.textContent = "";
+ this.stilts_div.textContent = "";
}
draw(ctx: CanvasRenderingContext2D): void {
@@ -82,6 +107,13 @@
}
drawTarget(ctx, this.targetX, this.targetY, this.targetTheta);
ctx.restore();
+
+ // Now update the superstructure positions.
+ this.wrist_div.textContent = this.wrist.toFixed(3);
+ this.elevator_div.textContent = this.elevator.toFixed(3);
+ this.intake_div.textContent = this.intake.toFixed(3);
+ this.stilts_div.textContent = this.stilts.toFixed(3);
+
window.requestAnimationFrame(() => this.draw(ctx));
}
}