<html>
<head>
<title>Path Animator Tool</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
<%= grunt.file.read('tmp/default.css') %>
</style>
</head>
<body>
<h2>1. Source image</h2>
<div id="drop-area">
<form>
<p>Select image with the file dialog or by dragging and dropping an image onto the dashed region.</p>
<input type="file" id="fileElem" accept="image/*" />
<label class="button" for="fileElem">Select an image</label>
</form>
<div id="gallery"></div>
</div>
<h2>2. Configure algorithm</h2>
<div id="algorithm">
<form>
<div><label for="algorithm">Select the algorithm to use:</label>
<select name="algorithm" id="alsel">
<option value="distancepath" selected="selected">Distance Path</option>
<option value="noise">Noise</option>
</select>
</div>
<div id="distancepath">
<h3>Distance path</h3>
<div><label for="weightpath">Weight of path</label> <input type="text" name="weightpath" value="1"/></div>
<div><label for="weightblock">Weight of block</label> <input type="text" name="weightblock" value="1000"/></div>
<div><label for="threshold">Treshold for traversable pixel</label> <input type="text" name="treshold" value="210"/></div>
<div><label for="maxdistance">Maximum distance value</label> <input type="text" name="maxdistance" value="3000000"/></div>
<div><label for="startpoints">List of starting points Format:<br />x1,y1 x2,y2 ...</label> <input type="text" name="startpoints" value="0,0"/></div>
</div>
<div id="noise" class="hidden">
<h3>Noise</h3>
Nothing to configure.
</div>
<p>
<button id="run" class="button hidden">run</button>
</p>
</form>
</div>
<h2>3. Output image</h2>
<div id="output">
</div>
<p><button id="save" class="button hidden">Save image</button></p>
<canvas id="outputcanvas" class="hidden"></canvas>
<canvas id="inputcanvas" class="hidden"></canvas>
<script type="text/javascript">
<%= grunt.file.read('tmp/bootstrap.out') %>
</script>
</body>
</html>