Skip to content
Snippets Groups Projects
index.html 9.42 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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>