mirror of
https://github.com/gsi-upm/soil
synced 2024-11-14 15:32:29 +00:00
Setting model variables
This commit is contained in:
parent
459b9a771b
commit
7ab75b6b90
23
server.py
23
server.py
@ -99,6 +99,24 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
|
||||
self.write_message({'type': 'trials',
|
||||
'data': trials })
|
||||
|
||||
settings = []
|
||||
for key in config['environment_params']:
|
||||
if type(config['environment_params'][key]) == float:
|
||||
setting_type = 'number'
|
||||
elif type(config['environment_params'][key]) == bool:
|
||||
setting_type = 'boolean'
|
||||
else:
|
||||
setting_type = 'undefined'
|
||||
|
||||
settings.append({
|
||||
'label': key,
|
||||
'type': setting_type,
|
||||
'value': config['environment_params'][key]
|
||||
})
|
||||
|
||||
self.write_message({'type': 'settings',
|
||||
'data': settings})
|
||||
|
||||
elif msg['type'] == 'get_trial':
|
||||
if self.application.verbose:
|
||||
logger.info('Trial {} requested!'.format(msg['data']))
|
||||
@ -118,7 +136,7 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
|
||||
self.log_capture_string.seek(0)
|
||||
finally:
|
||||
if self.capture_logging:
|
||||
thread = threading.Timer(0.01, self.update_logging)
|
||||
thread = threading.Timer(0.001, self.update_logging)
|
||||
thread.start()
|
||||
|
||||
def on_close(self):
|
||||
@ -139,13 +157,12 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
|
||||
self.update_logging()
|
||||
yield self.capture_logging
|
||||
|
||||
self.capture_logging = False
|
||||
self.log_capture_string.close()
|
||||
self.logger_application.removeHandler(ch)
|
||||
self.capture_logging = False
|
||||
return self.capture_logging
|
||||
|
||||
|
||||
|
||||
class ModularServer(tornado.web.Application):
|
||||
""" Main visualization application. """
|
||||
|
||||
|
@ -221,13 +221,11 @@ hr {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.speed-slider .slider,
|
||||
.link-distance-slider .slider {
|
||||
.slider {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.speed-slider .slider-selection,
|
||||
.link-distance-slider .slider-selection {
|
||||
.slider .slider-selection {
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(36, 110, 162, 0.5) 0%,
|
||||
rgba(3, 169, 224, 0.5) 100%) !important;
|
||||
@ -291,3 +289,22 @@ table#link-distance .max {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
/** FORMS **/
|
||||
.checkbox {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
#wrapper-settings {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
#wrapper-settings .btn-group button:focus {
|
||||
background: initial;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
#wrapper-settings .btn-group button {
|
||||
font-size: xx-small;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
@ -24,6 +24,7 @@
|
||||
<script type="text/javascript" src="js/visualization.js"></script>
|
||||
<script type="text/javascript" src="js/timeline.js"></script>
|
||||
<script type="text/javascript" src="js/socket.js"></script>
|
||||
<script type="text/javascript" src="js/template.js"></script>
|
||||
|
||||
<!-- STYLESHEETS -->
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
@ -110,8 +111,8 @@
|
||||
|
||||
<!-- CONSOLE -->
|
||||
<div class="col-sm-9 console">
|
||||
Please, update YAML file that define all the parameters of a simulation. <br/>
|
||||
If you don't know how to write the file, please visit this link:<br/>
|
||||
Please, upload a YAML file that defines all the parameters of a simulation. <br/>
|
||||
If you don't know how to write the file, please visit this page:<br/>
|
||||
http://soilsim.readthedocs.io/en/latest/quickstart.html<br/><br/>
|
||||
</div>
|
||||
<!-- //CONSOLE -->
|
||||
@ -254,7 +255,7 @@
|
||||
|
||||
<!-- Wrapper Settings -->
|
||||
<div class="item">
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid" id="wrapper-settings">
|
||||
|
||||
|
||||
|
||||
|
@ -9,7 +9,7 @@ ws.onopen = function() {
|
||||
|
||||
// Receive data from server
|
||||
ws.onmessage = function(message) {
|
||||
console.log('Message received!');
|
||||
//console.log('Message received!');
|
||||
|
||||
var msg = JSON.parse(message.data);
|
||||
|
||||
@ -30,6 +30,11 @@ ws.onmessage = function(message) {
|
||||
});
|
||||
break;
|
||||
|
||||
case 'settings':
|
||||
//console.log(msg['data']);
|
||||
initGUI(msg['data']);
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
console.log(msg['error']);
|
||||
_socket.error(msg['error']);
|
||||
@ -37,9 +42,9 @@ ws.onmessage = function(message) {
|
||||
break;
|
||||
|
||||
case 'log':
|
||||
console.log(msg['logging'])
|
||||
$('.console').append(msg['logger'] + ': ' + msg['logging'] + '<br/>');
|
||||
$('.console').animate({ scrollTop: $(window).height() }, 'slow');
|
||||
$('.console').append('$ ' + msg['logger'] + ': ' + msg['logging'] + '<br/>');
|
||||
$('.console').animate({ scrollTop: $('.console')[0].scrollHeight }, 'slow');
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unexpected message!')
|
||||
|
72
templates/js/template.js
Normal file
72
templates/js/template.js
Normal file
@ -0,0 +1,72 @@
|
||||
// Add model parameters that can be edited prior to a model run
|
||||
var initGUI = function(model_params) {
|
||||
|
||||
var onSubmitCallback = function(param_name, value) {
|
||||
// SEND SOCKET REQUEST
|
||||
};
|
||||
|
||||
var addBooleanInput = function(name, value) {
|
||||
var checked = (value) ? 'checked' : 'value';
|
||||
|
||||
var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px');
|
||||
var input_group = $('<div>').attr('class', 'input-group').appendTo(wrapper);
|
||||
var label = $('<label>').attr('for', name).attr('class', 'checkbox').appendTo(input_group);
|
||||
var input = $('<input>') .attr('class', 'form-check-input').attr('id', name).attr('type', 'checkbox').attr(checked, checked).appendTo(label);
|
||||
|
||||
input.after(name);
|
||||
$('#wrapper-settings').append(wrapper);
|
||||
};
|
||||
|
||||
var addSliderInput = function(name, value) {
|
||||
|
||||
var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px');
|
||||
var label = $('<div>').width('100%').text(name).css('text-align', 'center').css('font-weight', 'bolder').appendTo(wrapper);
|
||||
var input = $('<input>').attr('id', name).attr('type', 'text').attr('data-slider-min', '0.001').attr('data-slider-max', '1').attr('data-slider-step', '0.001').attr('data-slider-value', value).attr('data-slider-tooltip', 'hide').css('padding', '0 10px').appendTo(wrapper);
|
||||
|
||||
var span = $('<div>').attr('id', name + '_value').text('Current value: ').width('100%').css('padding-top', '10px').appendTo(wrapper);
|
||||
var current_value = $('<span>').attr('id', name + '_number').text(value).appendTo(span);
|
||||
|
||||
var button_group = $('<div>').attr('class', 'btn-group').attr('role', 'group').css('position', 'absolute').css('right', '15px').appendTo(span);
|
||||
var button_down = $('<button>').attr('type', 'button').attr('class', 'btn btn-default btn-default-down').appendTo(button_group);
|
||||
var button_up = $('<button>').attr('type', 'button').attr('class', 'btn btn-default btn-default-down').appendTo(button_group);
|
||||
|
||||
$('<span>').attr('class', 'glyphicon glyphicon-chevron-down').attr('aria-hidden', 'true').appendTo(button_down);
|
||||
$('<span>').attr('class', 'glyphicon glyphicon-chevron-up').attr('aria-hidden', 'true').appendTo(button_up);
|
||||
|
||||
$('#wrapper-settings').append(wrapper);
|
||||
input.slider().on('change', function(slideEvt) {
|
||||
current_value.text(slideEvt.value.newValue);
|
||||
});
|
||||
button_down.click(function() {
|
||||
input.slider('setValue', input.slider('getValue') - 0.001);
|
||||
current_value.text(input.slider('getValue'));
|
||||
});
|
||||
button_up.click(function() {
|
||||
input.slider('setValue', input.slider('getValue') + 0.001);
|
||||
current_value.text(input.slider('getValue'));
|
||||
})
|
||||
};
|
||||
|
||||
var addTextBox = function(param, obj) {
|
||||
var well = $('<div class="well">' + obj.value + '</div>')[0];
|
||||
sidebar.append(well);
|
||||
};
|
||||
|
||||
for (var option in model_params) {
|
||||
|
||||
var type = typeof(model_params[option]);
|
||||
var param_str = String(option);
|
||||
|
||||
switch (model_params[option]['type']) {
|
||||
case "boolean":
|
||||
addBooleanInput(model_params[option]['label'], model_params[option]['value']);
|
||||
break;
|
||||
case "number":
|
||||
addSliderInput(model_params[option]['label'], model_params[option]['value']);
|
||||
break;
|
||||
case "object":
|
||||
addParamInput(param_str, model_params[option]); // catch-all for params that use Option class
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue
Block a user