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

changed index from php to html and minors

parent a91591bc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
callbacks.ts
+ 3
− 4
View file @ 111c12d0
import * as $ from "jquery";
export class CallbackManager export class CallbackManager
{ {
private static _instance: CallbackManager = new CallbackManager(); private static _instance: CallbackManager = new CallbackManager();
...@@ -16,14 +15,14 @@ export class CallbackManager ...@@ -16,14 +15,14 @@ export class CallbackManager
public showElement(elementID: string, show: boolean): void { public showElement(elementID: string, show: boolean): void {
if(show){ if(show){
$(elementID).css("display", "inline"); document.getElementById(elementID).style.display = "inline";
} }
else else
{ {
$(elementID).css("display", "none"); document.getElementById(elementID).style.display = "none";
} }
} }
public closeBootstrapModel(elementID: string): void{ public closeBootstrapModel(elementID: string): void{
$(elementID).click(); document.getElementById(elementID).click();
} }
} }
drawChart.ts
+ 35
− 33
View file @ 111c12d0
...@@ -28,8 +28,8 @@ export class DrawChart { ...@@ -28,8 +28,8 @@ export class DrawChart {
private _chartElement: HTMLElement; private _chartElement: HTMLElement;
private _elementSelect: HTMLSelectElement; private _elementSelect: HTMLSelectElement;
private _box1: HTMLInputElement; public spinBoxMin: HTMLInputElement;
private _box2: HTMLInputElement; public spinBoxMax: HTMLInputElement;
private _pixel1: G.coordinates; private _pixel1: G.coordinates;
private _pixel2: G.coordinates; private _pixel2: G.coordinates;
...@@ -60,8 +60,8 @@ export class DrawChart { ...@@ -60,8 +60,8 @@ export class DrawChart {
this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID); this._elementSelect = <HTMLSelectElement>document.getElementById(this.elementSelectID);
this._elementSelect.addEventListener("select", this.elementSelect, false); this._elementSelect.addEventListener("select", this.elementSelect, false);
this._box1 = <HTMLInputElement>document.getElementById("spinBoxMin"); this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin");
this._box2 = <HTMLInputElement>document.getElementById("spinBoxMax"); this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax");
} }
...@@ -76,30 +76,32 @@ export class DrawChart { ...@@ -76,30 +76,32 @@ export class DrawChart {
private setEnergyButtonClick = (event: MouseEvent) => { private setEnergyButtonClick = (event: MouseEvent) => {
this._chart.calibrated = true; this._chart.calibrated = true;
this.drawChart(this._image, this._pixel1, this._pixel2, 0, this._image.channelDepth); this.drawChart(this._image, this._pixel1, this._pixel2, 0, this._image.channelDepth);
this._box1.setAttribute("value", "0"); this.spinBoxMin.setAttribute("value", "0");
this._box2.setAttribute("value", this._image.channelDepth.toString()); this.spinBoxMax.setAttribute("value", this._image.channelDepth.toString());
}; };
private setChannelButtonClick = (event: MouseEvent) => { private setChannelButtonClick = (event: MouseEvent) => {
this._chart.calibrated = false; this._chart.calibrated = false;
this.drawChart(this._image, this._pixel1, this._pixel2, 0, this._image.channelDepth); this.drawChart(this._image, this._pixel1, this._pixel2, 0, this._image.channelDepth);
this._box1.setAttribute("value", "-"); this.spinBoxMin.setAttribute("value", "-");
this._box2.setAttribute("value", "-"); this.spinBoxMax.setAttribute("value", "-");
}; };
private exportGraphClick = (event: MouseEvent) => { private exportGraphClick = (event: MouseEvent) => {
let img = <HTMLImageElement>document.getElementById("chartToImg"); let img = <HTMLImageElement>document.getElementById("chartToImg");
Dygraph.Export.asPNG(this._graphic, img); Dygraph.Export.asPNG(this._graphic, img);
document.getElementById("ExportGraph").setAttribute("href", img.src.replace("image/png", "image/octet-stream")); this._exportgraph.setAttribute("href", img.src.replace("image/png", "image/octet-stream"));
}; };
private readSpinBoxClick = (event: MouseEvent) => { private readSpinBoxClick = (event: MouseEvent) => {
//esportazione grafico //esportazione grafico
console.log("readspinbox");
this.peackSelection(0, 0, this._image); this.peackSelection(0, 0, this._image);
}; };
private chartClick = (event: MouseEvent) => { private chartClick = (event: MouseEvent) => {
//zoom manuale sul grafico //zoom manuale sul grafico
console.log("chartClick");
let r: number[]; let r: number[];
r = this._graphic.xAxisRange(); r = this._graphic.xAxisRange();
if (!this._chart.calibrated) { if (!this._chart.calibrated) {
...@@ -108,8 +110,8 @@ export class DrawChart { ...@@ -108,8 +110,8 @@ export class DrawChart {
} else { } else {
r[0] = Help.round3(r[0]); r[0] = Help.round3(r[0]);
r[1] = Help.round3(r[1]); r[1] = Help.round3(r[1]);
this._box1.setAttribute("value", r[0].toString()); this.spinBoxMin.setAttribute("value", r[0].toString());
this._box2.setAttribute("value", r[1].toString()); this.spinBoxMax.setAttribute("value", r[1].toString());
} }
this._image.globalxMinRange = r[0]; this._image.globalxMinRange = r[0];
this._image.globalxMaxRange = r[1]; this._image.globalxMaxRange = r[1];
...@@ -122,53 +124,53 @@ export class DrawChart { ...@@ -122,53 +124,53 @@ export class DrawChart {
switch (element) { switch (element) {
case "1": //Ca case "1": //Ca
this.peackSelection(3.6, 3.8, this._image); this.peackSelection(3.6, 3.8, this._image);
this._box1.setAttribute("value", "3.60"); this.spinBoxMin.setAttribute("value", "3.60");
this._box2.setAttribute("value", "3.80"); this.spinBoxMax.setAttribute("value", "3.80");
break; break;
case "2": //Pb case "2": //Pb
this.peackSelection(10.4, 10.7, this._image); this.peackSelection(10.4, 10.7, this._image);
this._box1.setAttribute("value", "10.40"); this.spinBoxMin.setAttribute("value", "10.40");
this._box2.setAttribute("value", "10.70"); this.spinBoxMax.setAttribute("value", "10.70");
break; break;
case "3": //Hg case "3": //Hg
this.peackSelection(9.8, 10.15, this._image); this.peackSelection(9.8, 10.15, this._image);
this._box1.setAttribute("value", "9.80"); this.spinBoxMin.setAttribute("value", "9.80");
this._box2.setAttribute("value", "10.15"); this.spinBoxMax.setAttribute("value", "10.15");
break; break;
case "4": //Fe case "4": //Fe
this.peackSelection(6.3, 6.5, this._image); this.peackSelection(6.3, 6.5, this._image);
this._box1.setAttribute("value", "6.30"); this.spinBoxMin.setAttribute("value", "6.30");
this._box2.setAttribute("value", "6.50"); this.spinBoxMax.setAttribute("value", "6.50");
break; break;
case "5": //Cu case "5": //Cu
this.peackSelection(7.85, 8.2, this._image); this.peackSelection(7.85, 8.2, this._image);
this._box1.setAttribute("value", "7.85"); this.spinBoxMin.setAttribute("value", "7.85");
this._box2.setAttribute("value", "8.20"); this.spinBoxMax.setAttribute("value", "8.20");
break; break;
case "6": //Zn case "6": //Zn
this.peackSelection(8.5, 8.72, this._image); this.peackSelection(8.5, 8.72, this._image);
this._box1.setAttribute("value", "8.50"); this.spinBoxMin.setAttribute("value", "8.50");
this._box2.setAttribute("value", "8.72"); this.spinBoxMax.setAttribute("value", "8.72");
break; break;
case "7": //Ti case "7": //Ti
this.peackSelection(4.35, 4.65, this._image); this.peackSelection(4.35, 4.65, this._image);
this._box1.setAttribute("value", "4.35"); this.spinBoxMin.setAttribute("value", "4.35");
this._box2.setAttribute("value", "4.65"); this.spinBoxMax.setAttribute("value", "4.65");
break; break;
case "8": //K case "8": //K
this.peackSelection(3.2, 3.42, this._image); this.peackSelection(3.2, 3.42, this._image);
this._box1.setAttribute("value", "3.20"); this.spinBoxMin.setAttribute("value", "3.20");
this._box2.setAttribute("value", "3.42"); this.spinBoxMax.setAttribute("value", "3.42");
break; break;
case "9": //Co case "9": //Co
this.peackSelection(6.8, 7.05, this._image); this.peackSelection(6.8, 7.05, this._image);
this._box1.setAttribute("value", "6.80"); this.spinBoxMin.setAttribute("value", "6.80");
this._box2.setAttribute("value", "7.05"); this.spinBoxMax.setAttribute("value", "7.05");
break; break;
default: default:
this.peackSelection(0, this._image.channelDepth, this._image); this.peackSelection(0, this._image.channelDepth, this._image);
this._box1.setAttribute("value", "0"); this.spinBoxMin.setAttribute("value", "0");
this._box2.setAttribute("value", this._image.channelDepth.toString()); this.spinBoxMax.setAttribute("value", this._image.channelDepth.toString());
break; break;
} }
}; };
...@@ -276,8 +278,8 @@ export class DrawChart { ...@@ -276,8 +278,8 @@ export class DrawChart {
//let image = this._image; //let image = this._image;
//se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox //se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox
if (xMinRange == 0 && xMaxRange == 0) { if (xMinRange == 0 && xMaxRange == 0) {
xMinRange = parseInt((this._box1).value); xMinRange = parseInt((this.spinBoxMin).value);
xMaxRange = parseInt((this._box2).value); xMaxRange = parseInt((this.spinBoxMax).value);
} }
image.globalxMinRange = xMinRange; image.globalxMinRange = xMinRange;
......
drawImage.ts
+ 7
− 7
View file @ 111c12d0
...@@ -88,15 +88,14 @@ export class DrawImage { ...@@ -88,15 +88,14 @@ export class DrawImage {
this._image.globalxMaxRange = this._image.channelDepth; this._image.globalxMaxRange = this._image.channelDepth;
this._saturationSlider.value = "100"; this._saturationSlider.value = "100";
this._transparencySlider.value = "0"; this._transparencySlider.value = "0";
document.getElementById("spinBoxMin").setAttribute("value", "-"); this._drawChart.spinBoxMin.setAttribute("value", "-");
document.getElementById("spinBoxMax").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.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); 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) => { private exportImageClick = (event: MouseEvent) => {
//esportazione immagine //esportazione immagine
let img = this._selectionCanvas.toDataURL("image/png"); let img = this._selectionCanvas.toDataURL("image/png");
this._selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream")); this._selectionCanvas.setAttribute("href", img.replace("image/png", "image/octet-stream"));
document.getElementById("ExportLink").setAttribute("href", img); document.getElementById("ExportLink").setAttribute("href", img);
...@@ -112,7 +111,6 @@ export class DrawImage { ...@@ -112,7 +111,6 @@ export class DrawImage {
} }
//se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il //se è stato cliccato un punto disegno il grafico, altrimenti disegno anche il
//canvas e aggiorno l'origine //canvas e aggiorno l'origine
//alert(this._image.zPixel1.x + ", " + this._image.zPixel1.y + " - " + this._image.zPixel2.x + ", " + this._image.zPixel2.y);
if (this._image.zPixel1.x != this._image.zPixel2.x || this._image.zPixel1.y != this._image.zPixel2.y) { 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.newOrigin = { x: this._image.zPixel1.x, y: this._image.zPixel1.y };
...@@ -177,8 +175,6 @@ export class DrawImage { ...@@ -177,8 +175,6 @@ export class DrawImage {
this._mouseX = allX - objX; this._mouseX = allX - objX;
this._mouseY = allY - objY; this._mouseY = allY - objY;
// Put your mousemove stuff here
// clear the canvas // clear the canvas
//this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height); //this._ctx.clearRect(0, 0, this._selectionCanvas.width, this._selectionCanvas.height);
...@@ -279,9 +275,13 @@ export class DrawImage { ...@@ -279,9 +275,13 @@ export class DrawImage {
} else { } 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: image.width - 1, y: image.height - 1 });
} }
max *= parseInt(this._saturationSlider.value) / 100; max *= parseInt(this._saturationSlider.value) / 100;
this.drawCanvas(image, nOfCountsRelative, max); if(max == 0)
alert("WARNING: max value is 0");
else
this.drawCanvas(image, nOfCountsRelative, max);
} }
if (typeof (callback) != typeof (undefined)) if (typeof (callback) != typeof (undefined))
......
fs.ts
+ 0
− 2
View file @ 111c12d0
...@@ -239,8 +239,6 @@ export function readImage(content: string): G.Image { ...@@ -239,8 +239,6 @@ export function readImage(content: string): G.Image {
let metadata = G.Metadata.getInstance(); let metadata = G.Metadata.getInstance();
get_metadata(lines); get_metadata(lines);
console.log("lines");
//console.log(lines);
let image = G.Image.getInstance(); let image = G.Image.getInstance();
......
index.html 0 → 100644
+ 261
− 0
View file @ 111c12d0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Compatibilita' con Microsoft e Responsivita'-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XRF analysis viewer</title>
<!-- CSS -->
<link href="src/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="src/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="src/bootstrap-treeview/dist/bootstrap-treeview.min.css">
<link rel="stylesheet" type="text/css" href="src/bootstrap-select/dist/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie -->
<script type="text/javascript" src="src/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="src/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="node_modules/bootstrap/js/dist/tooltip.js"></script> -->
<script type="text/javascript" src="src/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="src/bootstrap-select/dist/bootstrap-select.min.js"></script>
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<!-- <script type="text/javascript" src="src/dygraph/dist/dygraph-combined-dev.js"></script>
<script type="text/javascript" src="src/dygraph/dist/dygraph-extra.js"></script> -->
<script type="text/javascript" src="xrf.js"></script>
<!-- ./Librerie -->
</head>
<body>
<!-- Spinner -->
<div align="center">
<div id="load-spinner" style="display:none">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- /.spinner -->
<!-- Navbar -->
<nav class="navbar navbar-fixed-top bg-primary">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/presentation/XRF-App/">
<img id="logo-chnet" src="Logo-chnet.png" width="35" height="35" alt="" class="img-rounded">
<div id="testo-logo-chnet">XRF Analysis Viewer</div>
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<!-- <?php
$pic=$_SERVER["OIDC_CLAIM_picture"];
if (filter_var($pic, FILTER_VALIDATE_URL))
{
echo "<img src=\"$pic\" class=\"img-circle\" width=\"25\">";
} else {
echo "<img src=\"./default-avatar.png\" class=\"img-circle\" width=\"25\">";
}
// echo " ".ucfirst($_SERVER["OIDC_CLAIM_name"]);
?> -->
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<!-- <?php
echo "<div class=\"usrname\">".ucfirst($_SERVER["OIDC_CLAIM_name"])."</div>";
echo "<i class=\"usrmail\">".ucfirst($_SERVER["OIDC_CLAIM_email"])."</i>";
?> -->
</li>
<li class="divider"></li>
<li class="usr-menu"><a href="https://chnet-iam.cloud.cnaf.infn.it/dashboard#/home">Profile</a></li>
<li class="usr-menu"><a href="/presentation/.redirect/?logout=http%3A%2F%2Fchnet.infn.it%2F">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- ./navbar -->
<!-- Sidenav -->
<div class="w3-bar-block w3-border" id="sidenav">
<div class="w3-bar-item w3-button">
<a href="">
<i class="fa fa-home" data-toggle="tooltip" data-placement="right" title="Home"></i>
<span class="text-sidenav" style="display:none">Home</span>
</a>
</div>
<div class="w3-bar-item w3-button" data-toggle="modal" data-target="#myModal">
<i class="fa fa-folder-o" data-toggle="tooltip" data-placement="right" title="Open File"></i>
<span class="text-sidenav" style="display:none">Open file</span>
</div>
<div class="w3-bar-item w3-button" data-toggle="collapse" data-target=".collapse-settings">
<i class="fa fa-cog" data-toggle="tooltip" data-placement="right" title="Settings"></i>
<span class="text-sidenav" style="display:none">Settings</span>
</div>
<div class="w3-bar-item w3-button" id="reset">
<i class="fa fa-refresh" data-toggle="tooltip" data-placement="right" title="Reset"></i>
<span class="text-sidenav" style="display:none">Refresh</span>
</div>
<div class="w3-bar-item w3-button">
<a id="ExportLink" download="Canvas.png" href="#" class="w3-bar-item w3-button">
<div id="ExportImage">
<i class="fa fa-file-image-o" data-toggle="tooltip" data-placement="right" title="Export Map"></i>
<span class="text-sidenav" style="display:none">Export Map</span>
</div>
</a>
</div>
<div class="w3-bar-item w3-button">
<a href="#" id="ExportGraph" download="Spectrum.png" class="w3-bar-item w3-button">
<i class="fa fa-bar-chart" data-toggle="tooltip" data-placement="right" title="Export Chart"></i>
<span class="text-sidenav" style="display:none">Export Chart</span>
</a>
</div>
<div class="w3-bar-item w3-button collapse-sidebar-manually sidebar-label">
<i id="collapse-symbol" class="fa fa-angle-double-right" data-toggle="tooltip" data-placement="right" title="Open Sidebar"></i>
<span class="text-sidenav" style="display:none">Collapse sidebar</span>
</div>
</div>
<!-- ./sidenav -->
<!-- Modal -->
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" id="importPanel">
<div class="modal-header">
<button id="btnCloseModal" type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title">Import File</h3>
</div>
<div class="modal-body">
<h4>Select file from server</h4>
<div id="FileTreeview"></div>
Import File From Local Repository
<label class="btn-bs-file btn btn-primary btn-sm">
<span class="glyphicon glyphicon-open"></span> Choose a file...
<input id="myImport" type="file" / >
</label>
</div>
</div>
</div>
</div>
<!-- ./modal -->
<!-- COLLAPSABLE PAGE -->
<div class="container-fluid droppable" id="myContent" dropzone="copy f:text/plain">
<!-- PAGE CONTENT -->
<div class="row">
<!-- MAPPA -->
<div class="col-sm-4">
<div class="well" id="mappa-pannel">
<h2>XRF Image</h2>
<!-- canvas -->
<div style="position: relative; height: 400px;">
<canvas id="selectionCanvas" height="400px" width="360px"></canvas>
<canvas id="myCanvas" height="400px" width="360px"></canvas>
</div>
<!-- ./canvas -->
<div class="collapse collapse-settings" align="center">
<div class="panel panel-default">
<div class="panel-body">
Saturation<input type="range" id="SaturationSlider" value="100">
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Opacity<input type="range" id="TrasparencySlider" value="0">
</div>
</div>
<button type="button" class="btn btn-primary btn-sm" id="rePlot">Re-color</button>
</div>
</div>
<!-- ./ pannello-mappa -->
</div>
<!-- ./mappa -->
<!-- SPETTRO -->
<div class="col-md-8">
<div class="well" id="chart-pannel">
<h2>XRF Spectrum</h2>
<!-- grafico -->
<p id="chart" class="p-chart"></p>
<img id="chartToImg" style="display:none;">
<!-- impostazioni -->
<p><div class="collapse collapse-settings" align="center">
<!-- Asse y -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">Scale <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="setlinearButton">Linear</a></li>
<li><a href="#" id="setlogButton">Log</a></li>
</ul>
</div>
<!-- Asse x -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">x Label <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="setEnergyButton">Energy</a></li>
<li><a href="#" id="setChannelsButton">Channels</a></li>
</ul>
</div>
<!-- Selezione picco -->
<div class="btn-group">
<div class="form-group" id="myform">
<label for="spinBoxMin"><h6>Peak selection (only calibrated)</h6></label>
<p><input type="number" class="form-control" id="spinBoxMin" min="0" max="55" step="0.01">
<input type="number" class="form-control" id="spinBoxMax" min="0" max="55" step="0.01"></p>
<div align="center">
<button id="readSpinbox" class="btn btn-primary btn-sm" style="margin-left: -25px;">Select range</button>
</div>
</div>
</div>
<!-- Selezione elemento -->
<select class="form-control selectpicker" data-style="btn-primary btn-sm" data-width="25%" data-live-search="true" id="elementSelect">
<option value="0">- inspect element -</option>
<option value="1">Ca</option>
<option value="2">Pb</option>
<option value="3">Hg</option>
<option value="4">Fe</option>
<option value="5">Cu</option>
<option value="6">Zn</option>
<option value="7">Ti</option>
<option value="8">K</option>
<option value="9">Co</option>
</select>
</div></p>
<!-- ./impostazioni -->
</div>
<!-- ./pannello-spettro -->
</div>
<!-- ./colonna-spettro -->
</div>
<!-- ./riga 1 -->
</div>
<!-- /.collapsable-page -->
</body>
</html>
start.ts
+ 19
− 22
View file @ 111c12d0
...@@ -15,8 +15,6 @@ window.onload = () => { ...@@ -15,8 +15,6 @@ window.onload = () => {
// skip the tooltip for the moment; it generates an apparently fatal error // skip the tooltip for the moment; it generates an apparently fatal error
//$('[data-toggle="tooltip"]').tooltip(); //$('[data-toggle="tooltip"]').tooltip();
//new CanvasManager("selectionCanvas", drawChart, drawImage);
let drawImage = new DrawImage("selectionCanvas"); let drawImage = new DrawImage("selectionCanvas");
let drawChart = drawImage._drawChart; let drawChart = drawImage._drawChart;
...@@ -72,15 +70,15 @@ function setImportFile(drawImage: DrawImage, drawChart: DrawChart) { ...@@ -72,15 +70,15 @@ function setImportFile(drawImage: DrawImage, drawChart: DrawChart) {
// import a local file // import a local file
let fileInputButton: any = document.getElementById("myImport"); let fileInputButton: any = document.getElementById("myImport");
fileInputButton.onchange = function () { fileInputButton.onchange = function () {
Callback.CallbackManager.getInstance().showElement("#load-spinner", true); Callback.CallbackManager.getInstance().showElement("load-spinner", true);
let file: File = fileInputButton.files[0]; let file: File = fileInputButton.files[0];
let readerObject = new FileReader(); let readerObject = new FileReader();
readerObject.onload = function () { readerObject.onload = function () {
let content: string = readerObject.result; let content: string = readerObject.result;
let image: G.Image = fs.readImage(content); let image: G.Image = fs.readImage(content);
Callback.CallbackManager.getInstance().showElement("#load-spinner", false); 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(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { Callback.CallbackManager.getInstance().closeBootstrapModel("#btnCloseModal"); }); () => { Callback.CallbackManager.getInstance().closeBootstrapModel("btnCloseModal"); });
drawChart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth); 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? // install callbacks for the canvas and chart?
}; };
...@@ -90,37 +88,36 @@ function setImportFile(drawImage: DrawImage, drawChart: DrawChart) { ...@@ -90,37 +88,36 @@ function setImportFile(drawImage: DrawImage, drawChart: DrawChart) {
//funzione per la compressione della sidenav sx //funzione per la compressione della sidenav sx
function compressingSidenav() { function compressingSidenav() {
let fsLabel = $(".sidebar-label"); let fsLabel = document.getElementById("collapse-symbol");
let isClosedfs = false; let isClosedfs = false;
fsLabel.click(function () { let fsLabel_cross = () => {
fsLabel_cross();
});
function fsLabel_cross() {
if (isClosedfs == true) { if (isClosedfs == true) {
isClosedfs = false; isClosedfs = false;
console.log("closed");
$(".w3-bar-block").css("width", "65px"); $(".w3-bar-block").css("width", "65px");
$(".text-sidenav").css("display", "none"); $(".text-sidenav").css("display", "none");
$("#collapse-symbol").attr("title", "Open Sidebar"); document.getElementById("collapse-symbol").title = "Open Sidebar";
$("#collapse-symbol").removeClass("fa-angle-double-left"); document.getElementById("collapse-symbol").classList.replace("fa-angle-double-left","fa-angle-double-right");
$("#collapse-symbol").addClass("fa-angle-double-right");
} else { } else {
isClosedfs = true; isClosedfs = true;
$(".w3-bar-block").css("width", "200px"); $(".w3-bar-block").css("width", "200px");
$(".text-sidenav").css("display", "inline"); $(".text-sidenav").css("display", "inline");
$("#collapse-symbol").attr("title", "Close Sidebar"); document.getElementById("collapse-symbol").title = "Close Sidebar";
$("#collapse-symbol").removeClass("fa-angle-double-right"); document.getElementById("collapse-symbol").classList.replace("fa-angle-double-right","fa-angle-double-left");
$("#collapse-symbol").addClass("fa-angle-double-left");
} }
} };
fsLabel.addEventListener("mousedown", fsLabel_cross, false);
} }
//funzione che definisce l'area su cui si può eseguire il drag&drop //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" //creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
let input: any = document.createElement("input"); let input: any = document.createElement("input");
input.setAttribute("type", "file"); input.type = "file";
input.setAttribute("multiple", true); input.multiple = true;
input.style.display = "none"; input.style.display = "none";
droppableArea.appendChild(input); droppableArea.appendChild(input);
...@@ -151,14 +148,14 @@ function makeDroppable(droppableArea, callback) { ...@@ -151,14 +148,14 @@ function makeDroppable(droppableArea, callback) {
//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato, //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() //della sua lettura e del passaggio del suo contenuto alla funzione readData()
function callback(files) { function callback(files) {
$("#load-spinner").css("display", "inline"); Callback.CallbackManager.getInstance().showElement("load-spinner", true);
let file: File = files[files.length - 1]; let file: File = files[files.length - 1];
console.log("Try to open " + file.name + " ..."); console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader(); let readerObject = new FileReader();
readerObject.onload = function () { readerObject.onload = function () {
let content: string = readerObject.result; let content: string = readerObject.result;
fs.readImage(content); fs.readImage(content);
$("#load-spinner").css("display", "none"); Callback.CallbackManager.getInstance().showElement("load-spinner", false);
}; };
readerObject.readAsText(file); 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