rtwx/nexrad-browser/www/index.js

import * as wasm from "./wasm/nexrad_browser.js";
await wasm.default();
wasm.__nxrd_browser_init();

console.log("[JS] setup event listeners");

console.log("[JS] initializing the renderer");

const DEFAULT_PREFERENCES = {
    RR: 5,
    RREN: true,
    FCS: 20
};
let preferences = DEFAULT_PREFERENCES;

function get_font_size() { return `${preferences.FCS}px monospace`; }

const canvas = document.getElementById("canvas");

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;
let current_long = -77.036560;

function calcRenderbox() {
    return [current_long - FIFTY_MILES, current_lat - FIFTY_MILES, current_long + FIFTY_MILES, current_lat + FIFTY_MILES];
}

function latlongXY(lat, long) {
    let bbox = calcRenderbox();
    let pixelWidth = canvas.width;
    let pixelHeight = canvas.height;
    let bboxWidth = bbox[2] - bbox[0];
    let bboxHeight = bbox[3] - bbox[1];
    let widthPct = ( long - bbox[0] ) / bboxWidth;
    let heightPct = ( lat - bbox[1] ) / bboxHeight;
    let x = Math.floor( pixelWidth * widthPct );
    let y = Math.floor( pixelHeight * ( 1 - heightPct ) );
    return { x, y };
}

let x0 = 0;
let y0 = 0;
let xfull = canvas.width;
let yfull = canvas.height;

function recalcBorderCoordinates() {
    let xy = latlongXY(current_lat, current_long);

    x0 = xy.x - canvas.width;
    y0 = xy.y - canvas.height;
    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`;
}

function vcp(vc) {
    if (vc === 31) { return "CLEAR AIR MODE LONG PULSE"; }
    else if (vc === 35) { return "CLEAR AIR MODE"; }
    else if (vc === 12) { return "PRECIP MODE"; }
    else if (vc === 112) { return "PRECIP MODE SZ-2 PRF"; }
    else if (vc === 212) { return "PRECIP MODE SZ-2"; }
    else if (vc === 215) { return "PRECIP MODE VERT"; }
}

let command_buf = "";
let buf_response_mode = false;

let radar_inoperative = true;
let site_string = "SITE INFORMATION UNAVAILABLE";
let icao = "INOP";

let selected_mode = "INOP";

let delay_string = "DELAY UNAVAILABLE";

let display_buf = [];

function recalcDisplayBuf() {
    display_buf = [];
    let line = 0;
    for (let i = 0; i < command_buf.length; i++) {
        let char = command_buf[i];
        if (char === "\n") { line += 1; continue; }
        if (display_buf.length < line+1) { display_buf[line] = ""; }
        display_buf[line] += char;
    }
}

function cmd_err(err) {
    buf_response_mode = true;
    command_buf = err;
    recalcDisplayBuf();
}

let ar2 = undefined;
let new_file_available = false;

document.getElementById("file").onchange = () => {
    new_file_available = true;
}

async function load() {
    new_file_available = false;
    const file = document.getElementById("file").files[0];
    document.getElementById("file").value = null;
    const reader = new FileReader();
    reader.addEventListener('load', (event) => {
        let data = event.target.result;
        let loaded = wasm.load_ar2(data);
        console.log(loaded);
        cmd_err("");

        ar2 = loaded;
    });
    reader.readAsArrayBuffer(file);
}

function exec(command) {
    console.log("exec1!");

    let tokens = command.split(" ");

    if (tokens[0] === "MODE" && tokens[1] === "SET") {
        let mode = tokens[2];
        let valid_modes = ["REF", "VEL", "SW", "ZDR", "PHI", "RHO", "CFP"];
        if (!valid_modes.includes(mode)) {
            cmd_err("INVALID MODE");
            return;
        } else if (radar_inoperative) {
            cmd_err("RADAR INOPERATIVE\nCANNOT SET MODE");
            return;
        } else {
            selected_mode = mode;
            return;
        }
    }

    if (tokens[0] === "CLF" && tokens[1] === "OV") {
        document.getElementById("file").click();
        return;
    }

    if (tokens[0] === "CLF" && tokens[1] === "RELOAD") {
        // TRIGGER RELOAD
        cmd_err("SYSTEM PROCESSING");
        load();
        return;
    }

    if (command === "TEST UNSET INOP") {
        radar_inoperative = false;
        icao = "TEST";
        site_string = "TEST VCP 000 TEST AIR MODE";
        selected_mode = "REF";
        return;
    }

    if (command === "TEST INVALID COMMAND") {
        cmd_err("TEST SUCCESSFUL");
        return;
    }

    cmd_err("UNRECOGNIZED COMMAND");
}

function shouldNewline() {
    if (command_buf.startsWith("MODE SET")) { return true; }

    return false;
}

let ar2_date = undefined;

function convertDate() {
    if (ar2 !== undefined) {
        let unix_timestamp_millis = 86400000 * ar2.volume_header_record.date + ar2.volume_header_record.time;
        ar2_date = new Date(unix_timestamp_millis);
    } else {
        return undefined;
    }
}

function reRender() {
    if (ar2 !== undefined) {
        radar_inoperative = false;
        icao = ar2.volume_header_record.icao;
        site_string = `${icao} VCP ${ar2.meta_rda_status_data.vcp} ${vcp(ar2.meta_rda_status_data.vcp)}`;
        selected_mode = "REF";
    } else {
        radar_inoperative = true;
        icao = "INOP";
        site_string = "SITE INFORMATION UNAVAILABLE";
        selected_mode = "INOP";
    }

    convertDate();
    if (ar2_date !== undefined) {
        const delay = Date.now() - ar2_date;
        const SEC = 1000, MIN = 60 * SEC, HRS = 60 * MIN;
        const humanDiff = `${Math.floor(delay/HRS)}:${Math.floor((delay%HRS)/MIN).toLocaleString('en-US', {minimumIntegerDigits: 2})}:${Math.floor((delay%MIN)/SEC).toLocaleString('en-US', {minimumIntegerDigits: 2})}`;
        delay_string = "SITE DELAY " + humanDiff;
    }

    //document.getElementById("input-detection").focus();
    rescaleCanvas(canvas, ctx);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.resetTransform();

    recalcBorderCoordinates();

    let xy = latlongXY(current_lat, current_long);

    ctx.translate(xy.x, xy.y);

    // background (black, always)
    ctx.fillStyle = "black";
    ctx.fillRect(x0, y0, xfull * 2, yfull * 2);

    ctx.font = get_font_size();
    ctx.fillStyle = green;
    ctx.fillText(`NEXRAD ${icao} ${zulu()}`, x0 + 50, y0 + 50);

    if (radar_inoperative) {
        ctx.fillStyle = blinkyColor;
        ctx.fillText("RADR INOP NO DATA LOADED", x0 + 50, y0 + 50 + preferences.FCS);
        ctx.fillStyle = green;
    }
    if (new_file_available) {
        ctx.fillStyle = blinkyColor;
        ctx.fillText("NEW DATA AVAIL RLD RQD", x0 + 50, y0 + 50 + preferences.FCS * 2);
        ctx.fillStyle = green;
    }

    ctx.textAlign = "right";
    ctx.fillText("RADAR SITE", xfull - 75, y0 + 50);
    ctx.fillText(`${site_string}`, xfull - 75, y0 + 50 + preferences.FCS);
    ctx.fillText(`${delay_string}`, xfull - 75, y0 + 50 + preferences.FCS * 2);

    ctx.fillText("MODE", xfull - 75, y0 + canvas.height / 3);

    // this hurts me physically

    if (selected_mode === "REF") {
        ctx.fillStyle = white;
        ctx.fillText(">REF<            ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
        ctx.fillStyle = green;
    } else {
        ctx.fillText(" REF             ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
    }

    if (selected_mode === "VEL") {
        ctx.fillStyle = white;
        ctx.fillText("      >VEL<      ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
        ctx.fillStyle = green;
    } else {
        ctx.fillText("       VEL       ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
    }

    if (selected_mode === "SW") {
        ctx.fillStyle = white;
        ctx.fillText("            >SW <", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
        ctx.fillStyle = green;
    } else {
        ctx.fillText("             SW  ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS);
    }

    if (selected_mode === "ZDR") {
        ctx.fillStyle = white;
        ctx.fillText(">ZDR<            ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
        ctx.fillStyle = green;
    } else {
        ctx.fillText(" ZDR             ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
    }

    if (selected_mode === "PHI") {
        ctx.fillStyle = white;
        ctx.fillText("      >PHI<      ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
        ctx.fillStyle = green;
    } else {
        ctx.fillText("       PHI       ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
    }

    if (selected_mode === "RHO") {
        ctx.fillStyle = white;
        ctx.fillText("            >RHO<", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
        ctx.fillStyle = green;
    } else {
        ctx.fillText("             RHO ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*2);
    }

    if (selected_mode === "CFP") {
        ctx.fillStyle = white;
        ctx.fillText(" >CFP<           ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*3);
        ctx.fillStyle = green;
    } else {
        ctx.fillText(" CFP             ", xfull - 75, y0 + canvas.height / 3 + preferences.FCS*3);
    }

    if (radar_inoperative) {
        ctx.fillStyle = red;
        ctx.fillText("      >RADR INOP<", xfull - 75, y0 + canvas.height / 3 + preferences.FCS * 3);
        ctx.fillStyle = green;
    }


    ctx.textAlign = "left";

    for (let line = 0; line < display_buf.length; line++) {
        ctx.fillText(display_buf[line], x0 + 50, y0 + canvas.height / 2 + (preferences.FCS * line));
    }
}

setInterval(reRender, 10);

document.onkeyup = (e) => {
    if (e.key.toUpperCase() === "ESCAPE") {
        command_buf = "";
    } else if (e.key.toUpperCase() === "ENTER") {
        let command = command_buf.replace("\n", " ");
        command_buf = "";
        exec(command);
    } else if (e.key.toUpperCase() === "BACKSPACE") {
        command_buf = command_buf.slice(0, command_buf.length - 1);
    } else if (e.key.toUpperCase() === " " && shouldNewline()) {
        command_buf += "\n";
    } else {
        if (e.key.length !== 1) { return; }
        if (buf_response_mode) {
            buf_response_mode = false;
            command_buf = "";
        }
        command_buf += e.key.toUpperCase();
    }
    recalcDisplayBuf();
    reRender();
}