<!DOCTYPE html>
<html>
<head>
<!--Compatibilità con Microsoft e Responsività-->
<meta charset="utf-8">
<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>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- CSS -->
<link href="src/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<h3> File Manager </h3>
<div id="FileTreeview"></div>
</nav>
<!--NavBar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> XRF Analysis Viewer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- INIZIO DELLA PAGINA -->
<div class="container-fluid text-center">
<!--Titolo-->
<div class="page-header well"><h1>XRF analysis viewer</h1></div>
<!--Contenuto-->
<!--Pannello drag and drop-->
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default droppable" dropzone="copy f:text/plain">
<div class="panel-body">
<h4>Trascina qua il file da aprire o clicca per sceglere il file dal server</h4>
</div>
</div>
</div>
</div>
<div class="row"> <!-- row content-->
<!-- PRIMA COLONNA -->
<div class="col-sm-2 sidenav">
<button id="reset" class="btn">Reset</button>
<p><div class="panel-group">
<!--opzioni mapppa-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Image Options</a></h4>
</div>
<div id="collapse1" class="panel-collapse in">
<div class="panel-body">
<p><button type="button" class="btn" id="rePlot">Re-color</button></p>
<div class="panel panel-default sliderPannel">
<p> Saturation and contrast control: </p>
<input type="range" id="SaturationSlider" value="100">
</div>
<div class="panel panel-default sliderPannel">
<p> XRF Image Transparency: </p>
<input type="range" id="TrasparencySlider" value="0">
</div>
</div>
</div>
</div>
<!--Opzioni spettro-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Spectrum Options</a></h4>
</div>
<div id="collapse2" class="panel-collapse in">
<div class="panel-body">
<p>Scale:<div class="btn-group">
<button ype="button" class="btn" id="setlinearButton">Linear</button>
<button ype="button" class="btn" id="setlogButton">Log</button>
</div></p>
<p>X Axis Label:<div class="btn-group">
<button ype="button" class="btn" id="setEnergyButton">Energy</button>
<button ype="button" class="btn" id="setChannelsButton">Channels</button>
</div></p>
</div>
</div>
</div>
<!--selezione elemento / picco-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Peak and Element Selection</a></h4>
</div>
<div id="collapse3" class="panel-collapse in">
<div class="panel-body">
<div class="form-group">
<label for="spinBoxMin">Peak selection (only calibrated)</label>
<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">
<button id="readSpinbox" class="btn">Select range</button>
</div>
<p><div class="form-group">
<label for="elementSelect">Inspect element:</label>
<select class="form-control" id="elementSelect" onchange="setElement()">
<option value="0">- select -</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>
</div>
</div>
</div>
<!--esportazione mappa e spettro-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse4">Export Image and Spectrum</a></h4>
</div>
<div id="collapse4" class="panel-collapse in">
<div class="panel-body">
<p><a href="#" id="ExportImage" download="Canvas.jpg">
<button type="button" class="btn" id="ExportImage">Export Image</button>
</a></p>
<p><a href="#" id="ExportGraph" download="Graphs.png">
<button type="button" class="btn" id="ExportGraph">Export Graph</button>
</a></p>
</div>
</div>
</div>
</div></p>
</div>
<!--MAPPA-->
<div class="col-sm-3 text-left">
<div class="well" id="mappa-pannel">
<h2>XRF Image</h2>
<a href="#" id="Set-Map" data-title="set-map" data-toggle="clickover" data-placement="bottom"><span class="glyphicon glyphicon-cog"></span></a>
<!--canvas contains the img uploaded from data-->
<canvas id="myCanvas" onmousedown="findPosDown(event);" onmouseup="findPosUp(event);">
Browser doesn't support canvas tag
</canvas>
</div>
</div>
<!--SPETTRO-->
<div class="col-sm-7 text-left">
<div class="well" id="chart-pannel">
<h2>XRF Spectrum</h2>
<p id="chart" class="p-chart"></p>
<img id="chartToImg" style="display:none;">
</div>
</div>
</div>
<!--FINE PAGINA-->
</div>
<!--Piè di PAGINA-->
<footer class="container-fluid text-center">
<p><img width="250" src="Digilab2.png" class="img-responsive"></p>
</footer>
</div>
<!--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="provaNavbar.js"></script>
<script type="text/javascript" src="src/dygraph-combined-dev.js"></script>
<script type="text/javascript" src="src/dygraph-extra.js"></script>
<script type="text/javascript" src="LoadFile.js"></script>
<script type="text/javascript" src="src/bootstrap-treeview/public/js/bootstrap-treeview.js"></script>
</body>
</html>