103 lines
4.4 KiB
HTML
103 lines
4.4 KiB
HTML
{% extends 'index.html' %}
|
|
{% block content %}
|
|
<div class="card">
|
|
<div id="main-div" class="card-body">
|
|
<form action="{{ url_for('matDecStim') }}" method="POST">
|
|
<div class="form-group">
|
|
<label for="snr_num">Number of SNRs:</label>
|
|
<br>
|
|
<input id="snr_num" name="snr_num" type="number" value="5" style="width:85%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="snr_len">Length of SNRs: </label>
|
|
<br>
|
|
<input id="snr_len" name="snr_len" type="number" value="15" style="width:85%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="n_part">Number of participants: </label>
|
|
<br>
|
|
<input id="n_part" name="n_part" type="number" value="70" style="width:85%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="open-mat-folder-container">Matrix data folder: </label>
|
|
<br>
|
|
<input type="text" id="mat-dir" name='mat_dir' value="./matrix_test/speech_components/" style="width:85%"></input>
|
|
<button type="button" id="mat-dir-button" class="btn btn-primary">Browse...</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="open-save-folder-container">New data generation folder: </label>
|
|
<br>
|
|
<input type="text" id="save-dir" name='save_dir' style="width:85%"></input>
|
|
<button type="button" id="save-dir-button" class="btn btn-primary">Browse...</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button" id="process-button" class="btn btn-primary">Process</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<div id="progress-div" class="progress">
|
|
<div id="progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
// Initialise socketio with a namespace called "main"
|
|
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
|
|
// Check if matrix stimulus is currently being processed
|
|
socket.emit('check-mat-processing-status');
|
|
|
|
// If stimulus is currently being processed, disable all inputs
|
|
socket.on('mat-processing-status', function(msg) {
|
|
console.log(msg.data)
|
|
if(msg.data) {
|
|
$('#main-div').find('input, textarea, button, select').attr('disabled','disabled');
|
|
}
|
|
});
|
|
|
|
// Catch progress bar update messages
|
|
socket.on('update-progress', function(msg) {
|
|
// Update width of progress bar
|
|
$('#progress').css("width", msg.data);
|
|
});
|
|
|
|
$('#process-button').click(function(event) {
|
|
// Disable all inputs whilst processing
|
|
$('#main-div').find('input, textarea, button, select').attr('disabled','disabled');
|
|
// Send message to call stimulus generation function in Python
|
|
socket.emit('run_mat_stim_gen', {
|
|
n_part: $("#n_part").val(),
|
|
snr_len: $("#snr_len").val(),
|
|
snr_num: $("#snr_num").val(),
|
|
mat_dir: $("#mat-dir").val(),
|
|
save_dir: $("#save-dir").val(),
|
|
});
|
|
return false;
|
|
});
|
|
|
|
$('#save-dir-button').click(function(event) {
|
|
// Send message to call stimulus generation function in Python
|
|
socket.emit('open_save_dialog');
|
|
return false;
|
|
})
|
|
|
|
socket.on('save-dialog-resp', function(msg) {
|
|
// Set form test to filepath returned by dialog
|
|
document.getElementById("save-dir").value = msg.data
|
|
});
|
|
|
|
$('#mat-dir-button').click(function(event) {
|
|
// Send message to call stimulus generation function in Python
|
|
socket.emit('open_mat_dialog');
|
|
return false;
|
|
})
|
|
|
|
socket.on('mat-dialog-resp', function(msg) {
|
|
// Set form test to filepath returned by dialog
|
|
document.getElementById("mat-dir").value = msg.data
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|