Failed to fetch fork details. Try again later.
-
Clement Remi authoreda684d56b
Forked from
reversaal / OhmPi
Source project has a limited visibility.
<!DOCTYPE html><!-- debugging instruction to see the messages passing on the RPimosquitto_sub -h raspberrypi.local -t ohmpi_0001/ctrl--><html><head> <meta charset="utf8"/> <title>OhmPi Acquisition Board</title> <link rel="shortcut icon" type="image/jpg" href="logo_ohmpi.jpg"/> <!-- dependencies (need to be local as no internet in AP mode)--> <script src="js/plotly-2.26.0.min.js"></script> <script src="js/jquery-3.4.1.min.js"></script> <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"> <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --> <!-- <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"> --> <!-- <script src="js/danfojs/bundle.min.js"></script> --> <!-- <script src="js/mqtt.min.js"></script> --> <script src="js/paho/paho-mqtt.js"></script></head><body> <div class='container'> <h1>OhmPi Acquisition Board</h1> <!-- nb stacks, on-time --> <button id="update_settingsBtn" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">Settings</button> <button id='runBtn' type="button" class="btn btn-primary">▶</button> <button id='stopBtn' type="button" class="btn btn-warning">◼</button> <!-- upload button for csv which display the table ABMN --> <button id="removeDataBtn" type="button" class="btn btn-danger">Clear data</button> <button id="getDataBtn" type="button" class="btn btn-info">Get data</button> <div class="form-check"> <input id="dataRetrievalCheck" class="form-check-input" type="checkbox" value=""> <label class="form-check-label" for="dataRetrievalCheck"> Automaticaly get data every 1 secondStart </label> </div> <div id='output'>Status: idle</div> <!-- Pseudo section --> <select id='surveySelect' class='custom-select'> </select> <input id="cmin" type="number" value="0"/> <input id="cmax" type="number" value="150"/> <button id="capplyBtn" type="button" class="btn btn-info">Apply</button> <div id="gd"></div> <!-- trace figure --> <div class="mb3 row"> <label for="quadSelect">Quadrupole:</label> <div class="col-sm-10"> <select id='quadSelect' class='custom-select'></select> </div> </div> <button id="addTraceBtn" type="button" class="btn btn-info">Add trace</button> <button id="removeTracesBtn" type="button" class="btn btn-info">Remove all traces</button> <div id="ts"></div> <!-- RS check --> <button id="rsBtn" type="button" class="btn btn-info">Check contact resistance</button> <button id="rsClearBtn" type="button" class="btn btn-info">Clear plot</button> <div id="rs"></div> <!-- Inversion plot --> <select id="surveySelectInv" class='custom-select'> </select> <button id="invertBtn" type="button" class="btn btn-info">Run inversion</button> <input id="cminInv" type="number" value="0"/> <input id="cmaxInv" type="number" value="150"/> <button id="capplyBtnInv" type="button" class="btn btn-info">Apply</button> <div id="inv"></div>7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<!-- Additional buttons -->
<button id="downloadBtn" type="button" class="btn btn-primary">Download data</button>
<a id="download"></a>
<button id="restartBtn" type="button" class="btn btn-danger">Restart</button>
<button id="shutdownBtn" type="button" class="btn btn-danger">Shutdown</button>
<!-- Modal for configuration -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">OhmPi configuration</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
</div>
<footer>v0.3.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
let squads = [] // selected quadrupoles for time-serie figure
let commands = {} // store commands and their id
let callbacks = {} // store callback (might not be needed)
let invertedData = [{
rho: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
x: [-9, -6, -5 , -3, -1],
y: [0, 1, 4, 5, 7],
}] // store inverted data
// function with MQTT
let topic = 'ohmpi_0001' // we could change this through a drop-down to connect to a different ohmpi
let topic_ctrl = topic + '/ctrl'
let topic_exec = topic + '/exec'
let topic_data = topic + '/data'
let hostname = location.hostname
let port = 9001
let clientId = 'ohmpi_0001_html'
let message = null
let msg = ''
let userName = 'jkl' // can be ask to the user
let password = 'jkl'
// create client
client = new Paho.MQTT.Client(hostname, port, clientId)
client.onConnectionLost = onConnectionLost
client.onMessageArrived = onMessageArrived
client.connect({onSuccess: onConnect})
// client.connect({userName: username, password: password, onSuccess:onConnect})
function onConnect() {
console.log("onConnect")
client.subscribe(topic_data)
client.subscribe(topic_exec)
// send welcome message
message = new Paho.MQTT.Message("Hello from index.html")
message.destinationName = topic_ctrl
client.send(message)
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0)
console.log("onConnectionLost:" + responseObject.errorMessage)
}
function onMessageArrived(message) {
console.log("onMessageArrived:" + message.payloadString)
try {
let payload = message.payloadString
if (message.topic == topic_data) {
// process data
msg = payload // for accessing the variable from the console
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
console.log('DATA', payload)
let ddic = JSON.parse(payload.split('INFO:')[1])
// check cmd_id is any
processMessage(ddic)
// usually these don't have a cmd_id so we are not sure when
} else if (message.topic == topic_exec) {
// display it in the log
console.log('EXEC LOG:', payload)
}
// let response = JSON.parse(message.payloadString)
// console.log('response=', response)
// // check ID of message against our dictionnary of callback
// let cmd_id = response['cmd_id']
// if (callbacks.hasOwnProperty(cmd_id)) {
// console.log('++ execute callback')
// callbacks[cmd_id](response['content']) // execute callback
// }
} catch (e) {
console.log(e)
}
// client.disconnect()
}
// useful functions
function generateUniqSerial() {
return 'xxxx-xxxx-xxx-xxxx'.replace(/[x]/g, (c) => {
const r = Math.floor(Math.random() * 16);
return r.toString(16);
});
}
// sending commands to the OhmPi
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)
*/
// generate a unique command id to be associated with the commands
let uuid = generateUniqSerial()
commands[uuid] = query
callbacks[uuid] = callback // store the callback to be processed later when message arrives
let payload = '{"cmd_id": "' + uuid + '",' + query.slice(1)
console.log('sendCommand()', payload)
message = new Paho.MQTT.Message(payload)
message.destinationName = topic_ctrl
client.send(message)
}
// run button
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
function runBtnFunc() {
sendCommand('{"cmd": "run_multiple_sequences"}', function(x) {
console.log(x['status'])
if (x['status'] == 'running') {
output.innerHTML = 'Status: measuring...'
}
})
}
let runBtn = document.getElementById('runBtn')
runBtn.addEventListener('click', runBtnFunc)
// interrupt button
function stopBtnFunc() {
sendCommand('{"cmd": "interrupt"}', 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 settings to Pi
function configCallback() {
sendCommand(JSON.stringify({
'cmd': 'update_settings',
'kwargs': {
'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');
return false;
}
let input = document.getElementById('sequence')
if (input.files.length) {
const reader = new FileReader()
reader.readAsText(input.files[0])
reader.addEventListener('load', () => {
formVals['sequence'] = reader.result
console.log('file==', reader.result)
configCallback()
}, false)
} else {
console.log('no sequence uploaded')
formVals['sequence'] = ''
configCallback()
}
}
let saveConfigBtn = document.getElementById('saveConfigBtn')
saveConfigBtn.addEventListener('click', saveConfigBtnFunc)
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
// make pseudo plot
var trace = {
x: [],
y: [],
mode: 'markers',
marker: {
size: 40,
color: [],
colorbar: {
title: 'App. res. [Ohm.m]',
cmin: 0,
cmax: 100,
}
}
}
let layout = {
title: 'Pseudo-section',
yaxis: {
title: 'Pseudo-depth',
autorange: 'reversed'
},
xaxis: {
title: 'X'
}
}
Plotly.newPlot('gd', [trace], layout)
// make time-serie plot
let tdata = []
let layout2 = {
title: 'Time-serie',
yaxis: {
title: 'App. res. [Ohm.m]'
},
xaxis: {
title: 'Sampling time'
}
}
Plotly.newPlot('ts', tdata, layout2)
// add trace to time-serie plot
function addTraceBtnFunc() {
let val = document.getElementById('quadSelect').value
squads.push(val.split(', '))
tdata.push({
x: [],
y: [],
name: val,
type: 'scatter'
})
Plotly.newPlot('ts', tdata, layout2)
getData()
}
let addTraceBtn = document.getElementById('addTraceBtn')
addTraceBtn.addEventListener('click', addTraceBtnFunc)
// remove all traces from time-serie plot
function removeTracesBtnFunc() {
squads = []
tdata = []
Plotly.newPlot('ts', tdata, layout2)
}
let removeTracesBtn = document.getElementById('removeTracesBtn')
removeTracesBtn.addEventListener('click', removeTracesBtnFunc)
// callback function to draw the plot
function surveySelectFunc(el) {
let surveyName = el['target'].value
let df = data[surveyName]
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
if (df != undefined) {
let a = df['a']
let b = df['b']
let m = df['m']
let n = df['n']
// let's assume electrodes are 1 m distance
// compute pseudo-depth (assume no topo)
// compute app res (assumping flat, line survey)
let xpos = []
let ypos = []
let app = []
for (let i = 0; i < a.length; i++) {
let ab = (a[i] + b[i])/2
let mn = (m[i] + n[i])/2
let dist = Math.abs(ab - mn)
xpos.push(Math.min(ab, mn) + dist/2)
ypos.push(Math.sqrt(2)/2*dist)
let am = Math.abs(a[i] - m[i])
let bm = Math.abs(b[i] - m[i])
let an = Math.abs(a[i] - n[i])
let bn = Math.abs(a[i] - n[i])
let K = (2*Math.PI)/((1/am)-(1/an)-(1/an)+(1/bn))
app.push(df['rho'][i]*-K)
}
console.log(app)
// update the trace and redraw the figure
trace['x'] = xpos
trace['y'] = ypos
trace['marker']['color'] = app
trace['marker']['cmax'] = document.getElementById('cmax').value
trace['marker']['cmin'] = document.getElementById('cmin').value
Plotly.redraw('gd')
}
}
let surveySelect = document.getElementById('surveySelect')
// bar chart for contact resistance
let rsdata = []
let rslayout = {
title: 'Contact resistances',
yaxis: {
title: 'Resistance [kOhm]'
},
xaxis: {
title: 'Consecutive electrodes'
}
}
Plotly.newPlot('rs', rsdata, rslayout)
// run RS check
function rsBtnFunc() {
sendCommand('{"cmd": "rsCheck"}', function (res) {
// update the bar plot
rsdata.push({
x: res['data']['AB'],
y: res['data']['res'],
name: 'RS',
type: 'bar'
})
Plotly.redraw('rs')
})
}
let rsBtn = document.getElementById('rsBtn')
rsBtn.addEventListener('click', rsBtnFunc)
// clear RS graph
function rsClearBtnFunc() {
rsdata = []
Plotly.newPlot('rs', rsdata, rslayout)
}