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 (6)
Expand all Hide whitespace changes
Inline Side-by-side
chart.ts
View file @ c8f08ac7
import { Image, coordinates } from "./image"; import { Image, coordinates } from "./image";
import * as Help from "./helper"; import * as Utility from "./utility";
import "dygraphs" import "dygraphs"
class Chart { class Chart {
_graphic: any; graphic: any;
private readonly chartElementID: string = "chart"; private readonly chartElementID: string = "chart";
private _setLinearButton: HTMLAnchorElement; private setLinearButton: HTMLAnchorElement;
private _setLogButton: HTMLAnchorElement; private setLogButton: HTMLAnchorElement;
private _setEnergyButton: HTMLAnchorElement; private setEnergyButton: HTMLAnchorElement;
private _setChannelButton: HTMLAnchorElement; private setChannelButton: HTMLAnchorElement;
private _exportgraph: HTMLAnchorElement; private exportgraph: HTMLAnchorElement;
private _readSpinBox: HTMLButtonElement; private readSpinBox: HTMLButtonElement;
private _chartElement: HTMLElement; private chartElement: HTMLElement;
private _elementSelect: HTMLSelectElement; private elementSelect: HTMLSelectElement;
public spinBoxMin: HTMLInputElement; public spinBoxMin: HTMLInputElement;
public spinBoxMax: HTMLInputElement; public spinBoxMax: HTMLInputElement;
...@@ -23,7 +23,7 @@ class Chart { ...@@ -23,7 +23,7 @@ class Chart {
calibrated: boolean = false; //variabile per il controllo sulla calibrazione calibrated: boolean = false; //variabile per il controllo sulla calibrazione
constructor() { constructor() {
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID); this.chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin"); this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin");
this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax"); this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax");
...@@ -39,11 +39,11 @@ class Chart { ...@@ -39,11 +39,11 @@ class Chart {
if (!this.calibrated) { if (!this.calibrated) {
//canali //canali
let chartTitle: string = "Chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")"; 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 { } else {
//energie //energie
let chartTitle: string = "Calibrated chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")"; 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 //disegno il grafico parzialmente
...@@ -73,12 +73,12 @@ class Chart { ...@@ -73,12 +73,12 @@ class Chart {
} else { } else {
chartTitle = "Chart from (" + pixel1.x + "," + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")"; 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 { } else {
//disegno in energie //disegno in energie
let dataChartCalibrated: string = "Energy,Counts\n"; let dataChartCalibrated: string = "Energy,Counts\n";
for (let i: number = 0; i < image.depth; i++) { 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; let chartTitle: string;
if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) { if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) {
...@@ -86,7 +86,7 @@ class Chart { ...@@ -86,7 +86,7 @@ class Chart {
} else { } else {
chartTitle = "Calibrated chart from (" + pixel1.x + ", " + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")"; 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);
} }
} }
} }
...@@ -106,11 +106,11 @@ class Chart { ...@@ -106,11 +106,11 @@ class Chart {
//dimensioni grafico //dimensioni grafico
let chartDim: any = document.querySelector("#chart-pannel").getBoundingClientRect(); let chartDim: any = document.querySelector("#chart-pannel").getBoundingClientRect();
let chartWidth = chartDim.right - chartDim.left - 50; let chartWidth = chartDim.right - chartDim.left - 50;
this._chartElement.setAttribute("width", chartWidth.toString()); this.chartElement.setAttribute("width", chartWidth.toString());
this._chartElement.setAttribute("height", "400"); this.chartElement.setAttribute("height", "400");
//disegno il grafico //disegno il grafico
this._graphic = new Dygraph(this._chartElement, dataString, this.graphic = new Dygraph(this.chartElement, dataString,
{ {
title: charTitle, title: charTitle,
ylabel: "Counts", ylabel: "Counts",
...@@ -124,7 +124,7 @@ class Chart { ...@@ -124,7 +124,7 @@ class Chart {
logscale: false, logscale: false,
}); });
return this._graphic; return this.graphic;
} }
//la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico //la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico
peackSelection(xMinRange: number, xMaxRange: number, image: Image) { peackSelection(xMinRange: number, xMaxRange: number, image: Image) {
......
events.ts
View file @ c8f08ac7
import { Image } from "./image" import { Image } from "./image"
import { Chart } from "./chart" import { Chart } from "./chart"
import * as Help from "./helper" import * as Utility from "./utility"
import "dygraphs" import "dygraphs"
class Events { class Events {
...@@ -10,7 +10,6 @@ class Events { ...@@ -10,7 +10,6 @@ class Events {
//////////////////// Chart /////////////////////////// //////////////////// Chart ///////////////////////////
private readonly setLinearButtonID: string = "setlinearButton"; private readonly setLinearButtonID: string = "setlinearButton";
private readonly setLogButtonID: string = "setlogButton"; private readonly setLogButtonID: string = "setlogButton";
private readonly setEnergyButtonID: string = "setEnergyButton"; private readonly setEnergyButtonID: string = "setEnergyButton";
...@@ -20,42 +19,42 @@ class Events { ...@@ -20,42 +19,42 @@ class Events {
private readonly chartElementID: string = "chart"; private readonly chartElementID: string = "chart";
private readonly elementSelectID: string = "elementSelect"; private readonly elementSelectID: string = "elementSelect";
private _setLinearButton: HTMLAnchorElement; private setLinearButton: HTMLAnchorElement;
private _setLogButton: HTMLAnchorElement; private setLogButton: HTMLAnchorElement;
private _setEnergyButton: HTMLAnchorElement; private setEnergyButton: HTMLAnchorElement;
private _setChannelButton: HTMLAnchorElement; private setChannelButton: HTMLAnchorElement;
private _exportgraph: HTMLAnchorElement; private exportgraph: HTMLAnchorElement;
private _readSpinBox: HTMLButtonElement; private readSpinBox: HTMLButtonElement;
private _chartElement: HTMLElement; private chartElement: HTMLElement;
private _elementSelect: HTMLSelectElement; private elementSelect: HTMLSelectElement;
public spinBoxMin: HTMLInputElement; public spinBoxMin: HTMLInputElement;
public spinBoxMax: HTMLInputElement; public spinBoxMax: HTMLInputElement;
//////////////////// Image /////////////////////////// //////////////////// Image ///////////////////////////
private _startX: number; private startX: number;
private _startY: number; private startY: number;
private _mouseX: number; private mouseX: number;
private _mouseY: number; private mouseY: number;
private readonly _saturationSliderID: string = "SaturationSlider"; private readonly saturationSliderID: string = "SaturationSlider";
private readonly _replotButtonID: string = "rePlot"; private readonly replotButtonID: string = "rePlot";
private readonly _transparencySliderID: string = "TrasparencySlider"; private readonly transparencySliderID: string = "TrasparencySlider";
private readonly _resetID: string = "reset"; private readonly resetID: string = "reset";
private readonly _exportImageID: string = "ExportImage"; private readonly exportImageID: string = "ExportImage";
private readonly _selectionCanvasID: string = "selectionCanvas"; private readonly selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas"; private readonly myCanvasID: string = "myCanvas";
private _saturationSlider: HTMLInputElement; private saturationSlider: HTMLInputElement;
private _replotButton: HTMLButtonElement; private replotButton: HTMLButtonElement;
private _transparencySlider: HTMLInputElement; private transparencySlider: HTMLInputElement;
private _reset: HTMLDivElement; private reset: HTMLDivElement;
private _exportImage: HTMLDivElement; private exportImage: HTMLDivElement;
private _selectionCanvas: HTMLCanvasElement; private selectionCanvas: HTMLCanvasElement;
private _myCanvas: HTMLCanvasElement; private myCanvas: HTMLCanvasElement;
private _ctx; private ctx;
private _isDown = false; private isDown = false;
constructor(image: Image, chart: Chart) { constructor(image: Image, chart: Chart) {
this.image = image; this.image = image;
...@@ -63,71 +62,71 @@ class Events { ...@@ -63,71 +62,71 @@ class Events {
//////////////////// Chart /////////////////////////// //////////////////// Chart ///////////////////////////
this._setLinearButton = <HTMLAnchorElement>document.getElementById(this.setLinearButtonID); this.setLinearButton = <HTMLAnchorElement>document.getElementById(this.setLinearButtonID);
this._setLinearButton.addEventListener("click", this.setLinearButtonClick, false); this.setLinearButton.addEventListener("click", this.setLinearButtonClick, false);
this._setLogButton = <HTMLAnchorElement>document.getElementById(this.setLogButtonID); this.setLogButton = <HTMLAnchorElement>document.getElementById(this.setLogButtonID);
this._setLogButton.addEventListener("click", this.setLogButtonClick, false); this.setLogButton.addEventListener("click", this.setLogButtonClick, false);
this._setEnergyButton = <HTMLAnchorElement>document.getElementById(this.setEnergyButtonID); this.setEnergyButton = <HTMLAnchorElement>document.getElementById(this.setEnergyButtonID);
this._setEnergyButton.addEventListener("click", this.setEnergyButtonClick, false); this.setEnergyButton.addEventListener("click", this.setEnergyButtonClick, false);
this._setChannelButton = <HTMLAnchorElement>document.getElementById(this.setChannelButtonID); this.setChannelButton = <HTMLAnchorElement>document.getElementById(this.setChannelButtonID);
this._setChannelButton.addEventListener("click", this.setChannelButtonClick, false); this.setChannelButton.addEventListener("click", this.setChannelButtonClick, false);
this._exportgraph = <HTMLAnchorElement>document.getElementById(this.exportGraphID); this.exportgraph = <HTMLAnchorElement>document.getElementById(this.exportGraphID);
this._exportgraph.addEventListener("click", this.exportGraphClick, false); this.exportgraph.addEventListener("click", this.exportGraphClick, false);
this._readSpinBox = <HTMLButtonElement>document.getElementById(this.readSpinBoxID); this.readSpinBox = <HTMLButtonElement>document.getElementById(this.readSpinBoxID);
this._readSpinBox.addEventListener("click", this.readSpinBoxClick, false); this.readSpinBox.addEventListener("click", this.readSpinBoxClick, false);
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID); this.chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this._chartElement.addEventListener("click", this.chartClick, false); this.chartElement.addEventListener("mouseup", this.chartClick, false);
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID); this.elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false); this.elementSelect.addEventListener("select", this.elementSelectEvent, false);
//////////////////// Image /////////////////////////// //////////////////// Image ///////////////////////////
this._selectionCanvas = <HTMLCanvasElement>document.getElementById(this._selectionCanvasID); this.selectionCanvas = <HTMLCanvasElement>document.getElementById(this.selectionCanvasID);
this._ctx = this._selectionCanvas.getContext("2d"); this.ctx = this.selectionCanvas.getContext("2d");
this._myCanvas = <HTMLCanvasElement>document.getElementById(this._myCanvasID); this.myCanvas = <HTMLCanvasElement>document.getElementById(this.myCanvasID);
this._saturationSlider = <HTMLInputElement>document.getElementById(this._saturationSliderID); this.saturationSlider = <HTMLInputElement>document.getElementById(this.saturationSliderID);
this._replotButton = <HTMLButtonElement>document.getElementById(this._replotButtonID); this.replotButton = <HTMLButtonElement>document.getElementById(this.replotButtonID);
this._transparencySlider = <HTMLInputElement>document.getElementById(this._transparencySliderID); this.transparencySlider = <HTMLInputElement>document.getElementById(this.transparencySliderID);
this._reset = <HTMLDivElement>document.getElementById(this._resetID); this.reset = <HTMLDivElement>document.getElementById(this.resetID);
this._exportImage = <HTMLDivElement>document.getElementById(this._exportImageID); this.exportImage = <HTMLDivElement>document.getElementById(this.exportImageID);
this._saturationSlider.addEventListener("mouseup", this.saturationSliderMouseUp, false); this.saturationSlider.addEventListener("mouseup", this.saturationSliderMouseUp, false);
this._replotButton.addEventListener("click", this.replotButtonClick, false); this.replotButton.addEventListener("click", this.replotButtonClick, false);
this._transparencySlider.addEventListener("mouseup", this.trasparencySliderMouseUp, false); this.transparencySlider.addEventListener("mouseup", this.trasparencySliderMouseUp, false);
this._reset.addEventListener("click", this.resetClick, false); this.reset.addEventListener("click", this.resetClick, false);
this._exportImage.addEventListener("click", this.exportImageClick, false); this.exportImage.addEventListener("click", this.exportImageClick, false);
this._selectionCanvas.addEventListener("mousedown", this.selectionCanvasMouseDown, false); this.selectionCanvas.addEventListener("mousedown", this.selectionCanvasMouseDown, false);
this._selectionCanvas.addEventListener("mouseup", this.clickdown, false); this.selectionCanvas.addEventListener("mouseup", this.clickdown, false);
this._selectionCanvas.addEventListener("mousemove", this.selectionCanvasMouseMove, false); this.selectionCanvas.addEventListener("mousemove", this.selectionCanvasMouseMove, false);
this._selectionCanvas.addEventListener("mouseup", this.selectionCanvasMouseUp, false); this.selectionCanvas.addEventListener("mouseup", this.selectionCanvasMouseUp, false);
this._selectionCanvas.addEventListener("mouseout", this.selectionCanvasMouseOut, false); this.selectionCanvas.addEventListener("mouseout", this.selectionCanvasMouseOut, false);
} }
private saturationSliderMouseUp = (event: MouseEvent): void => { private saturationSliderMouseUp = (event: MouseEvent): void => {
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange); this.image.drawImg(this.image.pixel1, this.image.pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
}; };
private replotButtonClick = (event: MouseEvent) => { private replotButtonClick = (event: MouseEvent) => {
//bottone per colorare con il max relativo //bottone per colorare con il max relativo
this.image.rePrint = true; this.image.rePrint = true;
this._saturationSlider.value = "100"; this.saturationSlider.value = "100";
// opacity value? // opacity value?
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange); this.image.drawImg(this.image.pixel1, this.image.pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
}; };
private trasparencySliderMouseUp = (event: MouseEvent) => { private trasparencySliderMouseUp = (event: MouseEvent) => {
this.image.drawImg(this.image._pixel1, this.image._pixel2, this.image.globalxMinRange, this.image.globalxMaxRange); this.image.drawImg(this.image.pixel1, this.image.pixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
}; };
private resetClick = (event: MouseEvent) => { private resetClick = (event: MouseEvent) => {
...@@ -136,8 +135,8 @@ class Events { ...@@ -136,8 +135,8 @@ class Events {
this.chart.calibrated = false; this.chart.calibrated = false;
this.image.globalxMinRange = 0; this.image.globalxMinRange = 0;
this.image.globalxMaxRange = this.image.channelDepth; this.image.globalxMaxRange = this.image.channelDepth;
this._saturationSlider.value = "100"; this.saturationSlider.value = "100";
this._transparencySlider.value = "0"; this.transparencySlider.value = "0";
this.chart.spinBoxMin.setAttribute("value", "-"); this.chart.spinBoxMin.setAttribute("value", "-");
this.chart.spinBoxMax.setAttribute("value", "-"); this.chart.spinBoxMax.setAttribute("value", "-");
this.image.drawImg({ x: 0, y: 0 }, { x: this.image.width - 1, y: this.image.height - 1 }, 0, this.image.channelDepth); this.image.drawImg({ x: 0, y: 0 }, { x: this.image.width - 1, y: this.image.height - 1 }, 0, this.image.channelDepth);
...@@ -146,12 +145,12 @@ class Events { ...@@ -146,12 +145,12 @@ class Events {
private exportImageClick = (event: MouseEvent) => { private exportImageClick = (event: MouseEvent) => {
//esportazione immagine //esportazione immagine
let img = this._selectionCanvas.toDataURL("image/png"); let img = this.selectionCanvas.toDataURL("image/png");
this._selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream")); this.selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream"));
document.getElementById("ExportLink").setAttribute("href", img); document.getElementById("ExportLink").setAttribute("href", img);
}; };
private clickdown = (event: MouseEvent): void => { private clickdown = (event: MouseEvent): void => {
this.image.setPosition(event, this.image.zPixel2, this._selectionCanvasID); this.image.setPosition(event, this.image.zPixel2, this.selectionCanvasID);
let tmp: number; let tmp: number;
if (this.image.zPixel1.y > this.image.zPixel2.y) { if (this.image.zPixel1.y > this.image.zPixel2.y) {
...@@ -178,18 +177,18 @@ class Events { ...@@ -178,18 +177,18 @@ class Events {
let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft; let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
let allX: number = event.clientX + scrollLEFT; let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP; let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas; let elParent: any = this.myCanvas;
let objX: number = 0, objY: number = 0; let objX: number = 0, objY: number = 0;
while (elParent) { while (elParent) {
objX += elParent.offsetLeft; objX += elParent.offsetLeft;
objY += elParent.offsetTop; objY += elParent.offsetTop;
elParent = elParent.offsetParent; elParent = elParent.offsetParent;
} }
this._startX = allX - objX; this.startX = allX - objX;
this._startY = allY - objY; this.startY = allY - objY;
// set a flag indicating the drag has begun // set a flag indicating the drag has begun
this._isDown = true; this.isDown = true;
}; };
private selectionCanvasMouseUp = (event: MouseEvent) => { private selectionCanvasMouseUp = (event: MouseEvent) => {
...@@ -197,15 +196,15 @@ class Events { ...@@ -197,15 +196,15 @@ class Events {
event.stopPropagation(); event.stopPropagation();
// the drag is over, clear the dragging flag // the drag is over, clear the dragging flag
this._isDown = false; this.isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height); //this.ctx.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);
}; };
private selectionCanvasMouseMove = (event: MouseEvent) => { private selectionCanvasMouseMove = (event: MouseEvent) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
// if we're not dragging, just return // if we're not dragging, just return
if (!this._isDown) { if (!this.isDown) {
return; return;
} }
...@@ -215,27 +214,27 @@ class Events { ...@@ -215,27 +214,27 @@ class Events {
let allX: number = event.clientX + scrollLEFT; let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP; let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas; let elParent: any = this.myCanvas;
let objX: number = 0, objY: number = 0; let objX: number = 0, objY: number = 0;
while (elParent) { while (elParent) {
objX += elParent.offsetLeft; objX += elParent.offsetLeft;
objY += elParent.offsetTop; objY += elParent.offsetTop;
elParent = elParent.offsetParent; elParent = elParent.offsetParent;
} }
this._mouseX = allX - objX; this.mouseX = allX - objX;
this._mouseY = allY - objY; this.mouseY = allY - objY;
// clear the canvas // clear the canvas
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height); //this.ctx.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);
// calculate the rectangle width/height based // calculate the rectangle width/height based
// on starting vs current mouse position // on starting vs current mouse position
let width = this._mouseX - this._startX; let width = this.mouseX - this.startX;
let height = this._mouseY - this._startY; let height = this.mouseY - this.startY;
// draw a new rect from the start position // draw a new rect from the start position
// to the current mouse position // to the current mouse position
this._ctx.fillRect(this._startX, this._startY, width, height); this.ctx.fillRect(this.startX, this.startY, width, height);
}; };
private selectionCanvasMouseOut = (event: MouseEvent) => { private selectionCanvasMouseOut = (event: MouseEvent) => {
...@@ -243,36 +242,36 @@ class Events { ...@@ -243,36 +242,36 @@ class Events {
event.stopPropagation(); event.stopPropagation();
// the drag is over, clear the dragging flag // the drag is over, clear the dragging flag
this._isDown = false; this.isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height); //this.ctx.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);
}; };
private setLinearButtonClick = (event: MouseEvent) => { private setLinearButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: false }); this.chart.graphic.updateOptions({ logscale: false });
}; };
private setLogButtonClick = (event: MouseEvent) => { private setLogButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: true }); this.chart.graphic.updateOptions({ logscale: true });
}; };
private setEnergyButtonClick = (event: MouseEvent) => { private setEnergyButtonClick = (event: MouseEvent) => {
this.chart.calibrated = true; this.chart.calibrated = true;
this.chart.drawChart(this.image, this.image._pixel1, this.image._pixel2, 0, this.image.channelDepth); this.chart.drawChart(this.image, this.image.pixel1, this.image.pixel2, 0, this.image.channelDepth);
this.spinBoxMin.setAttribute("value", "0"); this.spinBoxMin.setAttribute("value", "0");
this.spinBoxMax.setAttribute("value", this.image.channelDepth.toString()); this.spinBoxMax.setAttribute("value", this.image.channelDepth.toString());
}; };
private setChannelButtonClick = (event: MouseEvent) => { private setChannelButtonClick = (event: MouseEvent) => {
this.chart.calibrated = false; this.chart.calibrated = false;
this.chart.drawChart(this.image, this.image._pixel1, this.image._pixel2, 0, this.image.channelDepth); this.chart.drawChart(this.image, this.image.pixel1, this.image.pixel2, 0, this.image.channelDepth);
this.spinBoxMin.setAttribute("value", "-"); this.spinBoxMin.setAttribute("value", "-");
this.spinBoxMax.setAttribute("value", "-"); this.spinBoxMax.setAttribute("value", "-");
}; };
private exportGraphClick = (event: MouseEvent) => { private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg"); let img = <HTMLImageElement>document.getElementById("chartToImg");
//Dygraph..asPNG(this.chart._graphic, img); //Dygraph..asPNG(this.chart.graphic, img);
this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream")); this.exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
}; };
private readSpinBoxClick = (event: MouseEvent) => { private readSpinBoxClick = (event: MouseEvent) => {
...@@ -285,24 +284,24 @@ class Events { ...@@ -285,24 +284,24 @@ class Events {
//zoom manuale sul grafico //zoom manuale sul grafico
console.log("chartClick"); console.log("chartClick");
let r: number[]; let r: number[];
r = this.chart._graphic.xAxisRange(); r = this.chart.graphic.xAxisRange();
if (!this.chart.calibrated) { if (!this.chart.calibrated) {
r[0] = Math.floor(((r[0] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000); r[0] = Math.floor(((r[0] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000);
r[1] = Math.floor(((r[1] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000); r[1] = Math.floor(((r[1] + 1) * this.image.calibration.a - this.image.calibration.b) / 1000);
} else { } else {
r[0] = Help.round3(r[0]); r[0] = Utility.round3(r[0]);
r[1] = Help.round3(r[1]); r[1] = Utility.round3(r[1]);
this.spinBoxMin.setAttribute("value", r[0].toString()); this.spinBoxMin.setAttribute("value", r[0].toString());
this.spinBoxMax.setAttribute("value", r[1].toString()); this.spinBoxMax.setAttribute("value", r[1].toString());
} }
this.image.globalxMinRange = r[0]; this.image.globalxMinRange = r[0];
this.image.globalxMaxRange = r[1]; this.image.globalxMaxRange = r[1];
this.image.drawImg(this.image._pixel1, this.image._pixel2, r[0], r[1]); this.image.drawImg(this.image.pixel1, this.image.pixel2, r[0], r[1]);
}; };
private elementSelect = (event: MouseEvent) => { private elementSelectEvent = (event: MouseEvent) => {
//selezione elemento //selezione elemento
let element: string = this._elementSelect.value; let element: string = this.elementSelect.value;
switch (element) { switch (element) {
case "1": //Ca case "1": //Ca
this.chart.peackSelection(3.6, 3.8, this.image); this.chart.peackSelection(3.6, 3.8, this.image);
......
fs.test.ts
View file @ c8f08ac7
// import * as gfs from "./fs"; import {Fs} from "./fs";
// import * as fs from "fs"; import * as fs from "fs";
// import * as md5 from "ts-md5/dist/md5"; import * as md5 from "ts-md5/dist/md5";
import { Image } from "./image";
import { Chart } from "./chart";
// let content: Buffer; let content: Buffer;
// let lines: string[]; let lines: string[];
// let numbers: number[]; let numbers: number[];
// beforeAll(() => let image: Image = new Image();
// { let chart: Chart = new Chart();
// content = fs.readFileSync("XRF-File-System/Pergamena-Medioevale/codapavone_500.txt"); let filesys: Fs = new Fs();
// lines = content.toString().split('\n');
// numbers = lines.map(Number);
// });
/*test("get_metadata", () => beforeAll(() =>
{ {
let metadata = gfs.get_metadata(numbers); content = fs.readFileSync("XRF-File-System/Pergamena-Medioevale/codapavone_500.txt");
lines = content.toString().split('\n');
numbers = lines.map(Number);
});
test("get_metadata", () =>
{
let metadata = filesys.get_metadata(image, numbers);
expect(metadata).toEqual({ expect(metadata).toEqual({
xMin: 50088000, xMin: 50088000,
xMax: 50103000, xMax: 50103000,
...@@ -24,18 +30,11 @@ ...@@ -24,18 +30,11 @@
step: 500, step: 500,
direction: 'c' direction: 'c'
}); });
})*/ })
/*test("readImage", () => test("readImage", () =>
{ {
let image = gfs.readImage(content.toString()); let readImage = filesys.readImage(image, chart, content.toString());
expect(md5.Md5.hashAsciiStr(JSON.stringify(image))).toBe("0a77bca5eb4c9bdd137c753a21b98545"); // coda_pavone_500 expect(md5.Md5.hashAsciiStr(JSON.stringify(readImage))).toBe("0a77bca5eb4c9bdd137c753a21b98545"); // coda_pavone_500
//expect(md5.Md5.hashAsciiStr(JSON.stringify(image))).toBe("b9e7fb96f36452cc3c2350d6132b50c6"); // coda_pavone_250 //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
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// Licensed under the EUPL // Licensed under the EUPL
import * as $ from "jquery"; import * as $ from "jquery";
import * as Help from "./helper"; import * as Utility from "./utility";
import { Image } from "./image"; import { Image } from "./image";
import { Chart } from "./chart"; import { Chart } from "./chart";
...@@ -156,7 +156,7 @@ class Fs { ...@@ -156,7 +156,7 @@ class Fs {
//determinare ascisse e cordinate minime e massime, il passo e la direzione di //determinare ascisse e cordinate minime e massime, il passo e la direzione di
//scansione //scansione
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
if (Help.isAnXHeader(lines[i], image)) { if (Utility.isAnXHeader(lines[i], image)) {
if (this.xMin == 0) { if (this.xMin == 0) {
//se sono alla prima intestazione salvo la x e la y //se sono alla prima intestazione salvo la x e la y
this.xMin = lines[i]; this.xMin = lines[i];
...@@ -170,7 +170,7 @@ class Fs { ...@@ -170,7 +170,7 @@ class Fs {
//se sto leggendo per colonne determino this.xMax leggendo dalla fine //se sto leggendo per colonne determino this.xMax leggendo dalla fine
for (let j: number = lines.length; j > i; j--) { for (let j: number = lines.length; j > i; j--) {
//se la riga è "intestazione x" memorizzo this.xMax e lo confronto con this.xMin //se la riga è "intestazione x" memorizzo this.xMax e lo confronto con this.xMin
if (Help.isAnXHeader(lines[j], image)) { if (Utility.isAnXHeader(lines[j], image)) {
this.xMax = lines[j]; this.xMax = lines[j];
if (this.xMax < this.xMin) { if (this.xMax < this.xMin) {
let t: number = this.xMax; let t: number = this.xMax;
...@@ -186,7 +186,7 @@ class Fs { ...@@ -186,7 +186,7 @@ class Fs {
//se sto leggendo per righe determino this.yMax leggendo dalla fine //se sto leggendo per righe determino this.yMax leggendo dalla fine
for (let j: number = lines.length; j > i; j--) { for (let j: number = lines.length; j > i; j--) {
//se la riga è "intestazione y" memorizzo this.yMax e lo confronto con this.yMin //se la riga è "intestazione y" memorizzo this.yMax e lo confronto con this.yMin
if (Help.isAnYHeader(lines[j], image)) { if (Utility.isAnYHeader(lines[j], image)) {
this.yMax = lines[j]; this.yMax = lines[j];
if (this.yMax < this.yMin) { if (this.yMax < this.yMin) {
let t: number = this.yMax; let t: number = this.yMax;
...@@ -206,7 +206,7 @@ class Fs { ...@@ -206,7 +206,7 @@ class Fs {
if (this.direction == ReadDirection.c) { if (this.direction == ReadDirection.c) {
//se leggo per colonne devo deterinare this.yMin e this.yMax //se leggo per colonne devo deterinare this.yMin e this.yMax
//mi soffermo sulle righe "intestazione y" //mi soffermo sulle righe "intestazione y"
if (Help.isAnYHeader(lines[i], image)) { if (Utility.isAnYHeader(lines[i], image)) {
if (this.yMin > lines[i]) { if (this.yMin > lines[i]) {
this.yMin = lines[i]; this.yMin = lines[i];
} }
...@@ -221,7 +221,7 @@ class Fs { ...@@ -221,7 +221,7 @@ class Fs {
} else { } else {
//se leggo per righe devo deterinare this.xMin e this.xMax //se leggo per righe devo deterinare this.xMin e this.xMax
//mi soffermo sulle righe "intestazione x" //mi soffermo sulle righe "intestazione x"
if (Help.isAnXHeader(lines[i], image)) { if (Utility.isAnXHeader(lines[i], image)) {
if (this.xMin > lines[i]) { if (this.xMin > lines[i]) {
this.xMin = lines[i]; this.xMin = lines[i];
} }
...@@ -250,14 +250,14 @@ class Fs { ...@@ -250,14 +250,14 @@ class Fs {
// in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate // in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate
// anche altre variabili necessarie per il resto del codice. // anche altre variabili necessarie per il resto del codice.
readImage(image: Image, chart: Chart, content: string): Image { readImage(image: Image, chart: Chart, content: any): Image {
let lines = content.split("\n").map(Number); let lines = content.split("\n").map(Number);
this.get_metadata(image, lines); this.get_metadata(image, lines);
// Risolvo gli shift // Risolvo gli shift
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
if (Help.isAnXHeader(lines[i], image)) { if (Utility.isAnXHeader(lines[i], image)) {
// this is an x-coordinate // this is an x-coordinate
if (this.direction == ReadDirection.c && (lines[i] / 1000) % 2 != 0) { if (this.direction == ReadDirection.c && (lines[i] / 1000) % 2 != 0) {
// increment the y-coordinate of odd columns // increment the y-coordinate of odd columns
...@@ -299,7 +299,7 @@ class Fs { ...@@ -299,7 +299,7 @@ class Fs {
let write: boolean; let write: boolean;
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
//riga "intestazione x": memorizzo le x e le y del punto e avanzo al conteggio //riga "intestazione x": memorizzo le x e le y del punto e avanzo al conteggio
if (Help.isAnXHeader(lines[i], image)) { if (Utility.isAnXHeader(lines[i], image)) {
x = lines[i] - this.xMin; x = lines[i] - this.xMin;
y = lines[i + 1] - this.yMin; y = lines[i + 1] - this.yMin;
if (x != 0) { if (x != 0) {
...@@ -338,13 +338,13 @@ class Fs { ...@@ -338,13 +338,13 @@ class Fs {
for (let i: number = 0; i < xDim; i++) { for (let i: number = 0; i < xDim; i++) {
image.nOfCounts[i] = new Array(yDim); image.nOfCounts[i] = new Array(yDim);
for (let j: number = 0; j < yDim; j++) { for (let j: number = 0; j < yDim; j++) {
image.nOfCounts[i][j] = Help.sumVect(image.DataMatrix[i][j], 0, image.DataMatrix[i][j].length); image.nOfCounts[i][j] = Utility.sumVect(image.DataMatrix[i][j], 0, image.DataMatrix[i][j].length);
} }
} }
//console.log(image.nOfCounts); //console.log(image.nOfCounts);
image.maxAbsolute = Help.findMax(image.nOfCounts, { x: 0, y: 0 }, { x: xDim - 1, y: yDim - 1 }); image.maxAbsolute = Utility.findMax(image.nOfCounts, { x: 0, y: 0 }, { x: xDim - 1, y: yDim - 1 });
Help.setDataForCompleteChart(image, chart); Utility.setDataForCompleteChart(image, chart);
return image; return image;
} }
......
image.ts
View file @ c8f08ac7
import * as $ from "jquery"; import * as Utility from "./utility";
import * as Help from "./helper";
import { Chart } from "./chart";
interface coordinates // used in multiple files interface coordinates // used in multiple files
{ {
...@@ -15,31 +13,31 @@ class Calibration //used in multiple files ...@@ -15,31 +13,31 @@ class Calibration //used in multiple files
} }
class Image { class Image {
private readonly _saturationSliderID: string = "SaturationSlider"; private readonly saturationSliderID: string = "SaturationSlider";
private readonly _transparencySliderID: string = "TrasparencySlider"; private readonly transparencySliderID: string = "TrasparencySlider";
private readonly _selectionCanvasID: string = "selectionCanvas"; private readonly selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas"; private readonly myCanvasID: string = "myCanvas";
private _context: CanvasRenderingContext2D; private context: CanvasRenderingContext2D;
private _saturationSlider: HTMLInputElement; private saturationSlider: HTMLInputElement;
private _transparencySlider: HTMLInputElement; private transparencySlider: HTMLInputElement;
_pixel1: coordinates; pixel1: coordinates;
_pixel2: coordinates; pixel2: coordinates;
private _xMinRange: number; private xMinRange: number;
private _xMaxRange: number; private xMaxRange: number;
private _selectionCanvas: HTMLCanvasElement; private selectionCanvas: HTMLCanvasElement;
private _myCanvas: HTMLCanvasElement; private myCanvas: HTMLCanvasElement;
private _ctx; private ctx;
private _isDown = false; private isDown = false;
DataMatrix: number[][][]; DataMatrix: number[][][];
width: number; width: number;
height: number; height: number;
readonly calibration: Calibration = { a: 3.36275, b: 58.2353 }; readonly calibration: Calibration = { a: 3.36275, b: 58.2353 };
readonly depth: number = 8000; 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 maxCoordValueX = 60000000; // to check
readonly headerSetValue = 17000; readonly headerSetValue = 17000;
readonly xCoordHeaderFirstValue = 5; //instestazione X readonly xCoordHeaderFirstValue = 5; //instestazione X
...@@ -55,12 +53,12 @@ class Image { ...@@ -55,12 +53,12 @@ class Image {
rePrint: boolean = false; //variabile per ricolorare con il max relativo rePrint: boolean = false; //variabile per ricolorare con il max relativo
constructor() { constructor() {
this._selectionCanvas = <HTMLCanvasElement>document.getElementById(this._selectionCanvasID); this.selectionCanvas = <HTMLCanvasElement>document.getElementById(this.selectionCanvasID);
this._ctx = this._selectionCanvas.getContext("2d"); this.ctx = this.selectionCanvas.getContext("2d");
this._myCanvas = <HTMLCanvasElement>document.getElementById(this._myCanvasID); this.myCanvas = <HTMLCanvasElement>document.getElementById(this.myCanvasID);
this._saturationSlider = <HTMLInputElement>document.getElementById(this._saturationSliderID); this.saturationSlider = <HTMLInputElement>document.getElementById(this.saturationSliderID);
this._transparencySlider = <HTMLInputElement>document.getElementById(this._transparencySliderID); this.transparencySlider = <HTMLInputElement>document.getElementById(this.transparencySliderID);
} }
...@@ -84,13 +82,13 @@ class Image { ...@@ -84,13 +82,13 @@ class Image {
pixel.y = Math.floor((allY - objY - 1) / this.pixelDim) + this.newOrigin.y; pixel.y = Math.floor((allY - objY - 1) / this.pixelDim) + this.newOrigin.y;
} }
drawImg(pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number, callback?: () => void) { drawImg(pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number, callback?: () => void) {
this._pixel1 = pixel1; this.pixel1 = pixel1;
this._pixel2 = pixel2; this.pixel2 = pixel2;
//alert("disegno in corso"); //alert("disegno in corso");
//numero di pixel per dimensione //numero di pixel per dimensione
let nPixelX: number = this._pixel2.x - this._pixel1.x + 1; let nPixelX: number = this.pixel2.x - this.pixel1.x + 1;
let nPixelY: number = this._pixel2.y - this._pixel1.y + 1; let nPixelY: number = this.pixel2.y - this.pixel1.y + 1;
//dimensione dei canvas //dimensione dei canvas
let mappaPannelDim: any = document.querySelector("#mappa-pannel").getBoundingClientRect(); let mappaPannelDim: any = document.querySelector("#mappa-pannel").getBoundingClientRect();
...@@ -103,22 +101,22 @@ class Image { ...@@ -103,22 +101,22 @@ class Image {
this.pixelDim = dimPixelx < dimPixely ? dimPixelx : dimPixely; this.pixelDim = dimPixelx < dimPixely ? dimPixelx : dimPixely;
//dimensioni esatte dei canvas //dimensioni esatte dei canvas
this._myCanvas.height = nPixelY * this.pixelDim; this.myCanvas.height = nPixelY * this.pixelDim;
this._myCanvas.width = nPixelX * this.pixelDim; this.myCanvas.width = nPixelX * this.pixelDim;
this._selectionCanvas.height = nPixelY * this.pixelDim; this.selectionCanvas.height = nPixelY * this.pixelDim;
this._selectionCanvas.width = nPixelX * this.pixelDim; this.selectionCanvas.width = nPixelX * this.pixelDim;
let ctx = this._myCanvas.getContext("2d"); //contesto del canvas let ctx = this.myCanvas.getContext("2d"); //contesto del canvas
if (xMaxRange - xMinRange >= this.channelDepth) { if (xMaxRange - xMinRange >= this.channelDepth) {
//range completo //range completo
let max: number = 0; //massimo relativo o assoluto let max: number = 0; //massimo relativo o assoluto
if (this.rePrint) { if (this.rePrint) {
max = Help.findMax(this.nOfCounts, this._pixel1, this._pixel2); max = Utility.findMax(this.nOfCounts, this.pixel1, this.pixel2);
} else { } else {
max = this.maxAbsolute; max = this.maxAbsolute;
} }
max *= parseInt(this._saturationSlider.value) / 100; max *= parseInt(this.saturationSlider.value) / 100;
this.drawCanvas(this.nOfCounts, max); this.drawCanvas(this.nOfCounts, max);
} else { } else {
...@@ -131,18 +129,18 @@ class Image { ...@@ -131,18 +129,18 @@ class Image {
for (let i: number = 0; i < this.width; i++) { for (let i: number = 0; i < this.width; i++) {
nOfCountsRelative[i] = new Array(this.height); nOfCountsRelative[i] = new Array(this.height);
for (let j: number = 0; j < this.height; j++) { 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 //calcolo il massimo
let max: number = 0; let max: number = 0;
if (this.rePrint) { if (this.rePrint) {
max = Help.findMax(nOfCountsRelative, this._pixel1, this._pixel2); max = Utility.findMax(nOfCountsRelative, this.pixel1, this.pixel2);
} else { } 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) if (max == 0)
alert("WARNING: max value is 0"); alert("WARNING: max value is 0");
...@@ -156,12 +154,12 @@ class Image { ...@@ -156,12 +154,12 @@ class Image {
private drawCanvas(noc, max) { private drawCanvas(noc, max) {
//controllo il valore della trasparenza //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 //scorro tutti i pixel: ne determino il colore e li disegno
let color: string = ""; let color: string = "";
for (let i: number = this._pixel1.x; i <= this._pixel2.x; i++) { 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 j: number = this.pixel1.y; j <= this.pixel2.y; j++) {
let intensity: number = noc[i][j] / max; let intensity: number = noc[i][j] / max;
if (intensity < 1 / 5) if (intensity < 1 / 5)
//blu //blu
...@@ -179,15 +177,15 @@ class Image { ...@@ -179,15 +177,15 @@ class Image {
else else
color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + ", 0, " + setTrsp + ")"; color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + ", 0, " + setTrsp + ")";
this._ctx.fillStyle = color; 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.fillRect((i - this.pixel1.x) * this.pixelDim, (j - this.pixel1.y) * this.pixelDim, this.pixelDim, this.pixelDim);
} }
} }
//console.log(color); //console.log(color);
this.rePrint = false; //annullo rePrint 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;
} }
......
importFile.ts
View file @ c8f08ac7
...@@ -2,6 +2,9 @@ import { Image } from "./image"; ...@@ -2,6 +2,9 @@ import { Image } from "./image";
import { Chart } from "./chart"; import { Chart } from "./chart";
import { Fs } from "./fs"; import { Fs } from "./fs";
import { CallbackManager } from "./callbacks" import { CallbackManager } from "./callbacks"
import $ = require("jquery");
class ImportFile { class ImportFile {
private image: Image; private image: Image;
private chart: Chart; private chart: Chart;
...@@ -21,29 +24,29 @@ class ImportFile { ...@@ -21,29 +24,29 @@ class ImportFile {
// genero e leggo il contenuto della directory "filesystem" // genero e leggo il contenuto della directory "filesystem"
// comment out waiting to properly address the request // comment out waiting to properly address the request
let xmlDoc: Document; // let xmlDoc: Document;
let xmlListingFile: any = new XMLHttpRequest(); // let xmlListingFile: any = new XMLHttpRequest();
xmlListingFile.open("PROPFIND", "CHNET/", false); // xmlListingFile.open("PROPFIND", "CHNET/", false);
xmlListingFile.setRequestHeader("Depth", "infinity"); // xmlListingFile.setRequestHeader("Depth", "infinity");
xmlListingFile.onreadystatechange = function () { // xmlListingFile.onreadystatechange = function () {
if (xmlListingFile.readyState === 4) { // if (xmlListingFile.readyState === 4) {
if (xmlListingFile.status === 207) { // if (xmlListingFile.status === 207) {
let parser = new DOMParser(); // let parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml"); // xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
} // }
} // }
} // }
xmlListingFile.send(null); // xmlListingFile.send(null);
//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
jQuery(document.getElementById('FileTreeview')).treeview({ data: this.fs.generateTree(xmlDoc) }); // jQuery(document.getElementById('FileTreeview')).treeview({ data: this.fs.generateTree(xmlDoc) });
$('#FileTreeview').on('nodeSelected', (e, node) => { // $('#FileTreeview').on('nodeSelected', (e, node) => {
if (node['url'] != undefined) { // if (node['url'] != undefined) {
$("#load-spinner").css("display", "inline"); // $("#load-spinner").css("display", "inline");
this.fs.openFileFromServer(node['url']); // this.fs.openFileFromServer(node['url']);
} // }
}); // });
// import a local file // import a local file
...@@ -54,8 +57,8 @@ class ImportFile { ...@@ -54,8 +57,8 @@ class ImportFile {
let file: File = fileInputButton.files[0]; let file: File = fileInputButton.files[0];
let readerObject = new FileReader(); let readerObject = new FileReader();
readerObject.onload = () => { readerObject.onload = () => {
let content: string = readerObject.result; let content = readerObject.result;
let image: Image = this.fs.readImage(this.image, this.chart, content); let image = this.fs.readImage(this.image, this.chart, content);
this.callbackManager.showElement("load-spinner", false); 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.image.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { this.callbackManager.closeBootstrapModel("btnCloseModal"); }); () => { this.callbackManager.closeBootstrapModel("btnCloseModal"); });
...@@ -134,7 +137,7 @@ class ImportFile { ...@@ -134,7 +137,7 @@ class ImportFile {
console.log("Try to open " + file.name + " ..."); console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader(); let readerObject = new FileReader();
readerObject.onload = () => { readerObject.onload = () => {
let content: string = readerObject.result; let content = readerObject.result;
fs.readImage(drawImage, drawChart, content); fs.readImage(drawImage, drawChart, content);
this.callbackManager.showElement("load-spinner", false); this.callbackManager.showElement("load-spinner", false);
}; };
......
index.php
View file @ c8f08ac7
...@@ -13,14 +13,11 @@ ...@@ -13,14 +13,11 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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/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-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"> <link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie --> <!-- Librerie -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script> <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/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-treeview/public/js/bootstrap-treeview.js"></script> -->
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script> <script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<script type="text/javascript" src="xrf.js"></script> <script type="text/javascript" src="xrf.js"></script>
<!-- ./Librerie --> <!-- ./Librerie -->
...@@ -57,7 +54,7 @@ ...@@ -57,7 +54,7 @@
} else { } else {
echo "<img src=\"./default-avatar.png\" class=\"img-circle\" width=\"25\">"; 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> <span class="glyphicon glyphicon-chevron-down"></span>
</a> </a>
......
package-lock.json
View file @ c8f08ac7
This diff is collapsed.
package.json
View file @ c8f08ac7
...@@ -5,16 +5,11 @@ ...@@ -5,16 +5,11 @@
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"@types/bootstrap-treeview": "^1.20.0",
"@types/dygraphs": "^1.1.7",
"assert": "latest", "assert": "latest",
"bootstrap": "v3.3.7", "bootstrap": "v3.3.7",
"bootstrap-select": "^1.12.4", "bootstrap-select": "^1.12.4",
"bootstrap-slider": "^10.0.0", "bootstrap-slider": "^10.0.0",
"bootstrap-tooltip": "^3.1.1", "bootstrap-tooltip": "^3.1.1",
"bootstrap-treeview": "^1.2.0",
"bower": "^1.8.4",
"connect": "^3.6.6",
"dygraphs": "^2.0.0", "dygraphs": "^2.0.0",
"jquery": "^3.3.1" "jquery": "^3.3.1"
}, },
...@@ -25,7 +20,9 @@ ...@@ -25,7 +20,9 @@
"url": "https://baltig.infn.it/chnet/XRF-App.git" "url": "https://baltig.infn.it/chnet/XRF-App.git"
}, },
"devDependencies": { "devDependencies": {
"@types/dygraphs": "^1.1.8",
"@types/jest": "^21.1.6", "@types/jest": "^21.1.6",
"@types/jquery": "^3.3.4",
"@types/node": "^8.10.18", "@types/node": "^8.10.18",
"jest": "^21.2.1", "jest": "^21.2.1",
"ts-jest": "^21.2.2", "ts-jest": "^21.2.2",
......
start.ts
View file @ c8f08ac7
...@@ -2,13 +2,9 @@ ...@@ -2,13 +2,9 @@
// //
// Licensed under the EUPL // Licensed under the EUPL
import * as $ from "jquery";
import { Chart } from './chart'; import { Chart } from './chart';
import { Image } from './image'; import { Image } from './image';
import { Fs } from "./fs";
import * as Callback from "./callbacks";
import { Events } from "./events"; import { Events } from "./events";
import "bootstrap-treeview";
import { ImportFile } from "./importFile"; import { ImportFile } from "./importFile";
......
tsconfig.json
View file @ c8f08ac7
...@@ -6,9 +6,5 @@ ...@@ -6,9 +6,5 @@
"lib": [ "lib": [
"es6", "dom" "es6", "dom"
], ],
"types": [
"bootstrap-treeview",
"dygraphs"
]
} }
} }
\ No newline at end of file
helper.ts → utility.ts
View file @ c8f08ac7
File moved