<!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> <!-- 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> <script type="text/javascript" src="js/template.js"></script> <!-- STYLESHEETS --> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/timeline.css"> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu+Mono" /> <title>{{ model_name }}</title> <script type="text/javascript">//<![CDATA[ var width = window.innerWidth * 0.75, height = window.innerHeight * 3 / 5, speed = 1000, play, slider; window.onload = function() { "use strict"; // Create svg, timeline and settings self.GraphVisualization.create('graph', height, width); $('<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 $('#update #file').change(function() { var file = $('#file')[0].files[0]; 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 'trials' $('.config-item #trials').change(function() { _socket.send($(this).val(), 'get_trial'); }); // Select 'attributes' $('.config-item #properties').change(function() { self.GraphVisualization.update_graph($(this).val(), slider.value(), function() { update_statistics_table(); }) }); $('[data-toggle="tooltip"]').tooltip() } ///]] </script> </head> <body> <div class="container-fluid fixed"> <!-- CONSOLE --> <div class="col-sm-9 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/><br/> </div> <!-- //CONSOLE --> <div id="update" class="col-sm-3"> <!-- 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 --> <!-- TRIALS --> <div class="config-item"> Trials: <select id="trials" class="form-control form-control-sm"> </select> </div> <!-- //TRIALS --> </div> </div> <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> <div id="myCarousel" class="carousel slide"> <!-- 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"> Propiedades: <select id="properties" class="form-control form-control-sm"> <optgroup id="properties-dynamic" label="Dynamics"></optgroup> <optgroup id="properties-static" label="Statics"></optgroup> </select> </div> <hr /> <div class="config-item"> <table id="percentTable"> <tbody><tr><th></th></tr></tbody> </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 --> </div> </div> <!-- //Wrapper Graph Container --> <!-- 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> </div> <!-- //Wrapper for slides --> </div> </body> </html>