Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • faproietti/XRF-App
  • chnet/XRF-App
2 results
Show changes
Commits on Source (8)
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 910 additions and 1606 deletions
callbacks.ts
View file @ c8f08ac7
export class CallbackManager
{
private static _instance: CallbackManager = new CallbackManager();
private constructor(){
if(CallbackManager._instance) {
throw new Error("Error: Image object is already instantiated");
}
else{
CallbackManager._instance = this;
}
}
public static getInstance(): CallbackManager {
return CallbackManager._instance;
}
class CallbackManager {
constructor() {
}
public showElement(elementID: string, show: boolean): void {
if(show){
if (show) {
document.getElementById(elementID).style.display = "inline";
}
else
{
else {
document.getElementById(elementID).style.display = "none";
}
}
public closeBootstrapModel(elementID: string): void{
public closeBootstrapModel(elementID: string): void {
document.getElementById(elementID).click();
}
}
export { CallbackManager };
\ No newline at end of file
drawChart.ts → chart.ts
View file @ c8f08ac7
import { DrawImage, coordinates } from "./drawImage";
import * as Help from "./helper";
import * as Dygraph from "dygraphs";
export class DrawChart {
_graphic: any;
import { Image, coordinates } from "./image";
import * as Utility from "./utility";
import "dygraphs"
class Chart {
graphic: any;
private readonly chartElementID: string = "chart";
private _setLinearButton: HTMLAnchorElement;
private _setLogButton: HTMLAnchorElement;
private _setEnergyButton: HTMLAnchorElement;
private _setChannelButton: HTMLAnchorElement;
private _exportgraph: HTMLAnchorElement;
private _readSpinBox: HTMLButtonElement;
private _chartElement: HTMLElement;
private _elementSelect: HTMLSelectElement;
private setLinearButton: HTMLAnchorElement;
private setLogButton: HTMLAnchorElement;
private setEnergyButton: HTMLAnchorElement;
private setChannelButton: HTMLAnchorElement;
private exportgraph: HTMLAnchorElement;
private readSpinBox: HTMLButtonElement;
private chartElement: HTMLElement;
private elementSelect: HTMLSelectElement;
public spinBoxMin: HTMLInputElement;
public spinBoxMax: HTMLInputElement;
......@@ -21,16 +21,16 @@ export class DrawChart {
dataCompleteChart: string = "Channel,Counts\n";
dataCompleteChartCalibrated: string = "Energy,Counts\n";
calibrated: boolean = false; //variabile per il controllo sulla calibrazione
constructor() {
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this.chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin");
this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax");
}
drawChart(image: DrawImage, pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number) {
drawChart(image: Image, pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number) {
//definisco la variabile "grafico", i bottoni relativi al grafico, il tag
//select e le due spinbox con il relativo botton
......@@ -39,11 +39,11 @@ export class DrawChart {
if (!this.calibrated) {
//canali
let chartTitle: string = "Chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")";
this._graphic = this.setChart(image, this.dataCompleteChart, chartTitle, xMinRange, xMaxRange);
this.graphic = this.setChart(image, this.dataCompleteChart, chartTitle, xMinRange, xMaxRange);
} else {
//energie
let chartTitle: string = "Calibrated chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")";
this._graphic = this.setChart(image, this.dataCompleteChartCalibrated, chartTitle, xMinRange, xMaxRange);
this.graphic = this.setChart(image, this.dataCompleteChartCalibrated, chartTitle, xMinRange, xMaxRange);
}
//disegno il grafico parzialmente
......@@ -73,12 +73,12 @@ export class DrawChart {
} else {
chartTitle = "Chart from (" + pixel1.x + "," + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
}
this._graphic = this.setChart(image, dataChart, chartTitle, xMinRange, xMaxRange);
this.graphic = this.setChart(image, dataChart, chartTitle, xMinRange, xMaxRange);
} else {
//disegno in energie
let dataChartCalibrated: string = "Energy,Counts\n";
for (let i: number = 0; i < image.depth; i++) {
dataChartCalibrated += Help.round3(((i + 1) * image.calibration.a - image.calibration.b) / 1000) + "," + dataForChart[i] + "\n";
dataChartCalibrated += Utility.round3(((i + 1) * image.calibration.a - image.calibration.b) / 1000) + "," + dataForChart[i] + "\n";
}
let chartTitle: string;
if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) {
......@@ -86,13 +86,13 @@ export class DrawChart {
} else {
chartTitle = "Calibrated chart from (" + pixel1.x + ", " + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
}
this._graphic = this.setChart(image, dataChartCalibrated, chartTitle, xMinRange, xMaxRange);
this.graphic = this.setChart(image, dataChartCalibrated, chartTitle, xMinRange, xMaxRange);
}
}
}
//la funzione setChart riceve in input i dati e il titolo del grafico da disegnare
//il quale è restituito il output
setChart(image: DrawImage, dataString: string, charTitle: string, xMinRange: number, xMaxRange: number): Dygraph {
setChart(image: Image, dataString: string, charTitle: string, xMinRange: number, xMaxRange: number): Dygraph {
let xArrayRange: number[]; //estremi asse x da visualizzare
let xLab: string;
if (!this.calibrated) {
......@@ -106,11 +106,11 @@ export class DrawChart {
//dimensioni grafico
let chartDim: any = document.querySelector("#chart-pannel").getBoundingClientRect();
let chartWidth = chartDim.right - chartDim.left - 50;
this._chartElement.setAttribute("width", chartWidth.toString());
this._chartElement.setAttribute("height", "400");
this.chartElement.setAttribute("width", chartWidth.toString());
this.chartElement.setAttribute("height", "400");
//disegno il grafico
this._graphic = new Dygraph(this._chartElement, dataString,
this.graphic = new Dygraph(this.chartElement, dataString,
{
title: charTitle,
ylabel: "Counts",
......@@ -124,11 +124,11 @@ export class DrawChart {
logscale: false,
});
return this._graphic;
return this.graphic;
}
//la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico
peackSelection(xMinRange: number, xMaxRange: number, image: DrawImage) {
peackSelection(xMinRange: number, xMaxRange: number, image: Image) {
//se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox
if (xMinRange == 0 && xMaxRange == 0) {
xMinRange = parseInt((this.spinBoxMin).value);
......@@ -144,3 +144,5 @@ export class DrawChart {
this.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
}
}
export { Chart };
events.ts
View file @ c8f08ac7
This diff is collapsed.
fs.test.ts
View file @ c8f08ac7
import G = require("./globals");
import * as gfs from "./fs";
import {Fs} from "./fs";
import * as fs from "fs";
import * as md5 from "ts-md5/dist/md5";
import { Image } from "./image";
import { Chart } from "./chart";
let content: Buffer;
let lines: string[];
let numbers: number[];
let image: Image = new Image();
let chart: Chart = new Chart();
let filesys: Fs = new Fs();
beforeAll(() =>
{
content = fs.readFileSync("XRF-File-System/Pergamena-Medioevale/codapavone_500.txt");
......@@ -14,9 +19,9 @@ beforeAll(() =>
numbers = lines.map(Number);
});
/*test("get_metadata", () =>
test("get_metadata", () =>
{
let metadata = gfs.get_metadata(numbers);
let metadata = filesys.get_metadata(image, numbers);
expect(metadata).toEqual({
xMin: 50088000,
xMax: 50103000,
......@@ -25,18 +30,11 @@ beforeAll(() =>
step: 500,
direction: 'c'
});
})*/
})
/*test("readImage", () =>
test("readImage", () =>
{
let image = gfs.readImage(content.toString());
expect(md5.Md5.hashAsciiStr(JSON.stringify(image))).toBe("0a77bca5eb4c9bdd137c753a21b98545"); // coda_pavone_500
let readImage = filesys.readImage(image, chart, content.toString());
expect(md5.Md5.hashAsciiStr(JSON.stringify(readImage))).toBe("0a77bca5eb4c9bdd137c753a21b98545"); // coda_pavone_500
//expect(md5.Md5.hashAsciiStr(JSON.stringify(image))).toBe("b9e7fb96f36452cc3c2350d6132b50c6"); // coda_pavone_250
})*/
/* test("readImage_lc", () =>
{
let image = gfs.readImage_lc(content.toString());
console.log(md5.Md5.hashAsciiStr(JSON.stringify(image));
})
*/
fs.ts
View file @ c8f08ac7
This diff is collapsed.
globals.ts deleted 100644 → 0
View file @ bb4b0579
export interface coordinates // used in multiple files
{
x: number;
y: number;
}
export class Calibration //used in multiple files
{
a: number;
b: number;
}
export enum ReadDirection {
u,// lettura non definita
r,//lettura per righe
c//lettura per colonne
}
export class Metadata //used only on fs.ts
{
private static _instance: Metadata = new Metadata();
private constructor() {
if(Metadata._instance) {
throw new Error("Error: Image object is already instantiated");
}
else {
Metadata._instance = this;
}
}
xMin: number = 0;
xMax: number = 0;
yMin: number = 0;
yMax: number = 0;
step: number = 0;
direction: ReadDirection = ReadDirection.u;
public static getInstance(): Metadata {
return Metadata._instance;
}
}
// export class Image
// {
// private static _instance: Image = new Image();
// private constructor() {
// if(Image._instance)
// {
// throw new Error ("Error: Image object is already instantiated");
// }
// else
// {
// Image._instance = this;
// }
// }
// DataMatrix: number[][][];
// width: number;
// height: number;
// readonly calibration: Calibration = {a: 3.36275, b: 58.2353}; // TODO
// readonly depth: number = 8000;
// readonly maxCoordValueX = 60000000;
// readonly headerSetValue = 17000;
// readonly xCoordHeaderFirstValue = 5; //instestazione X
// readonly yCoordHeaderFirstValue = 6; //intestazione y
// channelDepth: number = require("./helper").round3(((this.depth + 1) * this.calibration.a - this.calibration.b) / 1000); //profondità massima in canali
// globalxMinRange: number = 0;
// globalxMaxRange: number = this.channelDepth;
// zPixel1: coordinates;
// zPixel2: coordinates; //pixel2 dello zoom
// newOrigin: coordinates = { x: 0, y: 0}; //nuovo origine nel caso di zoom
// maxAbsolute: number; //massimo conteggio della matrice nOfCounts
// pixelDim: number; //dimensione dei pixel responsive
// nOfCounts: number[][]; //matrici con i dati
// rePrint: boolean = false; //variabile per ricolorare con il max relativo
// public static getInstance(): Image
// {
// return Image._instance;
// }
// }
// export class Chart {
// private static _instance: Chart = new Chart();
// private constructor()
// {
// if(Chart._instance)
// {
// throw new Error("Error: Image object is already instantiated");
// }
// else
// {
// Chart._instance = this;
// }
// }
// dataCompleteChart: string = "Channel,Counts\n";
// dataCompleteChartCalibrated: string = "Energy,Counts\n";
// calibrated: boolean = false; //variabile per il controllo sulla calibrazione
// public static getInstance(): Chart
// {
// return Chart._instance;
// }
// }
drawImage.ts → image.ts
View file @ c8f08ac7
import G = require("./globals");
import * as $ from "jquery";
import * as Help from "./helper";
import { DrawChart } from "./drawChart";
import * as Utility from "./utility";
export interface coordinates // used in multiple files
interface coordinates // used in multiple files
{
x: number;
y: number;
}
export class Calibration //used in multiple files
class Calibration //used in multiple files
{
a: number;
b: number;
}
export class DrawImage {
class Image {
private readonly _saturationSliderID: string = "SaturationSlider";
private readonly _transparencySliderID: string = "TrasparencySlider";
private readonly _selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas";
private readonly saturationSliderID: string = "SaturationSlider";
private readonly transparencySliderID: string = "TrasparencySlider";
private readonly selectionCanvasID: string = "selectionCanvas";
private readonly myCanvasID: string = "myCanvas";
private _context: CanvasRenderingContext2D;
private _saturationSlider: HTMLInputElement;
private _transparencySlider: HTMLInputElement;
_pixel1: coordinates;
_pixel2: coordinates;
private _xMinRange: number;
private _xMaxRange: number;
private context: CanvasRenderingContext2D;
private saturationSlider: HTMLInputElement;
private transparencySlider: HTMLInputElement;
pixel1: coordinates;
pixel2: coordinates;
private xMinRange: number;
private xMaxRange: number;
private _selectionCanvas: HTMLCanvasElement;
private _myCanvas: HTMLCanvasElement;
private _ctx;
private selectionCanvas: HTMLCanvasElement;
private myCanvas: HTMLCanvasElement;
private ctx;
private _isDown = false;
private isDown = false;
DataMatrix: number[][][];
width: number;
height: number;
readonly calibration: Calibration = { a: 3.36275, b: 58.2353 };
readonly depth: number = 8000;
channelDepth: number = Help.round3(((this.depth + 1) * this.calibration.a - this.calibration.b) / 1000); //profondità massima in canali
channelDepth: number = Utility.round3(((this.depth + 1) * this.calibration.a - this.calibration.b) / 1000); //profondità massima in canali
readonly maxCoordValueX = 60000000; // to check
readonly headerSetValue = 17000;
readonly xCoordHeaderFirstValue = 5; //instestazione X
......@@ -56,12 +53,12 @@ export class DrawImage {
rePrint: boolean = false; //variabile per ricolorare con il max relativo
constructor() {
this._selectionCanvas = <HTMLCanvasElement>document.getElementById(this._selectionCanvasID);
this._ctx = this._selectionCanvas.getContext("2d");
this.selectionCanvas = <HTMLCanvasElement>document.getElementById(this.selectionCanvasID);
this.ctx = this.selectionCanvas.getContext("2d");
this._myCanvas = <HTMLCanvasElement>document.getElementById(this._myCanvasID);
this._saturationSlider = <HTMLInputElement>document.getElementById(this._saturationSliderID);
this._transparencySlider = <HTMLInputElement>document.getElementById(this._transparencySliderID);
this.myCanvas = <HTMLCanvasElement>document.getElementById(this.myCanvasID);
this.saturationSlider = <HTMLInputElement>document.getElementById(this.saturationSliderID);
this.transparencySlider = <HTMLInputElement>document.getElementById(this.transparencySliderID);
}
......@@ -85,13 +82,13 @@ export class DrawImage {
pixel.y = Math.floor((allY - objY - 1) / this.pixelDim) + this.newOrigin.y;
}
drawImg(pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number, callback?: () => void) {
this._pixel1 = pixel1;
this._pixel2 = pixel2;
this.pixel1 = pixel1;
this.pixel2 = pixel2;
//alert("disegno in corso");
//numero di pixel per dimensione
let nPixelX: number = this._pixel2.x - this._pixel1.x + 1;
let nPixelY: number = this._pixel2.y - this._pixel1.y + 1;
let nPixelX: number = this.pixel2.x - this.pixel1.x + 1;
let nPixelY: number = this.pixel2.y - this.pixel1.y + 1;
//dimensione dei canvas
let mappaPannelDim: any = document.querySelector("#mappa-pannel").getBoundingClientRect();
......@@ -104,22 +101,22 @@ export class DrawImage {
this.pixelDim = dimPixelx < dimPixely ? dimPixelx : dimPixely;
//dimensioni esatte dei canvas
this._myCanvas.height = nPixelY * this.pixelDim;
this._myCanvas.width = nPixelX * this.pixelDim;
this._selectionCanvas.height = nPixelY * this.pixelDim;
this._selectionCanvas.width = nPixelX * this.pixelDim;
let ctx = this._myCanvas.getContext("2d"); //contesto del canvas
this.myCanvas.height = nPixelY * this.pixelDim;
this.myCanvas.width = nPixelX * this.pixelDim;
this.selectionCanvas.height = nPixelY * this.pixelDim;
this.selectionCanvas.width = nPixelX * this.pixelDim;
let ctx = this.myCanvas.getContext("2d"); //contesto del canvas
if (xMaxRange - xMinRange >= this.channelDepth) {
//range completo
let max: number = 0; //massimo relativo o assoluto
if (this.rePrint) {
max = Help.findMax(this.nOfCounts, this._pixel1, this._pixel2);
max = Utility.findMax(this.nOfCounts, this.pixel1, this.pixel2);
} else {
max = this.maxAbsolute;
}
max *= parseInt(this._saturationSlider.value) / 100;
max *= parseInt(this.saturationSlider.value) / 100;
this.drawCanvas(this.nOfCounts, max);
} else {
......@@ -132,18 +129,18 @@ export class DrawImage {
for (let i: number = 0; i < this.width; i++) {
nOfCountsRelative[i] = new Array(this.height);
for (let j: number = 0; j < this.height; j++) {
nOfCountsRelative[i][j] = Help.sumVect(this.DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
nOfCountsRelative[i][j] = Utility.sumVect(this.DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
}
}
//calcolo il massimo
let max: number = 0;
if (this.rePrint) {
max = Help.findMax(nOfCountsRelative, this._pixel1, this._pixel2);
max = Utility.findMax(nOfCountsRelative, this.pixel1, this.pixel2);
} else {
max = Help.findMax(nOfCountsRelative, { x: 0, y: 0 }, { x: this.width - 1, y: this.height - 1 });
max = Utility.findMax(nOfCountsRelative, { x: 0, y: 0 }, { x: this.width - 1, y: this.height - 1 });
}
max *= parseInt(this._saturationSlider.value) / 100;
max *= parseInt(this.saturationSlider.value) / 100;
if (max == 0)
alert("WARNING: max value is 0");
......@@ -157,12 +154,12 @@ export class DrawImage {
private drawCanvas(noc, max) {
//controllo il valore della trasparenza
let setTrsp: number = 1 - parseInt(this._transparencySlider.value) / 100;
let setTrsp: number = 1 - parseInt(this.transparencySlider.value) / 100;
//scorro tutti i pixel: ne determino il colore e li disegno
let color: string = "";
for (let i: number = this._pixel1.x; i <= this._pixel2.x; i++) {
for (let j: number = this._pixel1.y; j <= this._pixel2.y; j++) {
for (let i: number = this.pixel1.x; i <= this.pixel2.x; i++) {
for (let j: number = this.pixel1.y; j <= this.pixel2.y; j++) {
let intensity: number = noc[i][j] / max;
if (intensity < 1 / 5)
//blu
......@@ -180,16 +177,19 @@ export class DrawImage {
else
color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + ", 0, " + setTrsp + ")";
this._ctx.fillStyle = color;
this._ctx.fillRect((i - this._pixel1.x) * this.pixelDim, (j - this._pixel1.y) * this.pixelDim, this.pixelDim, this.pixelDim);
this.ctx.fillStyle = color;
this.ctx.fillRect((i - this.pixel1.x) * this.pixelDim, (j - this.pixel1.y) * this.pixelDim, this.pixelDim, this.pixelDim);
}
}
//console.log(color);
this.rePrint = false; //annullo rePrint
this._ctx.fillStyle = "rgba(0, 110, 255, 0.25)";
this.ctx.fillStyle = "rgba(0, 110, 255, 0.25)";
this._isDown = false;
this.isDown = false;
}
}
export { coordinates, Calibration, Image };
importFile.ts 0 → 100644
View file @ c8f08ac7
import { Image } from "./image";
import { Chart } from "./chart";
import { Fs } from "./fs";
import { CallbackManager } from "./callbacks"
import $ = require("jquery");
class ImportFile {
private image: Image;
private chart: Chart;
private fs: Fs;
private callbackManager: CallbackManager;
constructor(drawImage: Image, drawChart: Chart) {
this.image = drawImage;
this.chart = drawChart;
this.fs = new Fs();
this.callbackManager = new CallbackManager();
}
//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
setImportFile() {
// genero e leggo il contenuto della directory "filesystem"
// comment out waiting to properly address the request
// let xmlDoc: Document;
// let xmlListingFile: any = new XMLHttpRequest();
// xmlListingFile.open("PROPFIND", "CHNET/", false);
// xmlListingFile.setRequestHeader("Depth", "infinity");
// xmlListingFile.onreadystatechange = function () {
// if (xmlListingFile.readyState === 4) {
// if (xmlListingFile.status === 207) {
// let parser = new DOMParser();
// xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
// }
// }
// }
// xmlListingFile.send(null);
//ora genero l'albero e definisco l'evento in caso di selezione di un nodo
// jQuery(document.getElementById('FileTreeview')).treeview({ data: this.fs.generateTree(xmlDoc) });
// $('#FileTreeview').on('nodeSelected', (e, node) => {
// if (node['url'] != undefined) {
// $("#load-spinner").css("display", "inline");
// this.fs.openFileFromServer(node['url']);
// }
// });
// import a local file
let fileInputButton: any = document.getElementById("myImport");
fileInputButton.onchange = () => {
this.callbackManager.showElement("load-spinner", true);
let file: File = fileInputButton.files[0];
let readerObject = new FileReader();
readerObject.onload = () => {
let content = readerObject.result;
let image = this.fs.readImage(this.image, this.chart, content);
this.callbackManager.showElement("load-spinner", false);
this.image.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { this.callbackManager.closeBootstrapModel("btnCloseModal"); });
this.chart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth);
};
readerObject.readAsText(file);
};
}
//funzione per la compressione della sidenav sx
compressingSidenav() {
let fsLabel = document.getElementById("collapse-symbol");
let isClosedfs = false;
let fsLabel_cross = () => {
if (isClosedfs == true) {
isClosedfs = false;
console.log("closed");
$(".w3-bar-block").css("width", "65px");
$(".text-sidenav").css("display", "none");
document.getElementById("collapse-symbol").title = "Open Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-left", "fa-angle-double-right");
} else {
isClosedfs = true;
$(".w3-bar-block").css("width", "200px");
$(".text-sidenav").css("display", "inline");
document.getElementById("collapse-symbol").title = "Close Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-right", "fa-angle-double-left");
}
};
fsLabel.addEventListener("mousedown", fsLabel_cross, false);
}
//funzione che definisce l'area su cui si può eseguire il drag&drop
makeDroppable(droppableArea) {
//creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
let input: any = document.createElement("input");
input.type = "file";
input.multiple = true;
input.style.display = "none";
droppableArea.appendChild(input);
//questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
droppableArea.addEventListener("dragover", function (e) {
e.preventDefault(); //impediamo l'apertura del file
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
droppableArea.classList.add("dragover");
});
//l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
droppableArea.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
});
//questo evento si innesca quando il drop è effettivamente avvenuto
droppableArea.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
this.callback(e.dataTransfer.files, this.image, this.chart);
});
}
//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()
private callback(files, drawImage: Image, drawChart: Chart, fs: Fs) {
this.callbackManager.showElement("load-spinner", true);
let file: File = files[files.length - 1];
console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader();
readerObject.onload = () => {
let content = readerObject.result;
fs.readImage(drawImage, drawChart, content);
this.callbackManager.showElement("load-spinner", false);
};
readerObject.readAsText(file);
}
}
export { ImportFile };
\ No newline at end of file
index.php
View file @ c8f08ac7
......@@ -13,14 +13,11 @@
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.css">
<link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<script type="text/javascript" src="xrf.js"></script>
<!-- ./Librerie -->
......@@ -57,7 +54,7 @@
} else {
echo "<img src=\"./default-avatar.png\" class=\"img-circle\" width=\"25\">";
}
// echo " ".ucfirst($_SERVER["OIDC_CLAIM_name"]);
//echo " ".ucfirst($_SERVER["OIDC_CLAIM_name"]);
?>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
......
package-lock.json
View file @ c8f08ac7
This diff is collapsed.
package.json
View file @ c8f08ac7
......@@ -10,9 +10,6 @@
"bootstrap-select": "^1.12.4",
"bootstrap-slider": "^10.0.0",
"bootstrap-tooltip": "^3.1.1",
"bootstrap-treeview": "^1.2.0",
"bower": "^1.8.4",
"connect": "^3.6.6",
"dygraphs": "^2.0.0",
"jquery": "^3.3.1"
},
......@@ -23,13 +20,15 @@
"url": "https://baltig.infn.it/chnet/XRF-App.git"
},
"devDependencies": {
"@types/dygraphs": "^1.1.8",
"@types/jest": "^21.1.6",
"@types/node": "^8.0.51",
"@types/jquery": "^3.3.4",
"@types/node": "^8.10.18",
"jest": "^21.2.1",
"ts-jest": "^21.2.2",
"ts-md5": "^1.2.2",
"ts-node": "^6.0.3",
"typescript": "^2.6.1"
"ts-node": "^6.1.0",
"typescript": "^2.9.1"
},
"jest": {
"testEnvironment": "node",
......
start.ts
View file @ c8f08ac7
......@@ -2,12 +2,11 @@
//
// Licensed under the EUPL
import * as $ from "jquery";
import { DrawChart } from './drawChart';
import { DrawImage } from './drawImage';
import * as fs from "./fs";
import * as Callback from "./callbacks";
import { Chart } from './chart';
import { Image } from './image';
import { Events } from "./events";
import { ImportFile } from "./importFile";
//INIZIO DELLO SCRIPT
......@@ -15,147 +14,23 @@ window.onload = () => {
// skip the tooltip for the moment; it generates an apparently fatal error
//$('[data-toggle="tooltip"]').tooltip();
let drawImage = new DrawImage();
let drawChart = new DrawChart();
let drawImage = new Image();
let drawChart = new Chart();
let importFile = new ImportFile(drawImage, drawChart);
new Events(drawImage,drawChart);
new Events(drawImage, drawChart);
//creazione dell'albero e gestione barre laterali
setImportFile(drawImage, drawChart);
importFile.setImportFile();
compressingSidenav();
importFile.compressingSidenav();
// enable drag&drop
let droppableArea: any = document.querySelector('.droppable');
//makeDroppable(droppableArea, callback);
importFile.makeDroppable(droppableArea);
drawImage.zPixel1 = { x: 0, y: 0 };
drawImage.zPixel2 = { x: 0, y: 0 };
};
//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(drawImage: DrawImage, drawChart: DrawChart) {
// genero e leggo il contenuto della directory "filesystem"
// comment out waiting to properly address the request
/*let xmlDoc: Document;
let xmlListingFile: any = new XMLHttpRequest();
xmlListingFile.open("PROPFIND", "CHNET/", false);
xmlListingFile.setRequestHeader("Depth", "infinity");
xmlListingFile.onreadystatechange = function ()
{
if (xmlListingFile.readyState === 4) {
if (xmlListingFile.status === 207) {
let parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
}
}
}
xmlListingFile.send(null);
//ora genero l'albero e definisco l'evento in caso di selezione di un nodo
$('#FileTreeview').treeview({data: fs.generateTree(xmlDoc)});
$('#FileTreeview').on('nodeSelected', function (e, node)
{
if (node['url'] != undefined) {
$("#load-spinner").css("display", "inline");
fs.openFileFromServer(node['url']);
}
});*/
// import a local file
let fileInputButton: any = document.getElementById("myImport");
fileInputButton.onchange = function () {
Callback.CallbackManager.getInstance().showElement("load-spinner", true);
let file: File = fileInputButton.files[0];
let readerObject = new FileReader();
readerObject.onload = function () {
let content: string = readerObject.result;
let image: DrawImage = fs.readImage(drawImage, drawChart,content);
Callback.CallbackManager.getInstance().showElement("load-spinner", false);
drawImage.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { Callback.CallbackManager.getInstance().closeBootstrapModel("btnCloseModal"); });
drawChart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth);
// install callbacks for the canvas and chart?
};
readerObject.readAsText(file);
};
}
//funzione per la compressione della sidenav sx
function compressingSidenav() {
let fsLabel = document.getElementById("collapse-symbol");
let isClosedfs = false;
let fsLabel_cross = () => {
if (isClosedfs == true) {
isClosedfs = false;
console.log("closed");
$(".w3-bar-block").css("width", "65px");
$(".text-sidenav").css("display", "none");
document.getElementById("collapse-symbol").title = "Open Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-left","fa-angle-double-right");
} else {
isClosedfs = true;
$(".w3-bar-block").css("width", "200px");
$(".text-sidenav").css("display", "inline");
document.getElementById("collapse-symbol").title = "Close Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-right","fa-angle-double-left");
}
};
fsLabel.addEventListener("mousedown", fsLabel_cross, false);
}
//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"
let input: any = document.createElement("input");
input.type = "file";
input.multiple = true;
input.style.display = "none";
droppableArea.appendChild(input);
//questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
droppableArea.addEventListener("dragover", function (e) {
e.preventDefault(); //impediamo l'apertura del file
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
droppableArea.classList.add("dragover");
});
//l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
droppableArea.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
});
//questo evento si innesca quando il drop è effettivamente avvenuto
droppableArea.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
callback.call(null, 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) {
Callback.CallbackManager.getInstance().showElement("load-spinner", true);
let file: File = files[files.length - 1];
console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader();
readerObject.onload = function () {
let content: string = readerObject.result;
fs.readImage(drawImage, content);
Callback.CallbackManager.getInstance().showElement("load-spinner", false);
};
readerObject.readAsText(file);
}*/
tsconfig.json
View file @ c8f08ac7
......@@ -2,8 +2,9 @@
"compilerOptions": {
// "target": "es6",
// "allowSyntheticDefaultImports": true
"module": "commonjs",
"lib": [
"es6", "dom"
]
],
}
}
\ No newline at end of file
helper.ts → utility.ts
View file @ c8f08ac7
import { DrawImage, coordinates } from "./drawImage";
import { DrawChart } from "./drawChart";
import { Image, coordinates } from "./image";
import { Chart } from "./chart";
// round to the 3rd decimal digit
export function round3(val: number)
{
function round3(val: number) {
return (Math.round(val * Math.pow(10, 3)) / Math.pow(10, 3));
}
// sum the elements of the array in the range [from, to]
export function sumVect(vect: number[], from: number, to: number)
{
function sumVect(vect: number[], from: number, to: number) {
let sum: number = 0;
for (let i: number = from; i < to; i++) { sum += vect[i]; }
for (let i: number = from; i < to; i++) {
sum += vect[i];
}
return sum;
}
// find the max in the sub-matrix specified by the two coordinates
export function findMax(matrix: number[][], pixel1: coordinates, pixel2: coordinates)
{
function findMax(matrix: number[][], pixel1: coordinates, pixel2: coordinates) {
let max = 0;
for (let i = pixel1.x; i <= pixel2.x; i++) {
for (let j = pixel1.y; j <= pixel2.y; j++) {
......@@ -29,8 +29,7 @@ export function findMax(matrix: number[][], pixel1: coordinates, pixel2: coordin
}
// prepara i dati per il grafico completo
export function setDataForCompleteChart(image: DrawImage, chart: DrawChart): number[]
{
function setDataForCompleteChart(image: Image, chart: Chart): number[] {
// per ogni pixel sommo i conteggi di tutti i canali rilevati
let data: number[] = [];
data.length = image.depth;
......@@ -57,21 +56,22 @@ export function setDataForCompleteChart(image: DrawImage, chart: DrawChart): num
}
export function getFirstDigitNumber(n: number): number {
return parseInt(n.toString()[0]);
function getFirstDigitNumber(n: number): number {
return parseInt(n.toString()[0]);
}
export function isAnXHeader(value: number, image: DrawImage): boolean {
if(value > image.headerSetValue && getFirstDigitNumber(value) == image.xCoordHeaderFirstValue) {
return true;
}
return false;
function isAnXHeader(value: number, image: Image): boolean {
if (value > image.headerSetValue && getFirstDigitNumber(value) == image.xCoordHeaderFirstValue) {
return true;
}
return false;
}
export function isAnYHeader(value: number, image: DrawImage): boolean {
if(value > image.headerSetValue && getFirstDigitNumber(value) == image.yCoordHeaderFirstValue) {
return true;
}
return false;
function isAnYHeader(value: number, image: Image): boolean {
if (value > image.headerSetValue && getFirstDigitNumber(value) == image.yCoordHeaderFirstValue) {
return true;
}
return false;
}
export { round3, sumVect, findMax, setDataForCompleteChart, getFirstDigitNumber, isAnXHeader, isAnYHeader };