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: 16
};
let preferences = DEFAULT_PREFERENCES;

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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 = xy.x + (canvas.width / 2);
    yfull = xy.y + (canvas.height / 2);
}

setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = get_font_size();
    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, yfull);
})