1
0
mirror of https://github.com/gsi-upm/soil synced 2024-11-22 19:22:29 +00:00

Navbar controls

This commit is contained in:
Tasio Mendez 2018-01-31 11:33:36 +01:00
parent 7ab75b6b90
commit 563dc8dc4c
5 changed files with 67 additions and 29 deletions

View File

@ -89,15 +89,6 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
self.send_log('INFO.soil', 'Using config: {name}'.format(name=config['name'])) self.send_log('INFO.soil', 'Using config: {name}'.format(name=config['name']))
self.name = config['name'] self.name = config['name']
with self.logging(self.application.model.name):
self.application.model.run(config)
trials = []
for i in range(config['num_trials']):
trials.append('{}_trial_{}'.format(self.name, i))
self.write_message({'type': 'trials',
'data': trials })
settings = [] settings = []
for key in config['environment_params']: for key in config['environment_params']:
@ -116,6 +107,16 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
self.write_message({'type': 'settings', self.write_message({'type': 'settings',
'data': settings}) 'data': settings})
# Run simulation and capture logs
with self.logging(self.application.model.name):
self.application.model.run(config)
trials = []
for i in range(config['num_trials']):
trials.append('{}_trial_{}'.format(self.name, i))
self.write_message({'type': 'trials',
'data': trials })
elif msg['type'] == 'get_trial': elif msg['type'] == 'get_trial':
if self.application.verbose: if self.application.verbose:

View File

@ -1,5 +1,5 @@
html, body, .carousel-inner { html, body {
height: 100%; height: 100%;
} }
@ -7,12 +7,17 @@ html, body, .carousel-inner {
height: calc(100% - 150px); height: calc(100% - 150px);
} }
.carousel-indicators li { .carousel-inner {
border-color: black; height: calc(100% - 50px) !important;
} }
.carousel-indicators li.active { .carousel-inner .item,
background-color: black; .carousel-inner .item .container-fluid {
height: 100%;
}
.navbar {
box-shadow: 0px -2px 5px 3px rgba(0, 0, 0, .3);
} }
.node { .node {
@ -297,6 +302,8 @@ table#link-distance .max {
#wrapper-settings { #wrapper-settings {
padding: 15px !important; padding: 15px !important;
height: 100%;
overflow-y: auto;
} }
#wrapper-settings .btn-group button:focus { #wrapper-settings .btn-group button:focus {
@ -308,3 +315,17 @@ table#link-distance .max {
font-size: xx-small; font-size: xx-small;
padding: 3px 6px; padding: 3px 6px;
} }
.item.settings .container-fluid {
padding-top: 10px !important;
}
#wrapper-settings::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#wrapper-settings::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #ccc;
}

View File

@ -138,13 +138,30 @@
</div> </div>
<div id="myCarousel" class="carousel slide"> <nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href='#'>Home</a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#" onclick="">Settings</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Run simulation</a></li>
</ul>
</div>
<script type="text/javascript">
$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
</script>
</div>
</nav>
<!-- Indicators --> <div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" data-toggle="tooltip" title="Graph" data-placement="top"></li>
<li data-target="#myCarousel" data-slide-to="1" data-toggle="tooltip" title="Settings" data-placement="top"></li>
</ol>
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
<div class="carousel-inner"> <div class="carousel-inner">
@ -254,11 +271,10 @@
<!-- //Wrapper Graph Container --> <!-- //Wrapper Graph Container -->
<!-- Wrapper Settings --> <!-- Wrapper Settings -->
<div class="item"> <div class="item settings">
<div class="container-fluid" id="wrapper-settings"> <div class="container-fluid">
<div class="col-sm-6" id="charts"></div>
<div class="col-sm-6" id="wrapper-settings"></div>
</div> </div>
</div> </div>

View File

@ -161,7 +161,7 @@ var reset_configuration = function() {
var set_timeline = function(graph) { var set_timeline = function(graph) {
// 'Timeline' slider // 'Timeline' slider
var [min, max] = get_min_and_max(graph); var [min, max] = get_limits(graph);
var stepUnix = (max - min) / 200; var stepUnix = (max - min) / 200;
var minUnix = (min !== Math.min()) ? min : 0; var minUnix = (min !== Math.min()) ? min : 0;
@ -253,7 +253,7 @@ var reset_timeline = function() {
$('button#button_zoomFit').off(); $('button#button_zoomFit').off();
} }
var get_min_and_max = function(graph) { var get_limits = function(graph) {
var max = Math.max(); var max = Math.max();
var min = Math.min() var min = Math.min()
graph.links.forEach(function(link) { graph.links.forEach(function(link) {

View File

@ -8,7 +8,7 @@ var initGUI = function(model_params) {
var addBooleanInput = function(name, value) { var addBooleanInput = function(name, value) {
var checked = (value) ? 'checked' : 'value'; var checked = (value) ? 'checked' : 'value';
var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px'); var wrapper = $('<div>').attr('class', 'col-sm-6').height('110px');
var input_group = $('<div>').attr('class', 'input-group').appendTo(wrapper); var input_group = $('<div>').attr('class', 'input-group').appendTo(wrapper);
var label = $('<label>').attr('for', name).attr('class', 'checkbox').appendTo(input_group); 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); var input = $('<input>') .attr('class', 'form-check-input').attr('id', name).attr('type', 'checkbox').attr(checked, checked).appendTo(label);
@ -19,7 +19,7 @@ var initGUI = function(model_params) {
var addSliderInput = function(name, value) { var addSliderInput = function(name, value) {
var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px'); var wrapper = $('<div>').attr('class', 'col-sm-6').height('110px');
var label = $('<div>').width('100%').text(name).css('text-align', 'center').css('font-weight', 'bolder').appendTo(wrapper); 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 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);