Add typescript plot for catapult
Change-Id: I85edabb05fa6bc2f770724e170cda467095e37d0
Signed-off-by: Austin Schuh <austin.linux@gmail.com>
diff --git a/y2022/www/BUILD b/y2022/www/BUILD
new file mode 100644
index 0000000..55cbde2
--- /dev/null
+++ b/y2022/www/BUILD
@@ -0,0 +1,21 @@
+load("//frc971/downloader:downloader.bzl", "aos_downloader_dir")
+
+filegroup(
+ name = "files",
+ srcs = glob([
+ "**/*.html",
+ "**/*.css",
+ ]),
+ visibility = ["//visibility:public"],
+)
+
+aos_downloader_dir(
+ name = "www_files",
+ srcs = [
+ ":files",
+ "//frc971/analysis:plot_index_bundle.min.js",
+ ],
+ dir = "www",
+ target_compatible_with = ["@platforms//os:linux"],
+ visibility = ["//visibility:public"],
+)
diff --git a/y2022/www/index.html b/y2022/www/index.html
new file mode 100644
index 0000000..70442f9
--- /dev/null
+++ b/y2022/www/index.html
@@ -0,0 +1,5 @@
+<html>
+ <body>
+ <a href="plotter.html">Plots</a>
+ </body>
+</html>
diff --git a/y2022/www/plotter.html b/y2022/www/plotter.html
new file mode 100644
index 0000000..629ceaa
--- /dev/null
+++ b/y2022/www/plotter.html
@@ -0,0 +1,7 @@
+<html>
+ <head>
+ <script src="plot_index_bundle.min.js" defer></script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/y2022/www/styles.css b/y2022/www/styles.css
new file mode 100644
index 0000000..c486115
--- /dev/null
+++ b/y2022/www/styles.css
@@ -0,0 +1,81 @@
+.channel {
+ display: flex;
+ border-bottom: 1px solid;
+ font-size: 24px;
+}
+#field {
+ display: inline-block
+}
+
+#targets,
+#readouts,
+#vision_readouts {
+ display: inline-block;
+ vertical-align: top;
+ float: right;
+}
+
+#legend {
+ display: inline-block;
+}
+
+#outer_target {
+ border: 1px solid black;
+ width: 140px;
+ background-color: white;
+}
+
+#inner_target {
+ width: 60px;
+ height: 60px;
+ margin: 40px;
+ border: 1px solid black;
+ background-color: white;
+}
+
+#outer_target.targetted,
+#inner_target.targetted {
+ background-color: green;
+}
+
+table, th, td {
+ border: 1px solid black;
+ border-collapse: collapse;
+ padding: 5px;
+ margin: 10px;
+}
+
+th, td {
+ text-align: right;
+ width: 70px;
+}
+
+td:first-child {
+ width: 150px;
+}
+
+.near {
+ background-color: LightGreen;
+ border-radius: 10px;
+}
+
+.zeroing {
+ background-color: yellow;
+ border-radius: 10px;
+}
+
+.faulted {
+ background-color: red;
+ border-radius: 10px;
+}
+
+#vision_readouts > div {
+ display: table-row;
+ padding: 5px;
+}
+
+#vision_readouts > div > div {
+ display: table-cell;
+ padding: 5px;
+ text-align: right;
+}