balkian/soil
1
0
Fork 0
mirror of https://github.com/gsi-upm/soil synced 2024-11-14 23:42:29 +00:00
Code Issues Releases Wiki Activity
c93f3fafc7
soil/templates/index.html

324 lines
12 KiB
HTML
Raw Normal View History

Python Server
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>
Charts
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>
Python Server
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>
Setting model variables
2018-01-30 18:37:46 +00:00
<script type="text/javascript" src="js/template.js"></script>
Python Server
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">
Model progress info
2017-12-20 17:10:14 +00:00
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu+Mono" />
Python Server
2017-12-15 16:59:50 +00:00
<title>{{ model_name }}</title>
<script type="text/javascript">//<![CDATA[
var width = window.innerWidth * 0.75,
Model progress info
2017-12-20 17:10:14 +00:00
height = window.innerHeight * 3 / 5,
Python Server
2017-12-15 16:59:50 +00:00
speed = 1000,
play,
slider;
Charts
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;
Python Server
2017-12-15 16:59:50 +00:00
window.onload = function() {
"use strict";
// Create svg, timeline and settings
Model progress info
2017-12-20 17:10:14 +00:00
self.GraphVisualization.create('graph', height, width);
Python Server
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
Model progress info
2017-12-20 17:10:14 +00:00
$('#update #file').change(function() {
Python Server
2017-12-15 16:59:50 +00:00
var file = $('#file')[0].files[0];
Charts
2018-02-01 12:46:51 +00:00
$('.console').append('<br/>');
Python Server
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" ) {
console.log('File format not supported. Sorry for the inconvenience.');
_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();
})
});
Charts
2018-02-01 12:46:51 +00:00
chart_nodes = c3.generate({
size: {
width: width_chart,
height: height_chart
},
data: {
columns: [],
type: 'area-spline'
},
axis: {
x: { label: 'Time' },
y: { label: 'Number of nodes' }
},
point: { show: false },
bindto: '#chart_nodes'
});
chart_attrs = c3.generate({
size: {
width: width_chart,
height: height_chart
},
data: {
columns: [],
type: 'area-spline'
},
axis: {
x: { label: 'Time' },
y: { label: 'Attributes' }
},
point: { show: false },
bindto: '#chart_attrs'
});
Python Server
2017-12-15 16:59:50 +00:00
}
///]]
</script>
</head>
<body>
Model progress info
2017-12-20 17:10:14 +00:00
<div class="container-fluid fixed">
Python Server
2017-12-15 16:59:50 +00:00
Model progress info
2017-12-20 17:10:14 +00:00
<!-- CONSOLE -->
<div class="col-sm-9 console">
Setting model variables
2018-01-30 18:37:46 +00:00
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/>
Charts
2018-02-01 12:46:51 +00:00
http://soilsim.readthedocs.io/en/latest/quickstart.html<br/>
Python Server
2017-12-15 16:59:50 +00:00
</div>
Model progress info
2017-12-20 17:10:14 +00:00
<!-- //CONSOLE -->
Python Server
2017-12-15 16:59:50 +00:00
Model progress info
2017-12-20 17:10:14 +00:00
<div id="update" class="col-sm-3">
Python Server
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 -->
Charts
2018-02-01 12:46:51 +00:00
<!-- Atributos -->
Python Server
2017-12-15 16:59:50 +00:00
<div class="config-item">
Charts
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>
Python Server
2017-12-15 16:59:50 +00:00
</select>
</div>
Charts
2018-02-01 12:46:51 +00:00
<!-- //Atributos -->
Model progress info
2017-12-20 17:10:14 +00:00
</div>
Python Server
2017-12-15 16:59:50 +00:00
Model progress info
2017-12-20 17:10:14 +00:00
</div>
Navbar controls
2018-01-31 10:33:36 +00:00
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
Charts
2018-02-01 12:46:51 +00:00
<a class="navbar-brand" href="#">{{ model_name }}</a>
Navbar controls
2018-01-31 10:33:36 +00:00
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
Charts
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 &amp; 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>
Navbar controls
2018-01-31 10:33:36 +00:00
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Run simulation</a></li>
</ul>
</div>
<script type="text/javascript">
Charts
2018-02-01 12:46:51 +00:00
$('.nav li[data-target="#myCarousel"]').click(function() {
Navbar controls
2018-01-31 10:33:36 +00:00
$('.nav li').removeClass('active');
$(this).addClass('active');
});
</script>
</div>
</nav>
Model progress info
2017-12-20 17:10:14 +00:00
Navbar controls
2018-01-31 10:33:36 +00:00
<div id="myCarousel" class="carousel slide">
Model progress info
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">
<svg id="graph" class="col-sm-9"></svg>
</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">
Charts
2018-02-01 12:46:51 +00:00
<tbody><tr><th class="no-data-table">No data</th></tr></tbody>
Model progress info
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">&times;</a>
<strong>Error! </strong><span id="error-message"></span>
</div>
<!-- //ERROR ALERT -->
Python Server
2017-12-15 16:59:50 +00:00
</div>
</div>
Model progress info
2017-12-20 17:10:14 +00:00
<!-- //Wrapper Graph Container -->
<!-- Wrapper Settings -->
Charts
2018-02-01 12:46:51 +00:00
<div class="item" id="settings">
Navbar controls
2018-01-31 10:33:36 +00:00
<div class="container-fluid">
Charts
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>
Python Server
2017-12-15 16:59:50 +00:00
</div>
</div>
</div>
Model progress info
2017-12-20 17:10:14 +00:00
<!-- //Wrapper for slides -->
Python Server
2017-12-15 16:59:50 +00:00
</div>
Model progress info
2017-12-20 17:10:14 +00:00
Python Server
2017-12-15 16:59:50 +00:00
</body>
</html>
Reference in New Issue Copy Permalink