Skip to content
Snippets Groups Projects
Commit bb4b0579 authored by Fabio Proietti's avatar Fabio Proietti
Browse files

refactor globals Image and Chart. TODO: fs

parent 8903a195
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
draw.ts deleted 100644 → 0
+ 0
− 0
View file @ 8903a195
drawChart.ts
+ 31
− 178
View file @ bb4b0579
import { DrawImage } from "./drawImage";
import G = require("./globals");
import Help = require("./helper");
import dygraph = require("dygraphs");
import { DrawImage, coordinates } from "./drawImage";
import * as Help from "./helper";
import * as Dygraph from "dygraphs";
export class DrawChart {
private _drawImage: DrawImage;
private _image: G.Image = G.Image.getInstance();
private _chart: G.Chart = G.Chart.getInstance();
private readonly setLinearButtonID: string = "setlinearButton";
private readonly setLogButtonID: string = "setlogButton";
private readonly setEnergyButtonID: string = "setEnergyButton";
private readonly setChannelButtonID: string = "setChannelsButton";
private readonly exportGraphID: string = "ExportGraph";
private readonly readSpinBoxID: string = "readSpinbox";
private readonly chartElementID: string = "chart";
private readonly elementSelectID: string = "elementSelect";
_graphic: any;
private readonly chartElementID: string = "chart";
private _graphic: any;
private _setLinearButton: HTMLAnchorElement;
private _setLogButton: HTMLAnchorElement;
private _setEnergyButton: HTMLAnchorElement;
......@@ -30,188 +17,54 @@ export class DrawChart {
public spinBoxMin: HTMLInputElement;
public spinBoxMax: HTMLInputElement;
private _pixel1: G.coordinates;
private _pixel2: G.coordinates;
constructor(drawImage: DrawImage) {
this._drawImage = drawImage;
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._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._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);
dataCompleteChart: string = "Channel,Counts\n";
dataCompleteChartCalibrated: string = "Energy,Counts\n";
calibrated: boolean = false; //variabile per il controllo sulla calibrazione
constructor() {
this._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this._chartElement.addEventListener("click", this.chartClick, false);
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false);
this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin");
this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax");
}
private setLinearButtonClick = (event: MouseEvent) => {
this._graphic.updateOptions({ logscale: false });
};
private setLogButtonClick = (event: MouseEvent) => {
this._graphic.updateOptions({ logscale: true });
};
private setEnergyButtonClick = (event: MouseEvent) => {
this._chart.calibrated = true;
this.drawChart(this._image, this._pixel1, this._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.drawChart(this._image, this._pixel1, this._pixel2, 0, this._image.channelDepth);
this.spinBoxMin.setAttribute("value", "-");
this.spinBoxMax.setAttribute("value", "-");
};
private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg");
Dygraph.Export.asPNG(this._graphic, img);
this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
};
private readSpinBoxClick = (event: MouseEvent) => {
//esportazione grafico
console.log("readspinbox");
this.peackSelection(0, 0, this._image);
};
private chartClick = (event: MouseEvent) => {
//zoom manuale sul grafico
console.log("chartClick");
let r: number[];
r = this._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]);
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._drawImage.drawImg(this._image, this._pixel1, this._pixel2, r[0], r[1]);
};
private elementSelect = (event: MouseEvent) => {
//selezione elemento
let element: string = this._elementSelect.value;
switch (element) {
case "1": //Ca
this.peackSelection(3.6, 3.8, this._image);
this.spinBoxMin.setAttribute("value", "3.60");
this.spinBoxMax.setAttribute("value", "3.80");
break;
case "2": //Pb
this.peackSelection(10.4, 10.7, this._image);
this.spinBoxMin.setAttribute("value", "10.40");
this.spinBoxMax.setAttribute("value", "10.70");
break;
case "3": //Hg
this.peackSelection(9.8, 10.15, this._image);
this.spinBoxMin.setAttribute("value", "9.80");
this.spinBoxMax.setAttribute("value", "10.15");
break;
case "4": //Fe
this.peackSelection(6.3, 6.5, this._image);
this.spinBoxMin.setAttribute("value", "6.30");
this.spinBoxMax.setAttribute("value", "6.50");
break;
case "5": //Cu
this.peackSelection(7.85, 8.2, this._image);
this.spinBoxMin.setAttribute("value", "7.85");
this.spinBoxMax.setAttribute("value", "8.20");
break;
case "6": //Zn
this.peackSelection(8.5, 8.72, this._image);
this.spinBoxMin.setAttribute("value", "8.50");
this.spinBoxMax.setAttribute("value", "8.72");
break;
case "7": //Ti
this.peackSelection(4.35, 4.65, this._image);
this.spinBoxMin.setAttribute("value", "4.35");
this.spinBoxMax.setAttribute("value", "4.65");
break;
case "8": //K
this.peackSelection(3.2, 3.42, this._image);
this.spinBoxMin.setAttribute("value", "3.20");
this.spinBoxMax.setAttribute("value", "3.42");
break;
case "9": //Co
this.peackSelection(6.8, 7.05, this._image);
this.spinBoxMin.setAttribute("value", "6.80");
this.spinBoxMax.setAttribute("value", "7.05");
break;
default:
this.peackSelection(0, this._image.channelDepth, this._image);
this.spinBoxMin.setAttribute("value", "0");
this.spinBoxMax.setAttribute("value", this._image.channelDepth.toString());
break;
}
};
drawChart(image: G.Image, pixel1: G.coordinates, pixel2: G.coordinates, xMinRange: number, xMaxRange: number) {
drawChart(image: DrawImage, pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number) {
//definisco la variabile "grafico", i bottoni relativi al grafico, il tag
//select e le due spinbox con il relativo botton
this._pixel1 = pixel1;
this._pixel2 = pixel2;
//disegno il grafico completo
if (pixel1.x == 0 && pixel1.y == 0 && pixel2.x == image.width - 1 && pixel2.y == image.height - 1) {
if (!this._chart.calibrated) {
if (!this.calibrated) {
//canali
let chartTitle: string = "Chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")";
this._graphic = this.setChart(this._chart.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(this._chart.dataCompleteChartCalibrated, chartTitle, xMinRange, xMaxRange);
this._graphic = this.setChart(image, this.dataCompleteChartCalibrated, chartTitle, xMinRange, xMaxRange);
}
//disegno il grafico parzialmente
} else {
//determino i conteggi dei pixel da disegnare
let dataForChart: number[] = new Array(this._image.depth);
for (let i: number = 0; i < this._image.depth; i++) {
let dataForChart: number[] = new Array(image.depth);
for (let i: number = 0; i < image.depth; i++) {
dataForChart[i] = 0;
}
for (let i: number = pixel1.x; i <= pixel2.x; i++) {
for (let j: number = pixel1.y; j <= pixel2.y; j++) {
for (let k: number = 0; k < this._image.depth; k++) {
for (let k: number = 0; k < image.depth; k++) {
dataForChart[k] += image.DataMatrix[i][j][k];
}
}
}
if (!this._chart.calibrated) {
if (!this.calibrated) {
//disegno in canali
let dataChart: string = "Channel,Counts\n";
for (let i: number = 0; i < this._image.depth; i++) {
for (let i: number = 0; i < image.depth; i++) {
dataChart += i + "," + dataForChart[i] + "\n";
}
let chartTitle: string;
......@@ -220,12 +73,12 @@ export class DrawChart {
} else {
chartTitle = "Chart from (" + pixel1.x + "," + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
}
this._graphic = this.setChart(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 < this._image.depth; i++) {
dataChartCalibrated += Help.round3(((i + 1) * this._image.calibration.a - this._image.calibration.b) / 1000) + "," + dataForChart[i] + "\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";
}
let chartTitle: string;
if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) {
......@@ -233,17 +86,17 @@ export class DrawChart {
} else {
chartTitle = "Calibrated chart from (" + pixel1.x + ", " + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
}
this._graphic = this.setChart(dataChartCalibrated, chartTitle, xMinRange, xMaxRange);
this._graphic = this.setChart(image, dataChartCalibrated, chartTitle, xMinRange, xMaxRange);
}
}
}
//la funzione setChart riceve in input i dati e il titolo del grafico da disegnare
//il quale è restituito il output
setChart(dataString: string, charTitle: string, xMinRange: number, xMaxRange: number): Dygraph {
setChart(image: DrawImage, dataString: string, charTitle: string, xMinRange: number, xMaxRange: number): Dygraph {
let xArrayRange: number[]; //estremi asse x da visualizzare
let xLab: string;
if (!this._chart.calibrated) {
xArrayRange = [0, this._image.depth];
if (!this.calibrated) {
xArrayRange = [0, image.depth];
xLab = "ADC Channel";
} else {
xArrayRange = [xMinRange, xMaxRange];
......@@ -257,7 +110,7 @@ export class DrawChart {
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",
......@@ -274,8 +127,8 @@ export class DrawChart {
return this._graphic;
}
//la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico
private peackSelection(xMinRange: number, xMaxRange: number, image: G.Image) {
//let image = this._image;
peackSelection(xMinRange: number, xMaxRange: number, image: DrawImage) {
//se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox
if (xMinRange == 0 && xMaxRange == 0) {
xMinRange = parseInt((this.spinBoxMin).value);
......@@ -286,8 +139,8 @@ export class DrawChart {
image.globalxMaxRange = xMaxRange;
image.newOrigin = { x: 0, y: 0 };
image.rePrint = false;
this._chart.calibrated = true;
this._drawImage.drawImg(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
this.calibrated = true;
image.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
this.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
}
}
drawImage.ts
+ 69
− 202
View file @ bb4b0579
import G = require("./globals");
import * as $ from "jquery";
import Help = require("./helper");
import * as Help from "./helper";
import { DrawChart } from "./drawChart";
export interface coordinates // used in multiple files
{
x: number;
y: number;
}
export class Calibration //used in multiple files
{
a: number;
b: number;
}
export class DrawImage {
public _drawChart: DrawChart;
private _image = G.Image.getInstance();
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;
private readonly _selectionCanvasID: string = "selectionCanvas";
private readonly _myCanvasID: string = "myCanvas";
private _context: CanvasRenderingContext2D;
private _saturationSlider: HTMLInputElement;
private _replotButton: HTMLButtonElement;
private _transparencySlider: HTMLInputElement;
private _reset: HTMLDivElement;
private _exportImage: HTMLDivElement;
private _pixel1: G.coordinates;
private _pixel2: G.coordinates;
_pixel1: coordinates;
_pixel2: coordinates;
private _xMinRange: number;
private _xMaxRange: number;
......@@ -30,177 +33,41 @@ export class DrawImage {
private _myCanvas: HTMLCanvasElement;
private _ctx;
private _startX: number;
private _startY: number;
private _mouseX: number;
private _mouseY: number;
private _isDown = false;
constructor(canvas: string) {
this._drawChart = new DrawChart(this);
this._selectionCanvasID = canvas;
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
readonly maxCoordValueX = 60000000; // to check
readonly headerSetValue = 17000;
readonly xCoordHeaderFirstValue = 5; //instestazione X
readonly yCoordHeaderFirstValue = 6; //intestazione y
globalxMinRange: number = 0;
globalxMaxRange: number = this.channelDepth;
zPixel1: coordinates;
zPixel2: coordinates; //pixel2 dello zoom
newOrigin: coordinates = { x: 0, y: 0 }; //nuovo origine nel caso di zoomù
maxAbsolute: number; //massimo conteggio della matrice nOfCounts
pixelDim: number; //dimensione dei pixel responsive
nOfCounts: number[][]; //matrici con i dati
rePrint: boolean = false; //variabile per ricolorare con il max relativo
constructor() {
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.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);
}
private saturationSliderMouseUp = (event: MouseEvent): void => {
this.drawImg(this._image, this._pixel1, this._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";
// opacity value?
this.drawImg(this._image, this._pixel1, this._pixel2, this._image.globalxMinRange, this._image.globalxMaxRange);
};
private trasparencySliderMouseUp = (event: MouseEvent) => {
this.drawImg(this._image, this._pixel1, this._pixel2, this._image.globalxMinRange, this._image.globalxMaxRange);
};
private resetClick = (event: MouseEvent) => {
this._image.newOrigin = { x: 0, y: 0 };
this._image.rePrint = false;
G.Chart.getInstance().calibrated = false;
this._image.globalxMinRange = 0;
this._image.globalxMaxRange = this._image.channelDepth;
this._saturationSlider.value = "100";
this._transparencySlider.value = "0";
this._drawChart.spinBoxMin.setAttribute("value", "-");
this._drawChart.spinBoxMax.setAttribute("value", "-");
this.drawImg(this._image, { x: 0, y: 0 }, { x: this._image.width - 1, y: this._image.height - 1 }, 0, this._image.channelDepth);
this._drawChart.drawChart(this._image, { x: 0, y: 0 }, { x: this._image.width - 1, y: this._image.height - 1 }, 0, this._image.channelDepth);
};
private exportImageClick = (event: MouseEvent) => {
//esportazione immagine
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.setPosition(event, this._image.zPixel2, this._selectionCanvasID);
let tmp: number;
if (this._image.zPixel1.y > this._image.zPixel2.y) {
tmp = this._image.zPixel1.y;
this._image.zPixel1.y = this._image.zPixel2.y;
this._image.zPixel2.y = tmp;
}
//se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
//canvas e aggiorno l'origine
if (this._image.zPixel1.x != this._image.zPixel2.x || this._image.zPixel1.y != this._image.zPixel2.y) {
this._image.newOrigin = { x: this._image.zPixel1.x, y: this._image.zPixel1.y };
this.drawImg(this._image, this._image.zPixel1, this._image.zPixel2, this._image.globalxMinRange, this._image.globalxMaxRange);
}
this._drawChart.drawChart(this._image, this._image.zPixel1, this._image.zPixel2, this._image.globalxMinRange, this._image.globalxMaxRange);
};
private selectionCanvasMouseDown = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
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 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;
// set a flag indicating the drag has begun
this._isDown = true;
};
private selectionCanvasMouseUp = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
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) {
return;
}
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
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 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;
// clear the canvas
//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;
// draw a new rect from the start position
// to the current mouse position
this._ctx.fillRect(this._startX, this._startY, width, height);
};
private selectionCanvasMouseOut = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
};
//Il metodo findPosition definisce la posizione del cursore del mouse
//relativa al canvas nel momento in cui avviene l'evento passato in input
private setPosition(event: any, pixel: G.coordinates, canvasID: string) {
let image = G.Image.getInstance();
setPosition(event: any, pixel: coordinates, canvasID: string) {
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
let scrollLEFT: number = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
let allX: number = event.clientX + scrollLEFT;
......@@ -214,10 +81,10 @@ export class DrawImage {
elParent = elParent.offsetParent;
}
pixel.x = Math.floor((allX - objX - 1) / image.pixelDim) + image.newOrigin.x;
pixel.y = Math.floor((allY - objY - 1) / image.pixelDim) + image.newOrigin.y;
pixel.x = Math.floor((allX - objX - 1) / this.pixelDim) + this.newOrigin.x;
pixel.y = Math.floor((allY - objY - 1) / this.pixelDim) + this.newOrigin.y;
}
drawImg(image: G.Image, pixel1: G.coordinates, pixel2: G.coordinates, xMinRange: number, xMaxRange: number, callback?: () => void) {
drawImg(pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number, callback?: () => void) {
this._pixel1 = pixel1;
this._pixel2 = pixel2;
//alert("disegno in corso");
......@@ -234,62 +101,62 @@ export class DrawImage {
//dimensione reale dei pixel
let dimPixelx: number = Math.floor(mappaWidth / nPixelX);
let dimPixely: number = Math.floor(mappaHeigth / nPixelY);
image.pixelDim = dimPixelx < dimPixely ? dimPixelx : dimPixely;
this.pixelDim = dimPixelx < dimPixely ? dimPixelx : dimPixely;
//dimensioni esatte dei canvas
this._myCanvas.height = nPixelY * image.pixelDim;
this._myCanvas.width = nPixelX * image.pixelDim;
this._selectionCanvas.height = nPixelY * image.pixelDim;
this._selectionCanvas.width = nPixelX * image.pixelDim;
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 >= image.channelDepth) {
if (xMaxRange - xMinRange >= this.channelDepth) {
//range completo
let max: number = 0; //massimo relativo o assoluto
if (image.rePrint) {
max = Help.findMax(image.nOfCounts, this._pixel1, this._pixel2);
if (this.rePrint) {
max = Help.findMax(this.nOfCounts, this._pixel1, this._pixel2);
} else {
max = image.maxAbsolute;
max = this.maxAbsolute;
}
max *= parseInt(this._saturationSlider.value) / 100;
this.drawCanvas(image, image.nOfCounts, max);
this.drawCanvas(this.nOfCounts, max);
} else {
//range parziale (solo alcuni canali)
let xMinRangeCh: number = Math.floor((xMinRange * 1000 + this._image.calibration.b) / this._image.calibration.a - 1); //16
let xMaxRangeCh: number = Math.floor((xMaxRange * 1000 + this._image.calibration.b) / this._image.calibration.a - 1); //16371
let xMinRangeCh: number = Math.floor((xMinRange * 1000 + this.calibration.b) / this.calibration.a - 1); //16
let xMaxRangeCh: number = Math.floor((xMaxRange * 1000 + this.calibration.b) / this.calibration.a - 1); //16371
//calcolo il numero di conteggi solo dei canali selezionati
let nOfCountsRelative: number[][];
nOfCountsRelative = new Array(image.width);
for (let i: number = 0; i < image.width; i++) {
nOfCountsRelative[i] = new Array(image.height);
for (let j: number = 0; j < image.height; j++) {
nOfCountsRelative[i][j] = Help.sumVect(image.DataMatrix[i][j], xMinRangeCh, xMaxRangeCh);
nOfCountsRelative = new Array(this.width);
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);
}
}
//calcolo il massimo
let max: number = 0;
if (image.rePrint) {
if (this.rePrint) {
max = Help.findMax(nOfCountsRelative, this._pixel1, this._pixel2);
} else {
max = Help.findMax(nOfCountsRelative, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 });
max = Help.findMax(nOfCountsRelative, { x: 0, y: 0 }, { x: this.width - 1, y: this.height - 1 });
}
max *= parseInt(this._saturationSlider.value) / 100;
if(max == 0)
if (max == 0)
alert("WARNING: max value is 0");
else
this.drawCanvas(image, nOfCountsRelative, max);
this.drawCanvas(nOfCountsRelative, max);
}
if (typeof (callback) != typeof (undefined))
callback();
}
private drawCanvas(image: G.Image, noc, max) {
private drawCanvas(noc, max) {
//controllo il valore della trasparenza
let setTrsp: number = 1 - parseInt(this._transparencySlider.value) / 100;
//scorro tutti i pixel: ne determino il colore e li disegno
......@@ -314,11 +181,11 @@ export class DrawImage {
color = "rgba(255," + (255 - Math.floor((intensity - 4 / 5) * 5 * 255)) + ", 0, " + setTrsp + ")";
this._ctx.fillStyle = color;
this._ctx.fillRect((i - this._pixel1.x) * image.pixelDim, (j - this._pixel1.y) * image.pixelDim, image.pixelDim, image.pixelDim);
this._ctx.fillRect((i - this._pixel1.x) * this.pixelDim, (j - this._pixel1.y) * this.pixelDim, this.pixelDim, this.pixelDim);
}
}
//console.log(color);
image.rePrint = false; //annullo rePrint
this.rePrint = false; //annullo rePrint
this._ctx.fillStyle = "rgba(0, 110, 255, 0.25)";
this._isDown = false;
......
events.ts 0 → 100644
+ 360
− 0
View file @ bb4b0579
import { DrawImage } from "./drawImage"
import { DrawChart } from "./drawChart"
import * as Help from "./helper"
import * as Dygraph from "dygraphs";
export class Events {
private image: DrawImage;
private chart: DrawChart;
//////////////////// Chart ///////////////////////////
private readonly setLinearButtonID: string = "setlinearButton";
private readonly setLogButtonID: string = "setlogButton";
private readonly setEnergyButtonID: string = "setEnergyButton";
private readonly setChannelButtonID: string = "setChannelsButton";
private readonly exportGraphID: string = "ExportGraph";
private readonly readSpinBoxID: string = "readSpinbox";
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;
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;
constructor(image: DrawImage, chart: DrawChart) {
this.image = image;
this.chart = chart;
//////////////////// Chart ///////////////////////////
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._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._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._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
this._chartElement.addEventListener("click", this.chartClick, false);
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false);
//////////////////// Image ///////////////////////////
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._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._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);
};
private replotButtonClick = (event: MouseEvent) => {
//bottone per colorare con il max relativo
this.image.rePrint = true;
this._saturationSlider.value = "100";
// opacity value?
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);
};
private resetClick = (event: MouseEvent) => {
this.image.newOrigin = { x: 0, y: 0 };
this.image.rePrint = false;
this.chart.calibrated = false;
this.image.globalxMinRange = 0;
this.image.globalxMaxRange = this.image.channelDepth;
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);
this.chart.drawChart(this.image, { x: 0, y: 0 }, { x: this.image.width - 1, y: this.image.height - 1 }, 0, this.image.channelDepth);
};
private exportImageClick = (event: MouseEvent) => {
//esportazione immagine
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);
let tmp: number;
if (this.image.zPixel1.y > this.image.zPixel2.y) {
tmp = this.image.zPixel1.y;
this.image.zPixel1.y = this.image.zPixel2.y;
this.image.zPixel2.y = tmp;
}
//se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
//canvas e aggiorno l'origine
if (this.image.zPixel1.x != this.image.zPixel2.x || this.image.zPixel1.y != this.image.zPixel2.y) {
this.image.newOrigin = { x: this.image.zPixel1.x, y: this.image.zPixel1.y };
this.image.drawImg(this.image.zPixel1, this.image.zPixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
}
this.chart.drawChart(this.image, this.image.zPixel1, this.image.zPixel2, this.image.globalxMinRange, this.image.globalxMaxRange);
};
private selectionCanvasMouseDown = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
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 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;
// set a flag indicating the drag has begun
this._isDown = true;
};
private selectionCanvasMouseUp = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
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) {
return;
}
//calculate mouse position
let scrollTOP: number = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
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 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;
// clear the canvas
//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;
// draw a new rect from the start position
// to the current mouse position
this._ctx.fillRect(this._startX, this._startY, width, height);
};
private selectionCanvasMouseOut = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
// the drag is over, clear the dragging flag
this._isDown = false;
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
};
private setLinearButtonClick = (event: MouseEvent) => {
this.chart._graphic.updateOptions({ logscale: false });
};
private setLogButtonClick = (event: MouseEvent) => {
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.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.spinBoxMin.setAttribute("value", "-");
this.spinBoxMax.setAttribute("value", "-");
};
private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg");
Dygraph.Export.asPNG(this.chart._graphic, img);
this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
};
private readSpinBoxClick = (event: MouseEvent) => {
//esportazione grafico
console.log("readspinbox");
this.chart.peackSelection(0, 0, this.image);
};
private chartClick = (event: MouseEvent) => {
//zoom manuale sul grafico
console.log("chartClick");
let r: number[];
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]);
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]);
};
private elementSelect = (event: MouseEvent) => {
//selezione elemento
let element: string = this._elementSelect.value;
switch (element) {
case "1": //Ca
this.chart.peackSelection(3.6, 3.8, this.image);
this.spinBoxMin.setAttribute("value", "3.60");
this.spinBoxMax.setAttribute("value", "3.80");
break;
case "2": //Pb
this.chart.peackSelection(10.4, 10.7, this.image);
this.spinBoxMin.setAttribute("value", "10.40");
this.spinBoxMax.setAttribute("value", "10.70");
break;
case "3": //Hg
this.chart.peackSelection(9.8, 10.15, this.image);
this.spinBoxMin.setAttribute("value", "9.80");
this.spinBoxMax.setAttribute("value", "10.15");
break;
case "4": //Fe
this.chart.peackSelection(6.3, 6.5, this.image);
this.spinBoxMin.setAttribute("value", "6.30");
this.spinBoxMax.setAttribute("value", "6.50");
break;
case "5": //Cu
this.chart.peackSelection(7.85, 8.2, this.image);
this.spinBoxMin.setAttribute("value", "7.85");
this.spinBoxMax.setAttribute("value", "8.20");
break;
case "6": //Zn
this.chart.peackSelection(8.5, 8.72, this.image);
this.spinBoxMin.setAttribute("value", "8.50");
this.spinBoxMax.setAttribute("value", "8.72");
break;
case "7": //Ti
this.chart.peackSelection(4.35, 4.65, this.image);
this.spinBoxMin.setAttribute("value", "4.35");
this.spinBoxMax.setAttribute("value", "4.65");
break;
case "8": //K
this.chart.peackSelection(3.2, 3.42, this.image);
this.spinBoxMin.setAttribute("value", "3.20");
this.spinBoxMax.setAttribute("value", "3.42");
break;
case "9": //Co
this.chart.peackSelection(6.8, 7.05, this.image);
this.spinBoxMin.setAttribute("value", "6.80");
this.spinBoxMax.setAttribute("value", "7.05");
break;
default:
this.chart.peackSelection(0, this.image.channelDepth, this.image);
this.spinBoxMin.setAttribute("value", "0");
this.spinBoxMax.setAttribute("value", this.image.channelDepth.toString());
break;
}
};
}
\ No newline at end of file
fs.test.ts
+ 4
− 4
View file @ bb4b0579
......@@ -14,7 +14,7 @@ beforeAll(() =>
numbers = lines.map(Number);
});
test("get_metadata", () =>
/*test("get_metadata", () =>
{
let metadata = gfs.get_metadata(numbers);
expect(metadata).toEqual({
......@@ -25,14 +25,14 @@ test("get_metadata", () =>
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
//expect(md5.Md5.hashAsciiStr(JSON.stringify(image))).toBe("b9e7fb96f36452cc3c2350d6132b50c6"); // coda_pavone_250
})
})*/
/* test("readImage_lc", () =>
{
......
fs.ts
+ 17
− 16
View file @ bb4b0579
......@@ -6,8 +6,10 @@ import * as assert from "assert";
import * as $ from "jquery";
import * as Help from "./helper";
import G = require("./globals");
import { DrawImage } from "./drawImage";
import { DrawChart } from "./drawChart";
export function generateTree(xmlDoc: Document) {
/*export function generateTree(xmlDoc: Document) {
let tree: any = [];
let first = true;
let oldFolderParent: string = "";
......@@ -72,10 +74,10 @@ export function generateTree(xmlDoc: Document) {
}
}
return tree;
}
}*/
//funzione che posiziona l'oggetto passato in input nell'albero
function insertOBJinFS(objfs, tree, objfsName, type) {
/*function insertOBJinFS(objfs, tree, objfsName, type) {
//determino la profondità dell'oggetto (se è un file devo aggiungere 1 a causa di "/")
let depth: number = objfsName.length;
if (type) depth++;
......@@ -104,12 +106,12 @@ function insertOBJinFS(objfs, tree, objfsName, type) {
break;
}
treePosition[treePosition.length - 1].nodes.push(objfs);
}
}*/
//funzione che dato l'url di un file, lo apre e lo legge passandone il contenuto
//alla funzione readData(). Questa funzione è invocata quando viene selezionato
//un file dall'albero
export function openFileFromServer(url) {
/*export function openFileFromServer(url) {
let fileName: string[] = url.split("/");
console.log("Try to open " + fileName[fileName.length - 1] + " ...");
let txtFile: any = new XMLHttpRequest();
......@@ -122,12 +124,12 @@ export function openFileFromServer(url) {
}
};
txtFile.send(null);
}
}*/
// version working on an array of numbers, obtained from the array of string lines
function get_metadata_num(lines: number[]): void {
function get_metadata_num(image: DrawImage, lines: number[]): void {
let metadata = G.Metadata.getInstance();
let image = G.Image.getInstance();
//let image = G.Image.getInstance();
metadata.xMin = 0;
metadata.yMin = 0;
metadata.xMax = 0;
......@@ -220,9 +222,9 @@ function get_metadata_num(lines: number[]): void {
}
}
export function get_metadata(lines: number[]): void {
export function get_metadata(image: DrawImage, lines: number[]): void {
try {
get_metadata_num(lines);
get_metadata_num(image, lines);
}
catch (e) {
throw new Error(e);
......@@ -234,13 +236,12 @@ export function get_metadata(lines: number[]): void {
// in modo che essi siano memorizzati in un formato più leggibile. Sono ricavate
// anche altre variabili necessarie per il resto del codice.
export function readImage(content: string): G.Image {
export function readImage(image: DrawImage, chart: DrawChart ,content: string): DrawImage {
let lines = content.split("\n").map(Number);
let metadata = G.Metadata.getInstance();
get_metadata(lines);
get_metadata(image, lines);
let image = G.Image.getInstance();
// Risolvo gli shift
for (let i = 0; i < lines.length; i++) {
......@@ -274,8 +275,8 @@ export function readImage(content: string): G.Image {
for (let i: number = 0; i < xDim; i++) {
image.DataMatrix[i] = new Array(yDim);
for (let j: number = 0; j < yDim; j++) {
image.DataMatrix[i][j] = new Array(G.Image.getInstance().depth);
for (let k: number = 0; k < G.Image.getInstance().depth; k++) {
image.DataMatrix[i][j] = new Array(image.depth);
for (let k: number = 0; k < image.depth; k++) {
image.DataMatrix[i][j][k] = 0;
}
}
......@@ -332,6 +333,6 @@ export function readImage(content: string): G.Image {
image.maxAbsolute = Help.findMax(image.nOfCounts, { x: 0, y: 0 }, { x: xDim - 1, y: yDim - 1 });
Help.setDataForCompleteChart(image, G.Chart.getInstance());
Help.setDataForCompleteChart(image, chart);
return image;
}
\ No newline at end of file
globals.ts
+ 61
− 61
View file @ bb4b0579
export interface coordinates
export interface coordinates // used in multiple files
{
x: number;
y: number;
}
export class Calibration
export class Calibration //used in multiple files
{
a: number;
b: number;
......@@ -15,7 +15,7 @@ export enum ReadDirection {
r,//lettura per righe
c//lettura per colonne
}
export class Metadata
export class Metadata //used only on fs.ts
{
private static _instance: Metadata = new Metadata();
private constructor() {
......@@ -38,64 +38,64 @@ export class Metadata
}
}
export class Image
{
private static _instance: Image = new Image();
private constructor() {
if(Image._instance)
{
throw new Error ("Error: Image object is already instantiated");
}
else
{
Image._instance = this;
}
}
DataMatrix: number[][][];
width: number;
height: number;
readonly calibration: Calibration = {a: 3.36275, b: 58.2353};
readonly depth: number = 8000;
readonly maxCoordValueX = 60000000;
readonly headerSetValue = 17000;
readonly xCoordHeaderFirstValue = 5; //instestazione X
readonly yCoordHeaderFirstValue = 6; //intestazione y
channelDepth: number = require("./helper").round3(((this.depth + 1) * this.calibration.a - this.calibration.b) / 1000); //profondità massima in canali
globalxMinRange: number = 0;
globalxMaxRange: number = this.channelDepth;
zPixel1: coordinates;
zPixel2: coordinates; //pixel2 dello zoom
newOrigin: coordinates = { x: 0, y: 0}; //nuovo origine nel caso di zoom
maxAbsolute: number; //massimo conteggio della matrice nOfCounts
pixelDim: number; //dimensione dei pixel responsive
nOfCounts: number[][]; //matrici con i dati
rePrint: boolean = false; //variabile per ricolorare con il max relativo
public static getInstance(): Image
{
return Image._instance;
}
}
// export class Image
// {
// private static _instance: Image = new Image();
// private constructor() {
// if(Image._instance)
// {
// throw new Error ("Error: Image object is already instantiated");
// }
// else
// {
// Image._instance = this;
// }
// }
// DataMatrix: number[][][];
// width: number;
// height: number;
// readonly calibration: Calibration = {a: 3.36275, b: 58.2353}; // TODO
// readonly depth: number = 8000;
// readonly maxCoordValueX = 60000000;
// readonly headerSetValue = 17000;
// readonly xCoordHeaderFirstValue = 5; //instestazione X
// readonly yCoordHeaderFirstValue = 6; //intestazione y
// channelDepth: number = require("./helper").round3(((this.depth + 1) * this.calibration.a - this.calibration.b) / 1000); //profondità massima in canali
// globalxMinRange: number = 0;
// globalxMaxRange: number = this.channelDepth;
// zPixel1: coordinates;
// zPixel2: coordinates; //pixel2 dello zoom
// newOrigin: coordinates = { x: 0, y: 0}; //nuovo origine nel caso di zoom
// maxAbsolute: number; //massimo conteggio della matrice nOfCounts
// pixelDim: number; //dimensione dei pixel responsive
// nOfCounts: number[][]; //matrici con i dati
// rePrint: boolean = false; //variabile per ricolorare con il max relativo
// public static getInstance(): Image
// {
// return Image._instance;
// }
// }
export class Chart {
private static _instance: Chart = new Chart();
// export class Chart {
// private static _instance: Chart = new Chart();
private constructor()
{
if(Chart._instance)
{
throw new Error("Error: Image object is already instantiated");
}
else
{
Chart._instance = this;
}
}
dataCompleteChart: string = "Channel,Counts\n";
dataCompleteChartCalibrated: string = "Energy,Counts\n";
calibrated: boolean = false; //variabile per il controllo sulla calibrazione
public static getInstance(): Chart
{
return Chart._instance;
}
}
// private constructor()
// {
// if(Chart._instance)
// {
// throw new Error("Error: Image object is already instantiated");
// }
// else
// {
// Chart._instance = this;
// }
// }
// dataCompleteChart: string = "Channel,Counts\n";
// dataCompleteChartCalibrated: string = "Energy,Counts\n";
// calibrated: boolean = false; //variabile per il controllo sulla calibrazione
// public static getInstance(): Chart
// {
// return Chart._instance;
// }
// }
helper.ts
+ 6
− 5
View file @ bb4b0579
import * as G from"./globals"
import { DrawImage, coordinates } from "./drawImage";
import { DrawChart } from "./drawChart";
// round to the 3rd decimal digit
export function round3(val: number)
{
......@@ -14,7 +15,7 @@ export function sumVect(vect: number[], from: number, to: number)
}
// find the max in the sub-matrix specified by the two coordinates
export function findMax(matrix: number[][], pixel1: G.coordinates, pixel2: G.coordinates)
export function findMax(matrix: number[][], pixel1: coordinates, pixel2: coordinates)
{
let max = 0;
for (let i = pixel1.x; i <= pixel2.x; i++) {
......@@ -28,7 +29,7 @@ export function findMax(matrix: number[][], pixel1: G.coordinates, pixel2: G.coo
}
// prepara i dati per il grafico completo
export function setDataForCompleteChart(image: G.Image, chart: G.Chart): number[]
export function setDataForCompleteChart(image: DrawImage, chart: DrawChart): number[]
{
// per ogni pixel sommo i conteggi di tutti i canali rilevati
let data: number[] = [];
......@@ -60,13 +61,13 @@ export function getFirstDigitNumber(n: number): number {
return parseInt(n.toString()[0]);
}
export function isAnXHeader(value: number, image: G.Image): boolean {
export function isAnXHeader(value: number, image: DrawImage): boolean {
if(value > image.headerSetValue && getFirstDigitNumber(value) == image.xCoordHeaderFirstValue) {
return true;
}
return false;
}
export function isAnYHeader(value: number, image: G.Image): boolean {
export function isAnYHeader(value: number, image: DrawImage): boolean {
if(value > image.headerSetValue && getFirstDigitNumber(value) == image.yCoordHeaderFirstValue) {
return true;
}
......
index.php
+ 14
− 14
View file @ bb4b0579
......@@ -9,20 +9,20 @@
<title>XRF analysis viewer</title>
<!-- 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-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.css">
<link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<script type="text/javascript" src="xrf.js"></script>
<!-- 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-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.css">
<link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<script type="text/javascript" src="xrf.js"></script>
<!-- ./Librerie -->
</head>
......
start.ts
+ 17
− 17
View file @ bb4b0579
......@@ -6,8 +6,8 @@ import * as $ from "jquery";
import { DrawChart } from './drawChart';
import { DrawImage } from './drawImage';
import * as fs from "./fs";
import G = require("./globals");
import Callback = require("./callbacks");
import * as Callback from "./callbacks";
import { Events } from "./events";
//INIZIO DELLO SCRIPT
......@@ -15,8 +15,10 @@ window.onload = () => {
// skip the tooltip for the moment; it generates an apparently fatal error
//$('[data-toggle="tooltip"]').tooltip();
let drawImage = new DrawImage("selectionCanvas");
let drawChart = drawImage._drawChart;
let drawImage = new DrawImage();
let drawChart = new DrawChart();
new Events(drawImage,drawChart);
//creazione dell'albero e gestione barre laterali
setImportFile(drawImage, drawChart);
......@@ -25,13 +27,10 @@ window.onload = () => {
// enable drag&drop
let droppableArea: any = document.querySelector('.droppable');
makeDroppable(droppableArea, callback);
let image: G.Image = G.Image.getInstance();
//makeDroppable(droppableArea, callback);
image.zPixel1 = { x: 0, y: 0 };
image.zPixel2 = { x: 0, y: 0 };
drawImage.zPixel1 = { x: 0, y: 0 };
drawImage.zPixel2 = { x: 0, y: 0 };
};
//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
......@@ -75,9 +74,9 @@ function setImportFile(drawImage: DrawImage, drawChart: DrawChart) {
let readerObject = new FileReader();
readerObject.onload = function () {
let content: string = readerObject.result;
let image: G.Image = fs.readImage(content);
let image: DrawImage = fs.readImage(drawImage, drawChart,content);
Callback.CallbackManager.getInstance().showElement("load-spinner", false);
drawImage.drawImg(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
drawImage.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { Callback.CallbackManager.getInstance().closeBootstrapModel("btnCloseModal"); });
drawChart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth);
// install callbacks for the canvas and chart?
......@@ -113,7 +112,7 @@ function compressingSidenav() {
}
//funzione che definisce l'area su cui si può eseguire il drag&drop
function makeDroppable(droppableArea, callback) {
/*function makeDroppable(droppableArea, callback) {
//creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
let input: any = document.createElement("input");
input.type = "file";
......@@ -143,19 +142,20 @@ function makeDroppable(droppableArea, callback) {
droppableArea.classList.remove("dragover");
callback.call(null, e.dataTransfer.files);
});
}
}*/
//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
//della sua lettura e del passaggio del suo contenuto alla funzione readData()
function callback(files) {
/*function callback(files) {
Callback.CallbackManager.getInstance().showElement("load-spinner", true);
let file: File = files[files.length - 1];
console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader();
readerObject.onload = function () {
let content: string = readerObject.result;
fs.readImage(content);
fs.readImage(drawImage, content);
Callback.CallbackManager.getInstance().showElement("load-spinner", false);
};
readerObject.readAsText(file);
}
}*/
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment