mirror of
https://github.com/gsi-upm/soil
synced 2024-11-22 19:22: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.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 = []
|
||||
for key in config['environment_params']:
|
||||
@ -116,6 +107,16 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
|
||||
|
||||
self.write_message({'type': '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':
|
||||
if self.application.verbose:
|
||||
|
@ -1,5 +1,5 @@
|
||||
|
||||
html, body, .carousel-inner {
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -7,12 +7,17 @@ html, body, .carousel-inner {
|
||||
height: calc(100% - 150px);
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
border-color: black;
|
||||
.carousel-inner {
|
||||
height: calc(100% - 50px) !important;
|
||||
}
|
||||
|
||||
.carousel-indicators li.active {
|
||||
background-color: black;
|
||||
.carousel-inner .item,
|
||||
.carousel-inner .item .container-fluid {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0px -2px 5px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.node {
|
||||
@ -297,6 +302,8 @@ table#link-distance .max {
|
||||
|
||||
#wrapper-settings {
|
||||
padding: 15px !important;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#wrapper-settings .btn-group button:focus {
|
||||
@ -308,3 +315,17 @@ table#link-distance .max {
|
||||
font-size: xx-small;
|
||||
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 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 -->
|
||||
<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>
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
|
||||
<!-- Wrapper for slides -->
|
||||
<div class="carousel-inner">
|
||||
@ -254,11 +271,10 @@
|
||||
<!-- //Wrapper Graph Container -->
|
||||
|
||||
<!-- Wrapper Settings -->
|
||||
<div class="item">
|
||||
<div class="container-fluid" id="wrapper-settings">
|
||||
|
||||
|
||||
|
||||
<div class="item settings">
|
||||
<div class="container-fluid">
|
||||
<div class="col-sm-6" id="charts"></div>
|
||||
<div class="col-sm-6" id="wrapper-settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -161,7 +161,7 @@ var reset_configuration = function() {
|
||||
|
||||
var set_timeline = function(graph) {
|
||||
// 'Timeline' slider
|
||||
var [min, max] = get_min_and_max(graph);
|
||||
var [min, max] = get_limits(graph);
|
||||
|
||||
var stepUnix = (max - min) / 200;
|
||||
var minUnix = (min !== Math.min()) ? min : 0;
|
||||
@ -253,7 +253,7 @@ var reset_timeline = function() {
|
||||
$('button#button_zoomFit').off();
|
||||
}
|
||||
|
||||
var get_min_and_max = function(graph) {
|
||||
var get_limits = function(graph) {
|
||||
var max = Math.max();
|
||||
var min = Math.min()
|
||||
graph.links.forEach(function(link) {
|
||||
|
@ -8,7 +8,7 @@ var initGUI = function(model_params) {
|
||||
var addBooleanInput = function(name, 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 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);
|
||||
@ -19,7 +19,7 @@ var initGUI = function(model_params) {
|
||||
|
||||
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 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