From 33ca20410ea8e86ec29e4c4bfc786a20d2d98845 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Sat, 4 Nov 2023 01:23:23 -0400
Subject: [PATCH] some improvement on the UI

---
 nexrad-browser/www/index.html |   5 +-
 nexrad-browser/www/index.js   | 121 +++++++++++++++++++++++++++++++---
 2 files changed, 112 insertions(+), 14 deletions(-)
diff --git a/nexrad-browser/www/index.html b/nexrad-browser/www/index.html
index 570b486..69f2d43 100644
--- a/nexrad-browser/www/index.html
+++ b/nexrad-browser/www/index.html
@@ -2,12 +2,11 @@
     <head>
         <title>NEXRAD Browser</title>
         <style>
-            @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
-
             #canvas {
                 width: 100%;
                 height: 100%;
                 image-rendering: pixelated;
+                z-index: 10000;
             }
 
             body {
@@ -21,8 +20,6 @@
             Something went wrong while loading the canvas. Sorry :/
         </canvas>
 
-        <p style="font-family: 'vt323', monospace;">FONT TEST!</p>
-
         <script src="bootstrap.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/nexrad-browser/www/index.js b/nexrad-browser/www/index.js
index 31c545f..d4db37e 100644
--- a/nexrad-browser/www/index.js
+++ b/nexrad-browser/www/index.js
@@ -6,19 +6,47 @@ console.log("[JS] setup event listeners");
 
 console.log("[JS] initializing the renderer");
 
-
-
 const DEFAULT_PREFERENCES = {
     RR: 5,
     RREN: true,
-    FCS: 16
+    FCS: 20
 };
 let preferences = DEFAULT_PREFERENCES;
 
-function get_font_size() { return `${preferences.FCS}px `; }
+function get_font_size() { return `${preferences.FCS}px monospace`; }
 
 const canvas = document.getElementById("canvas");
-const ctx = canvas.getContext("2d");
+
+function setupCanvas(canvas) {
+    // Get the device pixel ratio, falling back to 1.
+    var dpr = window.devicePixelRatio || 1;
+    // Get the size of the canvas in CSS pixels.
+    var rect = canvas.getBoundingClientRect();
+    // Give the canvas pixel dimensions of their CSS
+    // size * the device pixel ratio.
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    var ctx = canvas.getContext('2d');
+    // Scale all drawing operations by the dpr, so you
+    // don't have to worry about the difference.
+    ctx.scale(dpr, dpr);
+    return ctx;
+}
+
+function rescaleCanvas(canvas, ctx) {
+    var dpr = window.devicePixelRatio || 1;
+    // Get the size of the canvas in CSS pixels.
+    var rect = canvas.getBoundingClientRect();
+    // Give the canvas pixel dimensions of their CSS
+    // size * the device pixel ratio.
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    // Scale all drawing operations by the dpr, so you
+    // don't have to worry about the difference.
+    ctx.scale(dpr, dpr);
+}
+
+const ctx = setupCanvas(canvas);
 
 const FIFTY_MILES = 0.0916;
 let current_lat = 38.8977;
@@ -51,13 +79,59 @@ function recalcBorderCoordinates() {
 
     x0 = xy.x - canvas.width;
     y0 = xy.y - canvas.height;
-    xfull = xy.x + (canvas.width / 2);
-    yfull = xy.y + (canvas.height / 2);
+    xfull = x0 + canvas.width;
+    yfull = y0 + canvas.width;
+}
+
+const red = "#ef0000";
+const green = "#4af626";
+const white = "#dedede";
+
+let blinkyColor = "#dedede";
+
+setInterval(() => {
+    if (blinkyColor === red) {
+        blinkyColor = white;
+    } else {
+        blinkyColor = red;
+    }
+}, 350);
+
+function zulu() {
+    let date = new Date();
+    return `${date.getUTCHours().toString().padStart(2, '0')}:${date.getUTCMinutes().toString().padStart(2, '0')}:${date.getUTCSeconds().toString().padStart(2, '0')}Z`;
+}
+
+let command_buf = "";
+let buf_response_mode = false;
+
+function exec() {
+    console.log("exec1!");
+}
+
+document.onkeyup = (e) => {
+    if (e.key.toUpperCase() === "ESCAPE") {
+        command_buf = "";
+    } else if (e.key.toUpperCase() === "ENTER") {
+        command_buf = "";
+        exec();
+    } else if (e.key.toUpperCase() === "BACKSPACE") {
+        command_buf = command_buf.slice(0, command_buf.length-1);
+        exec();
+    } else {
+        if (e.key.length !== 1) { return; }
+        if (buf_response_mode) {
+            buf_response_mode = false;
+            command_buf = "";
+        }
+        command_buf += e.key.toUpperCase();
+    }
 }
 
 setInterval(() => {
+    //document.getElementById("input-detection").focus();
+    rescaleCanvas(canvas, ctx);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.font = get_font_size();
     ctx.resetTransform();
 
     recalcBorderCoordinates();
@@ -68,5 +142,32 @@ setInterval(() => {
 
     // background (black, always)
     ctx.fillStyle = "black";
-    ctx.fillRect(x0, y0, xfull, yfull);
-})
\ No newline at end of file
+    ctx.fillRect(x0, y0, xfull * 2, yfull * 2);
+
+    ctx.font = get_font_size();
+    ctx.fillStyle = green;
+    ctx.fillText(`NEXRAD KLSX ${zulu()}`, x0 + 50, y0 + 50);
+
+    ctx.fillStyle = blinkyColor;
+    ctx.fillText("RADR INOP NO DATA LOADED", x0 + 50, y0 + 50 + preferences.FCS);
+    ctx.fillStyle = green;
+
+    ctx.textAlign = "right";
+    ctx.fillText("RADAR SITE", xfull - 75, y0 + 50);
+    ctx.fillText("KLSX VCP35 Clear Air Mode", xfull - 75, y0 + 50 + preferences.FCS);
+
+    ctx.fillText("MODE", xfull - 75, y0 + canvas.height / 3);
+    ctx.fillText(" REF   VEL   SW  ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
+    ctx.fillText(" ZDR   PHI   RHO ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 2);
+    ctx.fillText(" CFP             ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 3);
+
+    ctx.fillStyle = white;
+
+    ctx.fillText("      >RADR INOP<", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 3);
+
+    ctx.fillStyle = green;
+    ctx.textAlign = "left";
+
+    ctx.fillText(command_buf, x0 + 50, y0 + canvas.height / 2);
+}, 10);
+
