a85ea69fb0
Allows reading and writing default serial port and baudrate (this also is available via the web interface) and setting the host and port on which the server should listen. Might allow persisting more options in the future. The configuration file is stored in ~/.printerwebui/config.ini under Linux, in %APPDATA%/PrinterWebUI/config.ini under Windows and should be stored in ~/Library/Application Support/config.ini under MacOS X Closes #1
245 lines
No EOL
17 KiB
HTML
245 lines
No EOL
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Printer WebUI</title>
|
|
|
|
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
|
|
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
|
|
<link href="{{ url_for('static', filename='css/jquery.fileupload-ui.css') }}" rel="stylesheet" media="screen">
|
|
<link href="{{ url_for('static', filename='css/ui.css') }}" rel="stylesheet" media="screen">
|
|
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
<script src="{{ url_for('static', filename='js/knockout-2.2.0.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/jquery.ui.widget.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/jquery.iframe-transport.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/jquery.fileupload.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/ui.js') }}"></script>
|
|
<script lang="javascript">
|
|
var AJAX_BASEURL = '/ajax/';
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="brand" href="#">Printer WebUI</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="accordion span4">
|
|
<div class="accordion-group">
|
|
<div class="accordion-heading">
|
|
<a class="accordion-toggle" data-toggle="collapse" href="#connection"><i class="icon-signal"></i> Connection</a>
|
|
</div>
|
|
<div class="accordion-body collapse in" id="connection">
|
|
<div class="accordion-inner">
|
|
<label for="connection_ports" data-bind="css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed">Serial Port</label>
|
|
<select id="connection_ports" data-bind="options: portOptions, optionsCaption: 'AUTO', value: selectedPort, css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed"></select>
|
|
<label for="connection_baudrates" data-bind="css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed">Baudrate</label>
|
|
<select id="connection_baudrates" data-bind="options: baudrateOptions, optionsCaption: 'AUTO', value: selectedBaudrate, css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed"></select>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="connection_save" data-bind="checked: saveSettings, css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed"> Save connection settings
|
|
</label>
|
|
<button class="btn btn-block" id="printer_connect" data-bind="click: connect, text: buttonText()">Connect</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-group">
|
|
<div class="accordion-heading">
|
|
<a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> State</a>
|
|
</div>
|
|
<div class="accordion-body collapse in" id="state">
|
|
<div class="accordion-inner">
|
|
Machine State: <strong data-bind="text: stateString"></strong><br>
|
|
File: <strong data-bind="text: filename"></strong><br>
|
|
Filament: <strong data-bind="text: filament"></strong><br>
|
|
Estimated Print Time: <strong data-bind="text: estimatedPrintTime"></strong><br>
|
|
Line: <strong data-bind="text: lineString"></strong><br>
|
|
Height: <strong data-bind="text: currentHeight"></strong><br>
|
|
Print Time: <strong data-bind="text: printTime"></strong><br>
|
|
Print Time Left: <strong data-bind="text: printTimeLeft"></strong><br>
|
|
|
|
<div class="progress">
|
|
<div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" data-bind="enable: isOperational() && isReady() && !isPrinting() && !isPaused()" id="job_print"><i class="icon-print icon-white"></i> <span>Print</span></button>
|
|
<button class="btn" id="job_pause" data-bind="css: {active: isPaused}"><i class="icon-pause"></i> <span>Pause</span></button>
|
|
<button class="btn" id="job_cancel"><i class="icon-stop"></i> Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-group">
|
|
<div class="accordion-heading">
|
|
<a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> Files</a>
|
|
</div>
|
|
<div class="accordion-body collapse in" id="files">
|
|
<div class="accordion-inner">
|
|
<table class="table table-striped table-hover table-condensed table-hover" id="gcode_files">
|
|
<thead>
|
|
<tr>
|
|
<th class="gcode_files_name">Name</th>
|
|
<th class="gcode_files_size">Size</th>
|
|
<th class="gcode_files_action">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: files">
|
|
<tr data-bind="attr: {title: name}, event: {dblclick: $parent.loadFile}">
|
|
<td class="gcode_files_name" data-bind="text: name"></td>
|
|
<td class="gcode_files_size" data-bind="text: size"></td>
|
|
<td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a> | <a href="#" class="icon-folder-open" data-bind="click: $parent.loadFile"></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<span class="btn btn-primary btn-block fileinput-button" style="margin-bottom: 10px">
|
|
<i class="icon-upload icon-white"></i>
|
|
<span>Upload</span>
|
|
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload">
|
|
</span>
|
|
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
|
<div class="bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabbable span8">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#temp" data-toggle="tab">Temp</a></li>
|
|
<li><a href="#jog" data-toggle="tab">Jog</a></li>
|
|
<li><a href="#speed" data-toggle="tab">Speed</a></li>
|
|
<li><a href="#term" data-toggle="tab">Term</a></li>
|
|
<li><a href="#webcam" data-toggle="tab">Webcam</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="temp">
|
|
<div class="row" style="padding-left: 20px">
|
|
<div id="temperature-graph" style="height: 350px; width: 100%"></div>
|
|
</div>
|
|
<div>
|
|
<div class="form-horizontal" style="width: 49%; float: left; margin-bottom: 20px;">
|
|
<fieldset>
|
|
<legend>Temperature</legend>
|
|
|
|
<label>Current: <strong data-bind="text: tempString"></strong></label>
|
|
|
|
<label>Target: <strong data-bind="text: targetTempString"></strong></label>
|
|
|
|
<label for="temp_newTemp">New Target</label>
|
|
<div class="input-append">
|
|
<input class="span1" type="text" id="temp_newTemp" data-bind="attr: {placeholder: targetTemp}">
|
|
<span class="add-on">°C</span>
|
|
</div>
|
|
<button type="submit" class="btn" id="temp_newTemp_set">Set</button>
|
|
</fieldset>
|
|
</div>
|
|
<div class="form-horizontal" style="width: 49%; margin-left: 2%; float: left; margin-bottom: 20px;">
|
|
<fieldset>
|
|
<legend>Bed Temperature</legend>
|
|
|
|
<label>Current: <strong data-bind="text: bedTempString"></strong></label>
|
|
|
|
<label>Target: <strong data-bind="text: bedTargetTempString"></strong></label>
|
|
|
|
<label for="temp_newBedTemp">New Target</label>
|
|
<div class="input-append">
|
|
<input class="span1" type="text" id="temp_newBedTemp" data-bind="attr: {placeholder: bedTargetTemp}">
|
|
<span class="add-on">°C</span>
|
|
</div>
|
|
<button type="submit" class="btn" id="temp_newBedTemp_set">Set</button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="jog">
|
|
<div style="width: 350px; height: 70px">
|
|
<div style="width: 70px; float: left;"> </div>
|
|
<div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_y_inc" data-bind="enable: isOperational() && !isPrinting()">Up</button></div>
|
|
<div style="width: 70px; float: left;"> </div>
|
|
<div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_inc" data-bind="enable: isOperational() && !isPrinting()">Z+</button></div>
|
|
</div>
|
|
<div style="width: 350px; height: 70px">
|
|
<div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_x_dec" data-bind="enable: isOperational() && !isPrinting()">Left</button></div>
|
|
<div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_xy_home" data-bind="enable: isOperational() && !isPrinting()">Home</button></div>
|
|
<div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_x_inc" data-bind="enable: isOperational() && !isPrinting()">Right</button></div>
|
|
<div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_home" data-bind="enable: isOperational() && !isPrinting()">Home</button></div>
|
|
</div>
|
|
<div style="width: 350px; height: 70px">
|
|
<div style="width: 70px; float: left;"> </div>
|
|
<div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_y_dec" data-bind="enable: isOperational() && !isPrinting()">Down</button></div>
|
|
<div style="width: 70px; float: left;"> </div>
|
|
<div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_dec" data-bind="enable: isOperational() && !isPrinting()">Z-</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="speed">
|
|
<div class="form-horizontal" style="margin-bottom: 20px">
|
|
<label for="speed_outerWall">Outer Wall</label>
|
|
<div class="input-append">
|
|
<input type="text" id="speed_outerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: outerWall}">
|
|
<span class="add-on">%</span>
|
|
<button type="submit" class="btn" id="speed_outerWall_set" data-bind="enable: isOperational()">Set</button>
|
|
</div>
|
|
|
|
<label for="speed_innerWall">Inner Wall</label>
|
|
<div class="input-append">
|
|
<input type="text" id="speed_innerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: innerWall}">
|
|
<span class="add-on">%</span>
|
|
<button type="submit" class="btn" id="speed_innerWall_set" data-bind="enable: isOperational()">Set</button>
|
|
</div>
|
|
|
|
<label for="speed_fill">Fill</label>
|
|
<div class="input-append">
|
|
<input type="text" id="speed_fill" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: fill}">
|
|
<span class="add-on">%</span>
|
|
<button type="submit" class="btn" id="speed_fill_set" data-bind="enable: isOperational()">Set</button>
|
|
</div>
|
|
|
|
<label for="speed_support">Support</label>
|
|
<div class="input-append">
|
|
<input type="text" id="speed_support" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: support}">
|
|
<span class="add-on">%</span>
|
|
<button type="submit" class="btn" id="speed_support_set" data-bind="enable: isOperational()">Set</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="term">
|
|
<pre id="terminal-output" class="pre-scrollable"></pre>
|
|
<div class="input-append">
|
|
<input type="text" id="terminal-command">
|
|
<button class="btn" type="button" id="terminal-send">Send</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="webcam">
|
|
Here be webcam stuff
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="offline_overlay">
|
|
<div id="offline_overlay_background"></div>
|
|
<div id="offline_overlay_wrapper">
|
|
<div class="container">
|
|
<div class="hero-unit">
|
|
<h1>Server is offline</h1>
|
|
<p>
|
|
The server appears to be offline, at least I'm not getting any response from it. I'll try to reconnect
|
|
automatically <strong>every 10 seconds</strong>, however you are welcome to try a manual reconnect
|
|
anytime using the button below.
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-primary btn-large" id="offline_overlay_reconnect">Attempt to reconnect</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |