commit 2d1087617a99a064487ce7a8d30fcae657498371
author Niko Sohmers <nikolai@sohmers.com> Fri Feb 02 20:21:14 2024 -0800
committer Niko Sohmers <nikolai@sohmers.com> Sat Feb 03 15:39:52 2024 -0800
tree cde9f7955a17567a097bb11963a9d27e76f8d1db
parent 8ff032a75fa380e02a11d5f803162b8330ce5d5a

update constants for 2024 debugging webpage

Signed-off-by: Logan Isaacson <100030671@mvla.net>
Change-Id: I357830fe398cb15a579584b0004fc7107a71d61f

y2024/BUILD

diff --git a/y2024/BUILD b/y2024/BUILD
index 7d9ebb8..10025ca 100644
--- a/y2024/BUILD
+++ b/y2024/BUILD
@@ -317,6 +317,7 @@
     data = [
         ":aos_config",
         "//aos/network:log_web_proxy_main",
+        "//y2024/www:field_main_bundle.min.js",
         "//y2024/www:files",
     ],
     target_compatible_with = ["@platforms//os:linux"],

y2024/www/BUILD

diff --git a/y2024/www/BUILD b/y2024/www/BUILD
index 726a354..5ff91d6 100644
--- a/y2024/www/BUILD
+++ b/y2024/www/BUILD
@@ -11,12 +11,11 @@
     visibility = ["//visibility:public"],
 )
 
-#Need to add 2024 field png
 genrule(
     name = "2024_field_png",
-    srcs = ["//third_party/y2023/field:pictures"],
+    srcs = ["//third_party/y2024/field:pictures"],
     outs = ["2024.png"],
-    cmd = "cp third_party/y2023/field/2023.png $@",
+    cmd = "cp third_party/y2024/field/2024.png $@",
 )
 
 ts_project(

y2024/www/field_handler.ts

diff --git a/y2024/www/field_handler.ts b/y2024/www/field_handler.ts
index 6c5f2e3..f383c08 100644
--- a/y2024/www/field_handler.ts
+++ b/y2024/www/field_handler.ts
@@ -16,10 +16,56 @@
 const FIELD_SIDE_Y = FIELD_WIDTH / 2;
 const FIELD_EDGE_X = FIELD_LENGTH / 2;
 
-const ROBOT_WIDTH = 25 * IN_TO_M;
+const ROBOT_WIDTH = 29 * IN_TO_M;
 const ROBOT_LENGTH = 32 * IN_TO_M;
 
 export class FieldHandler {
+  private canvas = document.createElement('canvas');
+  private fieldImage: HTMLImageElement = new Image();
   constructor(private readonly connection: Connection) {
+    (document.getElementById('field') as HTMLElement).appendChild(this.canvas);
+
+    this.fieldImage.src = '2024.png';
+  }
+
+  drawField(): void {
+    const ctx = this.canvas.getContext('2d');
+    ctx.save();
+    ctx.scale(1.0, -1.0);
+    ctx.drawImage(
+        this.fieldImage, 0, 0, this.fieldImage.width, this.fieldImage.height,
+        -FIELD_EDGE_X, -FIELD_SIDE_Y, FIELD_LENGTH, FIELD_WIDTH);
+    ctx.restore();
+  }
+
+  draw(): void {
+    this.reset();
+    this.drawField();
+
+    window.requestAnimationFrame(() => this.draw());
+  }
+
+  reset(): void {
+    const ctx = this.canvas.getContext('2d');
+    // Empty space from the canvas boundary to the image
+    const IMAGE_PADDING = 10;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    const size = window.innerHeight * 0.9;
+    ctx.canvas.height = size;
+    const width = size / 2 + 20;
+    ctx.canvas.width = width;
+    ctx.clearRect(0, 0, size, width);
+
+    // Translate to center of display.
+    ctx.translate(width / 2, size / 2);
+    // Coordinate system is:
+    // x -> forward.
+    // y -> to the left.
+    ctx.rotate(-Math.PI / 2);
+    ctx.scale(1, -1);
+
+    const M_TO_PX = (size - IMAGE_PADDING) / FIELD_LENGTH;
+    ctx.scale(M_TO_PX, M_TO_PX);
+    ctx.lineWidth = 1 / M_TO_PX;
   }
 }

y2024/www/field_main.ts

diff --git a/y2024/www/field_main.ts b/y2024/www/field_main.ts
index 24bc23a..ef8b99d 100644
--- a/y2024/www/field_main.ts
+++ b/y2024/www/field_main.ts
@@ -8,4 +8,4 @@
 
 const fieldHandler = new FieldHandler(conn);
 
-
+fieldHandler.draw();