diff --git a/LoadFile.js b/LoadFile.js
index be863258bc033b31c7a16ac7f045d31af797eadc..c2579003b0cd1bbca5688facff6aa0dc953738af 100644
--- a/LoadFile.js
+++ b/LoadFile.js
@@ -1,126 +1,53 @@
-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 pixelDim; //dimensione dei pixel responsive
+var maxAbsolute; //massimo conteggio della matrice nOfCounts
+var globalxMinRange = 0, globalxMaxRange = 55;
+var xDim = 0, yDim = 0; //numero di pixel nelle due dimensioni
+var DataMatrix, nOfCounts; //matrici con i dati
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/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;
+var dataCompleteChart = "Channel,Counts\n";
+var dataCompleteChartCalibrated = "Energy,Counts\n";
+var calibrated = false; //variabile per il controllo sulla calibrazione
+//INIZIO DELLO SCRIPT
+$(document).ready(function () {
+ //creazione dell'albero e gestione barre laterali
+ setImportFile();
+ compressingSidenavSettings();
+ compressingSidenavFS();
+ //abilitazione drag&drop
+ var droppableArea = document.querySelector('.droppable');
+ makeDroppable(droppableArea, callback);
+ login();
+});
+//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
+//Sono definiti quindi l'albero e il bottone per l'importazione da locale
+function setImportFile() {
+ //Leggo il contenuto del file json e ne eseguo il parse
+ var contentfilesystem = document.getElementById('contentfilesystem').innerHTML;
+ var jsonObject = JSON.parse(contentfilesystem);
+ alert(jsonObject[0].name);
+ //ora genero l'albero e definisco l'evento in caso di selezione di un nodo
+ // $('#FileTreeview').treeview({data: generateTree(xmlDoc)});
+ // $('#FileTreeview').on('nodeSelected', function(e, node){
+ // if(node['url'] != undefined){
+ // openFileFromServer(node['url']);
+ // }
+ // });
+ //bottone per l'importazione locale
+ var fileInputButton = document.getElementById('myImport');
+ fileInputButton.onchange = function () {
+ var fileName = fileInputButton.files[0];
+ var readerObject = new FileReader();
+ readerObject.readAsBinaryString(fileName);
+ readerObject.onload = function () {
+ var fileString = readerObject.result;
+ readData(fileString);
+ };
+ };
}
//funzione che genera automaticamente l'albero
function generateTree(xmlDoc) {
@@ -128,79 +55,75 @@ function generateTree(xmlDoc) {
var first = true;
var oldFolderParent = "";
var oldFolder = "";
- //inizio leggendo le entry
+ //inizio leggendo tutti gli elementi da inserire nell'albero (caratterizzati
+ //dall'avere un url di riferimento)
var entry = xmlDoc.getElementsByTagName("d:href");
- //per ogni entry controllo se si tratta di una cartella o di un documento
+ //per ogni elemento controllo se si tratta di una cartella o di un documento
for (var i = 0; i < entry.length; i++) {
var path = entry[i].childNodes[0].nodeValue.split("");
+ //cartella, creo l'oggetto corrsipondente
if (path[path.length - 1] == "/") {
- //creo il nome della cartella
var folderName = 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
+ //posiziono la radice del file system, ne memorizzo il path e il padre
if (first) {
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]));
+ oldFolderParent =
+ oldFolder.slice(0, oldFolder.lastIndexOf(folderName[folderName.length - 2]));
}
else {
- //memorizzo il path della cartella corrente e il padre
var newFolder = entry[i].childNodes[0].nodeValue;
var newFolderParent = newFolder.slice(0, newFolder.lastIndexOf(folderName[folderName.length - 2]));
+ //cartella sorella con quella memorizzata
if (newFolderParent == oldFolderParent) {
- //alert("La cartella(s) " + folderName[folderName.length-2] + " è filgia di " + oldFolderParent);
oldFolder = newFolder;
insertOBJinFS(Folder, tree, folderName, 0);
}
else if (newFolderParent == oldFolder) {
- //alert("La cartella(f) " + folderName[folderName.length-2] + " è filgia di " + oldFolder);
oldFolder = newFolder;
oldFolderParent = newFolderParent;
insertOBJinFS(Folder, tree, folderName, 0);
}
else {
- //arretro nell'albero fino a trovare lo stesso padre
+ //arretro nell'albero fino a trovare lo stesso padre. Per fare questo
+ //tolgo al padre memorizzato in precedenza prima "/" poi il nome dell'
+ //ultima cartella
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
+ oldFolderParent = oldFolderParent.slice(0, oldFolderParent.length - 1);
+ oldFolderParent = oldFolderParent.slice(0, (oldFolderParent.lastIndexOf("/") + 1));
}
oldFolder = newFolder;
- //alert("La cartella(r) " + folderName[folderName.length-2] + "è filgia di " + oldFolderParent);
insertOBJinFS(Folder, tree, folderName, 0);
}
}
}
else {
- //alert("Documento: " + entry[i].childNodes[0].nodeValue);
- //creo il nome del file
var fileName = entry[i].childNodes[0].nodeValue.split("/");
- //creo il path
- var filePath = "https://lcappelli_student.unife.it:61nerdolo@oc-chnet.cr.cnaf.infn.it:8443" + entry[i].childNodes[0].nodeValue;
- //creo l'oggetto documento
+ var filePath = "https://oc-chnet.cr.cnaf.infn.it:8443"
+ + entry[i].childNodes[0].nodeValue;
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;
}
+//funzione che posiziona l'oggetto passato in input nell'albero
function insertOBJinFS(objfs, tree, objfsName, type) {
+ //determino la profondità dell'oggetto (se è un file devo aggiungere 1 a causa si "/")
var depth = objfsName.length;
if (type)
- depth++; //se è un file aumento la profonditÃ
+ depth++;
+ //in base alla profondità determino a quale oggetto agganciare quello in input
var treePosition;
switch (depth) {
case 8:
@@ -210,66 +133,62 @@ function insertOBJinFS(objfs, tree, objfsName, type) {
treePosition = tree[tree.length - 1].nodes;
break;
case 10:
- treePosition = tree[tree.length - 1].nodes[tree[tree.length - 1].nodes.length - 1].nodes;
+ 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;
+ 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;
+ 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 = 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']);
+//funzione che dato l'url di un file, lo apre e lo legge passandone il contenuto
+//alla funzione readData(). Questa funzione è invocata quando viene selezionato
+//un file dall'albero
+function openFileFromServer(url) {
+ var fileName = url.split("/");
+ console.log("Try to open " + fileName[fileName.length - 1] + " ...");
+ var txtFile = new XMLHttpRequest();
+ txtFile.open("GET", url, true);
+ txtFile.onreadystatechange = function () {
+ if (txtFile.readyState === 4) {
+ if (txtFile.status === 200) {
+ if (url != "oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/log.txt") {
+ readData((txtFile.responseText));
+ }
+ }
}
- });
- //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);
- };
};
- //compressione sidenav settings
+ txtFile.send(null);
+}
+//funzione per la compressione della sidenav dx
+function compressingSidenavSettings() {
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";
+ $('#mySidenavSet').css('width', "0");
+ $('#wrapper').css('marginRight', "0");
+ $('#setbtn').css('marginRight', "-2px");
}
else {
isClosedSettings = true;
- document.getElementById("mySidenavSet").style.width = "250px";
- document.getElementById("wrapper").style.marginRight = "250px";
- document.getElementById("setbtn").style.marginRight = "248px";
+ $('#mySidenavSet').css('width', "250px");
+ $('#wrapper').css('marginRight', "250px");
+ $('#setbtn').css('marginRight', "248px");
}
}
- //compressione sidenav file system
+}
+//funzione per la compressione della sidenav sx
+function compressingSidenavFS() {
var fsLabel = $('.fs-label');
var isClosedfs = false;
fsLabel.click(function () { fsLabel_cross(); });
@@ -278,107 +197,169 @@ $(document).ready(function () {
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";
+ $('#mySidenavfs').css('width', "0");
+ $('#wrapper').css('marginLeft', "0");
+ $('#fsbtn').css('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";
+ $('#mySidenavfs').css('width', "250px");
+ $('#wrapper').css('marginLeft', "250px");
+ $('#fsbtn').css('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
+//funzione che definisce l'area su cui si può eseguire il drag&drop
+function makeDroppable(droppableArea, callback) {
+ //creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
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);
+ droppableArea.appendChild(input);
//questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
- ele.addEventListener('dragover', function (e) {
+ droppableArea.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
+ droppableArea.classList.add('dragover');
});
//l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
- ele.addEventListener('dragleave', function (e) {
+ droppableArea.addEventListener('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
- ele.classList.remove('dragover');
+ droppableArea.classList.remove('dragover');
});
//questo evento si innesca quando il drop è effettivamente avvenuto
- ele.addEventListener('drop', function (e) {
+ droppableArea.addEventListener('drop', function (e) {
e.preventDefault();
e.stopPropagation();
- ele.classList.remove('dragover');
- triggerCallback(e);
+ droppableArea.classList.remove('dragover');
+ callback.call(null, e.dataTransfer.files);
});
- //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;
+//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
+//della sua lettura e del passaggio del suo contenuto alla funzione readData()
+function callback(files) {
+ console.log("Try to open " + files[files.length - 1].name + " ...");
+ var readerObject = new FileReader();
+ readerObject.readAsBinaryString(files[files.length - 1]);
+ readerObject.onload = function () {
+ var fileString = readerObject.result;
+ readData(fileString);
+ };
+}
+//la funzione prepara i dati per il grafico completo
+function setDataForCompleteChart() {
+ //per ogni pixel sommo i conteggi di tutti i canali rilevati
+ var dataForChart = new Array(16384);
+ for (var i = 0; i < 16384; i++) {
+ dataForChart[i] = 0;
}
- callback.call(null, files);
+ 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
+ for (var i = 0; i < 16348; i++) {
+ dataCompleteChart += (i + 1) + "," + dataForChart[i] + "\n";
+ dataCompleteChartCalibrated += round3(((i + 1) * a - b) / 1000) + "," + dataForChart[i] + "\n";
+ }
+}
+//La funzione riceve in input un vettore di cui somma gli elementi compresi tra
+//gli indici from e to
+function sumVect(vect, from, to) {
+ var sum = 0;
+ for (var i = from; i < to; i++) {
+ sum += vect[i];
+ }
+ return sum;
+}
+//La funzione riceve in input la matrice e gli estremi della sottomatrice di cui
+//calcola 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;
+}
+//Funzione per arrotondare il numero in input alla terza cifra decimale
+function round3(val) {
+ return (Math.round(val * Math.pow(10, 3)) / Math.pow(10, 3));
+}
+//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) / pixelDim) + newOrigin.xp;
+ pixel.yp = Math.floor((allY - objY - 1) / pixelDim) + newOrigin.yp;
}
-/*
-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.
-*/
+//la funzione findPosDown memorizza la posizione del pixel cliccato
+function findPosDown(event) {
+ findPosition(event, zPixel1);
+}
+//la funzione findPosUp memorizza la posizione del pixel quando il mouse viene
+//rilasciato, ordina le coordinate, aggiorna l'origine e la pagina.
+function findPosUp(event) {
+ findPosition(event, zPixel2);
+ 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;
+ }
+ //se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
+ //canvas e aggiorno l'origine
+ 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);
+}
+// 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) {
+ newOrigin = { xp: 0, yp: 0 }; //origine nel caso di zoom
+ var passo = 0; //dimensione di un pixel in micorn
+ var readMode; //direzione di lettura
+ //coordinate minime e massime in entrambe le dimensioni
+ var xMin = 0, yMin = 0, xMax = 0, yMax = 0;
+ //array con il contenuto del file di input suddiviso per righe
var fileStringArray = fileString.split("\n");
- var readMode;
- var xMin = 0, yMin = 0;
- var xMax = 0, yMax = 0;
- //alert(fileStringArray);
+ //scorro l'array soffermandomi solo sulle righe "intestazione delle x". Devo
+ //determinare ascisse e cordinate minime e massime, il passo e la direzione di
+ //scansione
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]);
@@ -387,16 +368,11 @@ function readData(fileString) {
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
+ //se sto leggendo per colonne determino xMax leggendo 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') {
+ //se la riga è "intestazione x" memorizzo xMax e lo confronto con xMin
+ if (parseInt(fileStringArray[j]) > 17000 && fileStringArray[j][0] == '5') {
xMax = parseInt(fileStringArray[j]);
if (xMax < xMin) {
var t = xMax;
@@ -409,16 +385,11 @@ function readData(fileString) {
}
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
+ //se sto leggendo per righe determino yMax leggendo 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') {
+ //se la riga è "intestazione y" memorizzo yMax e lo confronto con yMin
+ if (parseInt(fileStringArray[j]) > 17000 && fileStringArray[j][0] == '6') {
yMax = parseInt(fileStringArray[j]);
if (yMax < yMin) {
var t = yMax;
@@ -429,25 +400,15 @@ function readData(fileString) {
}
}
}
- //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
- */
+ } //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
+ //A seconda della direzione di lettura 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 (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '6') {
if (yMin > parseInt(fileStringArray[i])) {
yMin = parseInt(fileStringArray[i]);
}
@@ -455,17 +416,14 @@ function readData(fileString) {
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
+ //alla terza colonna posso uscire perché ho già tutte le informazioni
if (parseInt(fileStringArray[i]) == xMin + (passo * 2)) {
break;
}
}
- else if (readMode == 'r') {
+ else {
//mi soffermo sulle righe "intestazione x"
- if (parseInt(fileStringArray[i]) > 17000
- && fileStringArray[i][0] == '5') {
- //cerco xMin e xMax
+ if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '5') {
if (xMin > parseInt(fileStringArray[i])) {
xMin = parseInt(fileStringArray[i]);
}
@@ -473,38 +431,25 @@ function readData(fileString) {
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
+ //alla terza colonna posso uscire perché ho già tutte le informazioni
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
- */
+ } //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
+ //Risolvo gli shift
for (var i = 0; i < fileStringArray.length; i++) {
- //se leggo per colonne allora aggiungo 1passo alle y di tutte le colonne
- //dispari
+ //se leggo per colonne allora aggiungo 1 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();
+ 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();
+ 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
- */
+ //Definisco le dimensioni della matrice DataMatrix e la inizializzo
if (readMode == 'c') {
xDim = (xMax - xMin) / passo + 1;
yDim = (yMax - yMin) / passo - 2;
@@ -514,10 +459,6 @@ function readData(fileString) {
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);
@@ -528,47 +469,38 @@ function readData(fileString) {
}
}
}
- /*
- ora devo scorrere l'array con il contenuto del file per riempire la matrice
- */
+ //riempio la matrice DataMatrix eliminando i bordi
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
+ var x, y, write;
+ //riga "intestazione x": memorizzo le x e le y del punto e avanzo al conteggio
+ if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '5') {
x = (parseInt(fileStringArray[i]) - xMin);
+ y = (parseInt(fileStringArray[i + 1]) - yMin);
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) {
+ //non è un pixel del bordo e sto leggendo per colonne: i successivi valori
+ //sono da considerare
+ if (readMode == 'c' && y != 0 && y != 1 && y != (yMax - yMin) / passo &&
+ y != (yMax - yMin) / passo + 1) {
write = true;
- y -= 2;
+ y -= 2; //aggiorno la y con i bordi tagliati
}
- else if (readMode == 'r' && x != 0 && x != 1 &&
- x != (xMax - xMin) / passo && x != (xMax - xMin) / passo + 1) {
+ else if (readMode == 'r' && x != 0 && x != 1 && x != (xMax - xMin) / passo &&
+ x != (xMax - xMin) / passo + 1) {
write = true;
- x -= 2;
+ x -= 2; //aggiorno la x con i bordi tagliati
}
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
+ //inserisco il conteggio nella matrice (occhio all'orientamento)
DataMatrix[xDim - x - 1][yDim - y - 1][parseInt(fileStringArray[i])] += 1;
}
}
@@ -580,220 +512,137 @@ function readData(fileString) {
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
+ //definisco i dati per il grafico completo
setDataForCompleteChart();
- alert("Dati caricati con successo");
+ console.log("File open with succes");
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.
-*/
+//la funzione drawImg disegna il canvas con l'immagine desiderata ed è responsabile
+//della gestione di tutti gli eventi ad essa associati
function drawImg(pixel1, pixel2, xMinRange, xMaxRange) {
- //determino le dimensioni del canvas e le dimensioni dei pixel per
- //questo disegno
+ //dimensioni pixel
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);
+ var mappaPannelDim = document.querySelector('#mappa-pannel').getBoundingClientRect();
+ var mappaWidth = mappaPannelDim.right - mappaPannelDim.left - 20;
+ var mappaHeigth = mappaPannelDim.bottom - mappaPannelDim.top - 50;
+ var dimPixelx = Math.floor(mappaWidth / nPixelX);
+ var dimPixely = Math.floor(mappaHeigth / 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
+ document.getElementById("myCanvas").height = nPixelY * pixelDim;
+ document.getElementById("myCanvas").width = nPixelX * pixelDim;
+ var ctx = document.getElementById('myCanvas').getContext('2d'); //contesto del canvas
if (xMaxRange - xMinRange >= 55) {
- //controllo se devo colorare con il massimo assoluto o con quello
- //relativo
- var max;
+ var max; //massimo relativo o assoluto
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);
+ max = (max * document.getElementById("SaturationSlider").value) / 100; //saturazione
+ drawCanvas(nOfCounts, max); //disegno
}
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
+ //calcolo il numero di conteggi solo dei canali selezionati
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);
+ nOfCountsRelative[i][j] = sumVect(DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
}
}
//calcolo il massimo
var max;
- if (rePrint)
+ if (rePrint) {
max = findMax(nOfCountsRelative, pixel1, pixel2);
- else
+ }
+ 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);
+ }
+ max = (max * document.getElementById("SaturationSlider").value) / 100; //saturazione
+ drawCanvas(nOfCountsRelative, max); //disegno
}
- /*
- 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.
- */
+ //La funzione, ricevuti dati e massimo, 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;
+ //controllo il valore della trasparenza
+ var setTrsp = 1 - document.getElementById("TrasparencySlider").value / 100;
+ //scorro tutti i pixel: ne determino il colore e li disegno
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 + ")";
+ 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 + ")";
+ 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 + ")";
+ 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 + ")";
+ 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 + ")";
+ 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);
+ rePrint = false; //annullo rePrint
}
- /*
- 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 () {
+ $("#SaturationSlider").mouseup(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 () {
+ });
+ $("#rePlot").click(function () {
rePrint = true;
- satSlider.value = "100";
+ document.getElementById("SaturationSlider").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 () {
+ });
+ $("#TrasparencySlider").mouseup(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 () {
+ });
+ $("#reset").click(function () {
newOrigin = { xp: 0, yp: 0 };
rePrint = false;
calibrated = false;
globalxMinRange = 0;
globalxMaxRange = 55;
- satSlider.value = "100";
- trspSlider.value = "0";
+ document.getElementById("SaturationSlider").value = "100";
+ document.getElementById("TrasparencySlider").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;
+ });
+ $("#ExportImage").click(function () {
+ var img = document.getElementById("myCanvas").toDataURL("image/png");
+ $("#ExportImage").attr("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
-*/
+//la funzione drawChart (input: estremi dell'immagine, estremi dell'intervallo)
+//disegna il grafico richiesto relativo alla mappa visualizzata
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
+ //disegno il grafico completo
+ if (pixel1.xp == 0 && pixel1.yp == 0 && pixel2.xp == xDim - 1 && pixel2.yp == yDim - 1) {
if (!calibrated) {
- var chartTitle = "Chart from (0, 0) to (" + (xDim - 1) + ", "
- + (yDim - 1) + ")";
+ 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) + ")";
+ 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
+ //determino i conteggi dei pixel da disegnare
var dataForChart = new Array(16384);
for (var i = 0; i < 16384; i++) {
dataForChart[i] = 0;
@@ -805,152 +654,62 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
}
}
}
- //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) + ")";
+ 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) + ")";
+ 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";
+ 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) + ")";
+ 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) + ")";
+ 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 () {
+ $('#setlinearButton').on('click', function () {
g.updateOptions({ logscale: false });
- setlinearButton.disabled = true;
- setlogButton.disabled = false;
- };
- setlogButton.onclick = function () {
+ });
+ $('#setlogButton').on('click', function () {
g.updateOptions({ logscale: true });
- setlinearButton.disabled = false;
- setlogButton.disabled = true;
- };
- setEnergyButton.onclick = function () {
+ });
+ $('#setEnergyButton').on('click', function () {
calibrated = true;
drawChart(pixel1, pixel2, 0, 55);
box1.setAttribute("value", "0");
box2.setAttribute("value", "55");
- };
- setChannelsButton.onclick = function () {
+ });
+ $('#setChannelsButton').on('click', function () {
calibrated = false;
drawChart(pixel1, pixel2, 0, 55);
box1.setAttribute("value", "-");
box2.setAttribute("value", "-");
- };
- ExportGraphButton.onclick = function () {
+ });
+ $('#ExportGraph').on('click', function () {
var img = document.getElementById("chartToImg");
Dygraph.Export.asPNG(g, img);
- ExportGraphButton.href = img.src.replace('image/png', 'image/octet-stream');
- };
- SubmitRangeButton.onclick = function () {
+ document.getElementById("ExportGraph").href = img.src.replace('image/png', 'image/octet-stream');
+ });
+ $('#readSpinbox').on('click', 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 () {
+ });
+ $('#chart').on('click', function () {
var r;
r = g.xAxisRange();
if (!calibrated) {
@@ -966,179 +725,120 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
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 () {
+ });
+ $('#elementSelect').on('change', 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];
- }
+ });
+ //la funzione setChart riceve in input i dati e il titolo del grafico da disegnare
+ //il quale è restituito il output
+ function setChart(dataString, charTitle) {
+ var xArrayRange; //estremi asse x da visualizzare
+ var xLab;
+ if (!calibrated) {
+ xArrayRange = [0, 16383];
+ xLab = "ADC Channel";
}
- }
- //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];
- }
+ else {
+ xArrayRange = [xMinRange, xMaxRange];
+ xLab = "Energy (keV)";
}
+ //dimensioni grafico
+ var chartDim = document.querySelector('#chart-pannel').getBoundingClientRect();
+ var chartWidth = chartDim.right - chartDim.left - 50;
+ $('#chart').css('width', chartWidth);
+ var chartHeight = chartDim.bottom - chartDim.top - 100;
+ $('#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
+ });
+ //dimensioni responsive alle sideNav
+ $('#fsbtn').on('click', function () {
+ setTimeout(function () {
+ g = setChart(dataString, charTitle);
+ drawImg(pixel1, pixel2, xMinRange, xMaxRange);
+ }, 400);
+ });
+ $('#setbtn').on('click', function () {
+ setTimeout(function () {
+ g = setChart(dataString, charTitle);
+ drawImg(pixel1, pixel2, xMinRange, xMaxRange);
+ }, 400);
+ });
+ return graphs;
}
- 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);
-}
-function sumVect(vect, from, to) {
- var sum = 0;
- for (var i = from; i < to; i++) {
- sum += vect[i];
+ //la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico
+ function peackSelection(xMinRange, xMaxRange) {
+ //se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox
+ if (xMinRange == 0 && xMaxRange == 0) {
+ xMinRange = box1.value;
+ xMaxRange = box2.value;
+ }
+ globalxMinRange = xMinRange;
+ globalxMaxRange = xMaxRange;
+ newOrigin = { xp: 0, yp: 0 };
+ rePrint = false;
+ calibrated = true;
+ 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);
}
- return sum;
}
diff --git a/LoadFile.ts b/LoadFile.ts
index 957ef3157e34ce60c7f8dc577acd5fed6182f8ed..45922b4b2f71392c0742c329f1f4bbaa36fa8a4b 100644
--- a/LoadFile.ts
+++ b/LoadFile.ts
@@ -34,30 +34,23 @@ $(document).ready( function() {
});
-function login(){
-
- $("#logingUser").click(function(){
- openFileFromServer('oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/log.txt');
- });
-
-}
-
//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
//Sono definiti quindi l'albero e il bottone per l'importazione da locale
function setImportFile(){
- //Leggo il contenuto del file XML e ne eseguo il parse
+ //Leggo il contenuto del file json e ne eseguo il parse
var contentfilesystem: any = document.getElementById('contentfilesystem').innerHTML;
- var parser: any = new DOMParser();
- var xmlDoc: any = parser.parseFromString(contentfilesystem, "text/xml");
+ var jsonObject: any = JSON.parse(contentfilesystem);
+
+ alert(jsonObject[0].name);
//ora genero l'albero e definisco l'evento in caso di selezione di un nodo
- $('#FileTreeview').treeview({data: generateTree(xmlDoc)});
- $('#FileTreeview').on('nodeSelected', function(e, node){
- if(node['url'] != undefined){
- openFileFromServer(node['url']);
- }
- });
+ // $('#FileTreeview').treeview({data: generateTree(xmlDoc)});
+ // $('#FileTreeview').on('nodeSelected', function(e, node){
+ // if(node['url'] != undefined){
+ // openFileFromServer(node['url']);
+ // }
+ // });
//bottone per l'importazione locale
var fileInputButton: any = document.getElementById('myImport');
diff --git a/index.php b/index.php
index 470164291ecf93857eb3ac23955692c183c4d98e..b73fc31b34017b44ac78c5ffffd7fda686629ae9 100644
--- a/index.php
+++ b/index.php
@@ -47,25 +47,23 @@
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
<div id="mySidenavfs" class="sidenav">
- <!--<h3> Import File From Server </h3>-->
<?php
echo "<h3>Import File From Server</h3>";
// Generated by curl-to-PHP: http://incarnate.github.io/curl-to-php/
$ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, "https://lcappelli_student.unife.it:61nerdolo@oc-chnet.cr.cnaf.infn.it:8443/owncloud/remote.php/webdav/Documents/XRFfilesystem");
-// curl_setopt($ch, CURLOPT_URL, "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App/RemoteFileSystem/");
+ curl_setopt($ch, CURLOPT_URL, "https://baltig.infn.it/api/v4/projects/819/repository/tree?recursive=1&path=RemoteFileSystem");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
- curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PROPFIND");
+ curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
$headers = array();
- $headers[] = "Depth: infinity";
+ $headers[] = "Private-Token: kEzw3Lo1-T7ZaacK1s9z";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
if (curl_errno($ch)) {
- echo 'Error:' . curl_error($ch);
+ echo 'Error:' . curl_error($ch);
}
curl_close ($ch);