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 * as Help from "./helper";
import * as Utility from "./utility";
import "dygraphs"
class Chart {
_graphic: any;
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;
......@@ -23,7 +23,7 @@ class Chart {
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");
......@@ -39,11 +39,11 @@ class Chart {
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 @@ class Chart {
} 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,7 +86,7 @@ class Chart {
} 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);
}
}
}
......@@ -106,11 +106,11 @@ class Chart {
//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,7 +124,7 @@ class Chart {
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: Image) {
......
events.ts
View file @ c8f08ac7
import { Image } from "./image"
import { Chart } from "./chart"
import * as Help from "./helper"
import * as Utility from "./utility"
import "dygraphs"
class Events {
......@@ -10,7 +10,6 @@ class Events {
//////////////////// Chart ///////////////////////////
private readonly setLinearButtonID: string = "setlinearButton";
private readonly setLogButtonID: string = "setlogButton";
private readonly setEnergyButtonID: string = "setEnergyButton";
......@@ -20,42 +19,42 @@ class Events {
private readonly chartElementID: string = "chart";
private readonly elementSelectID: string = "elementSelect";
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;
//////////////////// Image ///////////////////////////
private _startX: number;
private _startY: number;
private _mouseX: number;
private _mouseY: number;
private readonly _saturationSliderID: string = "SaturationSlider";
private readonly _replotButtonID: string = "rePlot";
private readonly _transparencySliderID: string = "TrasparencySlider";
private readonly _resetID: string = "reset";
private readonly _exportImageID: string = "ExportImage";
private readonly _selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas";
private _saturationSlider: HTMLInputElement;
private _replotButton: HTMLButtonElement;
private _transparencySlider: HTMLInputElement;
private _reset: HTMLDivElement;
private _exportImage: HTMLDivElement;
private _selectionCanvas: HTMLCanvasElement;
private _myCanvas: HTMLCanvasElement;
private _ctx;
private _isDown = false;
private startX: number;
private startY: number;
private mouseX: number;
private mouseY: number;
private readonly saturationSliderID: string = "SaturationSlider";
private readonly replotButtonID: string = "rePlot";
private readonly transparencySliderID: string = "TrasparencySlider";
private readonly resetID: string = "reset";
private readonly exportImageID: string = "ExportImage";
private readonly selectionCanvasID: string = "selectionCanvas";
private readonly myCanvasID: string = "myCanvas";
private saturationSlider: HTMLInputElement;
private replotButton: HTMLButtonElement;
private transparencySlider: HTMLInputElement;
private reset: HTMLDivElement;
private exportImage: HTMLDivElement;
private selectionCanvas: HTMLCanvasElement;
private myCanvas: HTMLCanvasElement;
private ctx;
private isDown = false;
constructor(image: Image, chart: Chart) {
this.image = image;
......@@ -63,71 +62,71 @@ class Events {
//////////////////// Chart ///////////////////////////
this._setLinearButton = <HTMLAnchorElement>document.getElementById(this.setLinearButtonID);
this._setLinearButton.addEventListener("click", this.setLinearButtonClick, false);
this.setLinearButton = <HTMLAnchorElement>document.getElementById(this.setLinearButtonID);
this.setLinearButton.addEventListener("click", this.setLinearButtonClick, false);
this._setLogButton = <HTMLAnchorElement>document.getElementById(this.setLogButtonID);
this._setLogButton.addEventListener("click", this.setLogButtonClick, false);
this.setLogButton = <HTMLAnchorElement>document.getElementById(this.setLogButtonID);
this.setLogButton.addEventListener("click", this.setLogButtonClick, false);
this._setEnergyButton = <HTMLAnchorElement>document.getElementById(this.setEnergyButtonID);
this._setEnergyButton.addEventListener("click", this.setEnergyButtonClick, false);
this.setEnergyButton = <HTMLAnchorElement>document.getElementById(this.setEnergyButtonID);
this.setEnergyButton.addEventListener("click", this.setEnergyButtonClick, false);
this._setChannelButton = <HTMLAnchorElement>document.getElementById(this.setChannelButtonID);
this._setChannelButton.addEventListener("click", this.setChannelButtonClick, false);
this.setChannelButton = <HTMLAnchorElement>document.getElementById(this.setChannelButtonID);
this.setChannelButton.addEventListener("click", this.setChannelButtonClick, false);
this._exportgraph = <HTMLAnchorElement>document.getElementById(this.exportGraphID);
this._exportgraph.addEventListener("click", this.exportGraphClick, false);
this.exportgraph = <HTMLAnchorElement>document.getElementById(this.exportGraphID);
this.exportgraph.addEventListener("click", this.exportGraphClick, false);
this._readSpinBox = <HTMLButtonElement>document.getElementById(this.readSpinBoxID);
this._readSpinBox.addEventListener("click", this.readSpinBoxClick, false);
this.readSpinBox = <HTMLButtonElement>document.getElementById(this.readSpinBoxID);
this.readSpinBox.addEventListener("click", this.readSpinBoxClick, false);
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this._chartElement.addEventListener("click", this.chartClick, false);
this.chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this.chartElement.addEventListener("mouseup", this.chartClick, false);
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false);
this.elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this.elementSelect.addEventListener("select", this.elementSelectEvent, false);
//////////////////// Image ///////////////////////////
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.myCanvas = <HTMLCanvasElement>document.getElementById(this.myCanvasID);
this._saturationSlider = <HTMLInputElement>document.getElementById(this._saturationSliderID);
this._replotButton = <HTMLButtonElement>document.getElementById(this._replotButtonID);
this._transparencySlider = <HTMLInputElement>document.getElementById(this._transparencySliderID);
this._reset = <HTMLDivElement>document.getElementById(this._resetID);
this._exportImage = <HTMLDivElement>document.getElementById(this._exportImageID);
this.saturationSlider = <HTMLInputElement>document.getElementById(this.saturationSliderID);
this.replotButton = <HTMLButtonElement>document.getElementById(this.replotButtonID);
this.transparencySlider = <HTMLInputElement>document.getElementById(this.transparencySliderID);
this.reset = <HTMLDivElement>document.getElementById(this.resetID);
this.exportImage = <HTMLDivElement>document.getElementById(this.exportImageID);
this._saturationSlider.addEventListener("mouseup", this.saturationSliderMouseUp, false);
this._replotButton.addEventListener("click", this.replotButtonClick, false);
this._transparencySlider.addEventListener("mouseup", this.trasparencySliderMouseUp, false);
this._reset.addEventListener("click", this.resetClick, false);
this._exportImage.addEventListener("click", this.exportImageClick, false);
this.saturationSlider.addEventListener("mouseup", this.saturationSliderMouseUp, false);
this.replotButton.addEventListener("click", this.replotButtonClick, false);
this.transparencySlider.addEventListener("mouseup", this.trasparencySliderMouseUp, false);
this.reset.addEventListener("click", this.resetClick, false);
this.exportImage.addEventListener("click", this.exportImageClick, false);
this._selectionCanvas.addEventListener("mousedown", this.selectionCanvasMouseDown, false);
this._selectionCanvas.addEventListener("mouseup", this.clickdown, false);
this._selectionCanvas.addEventListener("mousemove", this.selectionCanvasMouseMove, false);
this._selectionCanvas.addEventListener("mouseup", this.selectionCanvasMouseUp, false);
this._selectionCanvas.addEventListener("mouseout", this.selectionCanvasMouseOut, false);
this.selectionCanvas.addEventListener("mousedown", this.selectionCanvasMouseDown, false);
this.selectionCanvas.addEventListener("mouseup", this.clickdown, false);
this.selectionCanvas.addEventListener("mousemove", this.selectionCanvasMouseMove, false);
this.selectionCanvas.addEventListener("mouseup", this.selectionCanvasMouseUp, false);
this.selectionCanvas.addEventListener("mouseout", this.selectionCanvasMouseOut, false);
}
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) => {
//bottone per colorare con il max relativo
this.image.rePrint = true;
this._saturationSlider.value = "100";
this.saturationSlider.value = "100";
// 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) => {
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) => {
......@@ -136,8 +135,8 @@ class Events {
this.chart.calibrated = false;
this.image.globalxMinRange = 0;
this.image.globalxMaxRange = this.image.channelDepth;
this._saturationSlider.value = "100";
this._transparencySlider.value = "0";
this.saturationSlider.value = "100";
this.transparencySlider.value = "0";
this.chart.spinBoxMin.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);
......@@ -146,12 +145,12 @@ class Events {
private exportImageClick = (event: MouseEvent) => {
//esportazione immagine
let img = this._selectionCanvas.toDataURL("image/png");
this._selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream"));
let img = this.selectionCanvas.toDataURL("image/png");
this.selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream"));
document.getElementById("ExportLink").setAttribute("href", img);
};
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;
if (this.image.zPixel1.y > this.image.zPixel2.y) {
......@@ -178,18 +177,18 @@ class Events {
let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas;
let elParent: any = this.myCanvas;
let objX: number = 0, objY: number = 0;
while (elParent) {
objX += elParent.offsetLeft;
objY += elParent.offsetTop;
elParent = elParent.offsetParent;
}
this._startX = allX - objX;
this._startY = allY - objY;
this.startX = allX - objX;
this.startY = allY - objY;
// set a flag indicating the drag has begun
this._isDown = true;
this.isDown = true;
};
private selectionCanvasMouseUp = (event: MouseEvent) => {
......@@ -197,15 +196,15 @@ class Events {
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
this.isDown = false;
//this.ctx.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);
};
private selectionCanvasMouseMove = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// if we're not dragging, just return
if (!this._isDown) {
if (!this.isDown) {
return;
}
......@@ -215,27 +214,27 @@ class Events {
let allX: number = event.clientX + scrollLEFT;
let allY: number = event.clientY + scrollTOP;
let elParent: any = this._myCanvas;
let elParent: any = this.myCanvas;
let objX: number = 0, objY: number = 0;
while (elParent) {
objX += elParent.offsetLeft;
objY += elParent.offsetTop;
elParent = elParent.offsetParent;
}
this._mouseX = allX - objX;
this._mouseY = allY - objY;
this.mouseX = allX - objX;
this.mouseY = allY - objY;
// 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
// on starting vs current mouse position
let width = this._mouseX - this._startX;
let height = this._mouseY - this._startY;
let width = this.mouseX - this.startX;
let height = this.mouseY - this.startY;
// draw a new rect from the start 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) => {
......@@ -243,36 +242,36 @@ class Events {
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
this.isDown = false;
//this.ctx.clearRect(0, 0, this.selectionCanvas.width, this.selectionCanvas.height);
};
private setLinearButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: false });
this.chart.graphic.updateOptions({ logscale: false });
};
private setLogButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: true });
this.chart.graphic.updateOptions({ logscale: true });
};
private setEnergyButtonClick = (event: MouseEvent) => {
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.spinBoxMax.setAttribute("value", this.image.channelDepth.toString());
};
private setChannelButtonClick = (event: MouseEvent) => {
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.spinBoxMax.setAttribute("value", "-");
};
private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg");
//Dygraph..asPNG(this.chart._graphic, img);
this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
//Dygraph..asPNG(this.chart.graphic, img);
this.exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
};
private readSpinBoxClick = (event: MouseEvent) => {
......@@ -285,24 +284,24 @@ class Events {
//zoom manuale sul grafico
console.log("chartClick");
let r: number[];
r = this.chart._graphic.xAxisRange();
r = this.chart.graphic.xAxisRange();
if (!this.chart.calibrated) {
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);
} else {
r[0] = Help.round3(r[0]);
r[1] = Help.round3(r[1]);
r[0] = Utility.round3(r[0]);
r[1] = Utility.round3(r[1]);
this.spinBoxMin.setAttribute("value", r[0].toString());
this.spinBoxMax.setAttribute("value", r[1].toString());
}
this.image.globalxMinRange = r[0];
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
let element: string = this._elementSelect.value;
let element: string = this.elementSelect.value;
switch (element) {
case "1": //Ca
this.chart.peackSelection(3.6, 3.8, this.image);
......
fs.test.ts
View file @ c8f08ac7
// import * as gfs from "./fs";
// import * as fs from "fs";
// import * as md5 from "ts-md5/dist/md5";
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 content: Buffer;
let lines: string[];
let numbers: number[];
// beforeAll(() =>
// {
// content = fs.readFileSync("XRF-File-System/Pergamena-Medioevale/codapavone_500.txt");
// lines = content.toString().split('\n');
// numbers = lines.map(Number);
// });
let image: Image = new Image();
let chart: Chart = new Chart();
let filesys: Fs = new Fs();
/*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({
xMin: 50088000,
xMax: 50103000,
......@@ -24,18 +30,11 @@
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
......@@ -3,7 +3,7 @@
// Licensed under the EUPL
import * as $ from "jquery";
import * as Help from "./helper";
import * as Utility from "./utility";
import { Image } from "./image";
import { Chart } from "./chart";
......@@ -156,7 +156,7 @@ class Fs {
//determinare ascisse e cordinate minime e massime, il passo e la direzione di
//scansione
for (let i = 0; i < lines.length; i++) {
if (Help.isAnXHeader(lines[i], image)) {
if (Utility.isAnXHeader(lines[i], image)) {
if (this.xMin == 0) {
//se sono alla prima intestazione salvo la x e la y
this.xMin = lines[i];
......@@ -170,7 +170,7 @@ class Fs {
//se sto leggendo per colonne determino this.xMax leggendo dalla fine
for (let j: number = lines.length; j > i; j--) {
//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];
if (this.xMax < this.xMin) {
let t: number = this.xMax;
......@@ -186,7 +186,7 @@ class Fs {
//se sto leggendo per righe determino this.yMax leggendo dalla fine
for (let j: number = lines.length; j > i; j--) {
//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];
if (this.yMax < this.yMin) {
let t: number = this.yMax;
......@@ -206,7 +206,7 @@ class Fs {
if (this.direction == ReadDirection.c) {
//se leggo per colonne devo deterinare this.yMin e this.yMax
//mi soffermo sulle righe "intestazione y"
if (Help.isAnYHeader(lines[i], image)) {
if (Utility.isAnYHeader(lines[i], image)) {
if (this.yMin > lines[i]) {
this.yMin = lines[i];
}
......@@ -221,7 +221,7 @@ class Fs {
} else {
//se leggo per righe devo deterinare this.xMin e this.xMax
//mi soffermo sulle righe "intestazione x"
if (Help.isAnXHeader(lines[i], image)) {
if (Utility.isAnXHeader(lines[i], image)) {
if (this.xMin > lines[i]) {
this.xMin = lines[i];
}
......@@ -250,14 +250,14 @@ class Fs {
// in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate
// 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);
this.get_metadata(image, lines);
// Risolvo gli shift
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
if (this.direction == ReadDirection.c && (lines[i] / 1000) % 2 != 0) {
// increment the y-coordinate of odd columns
......@@ -299,7 +299,7 @@ class Fs {
let write: boolean;
for (let i = 0; i < lines.length; i++) {
//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;
y = lines[i + 1] - this.yMin;
if (x != 0) {
......@@ -338,13 +338,13 @@ class Fs {
for (let i: number = 0; i < xDim; i++) {
image.nOfCounts[i] = new Array(yDim);
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);
image.maxAbsolute = Help.findMax(image.nOfCounts, { x: 0, y: 0 }, { x: xDim - 1, y: yDim - 1 });
Help.setDataForCompleteChart(image, chart);
image.maxAbsolute = Utility.findMax(image.nOfCounts, { x: 0, y: 0 }, { x: xDim - 1, y: yDim - 1 });
Utility.setDataForCompleteChart(image, chart);
return image;
}
......
image.ts
View file @ c8f08ac7
import * as $ from "jquery";
import * as Help from "./helper";
import { Chart } from "./chart";
import * as Utility from "./utility";
interface coordinates // used in multiple files
{
......@@ -15,31 +13,31 @@ class Calibration //used in multiple files
}
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
......@@ -55,12 +53,12 @@ class Image {
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);
}
......@@ -84,13 +82,13 @@ class Image {
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();
......@@ -103,22 +101,22 @@ class Image {
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 {
......@@ -131,18 +129,18 @@ class Image {
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");
......@@ -156,12 +154,12 @@ class Image {
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
......@@ -179,15 +177,15 @@ class Image {
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;
}
......
importFile.ts
View file @ c8f08ac7
......@@ -2,6 +2,9 @@ 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;
......@@ -21,29 +24,29 @@ class ImportFile {
// 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);
// 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']);
}
});
// 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
......@@ -54,8 +57,8 @@ class ImportFile {
let file: File = fileInputButton.files[0];
let readerObject = new FileReader();
readerObject.onload = () => {
let content: string = readerObject.result;
let image: Image = this.fs.readImage(this.image, this.chart, content);
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"); });
......@@ -134,7 +137,7 @@ class ImportFile {
console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader();
readerObject.onload = () => {
let content: string = readerObject.result;
let content = readerObject.result;
fs.readImage(drawImage, drawChart, content);
this.callbackManager.showElement("load-spinner", false);
};
......
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-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="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
......@@ -5,16 +5,11 @@
"test": "jest"
},
"dependencies": {
"@types/bootstrap-treeview": "^1.20.0",
"@types/dygraphs": "^1.1.7",
"assert": "latest",
"bootstrap": "v3.3.7",
"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"
},
......@@ -25,7 +20,9 @@
"url": "https://baltig.infn.it/chnet/XRF-App.git"
},
"devDependencies": {
"@types/dygraphs": "^1.1.8",
"@types/jest": "^21.1.6",
"@types/jquery": "^3.3.4",
"@types/node": "^8.10.18",
"jest": "^21.2.1",
"ts-jest": "^21.2.2",
......
start.ts
View file @ c8f08ac7
......@@ -2,13 +2,9 @@
//
// Licensed under the EUPL
import * as $ from "jquery";
import { Chart } from './chart';
import { Image } from './image';
import { Fs } from "./fs";
import * as Callback from "./callbacks";
import { Events } from "./events";
import "bootstrap-treeview";
import { ImportFile } from "./importFile";
......
tsconfig.json
View file @ c8f08ac7
......@@ -6,9 +6,5 @@
"lib": [
"es6", "dom"
],
"types": [
"bootstrap-treeview",
"dygraphs"
]
}
}
\ No newline at end of file
helper.ts → utility.ts
View file @ c8f08ac7
File moved