Skip to content
GitLab
Select Git revision
  • master default
  • v2024_rc
  • 144-create-testing-framework-for-tests-automation
  • v2025_alpha
  • dev/dummy
  • code_refactor
  • board_v4
  • MB.2024.ter_restored
  • Refactor_mb_2023
  • MUX_board_v2024
  • EGU23
  • update_V2023
  • battery_charger
  • mqtt
  • Ohmpi_1.0x
  • v2024.0.35
  • v2024.0.34
  • v2024.0.33
  • v2024.0.32
  • v2024.0.31
  • v2024.0.30
  • v2024.0.29
  • v2024.0.28
  • v2024.0.27
  • v2024.0.26
  • v2024.0.25
  • v2024.0.24
  • v2024.0.23
  • v2024.0.22
  • v2024.0.21
  • v2024.0.20
  • v2024.0.19
  • v2024.0.18
  • v2024.0.17
  • v2024.0.16
Find file BlameHistoryPermalink
index.html 22.92 KiB
1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
    <meta charset="utf8"/>
5 
    <title>OhmPi Acquisition Board</title>
6 
    <link rel="shortcut icon" type="image/jpg" href="logo_ohmpi.jpg"/>
7
8 
    <!-- dependencies (need to be local as no internet in AP mode)-->
9 
    <script src="js/plotly-basic-2.8.3.min.js"></script>
10 
    <script src="js/jquery-3.4.1.min.js"></script>
11 
    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
12 
	<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
13 
	<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> -->
14 
    <!-- <script src="js/danfojs/bundle.min.js"></script> -->
15 
</head>
16 
<body>
17 
    <div class='container'>
18 
        <h1>OhmPi Acquisition Board</h1>
19 
        <!-- nb stacks, on-time -->
20 
        <button id="update_settingsBtn" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">Settings</button>
21 
        <button id='startBtn' type="button" class="btn btn-primary">Start</button>
22 
        <button id='stopBtn' type="button" class="btn btn-warning">Stop</button>
23 
        <!-- upload button for csv which display the table ABMN -->
24 
        <button id="removeDataBtn" type="button" class="btn btn-danger">Clear data</button>
25 
        <button id="getDataBtn" type="button" class="btn btn-info">Get data</button>
26 
        <div class="form-check">
27 
            <input id="dataRetrievalCheck" class="form-check-input" type="checkbox" value="">
28 
            <label class="form-check-label" for="dataRetrievalCheck">
29 
                Automaticaly get data every 1 second
30 
            </label>
31 
        </div>
32 
        <div id='output'>Status: idle</div>
33
34 
        <!-- Pseudo section -->
35 
        <select id='surveySelect' class='custom-select'>
36 
        </select>
37 
        <input id="cmin" type="number" value="0"/>
38 
        <input id="cmax" type="number" value="150"/>
39 
        <button id="capplyBtn" type="button" class="btn btn-info">Apply</button>
40 
        <div id="gd"></div>
41 
        <div class="mb3 row">
42 
            <label for="quadSelect">Quadrupole:</label>
43 
            <div class="col-sm-10">
44 
                <select id='quadSelect' class='custom-select'></select>
45 
            </div>
46 
        </div>
47
48 
        <!-- trace figure -->
49 
        <button id="addTraceBtn" type="button" class="btn btn-info">Add trace</button>
50 
        <button id="removeTracesBtn" type="button" class="btn btn-info">Remove all traces</button>
51 
        <div id="ts"></div>
52
53 
        <!-- RS check -->
54 
        <button id="rsBtn" type="button" class="btn btn-info">Check contact resistance</button>
55 
        <button id="rsClearBtn" type="button" class="btn btn-info">Clear plot</button>
56 
        <div id="rs"></div>
57
58 
        <!-- Additional buttons -->
59 
        <button id="downloadBtn" type="button" class="btn btn-primary">Download data</button>
60 
        <!-- <button id="invertBtn" type="button" class="btn btn-primary">Invert</button> -->
61 
        <a id="download"></a>
62
63 
        <!-- Modal for configuration -->
64 
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
65 
            <div class="modal-dialog" role="document">
66 
            <div class="modal-content">
67 
                <div class="modal-header">
68 
                <h5 class="modal-title" id="exampleModalLabel">OhmPi configuration</h5>
69 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
70 
                    <span aria-hidden="true">&times;</span>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
</button> </div> <div class="modal-body"> <form> <div class="form-group row"> <label for="nbElectrodes" class="col-sm-2 col-form-label">Nb electrodes</label> <div class="col-sm-10"> <input type="number" class="form-control-number" id="nbElectrodes" value="64"> </div> </div> <div class="form-group row"> <label for="injectionDuration" class="col-sm-2 col-form-label">Injection duration [s]</label> <div class="col-sm-10"> <input type="number" class="form-control-number" id="injectionDuration" value="0.2"> </div> </div> <div class="form-group row"> <label for="nbMeasurements" class="col-sm-2 col-form-label">Nb Measurements</label> <div class="col-sm-10"> <input type="number" class="form-control-number" id="nbMeasurements" value="1"> </div> </div> <div class="form-group row"> <label for="sequenceDelay" class="col-sm-2 col-form-label">Sequence delay [s]</label> <div class="col-sm-10"> <input type="number" class="form-control-number" id="sequenceDelay" value="100"> </div> </div> <div class="form-group row"> <label for="nbStack" class="col-sm-2 col-form-label">Nb stack</label> <div class="col-sm-10"> <input type="number" class="form-control-number" id="nbStack" value="1"> </div> </div> <div class="form-group row"> <label for="sequence" class="col-sm-2 col-form-label">Sequence</label> <div class="col-sm-10"> <input type="file" class="form-control" id="sequence"> </div> </div> <div class="form-group row"> <label for="elecSpacing" class="col-sm-2 col-form-label">Electrode spacing [m]</label> <div class="col-sm-10"> <input type="number" class="form-control" id="elecSpacing", value="1"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button id="saveConfigBtn" type="button" data-dismiss="modal" class="btn btn-primary">Save</button> </div> </div> </div> </div> <button id="restartBtn" type="button" class="btn btn-danger">Restart</button> <button id="shutdownBtn" type="button" class="btn btn-danger">Shutdown</button> <footer>v0.2.0</footer> </div> <script type="text/javascript"> //let serverUrl = 'http://10.3.141.1:8080' //let serverUrl = 'http://0.0.0.0:8080' //let serverUrl = 'http://localhost:8080' let serverUrl = 'http://' + window.location.host console.log('serverUrl =', serverUrl) let output = document.getElementById('output') let data = {} // hold data of all surveys let interv = null // hold interval for automatic data retrieval let quads = [] // available quadrupoles for time-serie figure
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
let squads = [] // selected quadrupoles for time-serie figure // useful functions function sendCommand(query, callback=null) { // dic in the form: {'cmd': X, ...} as JSON if (callback == null) { function callback(x) { console.log('default callback:', x) } } let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4) { if (xhr.status == 200) { callback(JSON.parse(xhr.response)) } } } xhr.open('POST', serverUrl) xhr.setRequestHeader('Content-Type', 'application/json') xhr.send(query) } // start button function startBtnFunc() { sendCommand('{"cmd": "start"}', function(x) { console.log(x['status']) if (x['status'] == 'running') { output.innerHTML = 'Status: measuring...' } }) } let startBtn = document.getElementById('startBtn') startBtn.addEventListener('click', startBtnFunc) // stop button function stopBtnFunc() { sendCommand('{"cmd": "stop"}', function(x) { output.innerHTML = 'Status: ' + x['status'] clearInterval(interv) getData() }) } let stopBtn = document.getElementById('stopBtn') stopBtn.addEventListener('click', stopBtnFunc) // set configuration function saveConfigBtnFunc() { // collect values from modal let formVals = {} for (let field of ['nbElectrodes', 'injectionDuration', 'nbMeasurements', 'sequenceDelay', 'nbStack']) { formVals[field] = document.getElementById(field).value } console.log(formVals) // define callback to send settigs to Pi function configCallback() { sendCommand(JSON.stringify({ 'cmd': 'update_settings', 'config': formVals }), function(x) { console.log('update_settings', x) }) } // deal with the potential file containing the sequence // https://stackoverflow.com/questions/19038919/is-it-possible-to-upload-a-text-file-to-input-in-html-js if (!window.FileReader) { alert('Your browser is not supported');