Add color cycle to LineDrawer
Makes it so that when you add a line it assigns a default color.
Change-Id: I87417acaca5612141e7e8fe095ef02c6bfa759d4
diff --git a/aos/network/www/BUILD b/aos/network/www/BUILD
index 1caa57c..5b951bd 100644
--- a/aos/network/www/BUILD
+++ b/aos/network/www/BUILD
@@ -93,12 +93,22 @@
)
ts_library(
+ name = "colors",
+ srcs = [
+ "colors.ts",
+ ],
+ target_compatible_with = ["@platforms//os:linux"],
+ visibility = ["//visibility:public"],
+)
+
+ts_library(
name = "plotter",
srcs = [
"plotter.ts",
],
target_compatible_with = ["@platforms//os:linux"],
visibility = ["//visibility:public"],
+ deps = [":colors"],
)
ts_library(
diff --git a/aos/network/www/aos_plotter.ts b/aos/network/www/aos_plotter.ts
index 4b1d8bf..b84bfc4 100644
--- a/aos/network/www/aos_plotter.ts
+++ b/aos/network/www/aos_plotter.ts
@@ -151,21 +151,11 @@
}
export class AosPlotter {
-
public static readonly TIME: string = "Monotonic Time (sec)";
public static readonly DEFAULT_WIDTH: number = 900;
public static readonly DEFAULT_HEIGHT: number = 400;
- public static readonly RED: number[] = [1, 0, 0];
- public static readonly GREEN: number[] = [0, 1, 0];
- public static readonly BLUE: number[] = [0, 0, 1];
- public static readonly BROWN: number[] = [0.6, 0.3, 0];
- public static readonly PINK: number[] = [1, 0.3, 0.6];
- public static readonly CYAN: number[] = [0.3, 1, 1];
- public static readonly WHITE: number[] = [1, 1, 1];
-
-
private plots: AosPlot[] = [];
private messages = new Set<MessageHandler>();
private lowestHeight = 0;
diff --git a/aos/network/www/colors.ts b/aos/network/www/colors.ts
new file mode 100644
index 0000000..1a1c0b3
--- /dev/null
+++ b/aos/network/www/colors.ts
@@ -0,0 +1,7 @@
+export const RED: number[] = [1, 0, 0];
+export const GREEN: number[] = [0, 1, 0];
+export const BLUE: number[] = [0, 0, 1];
+export const BROWN: number[] = [0.6, 0.3, 0];
+export const PINK: number[] = [1, 0.3, 0.6];
+export const CYAN: number[] = [0.3, 1, 1];
+export const WHITE: number[] = [1, 1, 1];
diff --git a/aos/network/www/plotter.ts b/aos/network/www/plotter.ts
index 4c73a65..9da4fbe 100644
--- a/aos/network/www/plotter.ts
+++ b/aos/network/www/plotter.ts
@@ -1,3 +1,4 @@
+import * as Colors from 'org_frc971/aos/network/www/colors';
// Multiplies all the values in the provided array by scale.
function scaleVec(vec: number[], scale: number): number[] {
const scaled: number[] = [];
@@ -344,6 +345,12 @@
private xGridLines: Line[] = [];
private yGridLines: Line[] = [];
+ public static readonly COLOR_CYCLE = [
+ Colors.RED, Colors.GREEN, Colors.BLUE, Colors.BROWN, Colors.PINK,
+ Colors.CYAN, Colors.WHITE
+ ];
+ private colorCycleIndex = 0;
+
constructor(public readonly ctx: WebGLRenderingContext) {
this.program = this.compileShaders();
this.scaleLocation = this.ctx.getUniformLocation(this.program, 'scale');
@@ -509,9 +516,13 @@
return program;
}
- addLine(): Line {
+ addLine(useColorCycle: boolean = true): Line {
this.lines.push(new Line(this.ctx, this.program, this.vertexBuffer));
- return this.lines[this.lines.length - 1];
+ const line = this.lines[this.lines.length - 1];
+ if (useColorCycle) {
+ line.setColor(LineDrawer.COLOR_CYCLE[this.colorCycleIndex++]);
+ }
+ return line;
}
minValues(): number[] {
@@ -812,8 +823,8 @@
new AxisLabels(textCtx, this.drawer, this.axisLabelBuffer);
this.legend = new Legend(textCtx, this.drawer.getLines());
- this.zoomRectangle = this.getDrawer().addLine();
- this.zoomRectangle.setColor([1, 1, 1]);
+ this.zoomRectangle = this.getDrawer().addLine(false);
+ this.zoomRectangle.setColor(Colors.WHITE);
this.zoomRectangle.setPointSize(0);
this.draw();
diff --git a/frc971/control_loops/drivetrain/BUILD b/frc971/control_loops/drivetrain/BUILD
index 8c3274d..c420333 100644
--- a/frc971/control_loops/drivetrain/BUILD
+++ b/frc971/control_loops/drivetrain/BUILD
@@ -731,6 +731,7 @@
target_compatible_with = ["@platforms//os:linux"],
deps = [
"//aos/network/www:aos_plotter",
+ "//aos/network/www:colors",
"//aos/network/www:proxy",
"//frc971/wpilib:imu_plot_utils",
],
@@ -742,6 +743,7 @@
target_compatible_with = ["@platforms//os:linux"],
deps = [
"//aos/network/www:aos_plotter",
+ "//aos/network/www:colors",
"//aos/network/www:proxy",
],
)
diff --git a/frc971/control_loops/drivetrain/drivetrain_plotter.ts b/frc971/control_loops/drivetrain/drivetrain_plotter.ts
index 0c01f6a..f55f965 100644
--- a/frc971/control_loops/drivetrain/drivetrain_plotter.ts
+++ b/frc971/control_loops/drivetrain/drivetrain_plotter.ts
@@ -2,19 +2,13 @@
import {AosPlotter} from 'org_frc971/aos/network/www/aos_plotter';
import {ImuMessageHandler} from 'org_frc971/frc971/wpilib/imu_plot_utils';
import * as proxy from 'org_frc971/aos/network/www/proxy';
+import {BLUE, BROWN, CYAN, GREEN, PINK, RED, WHITE} from 'org_frc971/aos/network/www/colors';
import Connection = proxy.Connection;
const TIME = AosPlotter.TIME;
const DEFAULT_WIDTH = AosPlotter.DEFAULT_WIDTH;
const DEFAULT_HEIGHT = AosPlotter.DEFAULT_HEIGHT;
-const RED = AosPlotter.RED;
-const GREEN = AosPlotter.GREEN;
-const BLUE = AosPlotter.BLUE;
-const BROWN = AosPlotter.BROWN;
-const PINK = AosPlotter.PINK;
-const CYAN = AosPlotter.CYAN;
-const WHITE = AosPlotter.WHITE;
export function plotDrivetrain(conn: Connection, element: Element): void {
const aosPlotter = new AosPlotter(conn);
diff --git a/frc971/control_loops/drivetrain/robot_state_plotter.ts b/frc971/control_loops/drivetrain/robot_state_plotter.ts
index f42c50b..829df25 100644
--- a/frc971/control_loops/drivetrain/robot_state_plotter.ts
+++ b/frc971/control_loops/drivetrain/robot_state_plotter.ts
@@ -1,19 +1,13 @@
// Provides a plot for debugging robot state-related issues.
import {AosPlotter} from 'org_frc971/aos/network/www/aos_plotter';
import * as proxy from 'org_frc971/aos/network/www/proxy';
+import {BLUE, BROWN, CYAN, GREEN, PINK, RED, WHITE} from 'org_frc971/aos/network/www/colors';
import Connection = proxy.Connection;
const TIME = AosPlotter.TIME;
const DEFAULT_WIDTH = AosPlotter.DEFAULT_WIDTH;
const DEFAULT_HEIGHT = AosPlotter.DEFAULT_HEIGHT;
-const RED = AosPlotter.RED;
-const GREEN = AosPlotter.GREEN;
-const BLUE = AosPlotter.BLUE;
-const BROWN = AosPlotter.BROWN;
-const PINK = AosPlotter.PINK;
-const CYAN = AosPlotter.CYAN;
-const WHITE = AosPlotter.WHITE;
export function plotRobotState(conn: Connection, element: Element) : void {
const aosPlotter = new AosPlotter(conn);