Commit f2a03da4 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki

prototype of simulation UI.

parent 8cd9a544
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DREAM</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="../css/gadget_dream.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="../lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../lib/jschannel.js"></script>
<script type="text/javascript" src="../lib/renderjs.js"></script>
<script type="text/javascript" src="../lib/md5.js"></script>
<script type="text/javascript" src="../lib/jio.js"></script>
<script type="text/javascript" src="../lib/jio.localstorage.js"></script>
<script type="text/javascript" src="../lib/pubsub.js"></script>
<script type="text/javascript" src="../lib/jquery.jsPlumb-1.5.3-min.js"></script>
<script type="text/javascript" src="../lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="../lib/jquery.flot.js"></script>
<script type="text/javascript" src="../lib/jquery.flot.stack.js"></script>
<script type="text/javascript" src="../lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="../js/gadget_dream.js"></script>
</head>
<body>
<div data-role="page" class="ui-responsive-panel">
<div id="main" style="display:none;"></div>
<div id="simulation">
Simulation Parameters
<div title="Configure">
<form>
<fieldset id="general-fieldset">
</fieldset>
<a id="run_simulation">Run Simulation</a>
</form>
</div>
</div>
<div id="graph_zone" style="display:none">
<div>Stations Utilization</div>
<div id="simulation_result"></div>
</div>
<div id="sidebar">
<table>
<tr>
<td>Input</td>
<td>Result</td>
</tr>
<tr>
<td>
<textarea rows="20" cols="47" id="json_output" style="align:left">
</textarea>
</td>
<td>
<textarea rows="20" cols="47" id="json_result" style="align:right">
</textarea>
</td>
</table>
</div>
</body>
</html>
...@@ -220,6 +220,7 @@ ...@@ -220,6 +220,7 @@
Anchor: "Continuous" Anchor: "Continuous"
}); });
if ($("#main").length > 0) {
$.getJSON("../JSONInputs/Topology01.json", function (data) { $.getJSON("../JSONInputs/Topology01.json", function (data) {
$("#main").grapheditor({ $("#main").grapheditor({
graph: data, graph: data,
...@@ -251,7 +252,101 @@ ...@@ -251,7 +252,101 @@
}); });
}); });
};
if ($("#simulation").length > 0) {
$("#run_simulation").button().click(function () {
var graph_dict = $('#main').grapheditor('graph');
$("#json_output").val(JSON.stringify(graph_dict, undefined, ' '));
$.ajax(
'/runSimulation', {
data: JSON.stringify({
json: graph_dict
}),
contentType: 'application/json',
type: 'POST',
success: function (data, textStatus, jqXHR) {
if (data['success']) {
$("#json_result").text(JSON.stringify(data['success'],
undefined, " "));
// display demo graph.
$("#graph_zone").show();
var blockage_data = [],
waiting_data = [],
failure_data = [],
working_data = [],
ticks = [],
counter = 1;
$.each(data['success'].elementList, function (idx, obj) {
if (obj.results.working_ratio !== undefined) {
/* when there is only one replication, the ratio is given as a float,
otherwise we have a mapping avg, min max */
if (obj.results.blockage_ratio !== undefined) {
blockage_data.push([counter, obj.results.blockage_ratio
.avg || obj.results.blockage_ratio
]);
} else {
blockage_data.push([counter, 0.0]);
}
waiting_data.push([counter, obj.results.waiting_ratio.avg ||
obj.results.waiting_ratio
]);
if (obj.results.failure_ratio !== undefined) {
failure_data.push([counter, obj.results.failure_ratio
.avg || obj.results.failure_ratio
]);
} else {
failure_data.push([counter, 0.0]);
}
working_data.push([counter, obj.results.working_ratio.avg ||
obj.results.working_ratio
]);
ticks.push([counter, obj.id]);
counter++;
}
});
var series = [{
label: "Working",
data: working_data
}, {
label: "Waiting",
data: waiting_data
}, {
label: "Failures",
data: failure_data
}, {
label: "Blockage",
data: blockage_data
}];
var options = {
xaxis: {
minTickSize: 1,
ticks: ticks
},
yaxis: {
max: 100
},
series: {
bars: {
show: true,
barWidth: 0.9,
align: "center"
},
stack: true
}
};
$.plot("#simulation_result", series, options);
} else {
$("#json_result").effect('shake', 50).text(data['error']);
}
}
});
});
};
}); });
function init() { function init() {
...@@ -274,5 +369,3 @@ ...@@ -274,5 +369,3 @@
}); });
}(window, jQuery, rJS)); }(window, jQuery, rJS));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment