Skip to content
Snippets Groups Projects
index.html 9.72 KiB
Newer Older
Laura Cappelli's avatar
Laura Cappelli committed
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!--Compatibilità con Microsoft e Responsività-->
    <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/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">
Laura Cappelli's avatar
Laura Cappelli committed

  </head>

  <body>
    <!-- NAVBAR -->
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="top-navbar">
      <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="#" id="logingUser"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
        <!-- /.nav-collapse -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.navbar -->

    <!-- 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 -->

Laura Cappelli's avatar
Laura Cappelli committed
    <div id="wrapper">
      <!-- FILE-SYSTEM -->
      <button type="button" class="fs-label is-closed" id="fsbtn">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </button>
      <div id="mySidenavfs" class="sidenav">
        <h3> Import File From Server </h3>
        <div id="FileTreeview"></div>
        <h3> Import File From Local Repository </h3>
        <label class="btn-bs-file btn btn-primary">
          <span class="glyphicon glyphicon-open"></span> Choose a file...
          <input id="myImport" type="file" / >
        </label>
      </div>
      <!-- ./file-system -->

      <!-- COLLAPSABLE PAGE -->
      <div class="container-fluid droppable" id="myContent" dropzone="copy f:text/plain">

        <!-- TITOLO -->
        <div class="page-header well text-center"><h1>XRF analysis viewer</h1></div>

        <!-- PAGE CONTENT -->
        <div class="row">

          <!-- MAPPA -->
          <div class="col-sm-4">
            <div class="well" id="mappa-pannel">
              <h2>XRF Image</h2>

              <!-- Simbolo impostazioni -->
              <div data-toggle="collapse" data-target="#collapse-settings">
                <span class="glyphicon glyphicon-cog" data-toggle="tooltip" data-placement="top" title="settings"></span>
Laura Cappelli's avatar
Laura Cappelli committed
              </div>

              <!-- Simbolo refresh -->
              <span class="glyphicon glyphicon-refresh reset" data-toggle="tooltip" data-placement="top" title="reset"></span>

              <!-- Esportazione-->
              <a href="#" id="ExportLink" download="Canvas.jpg">
                <div id="ExportImage">
                  <span class="glyphicon glyphicon-save" data-toggle="tooltip" data-placement="top" title="Export"></span>    
                </div>
              </a>

              <!-- canvas -->
              <div style="position: relative; height=400px;">
                <canvas id="selectionCanvas" height="400px" width="360px" onmousedown="findPosDown(event);" onmouseup="findPosUp(event);"></canvas>
                <canvas id="myCanvas" height="400px" width="360px"></canvas>
Laura Cappelli's avatar
Laura Cappelli committed
              </div>
              <!-- ./canvas -->

              <!-- Impostazioni -->
              <p><div id="collapse-settings" class="collapse" align="center">
                <button type="button" class="btn btn-primary btn-sm" id="rePlot">Re-color</button>
                <div class="panel panel-default" style="margin-left: 5px; margin-top: -10px;">
                  <div class="panel-body">
                    Saturation<input type="range" id="SaturationSlider" value="100">
                  </div>
                </div>
                <div class="panel panel-default" style="margin-left: 5px; margin-top: -10px; margin-right: 5px;">
                  <div class="panel-body">
                    Opacity<input type="range" id="TrasparencySlider" value="0">
                  </div>
                </div>
              </div></p>
              <!-- ./impostazini -->

Laura Cappelli's avatar
Laura Cappelli committed
            </div>
Laura Cappelli's avatar
Laura Cappelli committed
          </div>
          <!-- ./mappa -->

          <!-- SPETTRO -->
          <div class="col-md-8">
            <div class="well" id="chart-pannel">
Laura Cappelli's avatar
Laura Cappelli committed
              <h2>XRF Spectrum</h2>

              <!-- simbolo impostazioni -->
              <div data-toggle="collapse" data-target="#collapse-settings2">
                <span class="glyphicon glyphicon-cog" data-toggle="tooltip" data-placement="top" title="settings"></span>
              </div>

              <!-- Simbolo refresh -->
              <span class="glyphicon glyphicon-refresh reset" data-toggle="tooltip" data-placement="top" title="reset"></span>

              <!-- Esportazione-->
              <a href="#" id="ExportGraph" download="Spectrum.jpg">
                <span class="glyphicon glyphicon-save" data-toggle="tooltip" data-placement="top" title="Export"></span>
              </a>

              <!-- grafico -->
Laura Cappelli's avatar
Laura Cappelli committed
              <p id="chart" class="p-chart"></p>
              <img id="chartToImg" style="display:none;">

              <!-- impostazioni -->
              <p><div id="collapse-settings2" class="collapse" 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 -->

Laura Cappelli's avatar
Laura Cappelli committed
            </div>
Laura Cappelli's avatar
Laura Cappelli committed
          </div>
Laura Cappelli's avatar
Laura Cappelli committed

        </div>
Laura Cappelli's avatar
Laura Cappelli committed

      </div>
      <!-- /.collapsable-page -->

    </div>
    <!-- ./wrapper -->

    <footer>
      <p>© CHNET 2017</p>
      <img width="100" src="Logo-chnet.png" class="img-responsive center-block">
Laura Cappelli's avatar
Laura Cappelli committed
    </footer>

    <!--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="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="loaddir.js"></script>
      <script type="text/javascript" src="start.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>
  </body>

</html>