Add a responsive file uploader

- Specify HTML5
- Allow drag and drop for loading configurations
This commit is contained in:
Scott Lahteine
2015-02-05 11:14:31 -08:00
parent 09a385d9b0
commit ac7a4358d6
5 changed files with 359 additions and 31 deletions

View File

@ -1,15 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Marlin Configurator</title>
<meta charset="UTF-8">
<title>Marlin Configurator</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/binarystring.js"></script>
<script src="js/binaryfileuploader.js"></script>
<script src="js/configurator.js"></script>
<script src="js/jcanvas.js"></script>
<script src="js/jstepper.js"></script>
<link rel="stylesheet" href="css/configurator.css" type="text/css" media="all" />
</head>
<body>
<div id="main">
<section id="main">
<h1>Marlin Configurator 0.1a</h1>
<p>Enter values in the form, get a Marlin configuration.<br/>Will include a drop-down of known configurations.</p>
<ul id="help">
@ -18,9 +21,9 @@
<form id="config_form">
<!-- label>Serial Port:</label><input name="SERIAL_PORT" type="text" size="4" maxlength="2" value="99" / -->
<label>Drop Files Here:</label><input type="file" id="file-upload" />
<label>Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
<label class="newline">Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
<label>Baud Rate:</label><select name="BAUDRATE"></select>
@ -52,6 +55,6 @@
<br class="clear" />
</form>
</div>
<section>
</body>
</html>