image_value_tracker.h

 
const char* image_value_tracker = R"JS(/*  src/js/image_value_tracker.js  */
function RadarDataEncoding(encoding){
 
    this.scale  = 1.0;
    this.offset = 0.0;
    this.nodata = null;
    this.undetect = null;
 
    // Could be hidden, for now
    this.precision = 2; // digits
 
    if (!encoding)
    return;
    
    if (typeof(encoding) === "string"){
    //console.info(elem);
    encoding = encoding.split(',');
    switch (encoding.length){
    case 4:
        this.undetect = parseFloat(encoding[3]);
    case 3:
        this.nodata   = parseFloat(encoding[2]);
    case 2:
        this.offset   = parseFloat(encoding[1]);
    case 1:
        this.scale    = parseFloat(encoding[0]);
        break;
    default:
        console.warn("data has extra 'encoding' attributes: ", encoding);
        //console.warn(elem);
    }
    console.info('encoding: ' + this);
    }
 
}
 
RadarDataEncoding.prototype.toString = function(){ return `${this.scale},${this.offset},${this.nodata},${this.undetect}`}
 
RadarDataEncoding.prototype.decode = function(value){
 
    if (value === this.nodata){
    return 'nodata';
    }
    else if (value === this.undetect){
    return 'undetect';
    }
    else {
    return (this.scale*value + this.offset).toFixed(this.precision);
    }
    
}
 
 
async function set_image_value_tracker(imgElem, encoding, coordMonitorElem, valueMonitorElem){
 
    await imgElem.decode();
    const bbox  = imgElem.getBoundingClientRect();
    console.log('bbox: ', bbox);
    // const w = imgElem.naturalWidth  | 1;
    // const h = imgElem.naturalHeight | 1;
    const w = bbox.width;
    const h = bbox.height;
    const canvas = new OffscreenCanvas(w, h);
    console.info(canvas)
    
    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    
    // Expose for debugging
    window.rackster = { imgElem, w, h, canvas, ctx };
    
    // Draw and read
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(imgElem, 0, 0);
 
    
    // critical:
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data; 
 
    function grayAt(x, y) {
 
    const e = encoding;
    
    if (x < 0 || y < 0 || x >= w || y >= h) return "";
    const i = (y * w + x) * 4;
    const v = data[i] + (data[i+1]<<8);
    return e.decode(v);
 
    }
 
    imgElem.addEventListener("mousemove", (ev) => {
    var my_bbox  = imgElem.getBoundingClientRect();
    var x = ev.clientX - my_bbox.left;
    var y = ev.clientY - my_bbox.top;
    coordMonitorElem.textContent = '('+x+','+y+')'; //.toFixed(2);
    valueMonitorElem.textContent = grayAt(x,y); //.toFixed(2);
    })
    
    window.rackdata = data
 
}
 
function image_value_tracker(){
 
    // const elems = document.querySelectorAll("metadata[data-base64]");
    const elems = document.querySelectorAll(".MOUSE_VALUE");
 
    elems.forEach(elem => {
 
    const dataElem = elem.querySelector(".MOUSE_VALUE_DATA");
    window.metadata = dataElem;
    var encoding = new RadarDataEncoding(dataElem.getAttribute("data-encoding"))
 
    const coordMonitorElem = elem.querySelector(".COORD_MONITOR");
    const valueMonitorElem = elem.querySelector(".VALUE_MONITOR");
    
    set_image_value_tracker(dataElem, encoding, coordMonitorElem, valueMonitorElem);
    // var type = dataElem.getAttribute("data-basetype");
    
    });
    
}
)JS";