mirror of
https://github.com/gsi-upm/soil
synced 2024-11-14 15:32:29 +00:00
Navbar controls
This commit is contained in:
parent
7ab75b6b90
commit
563dc8dc4c
19
server.py
19
server.py
@ -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:
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user