index.html [src/moplay/templates] Revision: Date:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>MULTIOBJECTIVE OPTIMIZATION PLAYGROUND</title>
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="/stylesheets/jquery.dataTables.min.css"/>
<link type="text/css" rel="stylesheet" href="/stylesheets/dataTables.tableTools.min.css"/>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
<link type="text/css" rel="stylesheet" href="/stylesheets/modal.css"/>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/js/ace/ace.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="/js/spin.min.js"></script>
<script type="text/javascript" src="/js/shortcut.js"></script>
<script type="text/javascript" src="/js/Blob.js"></script>
<script type="text/javascript" src="/js/FileSaver.min.js"></script>
<script type="text/javascript" src="/js/multiobj.js"></script>
</head>
<body>
<header>
<ul class="nav-row">
{# <li id="problems" class="nav-row"><a href="javascript:void(0)" onclick="loadContent('/problems_template'); return false;">Problems</a></li>#}
{# <li id="editor_page" class="nav-row"><a href="javascript:void(0)" onclick="loadContent('/templates/editor_page'); return false;">Editor</a></li>#}
<li class="nav-row header-text">MULTIOBJECTIVE OPTIMIZATION PLAYGROUND</li>
</ul>
</header>
<div id="sub-header">
<div class="flex-container">
<div class="param-row">
<div>
<button id="new-code" onclick="if (confirm('Save Current?')) saveCode(); window.location.href = '/';" class="button-type new-button" title="Start New Problem"></button>
<button onclick="openDialog();" class="button-type open-button" title="Load Optimization Problems"></button>
<button onclick="runCode();" class="button-type play-button" title="Run Optimization"></button>
<button id="modal-button" onclick="window.location.href = '#chartModal';" class="button-type chart-button hidden" title="Show Graph or Table"></button>
<button id="download-button" onclick="downloadOutput();" class="button-type download-button hidden" title="Download Results"></button>
<button id="download-code" class="button-type code-button hidden" title="Download Code"></button>
</div>
<div class="flex-right">
{% if has_user %}
{% if problem and problem.key %}
<button id="public_link" onclick="window.prompt('Press Ctrl+C to Copy the link below!', 'http://' + location.host + '/?id={{ problem.key.urlsafe() }}');" class="button-type link-button" title="Get Link to This Optimization Problem!"></button>
{% endif %}
<button onclick="saveCode();" class="button-type save-button" title="Save this Optimization Problem"></button>
<a href="{{ user_url }}" class="a-button-type button-padding-extra">Sign Out</a>
{% else %}
<a href="{{ user_url }}" class="a-button-type button-padding-extra" title="Sign in so you can save your optimization problems!">Sign In With Google</a>
{% endif %}
</div>
</div>
</div>
</div>
<div id="parameters" class="left-panel">
<div id="parameter_rows" class="flex-container flex-wrap">
<h2 class="param-row margin-top">Optimization Problem</h2>
<div class="param-row">
<input id="problem_name" type="text" class="margin-small param-full auto-margin" placeholder="Name of the Optimization Problem" title="Name of the Optimization Problem" value="{{ problem.name if problem else '' }}"/>
</div>
<div class="param-row">
<input id="problem_public" type="checkbox" class="" onchange="if ($('#problem_public').is(':checked')) { $('#public_link').show(); } else { $('#public_link').hide(); }" {{ ("checked" if problem.is_public else '') if problem else '' }}/>
Make Public
</div>
<h2 class="param-row">Algorithm Parameters</h2>
<div class="param-row">
<div class="param-half">Method:</div>
<select id="method" class="param-half" onchange="updateVariableTypes();">
</select>
</div>
<div class="param-row">
<div class="param-half">Max Evaluations:</div>
<input id="max_evals" type="text" placeholder="Maximum Evaluations" title="Maximum Evaluations" class="param-half margin-small" value="{{ problem.max_evals if problem else '10000' }}"/>
</div>
<div class="param-row">
<div class="param-half">Population Size:</div>
<input id="population" type="text" placeholder="Population Size" title="Population Size" class="param-half margin-small" value="{{ problem.population if problem else '50' }}"/>
</div>
<h2 class="param-row">Problem Parameters</h2>
<div class="param-row">
<div class="param-half">No. Decisions:</div>
<input id="nDecisions" type="text" placeholder="Number of Decision Variables" title="Number of Decision Variables" class="param-half margin-small" value="{{ problem.n_decisions if problem else '1' }}"/>
</div>
<div class="param-row">
<div class="param-half">No. Objectives:</div>
<input id="nObjectives" type="text" placeholder="Number of Objective Values" title="Number of Objective Values" class="param-half margin-small" value="{{ problem.n_objectives if problem else '1' }}"/>
</div>
<div class="param-row">
<div class="param-half">No. Constraints:</div>
<input id="nConstraints" type="text" placeholder="Number of Constraints" title="Number of Constraints" class="param-half margin-small" value="{{ problem.n_constraints if problem else '0' }}"/>
</div>
<h2 class="param-row">Variables</h2>
<div id="variables" class="flex-container flex-wrap"></div>
</div>
</div>
<div id="editor">{{ (problem.code.strip() if problem else comments)|safe }}</div>
<div id="chartModal" class="chartModal">
<div id="chartModalInner">
<div id="container" class="contained-chart"></div>
<a href="#close" title="Close" class="close">X</a>
</div>
</div>
<div id="openModal" class="openModal">
<div id="openModalInner">
<div class="flex-container-v">
<div class="param-full flex-fixed flex-center x-large-text margin-10">My Problems</div>
<div class="flex-fill-v problems-list-container">
<div id="problemsList" class="flex-container flex-center flex-wrap">
</div>
</div>
<div class="param-full flex-fixed flex-center x-large-text margin-10">Public Problems</div>
<div class="flex-fill-v problems-list-container">
<div id="publicProblemsList" class="flex-container flex-center flex-wrap">
</div>
</div>
<a href="#close" title="Close" class="close">X</a>
</div>
</div>
<div class="totally-hidden">
<div id="cursor"></div>
</div>
</div>
</body>
<script>
// set up the left pane
fillMethods('method', "{{ problem.method if problem else 'NSGAII' }}");
{% if problem %}
// add the button for retrieving the public link if possible
if ({{ 'false' if problem.is_public else 'true' }}) {
$('#public_link').hide();
}
// variables
var variables = {{ problem.vars_json()|safe }};
{% else %}
// variables
var variables = [{'type': 'real', 'lower': 0.0, 'upper': 10.0, 'nbits': 0.0}];
{% endif %}
// populate the select elements
fillVariables('variables', variables, "{{ problem.method if problem else 'NSGAII' }}");
// set event listeners
var ndec = document.getElementById('nDecisions');
// handle changes to the number of decision variables
var onNDecChange = function() {
var ndec = parseInt($('#nDecisions').val()),
$var_elem = $('#variables'),
var_cnt = $('#variables .param-row').length,
i;
if (var_cnt < ndec) {
// add some variable elements
for (i = 0; i < ndec - var_cnt; i++) {
addVariable('variables', var_cnt + i, "{{ problem.method if problem else 'NSGAII' }}", null);
}
} else if (var_cnt > ndec) {
// remove some variable elements
for (i = 0; i < var_cnt - ndec; i++) {
$('#variables .param-row:last-child').remove();
}
}
};
ndec.addEventListener('change', onNDecChange, false);
// build the editor
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/java");
function loadContent(htmlfile){
jQuery("#content").load(htmlfile);
}
// loadContent('/problems_template');
</script>
<script src="/js/highcharts/highcharts.js"></script>
<script src="/js/highcharts/modules/exporting.js"></script>
<script src="/js/export-csv.js"></script>
</html>