Skip to content
Snippets Groups Projects
Commit 5dfbdedc authored by Laura Cappelli's avatar Laura Cappelli
Browse files

Aggiunta del listing dellla directory

parent 437455c0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
LoadFile.js
+ 399
− 699
View file @ 5dfbdedc
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 a = 3.36275; //costante moltiplicativa per la calibrazione
var b = 58.2353; //costante additiva 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 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 newOrigin; //nuovo origine nel caso di zoom
var zPixel1 = { xp: 0, yp: 0 }; //pixel1 dello zoom var zPixel1 = { xp: 0, yp: 0 }; //pixel1 dello zoom
var zPixel2 = { xp: 0, yp: 0 }; //pixel2 dello zoom var zPixel2 = { xp: 0, yp: 0 }; //pixel2 dello zoom
//var canvasMaxWidth: number = 450; //dim massima della canvas in pt - asse x var dataCompleteChart = "Channel,Counts\n";
//var canvasMaxHeight: number = 500; //dim massima della canvas in pt - asse y var dataCompleteChartCalibrated = "Energy,Counts\n";
var xDim = 0; //numero di pixel dell'immagine sull'asse x var calibrated = false; //variabile per il controllo sulla calibrazione
var yDim = 0; //numero di pixel dell'immagine sull'asse y //INIZIO DELLO SCRIPT
var passo = 0; //dimensione di un pixel in micorn $(document).ready(function () {
var globalxMinRange = 0; //estremo sinistro del range dell'asse x //creazione dell'albero e gestione barre laterali
var globalxMaxRange = 55; //estremo destra del range dell'asse x setImportFile();
var realPixelDim; //dimensione dei pixel responsive compressingSidenavSettings();
//imposto le dimensioni del canvas compressingSidenavFS();
var bb = document.querySelector('#mappa-pannel').getBoundingClientRect(); //abilitazione drag&drop
var maxMappaWidth = bb.right - bb.left - 50; var droppableArea = document.querySelector('.droppable');
var maxMappaHeight = bb.bottom - bb.top - 50; makeDroppable(droppableArea, callback);
//avvio la possibilità di fare il drag&drop login();
var element = document.querySelector('.droppable'); });
makeDroppable(element, callback); //funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
//costruzione dell'albero //Sono definiti quindi l'albero e il bottone per l'importazione da locale
//prima parte: leggo il file con la descrizione della directory function setImportFile() {
// var MapTreeFile = new XMLHttpRequest(); //Leggo il contenuto del file json e ne eseguo il parse
// MapTreeFile.open("GET", "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App/tree.XML", true); var contentfilesystem = document.getElementById('contentfilesystem').innerHTML;
// MapTreeFile.onreadystatechange = function(){ var jsonObject = JSON.parse(contentfilesystem);
// if(MapTreeFile.readyState === 4){ alert(jsonObject[0].name);
// if(MapTreeFile.status === 200){ //ora genero l'albero e definisco l'evento in caso di selezione di un nodo
// var MapTreeText: any = JSON.parse(MapTreeFile.responseText); // $('#FileTreeview').treeview({data: generateTree(xmlDoc)});
// //alert(MapTreeText[0].name); // $('#FileTreeview').on('nodeSelected', function(e, node){
// //creaAlbero(MapTreeText); // if(node['url'] != undefined){
// } // openFileFromServer(node['url']);
// } // }
// } // });
// MapTreeFile.send(null); //bottone per l'importazione locale
// function openTreeFile() { var fileInputButton = document.getElementById('myImport');
// var MapTreeFile = new XMLHttpRequest(); fileInputButton.onchange = function () {
// var obj; var fileName = fileInputButton.files[0];
// MapTreeFile.onreadystatechange = function() { var readerObject = new FileReader();
// if (this.readyState == 4 && this.status == 200) { readerObject.readAsBinaryString(fileName);
// parseTreefile(this); readerObject.onload = function () {
// } var fileString = readerObject.result;
// }; readData(fileString);
// 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 //funzione che genera automaticamente l'albero
function generateTree(xmlDoc) { function generateTree(xmlDoc) {
...@@ -128,79 +55,75 @@ function generateTree(xmlDoc) { ...@@ -128,79 +55,75 @@ function generateTree(xmlDoc) {
var first = true; var first = true;
var oldFolderParent = ""; var oldFolderParent = "";
var oldFolder = ""; 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"); 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++) { for (var i = 0; i < entry.length; i++) {
var path = entry[i].childNodes[0].nodeValue.split(""); var path = entry[i].childNodes[0].nodeValue.split("");
//cartella, creo l'oggetto corrsipondente
if (path[path.length - 1] == "/") { if (path[path.length - 1] == "/") {
//creo il nome della cartella
var folderName = entry[i].childNodes[0].nodeValue.split("/"); var folderName = entry[i].childNodes[0].nodeValue.split("/");
//creo l'oggetto cartella
var Folder = { var Folder = {
text: folderName[folderName.length - 2], text: folderName[folderName.length - 2],
nodes: [] nodes: []
}; };
//alert("Cartella: " + folderName + " n: " + folderName.length); //posiziono la radice del file system, ne memorizzo il path e il padre
//aggiungo l'oggetto cartella nella giusta posizione
if (first) { if (first) {
tree.push(Folder); tree.push(Folder);
first = false; first = false;
//memorizzo il path della cartella e il padre
oldFolder = entry[i].childNodes[0].nodeValue; 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 { else {
//memorizzo il path della cartella corrente e il padre
var newFolder = entry[i].childNodes[0].nodeValue; var newFolder = entry[i].childNodes[0].nodeValue;
var newFolderParent = newFolder.slice(0, newFolder.lastIndexOf(folderName[folderName.length - 2])); var newFolderParent = newFolder.slice(0, newFolder.lastIndexOf(folderName[folderName.length - 2]));
//cartella sorella con quella memorizzata
if (newFolderParent == oldFolderParent) { if (newFolderParent == oldFolderParent) {
//alert("La cartella(s) " + folderName[folderName.length-2] + " è filgia di " + oldFolderParent);
oldFolder = newFolder; oldFolder = newFolder;
insertOBJinFS(Folder, tree, folderName, 0); insertOBJinFS(Folder, tree, folderName, 0);
} }
else if (newFolderParent == oldFolder) { else if (newFolderParent == oldFolder) {
//alert("La cartella(f) " + folderName[folderName.length-2] + " è filgia di " + oldFolder);
oldFolder = newFolder; oldFolder = newFolder;
oldFolderParent = newFolderParent; oldFolderParent = newFolderParent;
insertOBJinFS(Folder, tree, folderName, 0); insertOBJinFS(Folder, tree, folderName, 0);
} }
else { 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) { while (newFolderParent != oldFolderParent) {
oldFolderParent = oldFolderParent.slice(0, oldFolderParent.length - 1); //tolgo "/" finale oldFolderParent = oldFolderParent.slice(0, oldFolderParent.length - 1);
oldFolderParent = oldFolderParent.slice(0, (oldFolderParent.lastIndexOf("/") + 1)); //tolgo il nome della cartella precedente oldFolderParent = oldFolderParent.slice(0, (oldFolderParent.lastIndexOf("/") + 1));
} }
oldFolder = newFolder; oldFolder = newFolder;
//alert("La cartella(r) " + folderName[folderName.length-2] + "è filgia di " + oldFolderParent);
insertOBJinFS(Folder, tree, folderName, 0); insertOBJinFS(Folder, tree, folderName, 0);
} }
} }
} }
else { else {
//alert("Documento: " + entry[i].childNodes[0].nodeValue);
//creo il nome del file
var fileName = entry[i].childNodes[0].nodeValue.split("/"); var fileName = entry[i].childNodes[0].nodeValue.split("/");
//creo il path var filePath = "https://oc-chnet.cr.cnaf.infn.it:8443"
var filePath = "https://lcappelli_student.unife.it:61nerdolo@oc-chnet.cr.cnaf.infn.it:8443" + entry[i].childNodes[0].nodeValue; + entry[i].childNodes[0].nodeValue;
//creo l'oggetto documento
var File = { var File = {
text: fileName[fileName.length - 1], text: fileName[fileName.length - 1],
icon: "glyphicon glyphicon-file", icon: "glyphicon glyphicon-file",
selectedIcon: "glyphicon glyphicon-file", selectedIcon: "glyphicon glyphicon-file",
url: filePath url: filePath
}; };
//aggiungo l'oggetto file nella giusta posizione (da rivedere)
//alert("File: " + fileName);
insertOBJinFS(File, tree, fileName, 1); insertOBJinFS(File, tree, fileName, 1);
} }
} }
return tree; return tree;
} }
//funzione che posiziona l'oggetto passato in input nell'albero
function insertOBJinFS(objfs, tree, objfsName, type) { function insertOBJinFS(objfs, tree, objfsName, type) {
//determino la profondità dell'oggetto (se è un file devo aggiungere 1 a causa si "/")
var depth = objfsName.length; var depth = objfsName.length;
if (type) if (type)
depth++; //se è un file aumento la profondità depth++;
//in base alla profondità determino a quale oggetto agganciare quello in input
var treePosition; var treePosition;
switch (depth) { switch (depth) {
case 8: case 8:
...@@ -210,66 +133,62 @@ function insertOBJinFS(objfs, tree, objfsName, type) { ...@@ -210,66 +133,62 @@ function insertOBJinFS(objfs, tree, objfsName, type) {
treePosition = tree[tree.length - 1].nodes; treePosition = tree[tree.length - 1].nodes;
break; break;
case 10: 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; break;
case 11: 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; break;
case 12: 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; break;
default: break; default: break;
} }
treePosition[treePosition.length - 1].nodes.push(objfs); treePosition[treePosition.length - 1].nodes.push(objfs);
} }
$(document).ready(function () { //funzione che dato l'url di un file, lo apre e lo legge passandone il contenuto
//Qua ottengo il contenuto del file XML //alla funzione readData(). Questa funzione è invocata quando viene selezionato
var contentfilesystem = document.getElementById('contentfilesystem').innerHTML; //un file dall'albero
var parser = new DOMParser(); function openFileFromServer(url) {
var xmlDoc = parser.parseFromString(contentfilesystem, "text/xml"); var fileName = url.split("/");
//ora genero l'albero console.log("Try to open " + fileName[fileName.length - 1] + " ...");
$('#FileTreeview').treeview({ data: getTree() }); //manuale var txtFile = new XMLHttpRequest();
//$('#FileTreeview').treeview({data: generateTree(xmlDoc)}); //automatico txtFile.open("GET", url, true);
$('#FileTreeview').on('nodeSelected', function (e, node) { txtFile.onreadystatechange = function () {
if (node['url'] != undefined) { if (txtFile.readyState === 4) {
openFileFromServer(node['url']); 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 setLabel = $('.btn-settings');
var isClosedSettings = false; var isClosedSettings = false;
setLabel.click(function () { setLabel_cross(); }); setLabel.click(function () { setLabel_cross(); });
function setLabel_cross() { function setLabel_cross() {
if (isClosedSettings == true) { if (isClosedSettings == true) {
isClosedSettings = false; isClosedSettings = false;
document.getElementById("mySidenavSet").style.width = "0"; $('#mySidenavSet').css('width', "0");
document.getElementById("wrapper").style.marginRight = "0"; $('#wrapper').css('marginRight', "0");
document.getElementById("setbtn").style.marginRight = "-2px"; $('#setbtn').css('marginRight', "-2px");
} }
else { else {
isClosedSettings = true; isClosedSettings = true;
document.getElementById("mySidenavSet").style.width = "250px"; $('#mySidenavSet').css('width', "250px");
document.getElementById("wrapper").style.marginRight = "250px"; $('#wrapper').css('marginRight', "250px");
document.getElementById("setbtn").style.marginRight = "248px"; $('#setbtn').css('marginRight', "248px");
} }
} }
//compressione sidenav file system }
//funzione per la compressione della sidenav sx
function compressingSidenavFS() {
var fsLabel = $('.fs-label'); var fsLabel = $('.fs-label');
var isClosedfs = false; var isClosedfs = false;
fsLabel.click(function () { fsLabel_cross(); }); fsLabel.click(function () { fsLabel_cross(); });
...@@ -278,107 +197,169 @@ $(document).ready(function () { ...@@ -278,107 +197,169 @@ $(document).ready(function () {
isClosedfs = false; isClosedfs = false;
fsLabel.removeClass('is-open'); fsLabel.removeClass('is-open');
fsLabel.addClass('is-closed'); fsLabel.addClass('is-closed');
document.getElementById("mySidenavfs").style.width = "0"; $('#mySidenavfs').css('width', "0");
document.getElementById("wrapper").style.marginLeft = "0"; $('#wrapper').css('marginLeft', "0");
document.getElementById("fsbtn").style.marginLeft = "-2px"; $('#fsbtn').css('marginLeft', "-2px");
} }
else { else {
isClosedfs = true; isClosedfs = true;
fsLabel.removeClass('is-closed'); fsLabel.removeClass('is-closed');
fsLabel.addClass('is-open'); fsLabel.addClass('is-open');
document.getElementById("mySidenavfs").style.width = "250px"; $('#mySidenavfs').css('width', "250px");
document.getElementById("wrapper").style.marginLeft = "250px"; $('#wrapper').css('marginLeft', "250px");
document.getElementById("fsbtn").style.marginLeft = "248px"; $('#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) { //funzione che definisce l'area su cui si può eseguire il drag&drop
//creo un elemento "input type file" non visibile nella pagina function makeDroppable(droppableArea, callback) {
//creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
var input = document.createElement('input'); var input = document.createElement('input');
input.setAttribute('type', 'file'); input.setAttribute('type', 'file');
input.setAttribute('multiple', true); input.setAttribute('multiple', true);
input.style.display = 'none'; input.style.display = 'none';
//aggiungo a questo elemento un event listener al change droppableArea.appendChild(input);
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 //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.preventDefault(); //impediamo l'apertura del file
e.stopPropagation(); e.stopPropagation();
e.dataTransfer.dropEffect = 'copy'; 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 //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.preventDefault();
e.stopPropagation(); e.stopPropagation();
ele.classList.remove('dragover'); droppableArea.classList.remove('dragover');
}); });
//questo evento si innesca quando il drop è effettivamente avvenuto //questo evento si innesca quando il drop è effettivamente avvenuto
ele.addEventListener('drop', function (e) { droppableArea.addEventListener('drop', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
ele.classList.remove('dragover'); droppableArea.classList.remove('dragover');
triggerCallback(e); 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 //funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
function triggerCallback(e) { //della sua lettura e del passaggio del suo contenuto alla funzione readData()
var files; //array di file function callback(files) {
//controlliamo se il file è stato scelto o se è stato droppato console.log("Try to open " + files[files.length - 1].name + " ...");
if (e.dataTransfer) { var readerObject = new FileReader();
files = e.dataTransfer.files; 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 findPosDown memorizza la posizione del pixel cliccato
La funzione readData() prende in ingresso il file di input memorizzato nella function findPosDown(event) {
stringa "fileString". La funzione riempie la matrice "DataMatrix" con i dati findPosition(event, zPixel1);
in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate }
anche altre variabili necessarie per il resto del codice. //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) { 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 fileStringArray = fileString.split("\n");
var readMode; //scorro l'array soffermandomi solo sulle righe "intestazione delle x". Devo
var xMin = 0, yMin = 0; //determinare ascisse e cordinate minime e massime, il passo e la direzione di
var xMax = 0, yMax = 0; //scansione
//alert(fileStringArray);
for (var i = 0; i < fileStringArray.length; i++) { 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') { 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) { if (xMin == 0) {
xMin = parseInt(fileStringArray[i]); xMin = parseInt(fileStringArray[i]);
yMin = parseInt(fileStringArray[i + 1]); yMin = parseInt(fileStringArray[i + 1]);
...@@ -387,16 +368,11 @@ function readData(fileString) { ...@@ -387,16 +368,11 @@ function readData(fileString) {
else { else {
if (parseInt(fileStringArray[i]) == xMin) { if (parseInt(fileStringArray[i]) == xMin) {
readMode = 'c'; readMode = 'c';
//determino il passo (lato del pixel in micorn)
passo = Math.abs(yMin - fileStringArray[i + 1]); passo = Math.abs(yMin - fileStringArray[i + 1]);
//se sto leggendo per colonne posso determinare qual'è xMax //se sto leggendo per colonne determino xMax leggendo dalla fine
//leggendo il vettore partendo dalla fine
for (var j = fileStringArray.length; j > i; j--) { for (var j = fileStringArray.length; j > i; j--) {
//se la riga è "intestazione x" memorizzo xMax, lo //se la riga è "intestazione x" memorizzo xMax e lo confronto con xMin
//confronto con xMin per vedere se occorre scambiarlo ed if (parseInt(fileStringArray[j]) > 17000 && fileStringArray[j][0] == '5') {
//esco
if (parseInt(fileStringArray[j]) > 17000 &&
fileStringArray[j][0] == '5') {
xMax = parseInt(fileStringArray[j]); xMax = parseInt(fileStringArray[j]);
if (xMax < xMin) { if (xMax < xMin) {
var t = xMax; var t = xMax;
...@@ -409,16 +385,11 @@ function readData(fileString) { ...@@ -409,16 +385,11 @@ function readData(fileString) {
} }
else { else {
readMode = 'r'; readMode = 'r';
//determino il passo (lato del pixel in micorn)
passo = Math.abs(xMin - fileStringArray[i]); passo = Math.abs(xMin - fileStringArray[i]);
//se sto leggendo per righe posso determinare qual'è yMax //se sto leggendo per righe determino yMax leggendo dalla fine
//leggendo il vettore partendo dalla fine
for (var j = fileStringArray.length; j > i; j--) { for (var j = fileStringArray.length; j > i; j--) {
//se la riga è "intestazione y" memorizzo yMax, lo //se la riga è "intestazione y" memorizzo yMax e lo confronto con yMin
//confronto con yMin per vedere se occorre scambiarlo ed if (parseInt(fileStringArray[j]) > 17000 && fileStringArray[j][0] == '6') {
//esco
if (parseInt(fileStringArray[j]) > 17000 &&
fileStringArray[j][0] == '6') {
yMax = parseInt(fileStringArray[j]); yMax = parseInt(fileStringArray[j]);
if (yMax < yMin) { if (yMax < yMin) {
var t = yMax; var t = yMax;
...@@ -429,25 +400,15 @@ function readData(fileString) { ...@@ -429,25 +400,15 @@ function readData(fileString) {
} }
} }
} }
//a questo punto posso uscire dal ciclo
break; break;
} }
} }
} } //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
//alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo); //A seconda della direzione di lettura determino o yMin e yMax, o xMin e xMax
/*
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++) { for (var i = 2; i < fileStringArray.length; i++) {
//se leggo per colonne devo deterinare yMin e yMax
if (readMode == 'c') { if (readMode == 'c') {
//mi soffermo sulle righe "intestazione y" //mi soffermo sulle righe "intestazione y"
if (parseInt(fileStringArray[i]) > 17000 if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '6') {
&& fileStringArray[i][0] == '6') {
//cerco yMin e yMax
if (yMin > parseInt(fileStringArray[i])) { if (yMin > parseInt(fileStringArray[i])) {
yMin = parseInt(fileStringArray[i]); yMin = parseInt(fileStringArray[i]);
} }
...@@ -455,17 +416,14 @@ function readData(fileString) { ...@@ -455,17 +416,14 @@ function readData(fileString) {
yMax = parseInt(fileStringArray[i]); yMax = parseInt(fileStringArray[i]);
} }
} }
//quando arrivo a leggere la terza colonna sono sicura di aver già //alla terza colonna posso uscire perché ho già tutte le informazioni
//trovato yMin e yMax quindi posso uscire dal ciclo
if (parseInt(fileStringArray[i]) == xMin + (passo * 2)) { if (parseInt(fileStringArray[i]) == xMin + (passo * 2)) {
break; break;
} }
} }
else if (readMode == 'r') { else {
//mi soffermo sulle righe "intestazione x" //mi soffermo sulle righe "intestazione x"
if (parseInt(fileStringArray[i]) > 17000 if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '5') {
&& fileStringArray[i][0] == '5') {
//cerco xMin e xMax
if (xMin > parseInt(fileStringArray[i])) { if (xMin > parseInt(fileStringArray[i])) {
xMin = parseInt(fileStringArray[i]); xMin = parseInt(fileStringArray[i]);
} }
...@@ -473,38 +431,25 @@ function readData(fileString) { ...@@ -473,38 +431,25 @@ function readData(fileString) {
xMax = parseInt(fileStringArray[i]); xMax = parseInt(fileStringArray[i]);
} }
} }
//quando arrivo a leggere la terza riga sono sicura di aver già //alla terza colonna posso uscire perché ho già tutte le informazioni
//trovato xMin e xMax quindi posso uscire dal ciclo
if (parseInt(fileStringArray[i]) == yMin + 2000) { if (parseInt(fileStringArray[i]) == yMin + 2000) {
break; break;
} }
} }
} } //alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo);
//alert(xMin + " " + xMax + " " + yMin + " " + yMax + " " + passo); //Risolvo gli shift
/*
a questo punto ho xMin, xMax, yMin e yMax; percorro l'array sistemando gli
shift
*/
for (var i = 0; i < fileStringArray.length; i++) { for (var i = 0; i < fileStringArray.length; i++) {
//se leggo per colonne allora aggiungo 1passo alle y di tutte le colonne //se leggo per colonne allora aggiungo 1 alle y di tutte le colonne dispari
//dispari
if (readMode == 'c' && parseInt(fileStringArray[i]) > 17000 && if (readMode == 'c' && parseInt(fileStringArray[i]) > 17000 &&
fileStringArray[i][0] == '5' && fileStringArray[i][0] == '5' && (parseInt(fileStringArray[i]) / 1000) % 2 != 0) {
(parseInt(fileStringArray[i]) / 1000) % 2 != 0) { fileStringArray[i + 1] = (parseInt(fileStringArray[i + 1]) + passo).toString();
fileStringArray[i + 1] =
(parseInt(fileStringArray[i + 1]) + passo).toString();
} }
else if (readMode == 'r' && parseInt(fileStringArray[i]) > 17000 && else if (readMode == 'r' && parseInt(fileStringArray[i]) > 17000 &&
fileStringArray[i][0] == '5' && fileStringArray[i][0] == '5' && (parseInt(fileStringArray[i + 1]) / 1000) % 2 != 0) {
(parseInt(fileStringArray[i + 1]) / 1000) % 2 != 0) { fileStringArray[i] = (parseInt(fileStringArray[i]) + passo).toString();
fileStringArray[i] =
(parseInt(fileStringArray[i]) + passo).toString();
} }
} }
/*Ora che ho le posizioni corrette di ogni pixel posso riempire la matrice //Definisco le dimensioni della matrice DataMatrix e la inizializzo
che conterrà tutti i dati e sulla quale si opererà in tutto il programma.
Definisco le dimensioni di tale matrice
*/
if (readMode == 'c') { if (readMode == 'c') {
xDim = (xMax - xMin) / passo + 1; xDim = (xMax - xMin) / passo + 1;
yDim = (yMax - yMin) / passo - 2; yDim = (yMax - yMin) / passo - 2;
...@@ -514,10 +459,6 @@ function readData(fileString) { ...@@ -514,10 +459,6 @@ function readData(fileString) {
yDim = (yMax - yMin) / passo + 1; yDim = (yMax - yMin) / passo + 1;
} }
//alert(xDim + " " + yDim); //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); DataMatrix = new Array(xDim);
for (var i = 0; i < xDim; i++) { for (var i = 0; i < xDim; i++) {
DataMatrix[i] = new Array(yDim); DataMatrix[i] = new Array(yDim);
...@@ -528,47 +469,38 @@ function readData(fileString) { ...@@ -528,47 +469,38 @@ function readData(fileString) {
} }
} }
} }
/* //riempio la matrice DataMatrix eliminando i bordi
ora devo scorrere l'array con il contenuto del file per riempire la matrice
*/
for (var i = 0; i < fileStringArray.length; i++) { for (var i = 0; i < fileStringArray.length; i++) {
var x; var x, y, write;
var y; //riga "intestazione x": memorizzo le x e le y del punto e avanzo al conteggio
var write; if (parseInt(fileStringArray[i]) > 17000 && fileStringArray[i][0] == '5') {
//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); x = (parseInt(fileStringArray[i]) - xMin);
y = (parseInt(fileStringArray[i + 1]) - yMin);
if (x != 0) { if (x != 0) {
x /= passo; x /= passo;
} }
y = (parseInt(fileStringArray[i + 1]) - yMin);
if (y != 0) { if (y != 0) {
y /= passo; y /= passo;
} }
i++; i++;
//se non è un pixel del bordo e sto leggendo per colonne allora //non è un pixel del bordo e sto leggendo per colonne: i successivi valori
//segnalo che i successivi valori sono da considerare e sistemo //sono da considerare
//la y del pixel così da normalizzarla dopo il taglio dei bordi if (readMode == 'c' && y != 0 && y != 1 && y != (yMax - yMin) / passo &&
if (readMode == 'c' && y != 0 && y != 1 && y != (yMax - yMin) / passo y != (yMax - yMin) / passo + 1) {
&& y != (yMax - yMin) / passo + 1) {
write = true; write = true;
y -= 2; y -= 2; //aggiorno la y con i bordi tagliati
} }
else if (readMode == 'r' && x != 0 && x != 1 && else if (readMode == 'r' && x != 0 && x != 1 && x != (xMax - xMin) / passo &&
x != (xMax - xMin) / passo && x != (xMax - xMin) / passo + 1) { x != (xMax - xMin) / passo + 1) {
write = true; write = true;
x -= 2; x -= 2; //aggiorno la x con i bordi tagliati
} }
else { else {
write = false; write = false;
} }
} }
else if (parseInt(fileStringArray[i]) < 17000 && write == true) { else if (parseInt(fileStringArray[i]) < 17000 && write == true) {
//Aggiorno i dati nella matrice DataMatrix invertendo la posizione //inserisco il conteggio nella matrice (occhio all'orientamento)
//delle x e delle y
DataMatrix[xDim - x - 1][yDim - y - 1][parseInt(fileStringArray[i])] += 1; DataMatrix[xDim - x - 1][yDim - y - 1][parseInt(fileStringArray[i])] += 1;
} }
} }
...@@ -580,220 +512,137 @@ function readData(fileString) { ...@@ -580,220 +512,137 @@ function readData(fileString) {
nOfCounts[i][j] = sumVect(DataMatrix[i][j], 0, DataMatrix[i][j].length); 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 //calcolo il conteggio massimo della matrice
maxAbsolute = findMax(nOfCounts, { xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }); 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 //definisco i dati per il grafico completo
//interezza e disegnare l'immagine
setDataForCompleteChart(); 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); 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); drawChart({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55);
} }
/* //la funzione drawImg disegna il canvas con l'immagine desiderata ed è responsabile
la funzione drawImg disegna il canvas con l'immagine selezionata: può essere //della gestione di tutti gli eventi ad essa associati
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) { function drawImg(pixel1, pixel2, xMinRange, xMaxRange) {
//determino le dimensioni del canvas e le dimensioni dei pixel per //dimensioni pixel
//questo disegno
var nPixelX = pixel2.xp - pixel1.xp + 1; var nPixelX = pixel2.xp - pixel1.xp + 1;
var nPixelY = pixel2.yp - pixel1.yp + 1; var nPixelY = pixel2.yp - pixel1.yp + 1;
var dimPixelx = Math.floor(maxMappaWidth / nPixelX); var mappaPannelDim = document.querySelector('#mappa-pannel').getBoundingClientRect();
var dimPixely = Math.floor(maxMappaHeight / nPixelY); 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; pixelDim = (dimPixelx < dimPixely) ? dimPixelx : dimPixely;
var canvas = document.getElementById("myCanvas"); document.getElementById("myCanvas").height = nPixelY * pixelDim;
canvas.height = nPixelY * pixelDim; document.getElementById("myCanvas").width = nPixelX * pixelDim;
canvas.width = nPixelX * pixelDim; var ctx = document.getElementById('myCanvas').getContext('2d'); //contesto del canvas
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) { if (xMaxRange - xMinRange >= 55) {
//controllo se devo colorare con il massimo assoluto o con quello var max; //massimo relativo o assoluto
//relativo
var max;
if (rePrint) if (rePrint)
max = findMax(nOfCounts, pixel1, pixel2); max = findMax(nOfCounts, pixel1, pixel2);
else else
max = maxAbsolute; max = maxAbsolute;
//controllo se è richiesta saturazione del massimo max = (max * document.getElementById("SaturationSlider").value) / 100; //saturazione
max = (max * document.getElementById("SaturationSlider").value) / 100; drawCanvas(nOfCounts, max); //disegno
//disegno la canvas passando la matrice con i dati e il massimo
drawCanvas(nOfCounts, max);
} }
else { else {
//determino i canali da xMinRange e xMaxRange
var xMinRangeCh = Math.floor((((xMinRange * 1000) + b) / a) - 1); //16 var xMinRangeCh = Math.floor((((xMinRange * 1000) + b) / a) - 1); //16
var xMaxRangeCh = Math.floor((((xMaxRange * 1000) + b) / a) - 1); //16371 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; var nOfCountsRelative;
nOfCountsRelative = new Array(xDim); nOfCountsRelative = new Array(xDim);
for (var i = 0; i < xDim; i++) { for (var i = 0; i < xDim; i++) {
nOfCountsRelative[i] = new Array(yDim); nOfCountsRelative[i] = new Array(yDim);
for (var j = 0; j < yDim; j++) { for (var j = 0; j < yDim; j++) {
nOfCountsRelative[i][j] = nOfCountsRelative[i][j] = sumVect(DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
sumVect(DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
} }
} }
//calcolo il massimo //calcolo il massimo
var max; var max;
if (rePrint) if (rePrint) {
max = findMax(nOfCountsRelative, pixel1, pixel2); max = findMax(nOfCountsRelative, pixel1, pixel2);
else }
else {
max = findMax(nOfCountsRelative, { xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }); 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 max = (max * document.getElementById("SaturationSlider").value) / 100; //saturazione
drawCanvas(nOfCountsRelative, max); drawCanvas(nOfCountsRelative, max); //disegno
} }
/* //La funzione, ricevuti dati e massimo, disegna la mappa nel canvas
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) { function drawCanvas(noc, max) {
//alert(pixel1.xp + " " + pixel1.yp + " " + pixel2.xp + " " + pixel2.yp); //controllo il valore della trasparenza
//scorro tutti i pixel da disegnare: ne determino il colore e li disegno var setTrsp = 1 - document.getElementById("TrasparencySlider").value / 100;
//nella giusta posizione. //scorro tutti i pixel: ne determino il colore e li disegno
//prima verifico se devo aggiungere una trasparenza ai pixel
var setTrsp = 1 -
document.getElementById("TrasparencySlider").value / 100;
var color = ""; var color = "";
for (var i = pixel1.xp; i <= pixel2.xp; i++) { for (var i = pixel1.xp; i <= pixel2.xp; i++) {
for (var j = pixel1.yp; j <= pixel2.yp; j++) { for (var j = pixel1.yp; j <= pixel2.yp; j++) {
var intensity = noc[i][j] / max; var intensity = noc[i][j] / max;
if (intensity < 1 / 5) if (intensity < 1 / 5)
color = "rgba(0, 0, " + Math.floor(intensity * 5 * 255) + "," + color = "rgba(0, 0, " + Math.floor(intensity * 5 * 255) + "," + setTrsp + ")";
setTrsp + ")";
else if (1 / 5 <= intensity && intensity < 2 / 5) else if (1 / 5 <= intensity && intensity < 2 / 5)
color = "rgba(0, " + Math.floor((intensity - 1 / 5) * 5 * 255) + ",255, " color = "rgba(0, " + Math.floor((intensity - 1 / 5) * 5 * 255) + ",255, " + setTrsp + ")";
+ setTrsp + ")";
else if (2 / 5 <= intensity && intensity < 3 / 5) else if (2 / 5 <= intensity && intensity < 3 / 5)
color = "rgba(0, 255, " + (255 - Math.floor((intensity - 2 / 5) * 5 * 255)) color = "rgba(0, 255, " + (255 - Math.floor((intensity - 2 / 5) * 5 * 255)) + ", " + setTrsp + ")";
+ ", " + setTrsp + ")";
else if (3 / 5 <= intensity && intensity < 4 / 5) else if (3 / 5 <= intensity && intensity < 4 / 5)
color = "rgba(" + Math.floor((intensity - 3 / 5) * 5 * 255) + ",255,0," + color = "rgba(" + Math.floor((intensity - 3 / 5) * 5 * 255) + ",255,0," + setTrsp + ")";
setTrsp + ")";
else else
color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + ", 0, " + setTrsp + ")";
", 0, " + setTrsp + ")";
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.fillRect((i - pixel1.xp) * pixelDim, (j - pixel1.yp) * pixelDim, pixelDim, pixelDim); ctx.fillRect((i - pixel1.xp) * pixelDim, (j - pixel1.yp) * pixelDim, pixelDim, pixelDim);
} }
} }
//annullo reprint rePrint = false; //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);
} }
/* $("#SaturationSlider").mouseup(function () {
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); drawImg(pixel1, pixel2, xMinRange, xMaxRange);
}; });
/* $("#rePlot").click(function () {
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; rePrint = true;
satSlider.value = "100"; document.getElementById("SaturationSlider").value = "100";
drawImg(pixel1, pixel2, xMinRange, xMaxRange); drawImg(pixel1, pixel2, xMinRange, xMaxRange);
}; });
/* $("#TrasparencySlider").mouseup(function () {
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); drawImg(pixel1, pixel2, xMinRange, xMaxRange);
}; });
/* $("#reset").click(function () {
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 }; newOrigin = { xp: 0, yp: 0 };
rePrint = false; rePrint = false;
calibrated = false; calibrated = false;
globalxMinRange = 0; globalxMinRange = 0;
globalxMaxRange = 55; globalxMaxRange = 55;
satSlider.value = "100"; document.getElementById("SaturationSlider").value = "100";
trspSlider.value = "0"; document.getElementById("TrasparencySlider").value = "0";
document.getElementById("spinBoxMin").setAttribute("value", "-"); document.getElementById("spinBoxMin").setAttribute("value", "-");
document.getElementById("spinBoxMax").setAttribute("value", "-"); document.getElementById("spinBoxMax").setAttribute("value", "-");
drawImg({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, 0, 55); 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); 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 $("#ExportImage").click(function () {
var ExportImgButton = document.getElementById("ExportImage"); var img = document.getElementById("myCanvas").toDataURL("image/png");
ExportImgButton.onclick = function () { $("#ExportImage").attr("href", img);
var img = canvas.toDataURL("image/png");
ExportImgButton.href = img;
//document.write('<img src="'+img+'"/>'); //document.write('<img src="'+img+'"/>');
}; });
} }
/*la funzione drawChart riceve in input i due estremi dell'immagine (può essere //la funzione drawChart (input: estremi dell'immagine, estremi dell'intervallo)
l'immagine completa o solo una parte) e i due estremi dell'intervallo da //disegna il grafico richiesto relativo alla mappa visualizzata
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) { function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
//definisco la variabile "grafico", i bottoni relativi al grafico, il tag //definisco la variabile "grafico", i bottoni relativi al grafico, il tag
//select e le due spinbox con il relativo botton //select e le due spinbox con il relativo botton
var g; 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 box1 = document.getElementById("spinBoxMin");
var box2 = document.getElementById("spinBoxMax"); var box2 = document.getElementById("spinBoxMax");
var SubmitRangeButton = document.getElementById("readSpinbox"); //disegno il grafico completo
var elementSelect = document.getElementById("elementSelect"); if (pixel1.xp == 0 && pixel1.yp == 0 && pixel2.xp == xDim - 1 && pixel2.yp == yDim - 1) {
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) { if (!calibrated) {
var chartTitle = "Chart from (0, 0) to (" + (xDim - 1) + ", " var chartTitle = "Chart from (0, 0) to (" + (xDim - 1) + ", " + (yDim - 1) + ")";
+ (yDim - 1) + ")";
g = setChart(dataCompleteChart, chartTitle); g = setChart(dataCompleteChart, chartTitle);
} }
else { else {
var chartTitle = "Calibrated chart from (0, 0) to (" + var chartTitle = "Calibrated chart from (0, 0) to (" + (xDim - 1) + ", " + (yDim - 1) + ")";
(xDim - 1) + ", " + (yDim - 1) + ")";
g = setChart(dataCompleteChartCalibrated, chartTitle); g = setChart(dataCompleteChartCalibrated, chartTitle);
} }
} }
else { else {
//creo un array di 16384 elementi con la somma dei conteggi solo dei //determino i conteggi dei pixel da disegnare
//pixel da considerare
var dataForChart = new Array(16384); var dataForChart = new Array(16384);
for (var i = 0; i < 16384; i++) { for (var i = 0; i < 16384; i++) {
dataForChart[i] = 0; dataForChart[i] = 0;
...@@ -805,152 +654,62 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) { ...@@ -805,152 +654,62 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
} }
} }
} }
//controllo se devo disegare il grafico calibrato o non calibrato
if (!calibrated) { if (!calibrated) {
//definisco i dati da passare al grafico
var dataChart = "Channel,Counts\n"; var dataChart = "Channel,Counts\n";
for (var i = 0; i < 16348; i++) { for (var i = 0; i < 16348; i++) {
dataChart += i + "," + dataForChart[i] + "\n"; dataChart += i + "," + dataForChart[i] + "\n";
} }
//determino il titolo del grafico
if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) { if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) {
var chartTitle = "Chart pixel (" + pixel1.xp + ", " + var chartTitle = "Chart pixel (" + pixel1.xp + ", " + (yDim - pixel1.yp - 1) + ")";
(yDim - pixel1.yp - 1) + ")";
} }
else { else {
var chartTitle = "Chart from (" + pixel1.xp + "," + var chartTitle = "Chart from (" + pixel1.xp + "," + pixel2.xp + ") to (" +
pixel2.xp + ") to (" + (yDim - pixel1.yp - 1) + ", " + (yDim - pixel1.yp - 1) + ", " + (yDim - pixel2.yp - 1) + ")";
(yDim - pixel2.yp - 1) + ")";
} }
//disegno il grafico
g = setChart(dataChart, chartTitle); g = setChart(dataChart, chartTitle);
} }
else { else {
//definisco i dati da passare al grafico
var dataChartCalibrated = "Energy,Counts\n"; var dataChartCalibrated = "Energy,Counts\n";
for (var i = 0; i < 16348; i++) { for (var i = 0; i < 16348; i++) {
dataChartCalibrated += round3(((i + 1) * a - b) / 1000) + dataChartCalibrated += round3(((i + 1) * a - b) / 1000) + "," + dataForChart[i] + "\n";
"," + dataForChart[i] + "\n";
} }
//determino il titolo del grafico
if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) { if (pixel1.xp == pixel2.xp && pixel1.yp == pixel2.yp) {
var chartTitle = "Calibrated chart pixel (" + pixel1.xp + var chartTitle = "Calibrated chart pixel (" + pixel1.xp + ", " + (yDim - pixel1.yp - 1) + ")";
", " + (yDim - pixel1.yp - 1) + ")";
} }
else { else {
var chartTitle = "Calibrated chart from (" + pixel1.xp + var chartTitle = "Calibrated chart from (" + pixel1.xp + ", " + pixel2.xp +
", " + pixel2.xp + ") to (" + (yDim - pixel1.yp - 1) + ", " + ") to (" + (yDim - pixel1.yp - 1) + ", " + (yDim - pixel2.yp - 1) + ")";
(yDim - pixel2.yp - 1) + ")";
} }
//disegno il grafico
g = setChart(dataChartCalibrated, chartTitle); g = setChart(dataChartCalibrated, chartTitle);
} }
} }
/* $('#setlinearButton').on('click', function () {
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 }); g.updateOptions({ logscale: false });
setlinearButton.disabled = true; });
setlogButton.disabled = false; $('#setlogButton').on('click', function () {
};
setlogButton.onclick = function () {
g.updateOptions({ logscale: true }); g.updateOptions({ logscale: true });
setlinearButton.disabled = false; });
setlogButton.disabled = true; $('#setEnergyButton').on('click', function () {
};
setEnergyButton.onclick = function () {
calibrated = true; calibrated = true;
drawChart(pixel1, pixel2, 0, 55); drawChart(pixel1, pixel2, 0, 55);
box1.setAttribute("value", "0"); box1.setAttribute("value", "0");
box2.setAttribute("value", "55"); box2.setAttribute("value", "55");
}; });
setChannelsButton.onclick = function () { $('#setChannelsButton').on('click', function () {
calibrated = false; calibrated = false;
drawChart(pixel1, pixel2, 0, 55); drawChart(pixel1, pixel2, 0, 55);
box1.setAttribute("value", "-"); box1.setAttribute("value", "-");
box2.setAttribute("value", "-"); box2.setAttribute("value", "-");
}; });
ExportGraphButton.onclick = function () { $('#ExportGraph').on('click', function () {
var img = document.getElementById("chartToImg"); var img = document.getElementById("chartToImg");
Dygraph.Export.asPNG(g, img); Dygraph.Export.asPNG(g, img);
ExportGraphButton.href = img.src.replace('image/png', 'image/octet-stream'); document.getElementById("ExportGraph").href = img.src.replace('image/png', 'image/octet-stream');
}; });
SubmitRangeButton.onclick = function () { $('#readSpinbox').on('click', function () {
peackSelection(0, 0); peackSelection(0, 0);
}; });
/* $('#chart').on('click', function () {
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; var r;
r = g.xAxisRange(); r = g.xAxisRange();
if (!calibrated) { if (!calibrated) {
...@@ -966,179 +725,120 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) { ...@@ -966,179 +725,120 @@ function drawChart(pixel1, pixel2, xMinRange, xMaxRange) {
globalxMinRange = r[0]; globalxMinRange = r[0];
globalxMaxRange = r[1]; globalxMaxRange = r[1];
drawImg(pixel1, pixel2, r[0], r[1]); drawImg(pixel1, pixel2, r[0], r[1]);
}; });
/* $('#elementSelect').on('change', function () {
mi metto in ascolto della selezione di un elemento
*/
elementSelect.onchange = function () {
var element = document.getElementById("elementSelect").value; var element = document.getElementById("elementSelect").value;
switch (element) { switch (element) {
//Ca
case "1": case "1":
peackSelection(3.6, 3.8); peackSelection(3.6, 3.8);
box1.setAttribute("value", "3.60"); box1.setAttribute("value", "3.60");
box2.setAttribute("value", "3.80"); box2.setAttribute("value", "3.80");
break; break;
//Pb
case "2": case "2":
peackSelection(10.4, 10.7); peackSelection(10.4, 10.7);
box1.setAttribute("value", "10.40"); box1.setAttribute("value", "10.40");
box2.setAttribute("value", "10.70"); box2.setAttribute("value", "10.70");
break; break;
//Hg
case "3": case "3":
peackSelection(9.8, 10.15); peackSelection(9.8, 10.15);
box1.setAttribute("value", "9.80"); box1.setAttribute("value", "9.80");
box2.setAttribute("value", "10.15"); box2.setAttribute("value", "10.15");
break; break;
//Fe
case "4": case "4":
peackSelection(6.3, 6.5); peackSelection(6.3, 6.5);
box1.setAttribute("value", "6.30"); box1.setAttribute("value", "6.30");
box2.setAttribute("value", "6.50"); box2.setAttribute("value", "6.50");
break; break;
//Cu
case "5": case "5":
peackSelection(7.85, 8.2); peackSelection(7.85, 8.2);
box1.setAttribute("value", "7.85"); box1.setAttribute("value", "7.85");
box2.setAttribute("value", "8.20"); box2.setAttribute("value", "8.20");
break; break;
//Zn
case "6": case "6":
peackSelection(8.5, 8.72); peackSelection(8.5, 8.72);
box1.setAttribute("value", "8.50"); box1.setAttribute("value", "8.50");
box2.setAttribute("value", "8.72"); box2.setAttribute("value", "8.72");
break; break;
//Ti
case "7": case "7":
peackSelection(4.35, 4.65); peackSelection(4.35, 4.65);
box1.setAttribute("value", "4.35"); box1.setAttribute("value", "4.35");
box2.setAttribute("value", "4.65"); box2.setAttribute("value", "4.65");
break; break;
//K
case "8": case "8":
peackSelection(3.2, 3.42); peackSelection(3.2, 3.42);
box1.setAttribute("value", "3.20"); box1.setAttribute("value", "3.20");
box2.setAttribute("value", "3.42"); box2.setAttribute("value", "3.42");
break; break;
//Co
case "9": case "9":
peackSelection(6.8, 7.05); peackSelection(6.8, 7.05);
box1.setAttribute("value", "6.80"); box1.setAttribute("value", "6.80");
box2.setAttribute("value", "7.05"); box2.setAttribute("value", "7.05");
break; break;
//default
default: default:
peackSelection(0, 55); peackSelection(0, 55);
box1.setAttribute("value", "0"); box1.setAttribute("value", "0");
box2.setAttribute("value", "55"); box2.setAttribute("value", "55");
break; break;
} }
}; });
} //la funzione setChart riceve in input i dati e il titolo del grafico da disegnare
/* //il quale è restituito il output
la funzione prepara i dati per il grafico se è da disegnare completo function setChart(dataString, charTitle) {
*/ var xArrayRange; //estremi asse x da visualizzare
function setDataForCompleteChart() { var xLab;
//creo un array di 16384 elementi con la somma dei conteggi di tutti i pixel if (!calibrated) {
//per ogni canale xArrayRange = [0, 16383];
var dataForChart = new Array(16384); xLab = "ADC Channel";
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];
}
} }
} else {
//riempio le stringhe con i dati per il grafico xArrayRange = [xMinRange, xMaxRange];
dataCompleteChart = "Channel,Counts\n"; xLab = "Energy (keV)";
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];
}
} }
//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, 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
la funzione findPosition definisce la posizione del cursore del mouse if (xMinRange == 0 && xMaxRange == 0) {
relativa al canvas nel momento in cui avviene l'evento passato in input xMinRange = box1.value;
*/ xMaxRange = box2.value;
function findPosition(event, pixel) { }
var scrollTOP = (document.documentElement.scrollTop) ? globalxMinRange = xMinRange;
document.documentElement.scrollTop : document.body.scrollTop; globalxMaxRange = xMaxRange;
var scrollLEFT = (document.documentElement.scrollLeft) ? newOrigin = { xp: 0, yp: 0 };
document.documentElement.scrollLeft : document.body.scrollLeft; rePrint = false;
var allX = event.clientX + scrollLEFT; calibrated = true;
var allY = event.clientY + scrollTOP; drawImg({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, globalxMinRange, globalxMaxRange);
var elParent = document.getElementById('myCanvas'); drawChart({ xp: 0, yp: 0 }, { xp: xDim - 1, yp: yDim - 1 }, globalxMinRange, globalxMaxRange);
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];
} }
return sum;
} }
LoadFile.ts
+ 10
− 17
View file @ 5dfbdedc
...@@ -34,30 +34,23 @@ $(document).ready( function() { ...@@ -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. //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 //Sono definiti quindi l'albero e il bottone per l'importazione da locale
function setImportFile(){ 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 contentfilesystem: any = document.getElementById('contentfilesystem').innerHTML;
var parser: any = new DOMParser(); var jsonObject: any = JSON.parse(contentfilesystem);
var xmlDoc: any = parser.parseFromString(contentfilesystem, "text/xml");
alert(jsonObject[0].name);
//ora genero l'albero e definisco l'evento in caso di selezione di un nodo //ora genero l'albero e definisco l'evento in caso di selezione di un nodo
$('#FileTreeview').treeview({data: generateTree(xmlDoc)}); // $('#FileTreeview').treeview({data: generateTree(xmlDoc)});
$('#FileTreeview').on('nodeSelected', function(e, node){ // $('#FileTreeview').on('nodeSelected', function(e, node){
if(node['url'] != undefined){ // if(node['url'] != undefined){
openFileFromServer(node['url']); // openFileFromServer(node['url']);
} // }
}); // });
//bottone per l'importazione locale //bottone per l'importazione locale
var fileInputButton: any = document.getElementById('myImport'); var fileInputButton: any = document.getElementById('myImport');
......
index.php
+ 4
− 6
View file @ 5dfbdedc
...@@ -47,25 +47,23 @@ ...@@ -47,25 +47,23 @@
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
</button> </button>
<div id="mySidenavfs" class="sidenav"> <div id="mySidenavfs" class="sidenav">
<!--<h3> Import File From Server </h3>-->
<?php <?php
echo "<h3>Import File From Server</h3>"; echo "<h3>Import File From Server</h3>";
// Generated by curl-to-PHP: http://incarnate.github.io/curl-to-php/ // Generated by curl-to-PHP: http://incarnate.github.io/curl-to-php/
$ch = curl_init(); $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://baltig.infn.it/api/v4/projects/819/repository/tree?recursive=1&path=RemoteFileSystem");
// curl_setopt($ch, CURLOPT_URL, "https://oc-chnet.cr.cnaf.infn.it:8443/Laura/XRF-App/RemoteFileSystem/");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PROPFIND"); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
$headers = array(); $headers = array();
$headers[] = "Depth: infinity"; $headers[] = "Private-Token: kEzw3Lo1-T7ZaacK1s9z";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch); $result = curl_exec($ch);
if (curl_errno($ch)) { if (curl_errno($ch)) {
echo 'Error:' . curl_error($ch); echo 'Error:' . curl_error($ch);
} }
curl_close ($ch); curl_close ($ch);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment