LoadFile.ts

interface coordinates{ //tipo delle variabili "pixel"
    xp: number;
    yp: number;
}
var DataMatrix: number[][][]; //matrice 3D con tutti i dati letti dal file
var nOfCounts: number[][]; //numero di conteggi per ogni pixel
var pixelDim: number; //dimensione di un pixel in pt
var maxAbsolute: number; //massimo conteggio della matrice nOfCounts
var dataCompleteChart: string; //dati del grafico completo
var dataCompleteChartCalibrated: string; //dati del grafico calibrato completo
var a: number = 3.36275; //costante moltiplicativa per la calibrazione
var b: number = 58.2353; //costante additiva per la calibrazione
var rePrint: boolean = false; //variabile per ricolorare con il max relativo
var calibrated: boolean = false; //variabile per il controllo sulla calibrazione
var newOrigin: coordinates; //nuovo origine nel caso di zoom
var zPixel1: coordinates = {xp: 0, yp: 0}; //pixel1 dello zoom
var zPixel2: coordinates = {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: number = 0; //numero di pixel dell'immagine sull'asse x
var yDim: number = 0; //numero di pixel dell'immagine sull'asse y
var passo: number = 0; //dimensione di un pixel in micorn
var globalxMinRange: number = 0; //estremo sinistro del range dell'asse x
var globalxMaxRange: number = 55; //estremo destra del range dell'asse x
var realPixelDim: number; //dimensione dei pixel responsive

//imposto le dimensioni del canvas
var bb: any = document.querySelector ('#mappa-pannel').getBoundingClientRect();
var maxMappaWidth: number = bb.right - bb.left - 50;
var maxMappaHeight: number = 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/tree.XML", true);
// MapTreeFile.onreadystatechange = function(){
//     if(MapTreeFile.readyState === 4){
//         if(MapTreeFile.status === 200){
//             var MapTreeText: any = JSON.parse(MapTreeFile.responseText);
//             //alert(MapTreeText[0].name);
//             //creaAlbero(MapTreeText);
//         }
//     }
// }
// MapTreeFile.send(null);

// function openTreeFile() { 
//   var MapTreeFile = new XMLHttpRequest();
//   var obj;
//   MapTreeFile.onreadystatechange = function() {
//     if (this.readyState == 4 && this.status == 200) {
//       parseTreefile(this);
//     }
//   };
//   MapTreeFile.open("GET", "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App/tree.XML", true);
//   MapTreeFile.send();
// }

// function parseTreefile(xml) {

//   var parser = new DOMParser();
//   var xmlDoc = parser.parseFromString(xml, "text/xml");

//   //xmlDoc.getElementsByTagName("d:getcontenttype")[0].childNodes[0].nodeValue;

// }

//creo l'albero con treeview
function getTree() {
  var tree = [
    {
      text: "XRFfilesystem",
      nodes: [
        {
          text: "Pergamena-Medioevale",
          nodes: [
            {
              text: "La-muta",
              nodes: [
                {
                  text: "La-muta",
                  nodes: [
                    {
                      text: "file.txt",
                      icon: "glyphicon glyphicon-file",
                      selectedIcon: "glyphicon glyphicon-file",
                      url: "https://oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem/Pergamena-Medioevale/La-muta/La-muta/file.txt"
                    }
                  ]
                }
              ]
            },
            {
              text: "file.txt",
              icon: "glyphicon glyphicon-file",
              selectedIcon: "glyphicon glyphicon-file",
              url: "https://oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem/Pergamena-Medioevale/file.txt"
            },
            {
              text: "file.txt",
              icon: "glyphicon glyphicon-file",
              selectedIcon: "glyphicon glyphicon-file",
              url: "https://oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem/Pergamena-Medioevale/file.txt"
            },
            {
              text: "file.txt",
              icon: "glyphicon glyphicon-file",
              selectedIcon: "glyphicon glyphicon-file",
              url: "https://oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem/Pergamena-Medioevale/file.txt"
            }
          ]
        },
        {
          text: "Raffaello",
          nodes: [
            {
              text: "La-muta",
              nodes: [
                {
                  text: "file.txt",
                  icon: "glyphicon glyphicon-file",
                  selectedIcon: "glyphicon glyphicon-file",
                  url: "https://oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem/Raffaello/La-muta/file.txt"
                }
              ]
            }
          ]
        }
      ]
    }
  ];
  return tree;
}

//funzione che genera automaticamente l'albero
function generateTree(xmlDoc){
  var tree = [];
  var first: boolean = true;
  var oldFolderParent: string = "";
  var oldFolder: string = "";
  //inizio leggendo le entry
  var entry: string[] = xmlDoc.getElementsByTagName("d:href");
  
  //per ogni entry controllo se si tratta di una cartella o di un documento
  for (var i:number = 0; i < entry.length; i++) {
    var path: string[] = entry[i].childNodes[0].nodeValue.split("");
    
    if (path[path.length-1] == "/") { //cartella
      //creo  il nome della cartella
      var folderName: string[] = entry[i].childNodes[0].nodeValue.split("/");
      //creo l'oggetto cartella
      var Folder = {
        text: folderName[folderName.length-2],
        nodes: []
      }
      //alert("Cartella: " + folderName + " n: " + folderName.length);

      //aggiungo l'oggetto cartella nella giusta posizione
      if (first) {  //aggiungo il primo elemento
        tree.push(Folder);
        first=false;
        //memorizzo il path della cartella e il padre
        oldFolder = entry[i].childNodes[0].nodeValue;
        oldFolderParent = oldFolder.slice(0, oldFolder.lastIndexOf(folderName[folderName.length-2]));
        // alert("Path cartella corrente: " + oldFolder);
        // alert("Indice ricorrenza: " + oldFolder.lastIndexOf(folderName[folderName.length-2]+"/"));
        // alert("Caratteri da eliminare: " + (folderName[folderName.length-2]+"/").length);
        //alert(oldFolderParent);
      } else { //dal secondo elemento in poi controllo se si tratta di una sottocartella
        //memorizzo il path della cartella corrente e il padre
        var newFolder: string = entry[i].childNodes[0].nodeValue;
        var newFolderParent: string = newFolder.slice(0, newFolder.lastIndexOf(folderName[folderName.length-2]));

        if(newFolderParent == oldFolderParent){ //cartella sorella con quella memorizzata
          //alert("La cartella(s) " + folderName[folderName.length-2] + " è filgia di " + oldFolderParent);
          oldFolder = newFolder;
          insertOBJinFS(Folder, tree, folderName, 0);
        } else if(newFolderParent == oldFolder){ //cartella figlia di quella memorizzata
          //alert("La cartella(f) " + folderName[folderName.length-2] + " è filgia di " + oldFolder);
          oldFolder = newFolder;
          oldFolderParent = newFolderParent;
          insertOBJinFS(Folder, tree, folderName, 0);
        } else { //nessuno dei casi precedenti
          //arretro nell'albero fino a trovare lo stesso padre
          while(newFolderParent != oldFolderParent){
            oldFolderParent = oldFolderParent.slice(0, oldFolderParent.length-1); //tolgo "/" finale
            oldFolderParent = oldFolderParent.slice(0, (oldFolderParent.lastIndexOf("/")+1)); //tolgo il nome della cartella precedente
          }
          oldFolder = newFolder;
          //alert("La cartella(r) " + folderName[folderName.length-2] + "è filgia di " + oldFolderParent);
          insertOBJinFS(Folder, tree, folderName, 0);
        }
      }

    } else { //documento
      //alert("Documento: " + entry[i].childNodes[0].nodeValue);
      //creo il nome del file
      var fileName: string[] = entry[i].childNodes[0].nodeValue.split("/");
      //creo il path
      var filePath: string = "https://lcappelli_student.unife.it:61nerdolo@oc-chnet.cr.cnaf.infn.it:8443" + entry[i].childNodes[0].nodeValue;
      //creo l'oggetto documento
      var File = {
        text: fileName[fileName.length-1],
        icon: "glyphicon glyphicon-file",
        selectedIcon: "glyphicon glyphicon-file",
        url: filePath
      }
      //aggiungo l'oggetto file nella giusta posizione (da rivedere)
      //alert("File: " + fileName);
      insertOBJinFS(File, tree, fileName, 1);
    }
  }
  return tree;
}

function insertOBJinFS(objfs, tree, objfsName, type){
  var depth: number = objfsName.length;
  if(type) depth++; //se è un file aumento la profondità
  var treePosition;
  switch(depth){
    case 8: treePosition = tree; break;
    case 9: treePosition = tree[tree.length-1].nodes; break;
    case 10: treePosition = tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes; break;
    case 11: 
    treePosition = tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes[tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes.length-1].nodes;
    break;
    case 12:
    treePosition = tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes[tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes.length-1].nodes[tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes[tree[tree.length-1].nodes[tree[tree.length-1].nodes.length-1].nodes.length-1].nodes.length-1].nodes;
    break;
    default: break;
  }
  treePosition[treePosition.length-1].nodes.push(objfs);
}

$(document).ready( function() {

  //Qua ottengo il contenuto del file XML
  var contentfilesystem: any = document.getElementById('contentfilesystem').innerHTML;
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(contentfilesystem, "text/xml");

  //ora genero l'albero
  $('#FileTreeview').treeview({data: getTree()}); //manuale
  //$('#FileTreeview').treeview({data: generateTree(xmlDoc)}); //automatico
  $('#FileTreeview').on('nodeSelected', function(e, node){
    if(node['url'] != undefined){
      openFileFromServer(node['url']);
    }
  });
  
  //bottone per l'importazione locale
  var fileInputButton: any = document.getElementById('myImport'); 
  fileInputButton.onchange = function(){
    //qua si salva il nome del file
    var fileName: string = fileInputButton.files[0];
    //creo l'oggetto filereader 
    var readerObject: any = 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: string = readerObject.result; 
      readData(fileString);
    }
  }

  //compressione sidenav settings
  var setLabel: any = $('.btn-settings');
  var isClosedSettings: boolean = 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: any = $('.fs-label');
  var isClosedfs: boolean = 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: any = 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: string = 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) { //drop
    files = e.dataTransfer.files;
  }
  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: any = fileString.split("\n");
    var readMode: string;
    var xMin: number = 0, yMin: number = 0;
    var xMax: number = 0, yMax: number = 0;

    //alert(fileStringArray);
    
    for(var i: number = 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++;
            //se ho già salvato la prima posizione controllo se sto leggendo per
            //righe o per colonne leggendo la seconda intestazione    
            } 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: number = 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: number = 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: number = 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]);