LoadFile.js

var DataMatrix; //matrice 3D con tutti i dati letti dal file
var nOfCounts; //numero di conteggi per ogni pixel
var pixelDim; //dimensione di un pixel in pt
var maxAbsolute; //massimo conteggio della matrice nOfCounts
var dataCompleteChart; //dati del grafico completo
var dataCompleteChartCalibrated; //dati del grafico calibrato completo
var a = 3.36275; //costante moltiplicativa per la calibrazione
var b = 58.2353; //costante additiva per la calibrazione
var rePrint = false; //variabile per ricolorare con il max relativo
var calibrated = false; //variabile per il controllo sulla calibrazione
var newOrigin; //nuovo origine nel caso di zoom
var zPixel1 = { xp: 0, yp: 0 }; //pixel1 dello zoom
var zPixel2 = { xp: 0, yp: 0 }; //pixel2 dello zoom
//var canvasMaxWidth: number = 450; //dim massima della canvas in pt - asse x
//var canvasMaxHeight: number = 500; //dim massima della canvas in pt - asse y
var xDim = 0; //numero di pixel dell'immagine sull'asse x
var yDim = 0; //numero di pixel dell'immagine sull'asse y
var passo = 0; //dimensione di un pixel in micorn
var globalxMinRange = 0; //estremo sinistro del range dell'asse x
var globalxMaxRange = 55; //estremo destra del range dell'asse x
var realPixelDim; //dimensione dei pixel responsive
//imposto le dimensioni del canvas
var bb = document.querySelector('#mappa-pannel').getBoundingClientRect();
var maxMappaWidth = bb.right - bb.left - 50;
var maxMappaHeight = bb.bottom - bb.top - 50;
//avvio la possibilità di fare il drag&drop
var element = document.querySelector('.droppable');
makeDroppable(element, callback);
//costruzione dell'albero
//prima parte: leggo il file con la descrizione della directory
var MapTreeFile = new XMLHttpRequest();
MapTreeFile.open("GET", "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App-Bootstrap/filesystemtree.json", true);
MapTreeFile.onreadystatechange = function () {
    if (MapTreeFile.readyState === 4) {
        if (MapTreeFile.status === 200) {
            var MapTreeText = JSON.parse(MapTreeFile.responseText);
        }
    }
};
MapTreeFile.send(null);
//creo l'albero con treeview
function getTree() {
    var tree = [
        {
            text: "PERGAMENA MEDIOEVALE",
            nodes: [
                {
                    text: "Mappa integrale",
                    icon: "glyphicon glyphicon-file",
                    selectedIcon: "glyphicon glyphicon-file",
                    url: "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App-Bootstrap/RemoteFileSystem/Pergamena-Medioevale/map3_turkey.txt"
                },
                {
                    text: "Coda Pavone",
                    nodes: [
                        {
                            text: "Risoluzione 500",
                            icon: "glyphicon glyphicon-file",
                            selectedIcon: "glyphicon glyphicon-file",
                            url: "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App-Bootstrap/RemoteFileSystem/Pergamena-Medioevale/mappa4_codapavone_500_v05.txt"
                        },
                        {
                            text: "Risoluzione 250",
                            icon: "glyphicon glyphicon-file",
                            selectedIcon: "glyphicon glyphicon-file",
                            url: "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App-Bootstrap/RemoteFileSystem/Pergamena-Medioevale/mappa4_codapavone_250_v05.txt"
                        }]
                }]
        },
        {
            text: "RAFFAELLO",
            nodes: [
                {
                    text: "La muta",
                    nodes: [
                        {
                            text: "Risoluzione 500",
                            icon: "glyphicon glyphicon-file",
                            selectedIcon: "glyphicon glyphicon-file"
                        },
                        {
                            text: "Risoluzione 250",
                            icon: "glyphicon glyphicon-file",
                            selectedIcon: "glyphicon glyphicon-file"
                        }]
                }]
        }];
    return tree;
}
$(document).ready(function () {
    //bottone per l'importazione locale
    var fileInputButton = document.getElementById('myImport');
    fileInputButton.onchange = function () {
        //qua si salva il nome del file
        var fileName = fileInputButton.files[0];
        //creo l'oggetto filereader 
        var readerObject = new FileReader();
        //dico come andrà letto il file
        readerObject.readAsBinaryString(fileName);
        readerObject.onload = function () {
            //riempio filestring con il contenuto del file solo dopo che il file
            //è stato caricato
            var fileString = readerObject.result;
            readData(fileString);
        };
    };
    //costruzione dell'albero
    $('#FileTreeview').treeview({ data: getTree() });
    $('#FileTreeview').on('nodeSelected', function (e, node) {
        if (node['url'] != undefined) {
            openFileFromServer(node['url']);
        }
    });
    //compressione sidenav settings
    var setLabel = $('.btn-settings');
    var isClosedSettings = false;
    setLabel.click(function () { setLabel_cross(); });
    function setLabel_cross() {
        if (isClosedSettings == true) {
            isClosedSettings = false;
            document.getElementById("mySidenavSet").style.width = "0";
            document.getElementById("wrapper").style.marginRight = "0";
            document.getElementById("setbtn").style.marginRight = "-2px";
        }
        else {
            isClosedSettings = true;
            document.getElementById("mySidenavSet").style.width = "250px";
            document.getElementById("wrapper").style.marginRight = "250px";
            document.getElementById("setbtn").style.marginRight = "248px";
        }
    }
    //compressione sidenav file system
    var fsLabel = $('.fs-label');
    var isClosedfs = false;
    fsLabel.click(function () { fsLabel_cross(); });
    function fsLabel_cross() {
        if (isClosedfs == true) {
            isClosedfs = false;
            fsLabel.removeClass('is-open');
            fsLabel.addClass('is-closed');
            document.getElementById("mySidenavfs").style.width = "0";
            document.getElementById("wrapper").style.marginLeft = "0";
            document.getElementById("fsbtn").style.marginLeft = "-2px";
        }
        else {
            isClosedfs = true;
            fsLabel.removeClass('is-closed');
            fsLabel.addClass('is-open');
            document.getElementById("mySidenavfs").style.width = "250px";
            document.getElementById("wrapper").style.marginLeft = "250px";
            document.getElementById("fsbtn").style.marginLeft = "248px";
        }
    }
});
function openFileFromServer(url) {
    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", url, true);
    txtFile.onreadystatechange = function () {
        if (txtFile.readyState === 4) {
            if (txtFile.status === 200) {
                readData((txtFile.responseText));
            }
        }
    };
    txtFile.send(null);
}
function callback(files) {
    //log il nome del file nella console
    console.log("Open file " + files[files.length - 1].name);
    //creo l'oggetto filereader
    var readerObject = new FileReader();
    //dico come andrà letto il file
    readerObject.readAsBinaryString(files[files.length - 1]);
    readerObject.onload = function () {
        //riempio filestring con il contenuto del file solo dopo che il file
        //è stato caricato
        var fileString = readerObject.result;
        readData(fileString);
    };
}
function makeDroppable(ele, callback) {
    //creo un elemento "input type file" non visibile nella pagina
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('multiple', true);
    input.style.display = 'none';
    //aggiungo a questo elemento un event listener al change
    input.addEventListener('change', triggerCallback);
    //aggiungo l'input all'elemento ele
    ele.appendChild(input);
    //questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
    ele.addEventListener('dragover', function (e) {
        e.preventDefault(); //impediamo l'apertura del file
        e.stopPropagation();
        e.dataTransfer.dropEffect = 'copy';
        ele.classList.add('dragover'); //cambia lo stile dell'elemento
    });
    //l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
    ele.addEventListener('dragleave', function (e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
    });
    //questo evento si innesca quando il drop è effettivamente avvenuto
    ele.addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
        triggerCallback(e);
    });
    //evento in caso di click
    // ele.addEventListener('click', function() {
    //   input.value = null;
    //   input.click();
    // });
}
//funzione che gestisce il tutto
function triggerCallback(e) {
    var files; //array di file
    //controlliamo se il file è stato scelto o se è stato droppato
    if (e.dataTransfer) {
        files = e.dataTransfer.files;
    } /*else if(e.target) { //click
      files = e.target.files;
      alert(2);
    }*/
    callback.call(null, files);
}
/*
La funzione readData() prende in ingresso il file di input memorizzato nella
stringa "fileString". La funzione riempie la matrice "DataMatrix" con i dati
in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate
anche altre variabili necessarie per il resto del codice.
*/
function readData(fileString) {
    var fileStringArray = fileString.split("\n");
    var readMode;
    var xMin = 0, yMin = 0;
    var xMax = 0, yMax = 0;
    //alert(fileStringArray);
    for (var i = 0; i < fileStringArray.length; i++) {
        //mi soffermo solo sulle righe "intestazione delle x"
        if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '5') {
            //se sono alla prima intestazione salvo la x e la y in xMin e yMin
            if (xMin == 0) {
                xMin = parseInt(fileStringArray[i]);
                yMin = parseInt(fileStringArray[i + 1]);
                i++;
            }
            else {
                if (parseInt(fileStringArray[i]) == xMin) {
                    readMode = 'c';
                    //determino il passo (lato del pixel in micorn)
                    passo = Math.abs(yMin - fileStringArray[i + 1]);
                    //se sto leggendo per colonne posso determinare qual'è xMax
                    //leggendo il vettore partendo dalla fine
                    for (var j = fileStringArray.length; j > i; j--) {
                        //se la riga è "intestazione x" memorizzo xMax, lo
                        //confronto con xMin per vedere se occorre scambiarlo ed
                        //esco
                        if (parseInt(fileStringArray[j]) > 17000 &&
                            fileStringArray[j][0] == '5') {
                            xMax = parseInt(fileStringArray[j]);
                            if (xMax < xMin) {
                                var t = xMax;
                                xMax = xMin;
                                xMin = t;
                            }
                            break;
                        }
                    }
                }
                else {
                    readMode = 'r';
                    //determino il passo (lato del pixel in micorn)
                    passo = Math.abs(xMin - fileStringArray[i]);
                    //se sto leggendo per righe posso determinare qual'è yMax
                    //leggendo il vettore partendo dalla fine
                    for (var j = fileStringArray.length; j > i; j--) {
                        //se la riga è "intestazione y" memorizzo yMax, lo
                        //confronto con yMin per vedere se occorre scambiarlo ed
                        //esco
                        if (parseInt(fileStringArray[j]) > 17000 &&
                            fileStringArray[j][0] == '6') {
                            yMax = parseInt(fileStringArray[j]);
                            if (yMax < yMin) {
                                var t = yMax;
                                yMax = yMin;
                                yMin = t;
                            }
                            break;
                        }
                    }
                }
                //a questo punto posso uscire dal ciclo
                break;
            }
        }
    }
    //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
    /*
    A questo punto del codice ho determinato se sto leggendo per righe o per
    colonne e, nel primo caso, xMin e xMax, nel secondo caso yMin e yMax.
    Ora scorro nuovamente l'array distinguendo i casi in cui leggo per righe o
    per colonne, in questo modo determino o yMin e yMax, o xMin e xMax
    */
    for (var i = 2; i < fileStringArray.length; i++) {
        //se leggo per colonne devo deterinare yMin e yMax
        if (readMode == 'c') {
            //mi soffermo sulle righe "intestazione y"
            if (parseInt(fileStringArray[i]) > 17000
                && fileStringArray[i][0] == '6') {
                //cerco yMin e yMax
                if (yMin > parseInt(fileStringArray[i])) {
                    yMin = parseInt(fileStringArray[i]);
                }
                if (yMax < parseInt(fileStringArray[i])) {
                    yMax = parseInt(fileStringArray[i]);
                }
            }
            //quando arrivo a leggere la terza colonna sono sicura di aver già
            //trovato yMin e yMax quindi posso uscire dal ciclo
            if (parseInt(fileStringArray[i]) == xMin + (passo * 2)) {
                break;
            }
        }
        else if (readMode == 'r') {
            //mi soffermo sulle righe "intestazione x"
            if (parseInt(fileStringArray[i]) > 17000
                && fileStringArray[i][0] == '5') {
                //cerco xMin e xMax
                if (xMin > parseInt(fileStringArray[i])) {
                    xMin = parseInt(fileStringArray[i]);
                }
                if (xMax < parseInt(fileStringArray[i])) {
                    xMax = parseInt(fileStringArray[i]);
                }
            }
            //quando arrivo a leggere la terza riga sono sicura di aver già
            //trovato xMin e xMax quindi posso uscire dal ciclo
            if (parseInt(fileStringArray[i]) == yMin + 2000) {
                break;
            }
        }
    }
    //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
    /*
    a questo punto ho xMin, xMax, yMin e yMax; percorro l'array sistemando gli
    shift
    */
    for (var i = 0; i < fileStringArray.length; i++) {
        //se leggo per colonne allora aggiungo 1passo alle y di tutte le colonne
        //dispari
        if (readMode == 'c' && parseInt(fileStringArray[i]) > 17000 &&
            fileStringArray[i][0] == '5' &&
            (parseInt(fileStringArray[i]) / 1000) % 2 != 0) {
            fileStringArray[i + 1] =
                (parseInt(fileStringArray[i + 1]) + passo).toString();
        }
        else if (readMode == 'r' && parseInt(fileStringArray[i]) > 17000 &&
            fileStringArray[i][0] == '5' &&
            (parseInt(fileStringArray[i + 1]) / 1000) % 2 != 0) {
            fileStringArray[i] =
                (parseInt(fileStringArray[i]) + passo).toString();
        }
    }
    /*Ora che ho le posizioni corrette di ogni pixel posso riempire la matrice
    che conterrà tutti i dati e sulla quale si opererà in tutto il programma.
    Definisco le dimensioni di tale matrice
    */
    if (readMode == 'c') {
        xDim = (xMax - xMin) / passo + 1;
        yDim = (yMax - yMin) / passo - 2;
    }
    else {
        xDim = (xMax - xMin) / passo - 2;
        yDim = (yMax - yMin) / passo + 1;
    }
    //alert(xDim + " " + yDim);
    /*
    definisco la matrice DataMatrix: yDim righe da xDim elementi, ogni
    elemento della matrice è un vettore di 16384 elementi
    */
    DataMatrix = new Array(xDim);
    for (var i = 0; i < xDim; i++) {
        DataMatrix[i] = new Array(yDim);
        for (var j = 0; j < yDim; j++) {
            DataMatrix[i][j] = new Array(16384);
            for (var k = 0; k < 16384; k++) {
                DataMatrix[i][j][k] = 0;
            }
        }
    }
    /*
    ora devo scorrere l'array con il contenuto del file per riempire la matrice
    */
    for (var i = 0; i < fileStringArray.length; i++) {
        var x;
        var y;
        var write;
        //se leggo una riga "intestazione x":
        if (parseInt(fileStringArray[i]) > 17000 &&
            fileStringArray[i][0] == '5') {
            //memorizzo le x e le y del punto e avanzo direttamente al primo
            //conteggio perchè ho già letto la i successiva alla corrente
            x = (parseInt(fileStringArray[i]) - xMin);
            if (x != 0) {
                x /= passo;
            }
            y = (parseInt(fileStringArray[i + 1]) - yMin);
            if (y != 0) {
                y /= passo;
            }
            i++;
            //se non è un pixel del bordo e sto leggendo per colonne allora
            //segnalo che i successivi valori sono da considerare e sistemo
            //la y del pixel così da normalizzarla dopo il taglio dei bordi
            if (readMode == 'c' && y != 0 && y != 1 && y != (yMax - yMin) / passo
                && y != (yMax - yMin) / passo + 1) {
                write = true;
                y -= 2;
            }
            else if (readMode == 'r' && x != 0 && x != 1 &&
                x != (xMax - xMin) / passo && x != (xMax - xMin) / passo + 1) {
                write = true;
                x -= 2;
            }
            else {
                write = false;
            }
        }
        else if (parseInt(fileStringArray[i]) < 17000 && write == true) {
            //Aggiorno i dati nella matrice DataMatrix invertendo la posizione
            //delle x e delle y
            DataMatrix[xDim - x - 1][yDim - y - 1][parseInt(fileStringArray[i])] += 1;
        }
    }
    //calcolo il numero di conteggi per pixel e li salvo nella matrice nOfCounts
    nOfCounts = new Array(xDim);
    for (var i = 0; i < xDim; i++) {
        nOfCounts[i] = new Array(yDim);
        for (var j = 0; j < yDim; j++) {
            nOfCounts[i][j] = sumVect(DataMatrix[i][j], 0, DataMatrix[i][j].length);
        }
    }
    //definisco l'origine da utilizzare per il click del mouse
    newOrigin = { xp: 0, yp: 0 };
    //calcolo il conteggio massimo della matrice
    maxAbsolute = findMax(nOfCounts, { xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 });
    //caricati i dati posso impostare i dati per il grafico nella sua
    //interezza e disegnare l'immagine
    setDataForCompleteChart();
    alert("Dati caricati con successo");
    drawImg({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55);
    drawChart({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55);
}
/*
la funzione drawImg disegna il canvas con l'immagine selezionata: può essere
l'immagine completa, l'immagine zoommata o l'immagine che mostra solo alcuni
elementi. La funzione è anche responsabile di gestire le richieste degli utenti
riguardo alla mappa.
*/
function drawImg(pixel1, pixel2, xMinRange, xMaxRange) {
    //determino le dimensioni del canvas e le dimensioni dei pixel per
    //questo disegno    
    var nPixelX = pixel2.xp - pixel1.xp + 1;
    var nPixelY = pixel2.yp - pixel1.yp + 1;
    var dimPixelx = Math.floor(maxMappaWidth / nPixelX);
    var dimPixely = Math.floor(maxMappaHeight / nPixelY);
    pixelDim = (dimPixelx < dimPixely) ? dimPixelx : dimPixely;
    var canvas = document.getElementById("myCanvas");
    canvas.height = nPixelY * pixelDim;
    canvas.width = nPixelX * pixelDim;
    var ctx = canvas.getContext("2d");
    //se il range è completo, quindi non è stato selzionato nessun picco, 
    //procedo utilizzando nOfCounts come valori da rappresentare
    if (xMaxRange - xMinRange >= 55) {
        //controllo se devo colorare con il massimo assoluto o con quello
        //relativo
        var max;
        if (rePrint)
            max = findMax(nOfCounts, pixel1, pixel2);
        else
            max = maxAbsolute;
        //controllo se è richiesta saturazione del massimo
        max = (max * document.getElementById("SaturationSlider").value) / 100;
        //disegno la canvas passando la matrice con i dati e il massimo
        drawCanvas(nOfCounts, max);
    }
    else {
        //determino i canali da xMinRange e xMaxRange
        var xMinRangeCh = Math.floor((((xMinRange * 1000) + b) / a) - 1); //16
        var xMaxRangeCh = Math.floor((((xMaxRange * 1000) + b) / a) - 1); //16371
        //devo calcolare il numero di conteggi solo delle x selezionate
        var nOfCountsRelative;
        nOfCountsRelative = new Array(xDim);
        for (var i = 0; i < xDim; i++) {
            nOfCountsRelative[i] = new Array(yDim);
            for (var j = 0; j < yDim; j++) {
                nOfCountsRelative[i][j] =
                    sumVect(DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
            }
        }
        //calcolo il massimo
        var max;
        if (rePrint)
            max = findMax(nOfCountsRelative, pixel1, pixel2);
        else
            max = findMax(nOfCountsRelative, { xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 });
        max = (max * document.getElementById("SaturationSlider").value) / 100;
        //disegno la canvas con i giusti valori
        drawCanvas(nOfCountsRelative, max);
    }
    /*
    La funzione drawCanvas riceve in input la matrice con i dati e il valore
    da utilizzare come massimo. La funzione disegna la mappa nel canvas.
    */
    function drawCanvas(noc, max) {
        //alert(pixel1.xp + " " + pixel1.yp + " " + pixel2.xp + " " + pixel2.yp);
        //scorro tutti i pixel da disegnare: ne determino il colore e li disegno
        //nella giusta posizione.
        //prima verifico se devo aggiungere una trasparenza ai pixel
        var setTrsp = 1 -
            document.getElementById("TrasparencySlider").value / 100;
        var color = "";
        for (var i = pixel1.xp; i <= pixel2.xp; i++) {
            for (var j = pixel1.yp; j <= pixel2.yp; j++) {
                var intensity = noc[i][j] / max;
                if (intensity < 1 / 5)
                    color = "rgba(0, 0, " + Math.floor(intensity * 5 * 255) + "," +
                        setTrsp + ")";
                else if (1 / 5 <= intensity && intensity < 2 / 5)
                    color = "rgba(0, " + Math.floor((intensity - 1 / 5) * 5 * 255) + ",255, "
                        + setTrsp + ")";
                else if (2 / 5 <= intensity && intensity < 3 / 5)
                    color = "rgba(0, 255, " + (255 - Math.floor((intensity - 2 / 5) * 5 * 255))
                        + ", " + setTrsp + ")";
                else if (3 / 5 <= intensity && intensity < 4 / 5)
                    color = "rgba(" + Math.floor((intensity - 3 / 5) * 5 * 255) + ",255,0," +
                        setTrsp + ")";
                else
                    color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) +
                        ", 0, " + setTrsp + ")";
                ctx.fillStyle = color;
                ctx.fillRect((i - pixel1.xp) * pixelDim, (j - pixel1.yp) * pixelDim, pixelDim, pixelDim);
            }
        }
        //annullo reprint
        rePrint = false;
        //Determino le dimensioni reali dei pixel
        var canvasDim = document.querySelector('#myCanvas').getBoundingClientRect();
        realPixelDim = round3(((canvasDim.right - canvasDim.left) / nPixelX + (canvasDim.bottom - canvasDim.top) / nPixelY) / 2);
        //alert(realPixelDim);
    }
    /*
    mi metto in ascolto della fine dello spostamento dello slider della
    saturazione: ridisegno il canvas con gli stessi input (verrà modificato il
    massimo in fase di disegno)
    */
    var satSlider = document.getElementById("SaturationSlider");
    satSlider.onmouseup = function () {
        drawImg(pixel1, pixel2, xMinRange, xMaxRange);
    };
    /*
    mi metto in ascolto del click sul bottone rePlot. Nel caso venga cliccato
    cambio stato alla variabile reprint, resetto la saturazione e ridisegno il
    canvas con gli stessi input
    */
    var rePlotButton = document.getElementById("rePlot");
    rePlotButton.onclick = function () {
        rePrint = true;
        satSlider.value = "100";
        drawImg(pixel1, pixel2, xMinRange, xMaxRange);
    };
    /*
    mi metto in ascolto della fine dello spostamento dello slider della
    trasparenza: ridisegno il canvas con gli stessi input (verrà modificata la
    trasparenza in fase di disegno)
    */
    var trspSlider = document.getElementById("TrasparencySlider");
    trspSlider.onmouseup = function () {
        drawImg(pixel1, pixel2, xMinRange, xMaxRange);
    };
    /*
    mi metto in ascolto del click sul bottone reset. Nel caso venga cliccato
    resetto tutte le variabili e disegno immagine e canvas
    */
    var resetButton = document.getElementById("reset");
    resetButton.onclick = function () {
        newOrigin = { xp: 0, yp: 0 };
        rePrint = false;
        calibrated = false;
        globalxMinRange = 0;
        globalxMaxRange = 55;
        satSlider.value = "100";
        trspSlider.value = "0";
        document.getElementById("spinBoxMin").setAttribute("value", "-");
        document.getElementById("spinBoxMax").setAttribute("value", "-");
        drawImg({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55);
        drawChart({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55);
    };
    //mi metto in ascolto del click sul bottone per il download dell'immagine
    var ExportImgButton = document.getElementById("ExportImage");
    ExportImgButton.onclick = function () {
        var img = canvas.toDataURL("image/png");
        ExportImgButton.href = img;
        //document.write('<img src="'+img+'"/>');
    };
}
/*la funzione drawChart riceve in input i due estremi dell'immagine (può essere
l'immagine completa o solo una parte) e i due estremi dell'intervallo da
rappresentare sull'asse x (anche in questo caso può essere l'asse x completa
o un sotto-intervallo). La funzione disegna il grafico richiesto
*/
function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
    //definisco la variabile "grafico", i bottoni relativi al grafico, il tag
    //select e le due spinbox con il relativo botton
    var g;
    var setlinearButton = document.getElementById("setlinearButton");
    var setlogButton = document.getElementById("setlogButton");
    var setEnergyButton = document.getElementById("setEnergyButton");
    var setChannelsButton = document.getElementById("setChannelsButton");
    var box1 = document.getElementById("spinBoxMin");
    var box2 = document.getElementById("spinBoxMax");
    var SubmitRangeButton = document.getElementById("readSpinbox");
    var elementSelect = document.getElementById("elementSelect");
    var ExportGraphButton = document.getElementById("ExportGraph");
    //controllo se il grafico è da disegnare calibrato poi regolo i bottoni
    if (calibrated) {
        setEnergyButton.disabled = true;
        setChannelsButton.disabled = false;
        SubmitRangeButton.disabled = false;
    }
    else {
        setEnergyButton.disabled = false;
        setChannelsButton.disabled = true;
        SubmitRangeButton.disabled = true;
    }
    setlinearButton.disabled = true;
    setlogButton.disabled = false;
    //verifico se devo disegnare il grafico nella sua completezza: in quel caso
    //ho già la stringa con i dati e posso direttamente procedere con il disegno
    if (pixel1.xp == 0 && pixel1.yp == 0 && pixel2.xp == xDim - 1 &&
        pixel2.yp == yDim - 1) {
        //controllo se devo disegare il grafico calibrato o non calibrato
        if (!calibrated) {
            var chartTitle = "Chart from (0, 0) to (" + (xDim - 1) + ", "
                + (yDim - 1) + ")";
            g = setChart(dataCompleteChart, chartTitle);
        }
        else {
            var chartTitle = "Calibrated chart from (0, 0) to (" +
                (xDim - 1) + ", " + (yDim - 1) + ")";
            g = setChart(dataCompleteChartCalibrated, chartTitle);
        }
    }
    else {
        //creo un array di 16384 elementi con la somma dei conteggi solo dei
        //pixel da considerare
        var dataForChart = new Array(16384);
        for (var i = 0; i < 16384; i++) {
            dataForChart[i] = 0;
        }
        for (var i = pixel1.xp; i <= pixel2.xp; i++) {
            for (var j = pixel1.yp; j <= pixel2.yp; j++) {
                for (var k = 0; k < 16384; k++) {
                    dataForChart[k] += DataMatrix[i][j][k];
                }
            }
        }
        //controllo se devo disegare il grafico calibrato o non calibrato
        if (!calibrated) {
            //definisco i dati da passare al grafico
            var dataChart = "Channel,Counts\n";
            for (var i = 0; i < 16348; i++) {
                dataChart += i + "," + dataForChart[i] + "\n";
            }
            //determino il titolo del grafico
            if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) {
                var chartTitle = "Chart pixel (" + pixel1.xp + ", " +
                    (yDim - pixel1.yp - 1) + ")";
            }
            else {
                var chartTitle = "Chart from (" + pixel1.xp + "," +
                    pixel2.xp + ") to (" + (yDim - pixel1.yp - 1) + ", " +
                    (yDim - pixel2.yp - 1) + ")";
            }
            //disegno il grafico
            g = setChart(dataChart, chartTitle);
        }
        else {
            //definisco i dati da passare al grafico
            var dataChartCalibrated = "Energy,Counts\n";
            for (var i = 0; i < 16348; i++) {
                dataChartCalibrated += round3(((i + 1) * a - b) / 1000) +
                    "," + dataForChart[i] + "\n";
            }
            //determino il titolo del grafico
            if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) {
                var chartTitle = "Calibrated chart pixel (" + pixel1.xp +
                    ", " + (yDim - pixel1.yp - 1) + ")";
            }
            else {
                var chartTitle = "Calibrated chart from (" + pixel1.xp +
                    ", " + pixel2.xp + ") to (" + (yDim - pixel1.yp - 1) + ", " +
                    (yDim - pixel2.yp - 1) + ")";
            }
            //disegno il grafico
            g = setChart(dataChartCalibrated, chartTitle);
        }
    }
    /*
    la funzione setChart riceve in input la stringa con i dati del grafico e il
    titolo del grafico. Dopo aver disegnato il grafico restituise in output la
    variabile con il grafico stesso
    */
    function setChart(dataString, charTitle) {
        //definisco la variabile che contiene gli estremi dell'asse x da
        //visualizzare e la riempio a seconda se sto disegnando il grafico
        //calibrato o non calibrato. Definisco anche l'etichetta delll'asse x
        var xArrayRange;
        var xLab;
        if (!calibrated) {
            xArrayRange = [0, 16383];
            xLab = "ADC Channel";
        }
        else {
            xArrayRange = [xMinRange, xMaxRange];
            xLab = "Energy (keV)";
        }
        //imposto le dimensioni del grafico
        var bb = document.querySelector('#chart-pannel').getBoundingClientRect();
        var chartWidth = bb.right - bb.left - 50;
        $('#chart').css('width', chartWidth);
        var bb2 = document.querySelector('#myCanvas').getBoundingClientRect();
        var chartHeight = bb2.bottom - bb2.top;
        $('#chart').css('height', chartHeight);
        //disegno il grafico
        var graphs = new Dygraph(document.getElementById("chart"), dataString, {
            title: charTitle,
            ylabel: 'Counts',
            xlabel: xLab,
            //legend: 'always',
            labelsDivStyles: { 'textAlign': 'right' },
            dateWindow: xArrayRange,
            showRangeSelector: true,
            logscale: false
        });
        //dimenioni responsive del grafico
        document.getElementById("fsbtn").onclick = function () {
            setTimeout(function () {
                g = setChart(dataString, charTitle);
            }, 400);
        };
        document.getElementById("setbtn").onclick = function () {
            setTimeout(function () {
                g = setChart(dataString, charTitle);
            }, 400);
        };
        return graphs;
    }
    //mi metto in ascolto dei click sui bottoni relativi al grafico
    setlinearButton.onclick = function () {
        g.updateOptions({ logscale: false });
        setlinearButton.disabled = true;
        setlogButton.disabled = false;
    };
    setlogButton.onclick = function () {
        g.updateOptions({ logscale: true });
        setlinearButton.disabled = false;
        setlogButton.disabled = true;
    };
    setEnergyButton.onclick = function () {
        calibrated = true;
        drawChart(pixel1, pixel2, 0, 55);
        box1.setAttribute("value", "0");
        box2.setAttribute("value", "55");
    };
    setChannelsButton.onclick = function () {
        calibrated = false;
        drawChart(pixel1, pixel2, 0, 55);
        box1.setAttribute("value", "-");
        box2.setAttribute("value", "-");
    };
    ExportGraphButton.onclick = function () {
        var img = document.getElementById("chartToImg");
        Dygraph.Export.asPNG(g, img);
        ExportGraphButton.href = img.src.replace('image/png', 'image/octet-stream');
    };
    SubmitRangeButton.onclick = function () {
        peackSelection(0, 0);
    };
    /*
    la funzione peakSelection riceve in input gli estremi dell'intervallo da
    rappresentare e lancia le funzioni drawImg e drawChart con l'intervallo dato
    */
    function peackSelection(xMinRange, xMaxRange) {
        //se l'intervallo è [0, 0] significa che devo leggere dalle spinbox i
        //valori desiderati.
        if (xMinRange == 0 && xMaxRange == 0) {
            xMinRange = box1.value;
            xMaxRange = box2.value;
        }
        //Aggiornamento variabili globali
        globalxMinRange = xMinRange;
        globalxMaxRange = xMaxRange;
        newOrigin = { xp: 0, yp: 0 };
        rePrint = false;
        calibrated = true;
        //disegni di immagine e grafico
        drawImg({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, globalxMinRange, globalxMaxRange);
        drawChart({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, globalxMinRange, globalxMaxRange);
    }
    //mi metto in ascolto di uno zoom manuale sul grafico
    var grp = document.getElementById("chart");
    grp.onclick = function () {
        var r;
        r = g.xAxisRange();
        if (!calibrated) {
            r[0] = Math.floor((((r[0] + 1) * a) - b) / 1000);
            r[1] = Math.floor((((r[1] + 1) * a) - b) / 1000);
        }
        else {
            r[0] = round3(r[0]);
            r[1] = round3(r[1]);
            box1.setAttribute("value", r[0].toString());
            box2.setAttribute("value", r[1].toString());
        }
        globalxMinRange = r[0];
        globalxMaxRange = r[1];
        drawImg(pixel1, pixel2, r[0], r[1]);
    };
    /*
    mi metto in ascolto della selezione di un elemento
    */
    elementSelect.onchange = function () {
        var element = document.getElementById("elementSelect").value;
        switch (element) {
            //Ca 
            case "1":
                peackSelection(3.6, 3.8);
                box1.setAttribute("value", "3.60");
                box2.setAttribute("value", "3.80");
                break;
            //Pb
            case "2":
                peackSelection(10.4, 10.7);
                box1.setAttribute("value", "10.40");
                box2.setAttribute("value", "10.70");
                break;
            //Hg
            case "3":
                peackSelection(9.8, 10.15);
                box1.setAttribute("value", "9.80");
                box2.setAttribute("value", "10.15");
                break;
            //Fe
            case "4":
                peackSelection(6.3, 6.5);
                box1.setAttribute("value", "6.30");
                box2.setAttribute("value", "6.50");
                break;
            //Cu
            case "5":
                peackSelection(7.85, 8.2);
                box1.setAttribute("value", "7.85");
                box2.setAttribute("value", "8.20");
                break;
            //Zn
            case "6":
                peackSelection(8.5, 8.72);
                box1.setAttribute("value", "8.50");
                box2.setAttribute("value", "8.72");
                break;
            //Ti
            case "7":
                peackSelection(4.35, 4.65);
                box1.setAttribute("value", "4.35");
                box2.setAttribute("value", "4.65");
                break;
            //K
            case "8":
                peackSelection(3.2, 3.42);
                box1.setAttribute("value", "3.20");
                box2.setAttribute("value", "3.42");
                break;
            //Co
            case "9":
                peackSelection(6.8, 7.05);
                box1.setAttribute("value", "6.80");
                box2.setAttribute("value", "7.05");
                break;
            //default
            default:
                peackSelection(0, 55);
                box1.setAttribute("value", "0");
                box2.setAttribute("value", "55");
                break;
        }
    };
}
/*
la funzione prepara i dati per il grafico se è da disegnare completo
*/
function setDataForCompleteChart() {
    //creo un array di 16384 elementi con la somma dei conteggi di tutti i pixel
    //per ogni canale
    var dataForChart = new Array(16384);
    for (var i = 0; i < 16384; i++) {
        dataForChart[i] = 0;
    }
    for (var i = 0; i < xDim; i++) {
        for (var j = 0; j < yDim; j++) {
            for (var k = 0; k < 16384; k++) {
                dataForChart[k] += DataMatrix[i][j][k];
            }
        }
    }
    //riempio le stringhe con i dati per il grafico
    dataCompleteChart = "Channel,Counts\n";
    dataCompleteChartCalibrated = "Energy,Counts\n";
    for (var i = 0; i < 16348; i++) {
        dataCompleteChart += (i + 1) + "," + dataForChart[i] + "\n";
        dataCompleteChartCalibrated += round3(((i + 1) * a - b) / 1000) + "," +
            dataForChart[i] + "\n";
    }
}
function round3(val) {
    return (Math.round(val * Math.pow(10, 3)) / Math.pow(10, 3));
}
/*
La funzione findMax riceve in input la matrice e gli estremi della sottomatrice
di cui deve trovare il massimo
*/
function findMax(matrix, pixel1, pixel2) {
    var max = 0;
    for (var i = pixel1.xp; i <= pixel2.xp; i++) {
        for (var j = pixel1.yp; j <= pixel2.yp; j++) {
            if (matrix[i][j] > max) {
                max = matrix[i][j];
            }
        }
    }
    return max;
}
/*
la funzione findPosition definisce la posizione del cursore del mouse
relativa al canvas nel momento in cui avviene l'evento passato in input
*/
function findPosition(event, pixel) {
    var scrollTOP = (document.documentElement.scrollTop) ?
        document.documentElement.scrollTop : document.body.scrollTop;
    var scrollLEFT = (document.documentElement.scrollLeft) ?
        document.documentElement.scrollLeft : document.body.scrollLeft;
    var allX = event.clientX + scrollLEFT;
    var allY = event.clientY + scrollTOP;
    var elParent = document.getElementById('myCanvas');
    var objX = 0, objY = 0;
    while (elParent) {
        objX += elParent.offsetLeft;
        objY += elParent.offsetTop;
        elParent = elParent.offsetParent;
    }
    pixel.xp = Math.floor((allX - objX - 1) / realPixelDim) + newOrigin.xp;
    pixel.yp = Math.floor((allY - objY - 1) / realPixelDim) + newOrigin.yp;
}
/*
la funzione findPosDown memorizza la posizione del pixel cliccato mentre la
funzione findPosUp memorizza la posizione del pixel quando il mouse viene
rilasciato. Inoltre questa seconda funzione ordina le coordinate, poi, se è
stato richiesto uno zoom, ridisegna il canvas e aggiorna l'origine; in ogni caso
aggiorna il grafico.
*/
function findPosDown(event) {
    findPosition(event, zPixel1);
}
function findPosUp(event) {
    findPosition(event, zPixel2);
    //alert(zPixel1.xp + " " + zPixel1.yp + " " +zPixel2.xp + " " + zPixel2.yp);
    //alert(newOrigin.xp + " " + newOrigin.yp);
    //controllo che pixel1.xp < pixel2.xp e che pixel1.yp < pixel2.yp
    var tmp;
    if (zPixel1.xp > zPixel2.xp) {
        tmp = zPixel1.xp;
        zPixel1.xp = zPixel2.xp;
        zPixel2.xp = tmp;
    }
    if (zPixel1.yp > zPixel2.yp) {
        tmp = zPixel1.yp;
        zPixel1.yp = zPixel2.yp;
        zPixel2.yp = tmp;
    }
    //verifico che non sia stato cliccato un singolo punto perchè, se così
    //fosse, non dovrei aggiornare la mappa nè segnalare che c'è uno zoom
    if (zPixel1.xp != zPixel2.xp || zPixel1.yp != zPixel2.yp) {
        newOrigin = { xp: zPixel1.xp, yp: zPixel1.yp };
        drawImg(zPixel1, zPixel2, globalxMinRange, globalxMaxRange);
    }
    drawChart(zPixel1, zPixel2, globalxMinRange, globalxMaxRange);
}