2017-12-15 16:59:50 +00:00
<!DOCTYPE html>
< head >
<!-- FAVICON -->
< link rel = "shortcut icon" href = "http://gsi.dit.upm.es/templates/purity_iii/favicon.ico" type = "image/x-icon" >
< link rel = "icon" href = "http://gsi.dit.upm.es/templates/purity_iii/favicon.ico" type = "image/x-icon" >
<!-- JQUERY -->
< script src = "https://code.jquery.com/jquery-3.2.1.min.js" > < / script >
<!-- BOOTSTRAP 3.3.7 -->
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < / script >
<!-- BOOTSTRAP SLIDER -->
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css" / >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js" > < / script >
<!-- D3.js // DATA - DRIVEN DOCUMENTS -->
< script type = "text/javascript" src = "http://d3js.org/d3.v3.js" > < / script >
< script type = "text/javascript" src = "http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" > < / script >
2018-02-01 12:46:51 +00:00
<!-- C3.js // D3 - based reusable chart library -->
< link href = "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel = "stylesheet" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js" > < / script >
2017-12-15 16:59:50 +00:00
<!-- JAVASCRIPTS -->
< 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 >
2018-01-30 18:37:46 +00:00
< script type = "text/javascript" src = "js/template.js" > < / script >
2017-12-15 16:59:50 +00:00
<!-- STYLESHEETS -->
< link rel = "stylesheet" type = "text/css" href = "css/main.css" >
< link rel = "stylesheet" type = "text/css" href = "css/timeline.css" >
2017-12-20 17:10:14 +00:00
< link rel = "stylesheet" type = "text/css" href = "//fonts.googleapis.com/css?family=Ubuntu+Mono" / >
2017-12-15 16:59:50 +00:00
< title > {{ model_name }}< / title >
< script type = "text/javascript" > / / < ! [ C D A T A [
var width = window.innerWidth * 0.75,
2017-12-20 17:10:14 +00:00
height = window.innerHeight * 3 / 5,
2017-12-15 16:59:50 +00:00
speed = 1000,
play,
slider;
2018-02-01 12:46:51 +00:00
var width_chart = (window.innerWidth - 30) / 2 - 15,
height_chart = (window.innerHeight - 230) / 2,
chart_nodes,
chart_attrs;
2017-12-15 16:59:50 +00:00
window.onload = function() {
"use strict";
// Create svg, timeline and settings
2017-12-20 17:10:14 +00:00
self.GraphVisualization.create('graph', height, width);
2017-12-15 16:59:50 +00:00
$('< div > ').attr('id', 'load').appendTo('#graph_container').css('left', width / 2 - 25).css('top', height / 2);
$('#configuration').css("height", height);
d3.select('#slider3').attr("width", width).call(
d3.slider().axis(true).min(0).max(100)
);
// Load a file
2017-12-20 17:10:14 +00:00
$('#update #file').change(function() {
2017-12-15 16:59:50 +00:00
var file = $('#file')[0].files[0];
2018-02-01 12:46:51 +00:00
$('.console').append('< br / > ');
2017-12-15 16:59:50 +00:00
self.GraphVisualization.reset();
$('#load').show();
$('.custom-file-control').attr("data-content",
file['name'] || "Choose file..."
);
if ( file['type'] !== "application/x-yaml" ) {
2018-04-11 17:40:59 +00:00
console.error('File format not supported. Sorry for the inconvenience.');
2017-12-15 16:59:50 +00:00
_socket.error('File format not supported. Sorry for the inconvenience.');
return;
} else {
$('.alert.alert-danger').hide();
}
var fileReader = new FileReader();
if (fileReader & & file) {
fileReader.readAsText(file);
fileReader.onload = function () {
var content = fileReader.result;
$('#load').show().addClass('loader');
_socket.send(content, 'config_file');
};
}
});
// Select 'attributes'
$('.config-item #properties').change(function() {
self.GraphVisualization.update_graph($(this).val(), slider.value(), function() {
update_statistics_table();
2018-02-01 18:37:10 +00:00
});
2017-12-15 16:59:50 +00:00
});
2018-02-01 18:37:10 +00:00
// Run simulation
$('#simulation_modal .btn-success').click(function() {
if ( !jQuery.isEmptyObject(run_simulation()) ) {
self.GraphVisualization.reset();
2018-04-10 16:26:24 +00:00
$('#load').show().addClass('loader');
2018-02-01 18:37:10 +00:00
_socket.send(run_simulation(), 'run_simulation');
$('.console').append('< br / > ');
}
$('#simulation_modal').modal('hide')
});
chart_nodes = create_chart(width_chart, height_chart, 'Time', 'Number of nodes', '#chart_nodes');
chart_attrs = create_chart(width_chart, height_chart, 'Time', 'Attributes', '#chart_attrs');
// Fill modal window
$('#simulation_modal').on('show.bs.modal', function(e) {
var variables = run_simulation()
var x = 0,
row;
for (var i in variables) {
if ( x % 2 === 0 ) row = $('< tr > ').appendTo('#simulation_modal table tbody');
$('< td > ').text(i).appendTo(row);
$('< td > ').text(variables[i]).appendTo(row);
x++;
}
2018-02-01 12:46:51 +00:00
});
2018-02-01 18:37:10 +00:00
$('#simulation_modal').on('hide.bs.modal', function(e) {
$('#simulation_modal table tbody').empty();
2018-02-01 12:46:51 +00:00
});
2017-12-15 16:59:50 +00:00
}
///]]
< / script >
< / head >
< body >
2017-12-20 17:10:14 +00:00
< div class = "container-fluid fixed" >
2017-12-15 16:59:50 +00:00
2018-04-11 17:40:59 +00:00
< div class = "col-sm-9 wrapper-heading" >
<!-- CONSOLE -->
< div class = "console" >
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 / >
< / div >
<!-- //CONSOLE -->
<!-- SOIL Logo -->
< div class = "soil_logo" >
< img src = "img/logo_soil.png" / >
< / div >
<!-- //SOIL Logo -->
2017-12-15 16:59:50 +00:00
< / div >
2017-12-20 17:10:14 +00:00
< div id = "update" class = "col-sm-3" >
2017-12-15 16:59:50 +00:00
<!-- Load File -->
< form enctype = "multipart/form-data" >
< label class = "custom-file" >
< input type = "file" id = "file" name = "file" class = "custom-file-input" >
< span class = "custom-file-control" data-content = "Choose file..." > < / span >
< / label >
< / form >
<!-- //Load File -->
2018-02-01 12:46:51 +00:00
<!-- Atributos -->
2017-12-15 16:59:50 +00:00
< div class = "config-item" >
2018-02-01 12:46:51 +00:00
Attributes:
< select id = "properties" class = "form-control form-control-sm" >
< optgroup id = "properties-dynamic" label = "Dynamics" > < / optgroup >
< optgroup id = "properties-static" label = "Statics" > < / optgroup >
2017-12-15 16:59:50 +00:00
< / select >
< / div >
2018-02-01 12:46:51 +00:00
<!-- //Atributos -->
2017-12-20 17:10:14 +00:00
< / div >
2017-12-15 16:59:50 +00:00
2017-12-20 17:10:14 +00:00
< / div >
2018-01-31 10:33:36 +00:00
< nav class = "navbar navbar-default navbar-fixed-bottom" >
< div class = "container-fluid" >
< div class = "navbar-header" >
2018-02-01 12:46:51 +00:00
< a class = "navbar-brand" href = "#" > {{ model_name }}< / a >
2018-01-31 10:33:36 +00:00
< / div >
< div class = "collapse navbar-collapse" >
< ul class = "nav navbar-nav" >
2018-02-01 12:46:51 +00:00
< li data-target = "#myCarousel" data-slide-to = "0" class = "active" id = "home_menu" > < a href = '#' > Home< / a > < / li >
< li data-target = "#myCarousel" data-slide-to = "1" id = "settings_menu" > < a href = "#" > Settings & Charts< / a > < / li >
< li class = "dropdown" id = "trials" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > Trials < span class = "caret" > < / span > < / a >
< ul class = "dropdown-menu" > < / ul >
< / li >
2018-01-31 10:33:36 +00:00
< / ul >
< ul class = "nav navbar-nav navbar-right" >
2018-02-01 18:37:10 +00:00
< li > < a href = "#" id = "run_simulation" role = "button" > Run simulation< / a > < / li >
2018-04-12 16:00:44 +00:00
< li > < a href = "#" id = "download_simulation" role = "button" data-toggle = "modal" data-target = "#download_modal" > Download< / a > < / li >
2018-01-31 10:33:36 +00:00
< / ul >
< / div >
< script type = "text/javascript" >
2018-02-01 12:46:51 +00:00
$('.nav li[data-target="#myCarousel"]').click(function() {
2018-01-31 10:33:36 +00:00
$('.nav li').removeClass('active');
$(this).addClass('active');
});
< / script >
< / div >
< / nav >
2017-12-20 17:10:14 +00:00
2018-01-31 10:33:36 +00:00
< div id = "myCarousel" class = "carousel slide" >
2017-12-20 17:10:14 +00:00
<!-- Wrapper for slides -->
< div class = "carousel-inner" >
<!-- Wrapper Graph Container -->
< div class = "item active" >
< div class = "container-fluid" >
< div id = "graph_container" >
2018-04-11 17:40:59 +00:00
< svg id = "graph" class = "col-sm-9" xmlns = "http://www.w3.org/2000/svg" > < / svg >
2017-12-20 17:10:14 +00:00
< / div >
< div id = "configuration" class = "col-sm-3" >
<!-- Graph Info -->
< div class = "config-item" style = "margin-top: 0 !important;" >
< table id = "info-graph" >
< tbody >
< tr id = "nodes" > < th > Nodes:< / th > < / tr >
< tr id = "links" > < th > Links:< / th > < / tr >
< / tbody >
< / table >
< div class = "logo pull-right" >
< img src = "img/logo_gsi.svg" style = "height: 40px;" >
< / div >
< / div >
< hr / >
<!-- //Graph Info -->
<!-- PROPIEDADES -->
< div class = "config-item" >
< table id = "percentTable" >
2018-02-01 12:46:51 +00:00
< tbody > < tr > < th class = "no-data-table" > No data< / th > < / tr > < / tbody >
2017-12-20 17:10:14 +00:00
< / table >
< / div >
< hr / >
<!-- //PROPIEDADES -->
<!-- SPEED -->
< div class = "config-item" >
< table id = "speed" > < tbody > < tr >
< th class = "text-left min" > min< / th >
< th class = "text-center" > Speed< / th >
< th class = "text-right max" > max< / th >
< / tr > < / tbody > < / table >
< div class = "speed-slider" >
< input id = "speed-slider" type = "text" data-slider-min = "1" data-slider-max = "1000" data-slider-step = "0.01" data-slider-value = "1000" data-slider-tooltip = "hide" data-slider-reversed = "true" data-slider-enabled = "false" data-slider-scale = "logarithmic" / >
< / div >
< / div >
< hr / >
< script type = "text/javascript" >
$('#speed-slider').slider();
< / script >
<!-- //SPEED -->
<!-- LINK DISTANCE -->
< div class = "config-item" >
< table id = "link-distance" > < tbody > < tr >
< th class = "text-left min" > min< / th >
< th class = "text-center" > Link Distance< / th >
< th class = "text-right max" > max< / th >
< / tr > < / tbody > < / table >
< div class = "link-distance-slider" >
< input id = "link-distance-slider" type = "text" data-slider-min = "30" data-slider-max = "1000" data-slider-step = "0.01" data-slider-value = "30" data-slider-tooltip = "hide" data-slider-reversed = "false" data-slider-enabled = "false" data-slider-scale = "logarithmic" / >
< / div >
< / div >
< script type = "text/javascript" >
$('#link-distance-slider').slider();
< / script >
<!-- //LINK DISTANCE -->
< / div >
<!-- TIMELINE -->
< div id = "timeline" class = "col-sm-12" >
< div id = "slider3" class = "pull-left col-sm-9" > < / div >
< div class = "btn-toolbar controls" >
< button type = "button" id = "button_play" class = "btn btn-lg" >
< span class = "glyphicon glyphicon-play" aria-hidden = "true" > < / span >
< / button >
< button type = "button" id = "button_pause" class = "btn btn-lg" >
< span class = "glyphicon glyphicon-pause" aria-hidden = "true" > < / span >
< / button >
< button type = "button" id = "button_zoomFit" class = "btn btn-lg" >
< span class = "glyphicon glyphicon-fullscreen" aria-hidden = "true" > < / span >
< / button >
< / div >
< / div >
<!-- //TIMELINE -->
<!-- ERROR ALERT -->
< div class = "alert alert-danger alert-dismissable fade in" style = "display: none;" >
< a href = "#" class = "close" data-dismiss = "alert" aria-label = "close" > × < / a >
< strong > Error! < / strong > < span id = "error-message" > < / span >
< / div >
<!-- //ERROR ALERT -->
2017-12-15 16:59:50 +00:00
< / div >
< / div >
2017-12-20 17:10:14 +00:00
<!-- //Wrapper Graph Container -->
<!-- Wrapper Settings -->
2018-02-01 12:46:51 +00:00
< div class = "item" id = "settings" >
2018-01-31 10:33:36 +00:00
< div class = "container-fluid" >
2018-02-01 12:46:51 +00:00
< div class = "col-sm-6" id = "charts" >
< div id = "chart_nodes" class = "chart no-data" > < / div >
< div id = "chart_attrs" class = "chart no-data" > < / div >
< / div >
< div class = "col-sm-6 none" id = "wrapper-settings" > < / div >
2017-12-15 16:59:50 +00:00
< / div >
< / div >
< / div >
2017-12-20 17:10:14 +00:00
<!-- //Wrapper for slides -->
2017-12-15 16:59:50 +00:00
< / div >
2018-02-01 18:37:10 +00:00
< div class = "modal fade" tabindex = "-1" role = "dialog" id = "simulation_modal" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< h4 class = "modal-title" > New simulation< / h4 >
< / div >
2018-04-12 16:00:44 +00:00
< div class = "modal-body text-justify" >
2018-02-01 18:37:10 +00:00
< p > You are going to run a new simulation, all charts and trials are going to be lost. A new ones will be available after the simulation.< / p >
< p > Check your new environment variables for this simulation.< / p >
< table class = "table" >
< thead > < tr > < th > Variable< / th > < th > Value< / th > < th > Variable< / th > < th > Value< / th > < / tr > < / thead >
< tbody > < / tbody >
< / table >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-success" > Run< / button >
2018-04-12 16:00:44 +00:00
< button type = "button" class = "btn btn-danger" data-dismiss = "modal" > Cancel< / button >
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
< div class = "modal fade" tabindex = "-1" role = "dialog" id = "download_modal" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< h4 class = "modal-title" > Download Simulation Results< / h4 >
< / div >
< div class = "modal-body text-justify" >
< p > You can download the results of the selected trial in GEXF or JSON Graph format for your personal purposes.< / p >
< ul >
< li > < b > GEXF< / b > < i > (Graph Exchange XML Format)< / i > is a language for describing complex network structures, their associated data and dynamics. It can be used to visualize the simulation with Gephi.< / li >
< li > < b > JSON Graph< / b > generate and parse JSON serializable data for NetworkX graphs. It is a convention for modeling graph information as a JSON object that can be parsed by any JSON parser.< / li >
< / ul >
< p > For downloading the results of the other trials simulated, please first select them in menu.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-success" disabled = "disabled" id = "download_gexf" > GEXF< / button >
< button type = "button" class = "btn btn-success" disabled = "disabled" id = "download_json" > JSON Graph< / button >
< button type = "button" class = "btn btn-danger" data-dismiss = "modal" > Cancel< / button >
2018-02-01 18:37:10 +00:00
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2017-12-20 17:10:14 +00:00
2017-12-15 16:59:50 +00:00
< / body >
< / html >
