Skip to content
Snippets Groups Projects
index-prove.html 9.42 KiB
Newer Older
Laura Cappelli's avatar
Laura Cappelli committed
<!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>