This repository has been archived on 2025-02-01. You can view files and clone it, but cannot push or open issues or pull requests.
reprapfirmware-dc42/SD-image/www/reprap.htm
David Crocker bb8a2c3ef7 Version 1.09b
Z axis min and max limits are now enforced if the axes have been homed
M665 command now shows the re-calculated delta radius and tower offsets
after auto-calibration
Initial and final RMS errors are now shown after delta auto-calibration
Pause/resume now mostly works when absolute extruder coordinates are
used
Doubled the maximum length of the SD card file listing that can be sent
to PanelDue
Implemented zpl's Network and PrintMonitor changes including M404
(thanks, zpl)
Increased default maximum instantaneous speed changes
Bug fix:: if M226 was used to pause the print, the resume coordinates
were not set up correctly
Bug fix: when changing the travel direction, the head was sometimes
slowed down more than necessary
Bug fix: warm-up time was not shown correctly in DuetWebControl
Bug fix: extruder drive positions were always shown as 0.0 in
DuetWebControl
Bug fix: incorrect PID parameters were shown in response to M301
Replaced old web interface files on SD card by DuetWebControl
Modified all resume.g files to set the speed when moving to the paused
head coordinates
2015-06-14 20:15:36 +01:00

1546 lines
68 KiB
HTML

<!DOCTYPE html>
<!-- Duet Web Control v1.06
written by Christian Hammacher
licensed under the terms of the GPL v2
see http://www.gnu.org/licenses/gpl-2.0.html
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Interface for Duet Electronics (+ Extension)">
<meta name="author" content="Christian Hammacher">
<link rel="icon" href="favicon.ico">
<title id="title">Duet Web Control</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-slider.min.css" rel="stylesheet">
<link href="css/defaults.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Grouping for better mobile display -->
<div class="navbar-header collapsed">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="btn-group navbar-checkbox visible-xs" data-toggle="buttons">
<button class="btn btn-default btn-hide-info active">
<span class="glyphicon glyphicon-dashboard"></span>
</button>
</div>
<span class="label label-default label-status pull-right navbar-label visible-xs">Disconnected</span>
<a class="navbar-brand visible-xs">
<!-- <img class="brand-sm" src="img/rrp_small.png"> -->
<span class="machine-name">Duet Web Control</span>
</a>
</div>
<!-- Regular navbar entries -->
<div class="collapse navbar-collapse">
<button type="button" class="btn btn-connect btn-info navbar-btn navbar-left"><span class="glyphicon glyphicon-log-in"></span> <span>Connect</span></button>
<div class="btn-group navbar-checkbox navbar-left hidden-md hidden-lg" data-toggle="buttons">
<button class="btn btn-default btn-hide-info active">
<span class="glyphicon glyphicon-dashboard"></span>
</button>
</div>
<form class="navbar-form padding-small navbar-left hidden-sm gcode-input">
<div class="input-group">
<input type="text" class="form-control" placeholder="Send G-Code..." disabled>
<div class="input-group-btn div-gcodes">
<button type="button" class="btn btn-default dropdown-toggle btn-gcodes disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-gcodes" role="menu">
</ul>
</div>
</div>
<button type="submit" class="btn btn-default disabled" title="Send G-Code from input"><span class="glyphicon glyphicon-send"></span> Send</button>
</form>
<button type="button" class="btn btn-default btn-upload navbar-btn padding-small navbar-left hidden-xs hidden-sm disabled" title="Upload &amp; Print one or more G-Code files (drag&amp;drop is supported as well)" data-type="print" data-style="btn-default"><span class="glyphicon glyphicon-cloud-upload"></span> Upload &amp; Print</button>
<button type="button" class="btn btn-danger btn-emergency-stop navbar-btn navbar-right disabled" title="Enforces an immediate software reset (M112+M999)">Emergency STOP</button>
<span class="label label-default label-status navbar-label navbar-right">Disconnected</span>
<ul class="nav nav-justified hidden-xs">
<li>
<a href="#" class="navbar-brand">
<!--
<img class="brand-sm" src="img/rrp_small.png">
<img class="brand-lg" src="img/rrp_large.png">
<span class="brand-lg">-</span>
-->
<span class="machine-name">Duet Web Control</span>
</a>
</li>
</ul>
</div>
<!-- Collapsed navbar entries for mobile devices -->
<div class="nav collapse" id="mobile-navbar">
<form class="gcode-input">
<table class="table navbar-table">
<tr>
<td>
<button type="button" class="btn btn-connect btn-info"><span class="glyphicon glyphicon-log-in"></span> Connect</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-emergency-stop pull-right disabled" title="Enforces an immediate software reset (M112+M999)">Emergency STOP</button>
</td>
</tr>
<tr>
<td class="text-nowrap">
<div class="input-group">
<input type="text" class="form-control" placeholder="Send G-Code...">
<div class="input-group-btn div-gcodes">
<button type="button" class="btn btn-default dropdown-toggle btn-gcodes disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-gcodes" role="menu">
</ul>
</div>
</div>
</td>
<td>
<button type="submit" class="btn btn-default btn-mobile-send disabled"><span class="glyphicon glyphicon-send"></span> Send</button>
</td>
</tr>
<tr>
<td colspan="2">
<ul class="nav nav-pills">
<li role="presentation" class="navitem navitem-control active"><a class="navlink" href="#" data-target="control"><span class="glyphicon glyphicon-home"></span> Control</a></li>
<li role="presentation" class="navitem navitem-print"><a class="navlink" href="#" data-target="print"><span class="glyphicon glyphicon-print"></span> Print Job</a></li>
<li role="presentation" class="navitem navitem-console"><a class="navlink" href="#" data-target="console"><span class="glyphicon glyphicon-console"></span> Console</a></li>
<li role="presentation" class="navitem navitem-files"><a class="navlink" href="#" data-target="files"><span class="glyphicon glyphicon-hdd"></span> Files <span class="glyphicon glyphicon-refresh span-refresh-files hidden"></span></a></li>
<li role="presentation" class="navitem navitem-macros"><a class="navlink" href="#" data-target="macros"><span class="glyphicon glyphicon-link"></span> Macros <span class="glyphicon glyphicon-refresh span-refresh-macros hidden"></span></a></li>
<li role="presentation" class="navitem navitem-spools"><a class="navlink" href="#" data-target="spools"><span class="glyphicon glyphicon-record"></span> Spools</a></li>
<li role="presentation" class="navitem navitem-maintenance hidden"><a class="navlink" href="#" data-target="maintenance"><span class="glyphicon glyphicon-wrench"></span> Maintenance</a></li>
<li role="presentation" class="navitem navitem-settings"><a class="navlink" href="#" data-target="settings"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li role="presentation" class="navitem navitem-help hidden"><a class="navlink" href="#" data-target="help"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
</ul>
</td>
</tr>
</table>
</form>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container-fluid">
<!-- Info Panels -->
<div class="row" id="row_info">
<!-- Heater Temperatures -->
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-4" id="div_heaters">
<div class="panel panel-info panel-status">
<div class="panel-heading">
<span>Heater Temperatures</span>
<div class="dropdown pull-right" id="control_all">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="control_all">Control All <span class="caret"></span></a>
<ul class="dropdown-menu" id="ul_control_dropdown">
<li>
<a href="#" id="a_heaters_off"><span class="glyphicon glyphicon-off"></span> Turn everything off</a>
</li>
<li>
<label for="input_temp_all_active">Active:</label>
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_all_active" disabled="">
<div class="input-group-btn div-head-temp dropdown">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu"></ul>
</div>
</div>
</li>
<li>
<label for="input_temp_all_standby">Standby:</label>
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_all_standby" disabled="">
<div class="input-group-btn div-head-temp dropdown">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu"></ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<table class="table table-bordered table-condensed table-centered-cells" id="table_heaters">
<tr>
<th></th>
<th>Current</th>
<th>Active</th>
<th>Standby</th>
</tr>
<tr id="tr_head_1">
<th>
<a href="#">Heater 1<span class="caret hidden"></span></a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h1_active" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu">
</ul>
</div>
</div>
</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h1_standby" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu">
</ul>
</div>
</div>
</td>
</tr>
<tr id="tr_head_2">
<th>
<a href="#">Heater 2<span class="caret hidden"></span></a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h2_active" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu">
</ul>
</div>
</div>
</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h2_standby" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu">
</ul>
</div>
</div>
</td>
</tr>
<tr id="tr_head_3" class="hidden">
<th>
<a href="#">Heater 3<span class="caret hidden"></span></a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h3_active" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu">
</ul>
</div>
</div>
</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h3_standby" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu">
</ul>
</div>
</div>
</td>
</tr>
<tr id="tr_head_4" class="hidden">
<th>
<a href="#">Heater 4<span class="caret hidden"></span></a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h4_active" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu">
</ul>
</div>
</div>
</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h4_standby" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu">
</ul>
</div>
</div>
</td>
</tr>
<tr id="tr_head_5" class="hidden">
<th>
<a href="#">Heater 5<span class="caret hidden"></span></a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h5_active" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-active-temp" role="menu">
</ul>
</div>
</div>
</td>
<td class="input-td">
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_h5_standby" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-standby-temp" role="menu">
</ul>
</div>
</div>
</td>
</tr>
<tr id="tr_bed">
<th>
<a href="#">Bed</a>
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td>
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_bed" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-bed-temp" role="menu">
</ul>
</div>
</div>
</td>
<td></td>
</tr>
<tr id="tr_chamber" class="hidden">
<th>
Chamber
<span class="text-muted"></span>
</th>
<td>n/a</td>
<td>
<div class="input-group input-group-sm">
<input type="number" class="form-control" value="0" id="input_temp_chamber" disabled>
<div class="input-group-btn div-head-temp">
<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-bed-temp" role="menu">
</ul>
</div>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
<!-- Temperature Chart -->
<div class="hidden-xs hidden-sm col-md-3 col-lg-3" id="div_temp_chart">
<div class="panel panel-info panel-status">
<div class="panel-heading">
<span>Temperature Chart</span>
</div>
<div class="panel-body panel-chart">
<div id="chart_temp" title="Time vs. Temperature">
<!-- See JS -->
</div>
</div>
</div>
</div>
<!-- Machine Status -->
<div class="col-xs-12 col-sm-7 col-md-4 col-lg-5" id="div_status">
<div class="panel panel-info panel-status">
<div class="panel-heading">
<span>Machine Status</span>
</div>
<table class="table table-bordered table-condensed table-centered-cells table-status">
<tr>
<th rowspan="2" class="th-status">Head Position</th>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
<tr>
<td id="td_x">n/a</td>
<td id="td_y">n/a</td>
<td id="td_z">n/a</td>
</tr>
</table>
<table class="table table-bordered table-condensed table-centered-cells table-status">
<tr>
<th rowspan="2" class="th-status">
<div class="dropdown" id="extr_dropdown">
<a href="#" id="extruder_drives" class="dropdown-toggle disabled" data-toggle="dropdown" data-target="#extr_dropdown">Extruder Drives <span class="caret"></span></a>
<ul class="dropdown-menu" id="ul_extruder_dropdown"></ul>
</div>
</th>
<th class="hidden"><!-- only for HTML validation --></th>
<th class="hidden-md extr-1">D1</th>
<th class="hidden-md extr-2">D2</th>
<th class="hidden-md hidden extr-3">D3</th>
<th class="hidden-md hidden extr-4">D4</th>
<th class="hidden-md hidden extr-5">D5</th>
</tr>
<tr>
<td id="td_extr_total" class="hidden-xs hidden-sm hidden-lg">n/a</td>
<td id="td_extr_1" class="hidden-md extr-1">n/a</td>
<td id="td_extr_2" class="hidden-md extr-2">n/a</td>
<td id="td_extr_3" class="hidden-md hidden extr-3">n/a</td>
<td id="td_extr_4" class="hidden-md hidden extr-4">n/a</td>
<td id="td_extr_5" class="hidden-md hidden extr-5">n/a</td>
</tr>
</table>
<table class="table table-bordered table-condensed table-centered-cells table-status">
<tr>
<th rowspan="2" class="th-status">Sensors</th>
<th>Z-Probe</th>
<th class="fan-control">Fan RPM</th>
</tr>
<tr>
<td id="td_probe" title="Current Z-Probe reading on a scale between 0 and 1024">n/a</td>
<td id="td_fanrpm" class="fan-control" title="Current Fan RPM (needs a 4-pin PWM fan and proper wiring)">n/a</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Content -->
<div class="row">
<!-- Sidebar -->
<div class="col-sm-3 col-md-2 col-lg-2 sidebar">
<ul class="nav nav-sidebar">
<li class="navitem navitem-control active"><a class="navlink" href="#" data-target="control"><span class="glyphicon glyphicon-home"></span> Machine Control</a></li>
<li class="navitem navitem-print"><a class="navlink" href="#" data-target="print"><span class="glyphicon glyphicon-print"></span> Print Status</a></li>
</ul>
<ul class="nav nav-sidebar">
<li class="navitem navitem-console"><a class="navlink" href="#" data-target="console"><span class="glyphicon glyphicon-console"></span> G-Code Console</a></li>
<li class="navitem navitem-files"><a class="navlink" href="#" data-target="files"><span class="glyphicon glyphicon-hdd"></span> G-Code Files <span class="glyphicon glyphicon-refresh span-refresh-files hidden"></span></a></li>
<li class="navitem navitem-macros"><a class="navlink" href="#" data-target="macros"><span class="glyphicon glyphicon-link"></span> Macros <span class="glyphicon glyphicon-refresh span-refresh-macros hidden"></span></a></li>
</ul>
<ul class="nav nav-sidebar">
<li class="navitem navitem-spools"><a class="navlink" href="#" data-target="spools"><span class="glyphicon glyphicon-record"></span> Spools</a></li>
<li class="navitem navitem-maintenance hidden"><a class="navlink" href="#" data-target="maintenance"><span class="glyphicon glyphicon-wrench"></span> Maintenance</a></li>
</ul>
<ul class="nav nav-sidebar">
<li class="navitem navitem-settings"><a class="navlink" href="#" data-target="settings"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li class="navitem navitem-help hidden"><a class="navlink" href="#" data-target="help"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
</ul>
</div>
<!-- Page Contents -->
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10" id="main_content">
<!-- Control Page -->
<div id="page_control" class="page active">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
<div class="panel panel-default" id="panel_head_movement">
<div class="panel-heading">
<button data-home="all" class="pull-left btn btn-primary btn-xs visible-lg disabled" id="btn_homeall" title="Home all axes (G28)">Home All</button>
<span>Head Movement</span>
<button data-gcode="G32" class="pull-right btn btn-primary btn-xs gcode visible-lg disabled" id="btn_bed_compensation" title="Perform automatic bed compensation / calibration (G32)">Auto Bed Compensation</button>
</div>
<div class="panel-body">
<div class="hidden-lg btn-group btn-group-justified" id="mobile_home_buttons">
<div class="btn-group" role="group"><button data-home="all" class="btn btn-primary disabled">Home All</button></div>
<div class="btn-group home-buttons" role="group"><button data-home="X" class="btn btn-primary btn-home-x disabled">Home X</button></div>
<div class="btn-group home-buttons" role="group"><button data-home="Y" class="btn btn-primary btn-home-y disabled">Home Y</button></div>
<div class="btn-group home-buttons" role="group"><button data-home="Z" class="btn btn-primary btn-home-z disabled">Home Z</button></div>
</div>
<table id="table_move_head">
<tr>
<td class="home-buttons visible-lg">
<div class="btn-group" role="group">
<a href="#" role="button" class="btn btn-primary btn-home-x disabled" title="Home X axis (G28 X)" data-home="X">Home X</a>
</div>
</td>
<td>
<div class="btn-group btn-group-justified" role="group">
<a href="#" role="button" data-x="-100" class="btn btn-default visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-100</a>
<a href="#" role="button" data-x="-10" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-10</a>
<a href="#" role="button" data-x="-1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-1</a>
<a href="#" role="button" data-x="-0.1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-0.1</a>
</div>
</td>
<td>
<div class="btn-group btn-group-justified" role="group">
<a href="#" role="button" data-x="0.1" class="btn btn-default disabled">X+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-x="1" class="btn btn-default disabled">X+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-x="10" class="btn btn-default disabled">X+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-x="100" class="btn btn-default visible-lg disabled">X+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</td>
</tr>
<tr>
<td class="home-buttons visible-lg">
<div class="btn-group" role="group">
<a role="button" class="btn btn-primary btn-home-y disabled" title="Home Y axis (G28 Y)" data-home="Y">Home Y</a>
</div>
</td>
<td>
<div class="btn-group btn-group-justified" role="group">
<a role="button" data-y="-100" class="btn btn-default visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-100</a>
<a role="button" data-y="-10" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-10</a>
<a role="button" data-y="-1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-1</a>
<a role="button" data-y="-0.1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-0.1</a>
</div>
</td>
<td>
<div class="btn-group btn-group-justified" role="group">
<a href="#" role="button" data-y="0.1" class="btn btn-default disabled">Y+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-y="1" class="btn btn-default disabled">Y+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-y="10" class="btn btn-default disabled">Y+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-y="100" class="btn btn-default visible-lg disabled">Y+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</td>
</tr>
<tr>
<td class="home-buttons visible-lg">
<div class="btn-group" role="group">
<a role="button" class="btn btn-primary btn-home-z disabled" title="Home Z axis (G28 Z)" data-home="Z">Home Z</a>
</div>
</td>
<td id="td_decrease_z">
<div class="btn-group btn-group-justified" role="group">
<a role="button" data-z="-100" class="btn btn-default visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-100</a>
<a role="button" data-z="-10" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-10</a>
<a role="button" data-z="-1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-1</a>
<a role="button" data-z="-0.1" class="btn btn-default disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-0.1</a>
</div>
</td>
<td id="td_increase_z">
<div class="btn-group btn-group-justified" role="group">
<a href="#" role="button" data-z="0.1" class="btn btn-default disabled">Z+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-z="1" class="btn btn-default disabled">Z+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-z="10" class="btn btn-default disabled">Z+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" role="button" data-z="100" class="btn btn-default visible-lg disabled">Z+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="alert alert-warning hidden" id="home_warning">
<span class="glyphicon glyphicon-warning-sign"></span>
<span id="unhomed_warning">The following axes are not homed: <strong id="unhomed_axes">X, Y, Z</strong></span>
</div>
<div class="panel panel-default" id="panel_extrude">
<div class="panel-heading">
<span>Extruder Control</span>
</div>
<div class="panel-body">
<div class="col-xs-5 no-horizontal-padding">
<label>Feed amount in mm:</label>
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" name="feed" value="100"> 100
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feed" value="50"> 50
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feed" value="20"> 20
</label>
<label class="btn btn-primary disabled active">
<input type="radio" name="feed" value="10" checked> 10
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feed" value="5"> 5
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feed" value="1"> 1
</label>
</div>
</div>
<div class="col-xs-5">
<label>Feedrate in mm/sec:</label>
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" name="feedrate" value="60"> 60
</label>
<label class="btn btn-primary disabled active">
<input type="radio" name="feedrate" value="40" checked> 40
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feedrate" value="20"> 20
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feedrate" value="10"> 10
</label>
<label class="btn btn-default disabled">
<input type="radio" name="feedrate" value="5"> 5
</label>
</div>
</div>
<div class="col-xs-2 no-horizontal-padding">
<div class="btn-group-vertical btn-group-vertical-justified">
<div class="btn-group">
<button class="btn btn-sm btn-default btn-retract disabled" id="btn_retract" title="Retract a specific amount of filament at a given feedrate (G1 E-xxx Fyyy)"><span class="glyphicon glyphicon-arrow-up"></span> Retract</button>
</div>
<div class="btn-group">
<button class="btn btn-sm btn-primary btn-extrude disabled" id="btn_extrude" title="Extrude a specific amount of filament at a given feedrate (G1 Exxx Fyyy)"><span class="glyphicon glyphicon-arrow-down"></span> Extrude</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-right">
<div class="panel panel-default" id="panel_macro_buttons">
<div class="panel-heading">
<span>User-Defined Macros</span>
</div>
<div class="panel-body text-center">
<h4 class="text-muted">Go to the Macros page to define your own actions</h4>
<div class="btn-group-vertical btn-group-vertical-justified"></div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-right">
<div class="panel panel-default" id="panel_control_misc">
<div class="panel-heading">
<span>Miscellaneous</span>
</div>
<div class="panel-body">
<table class="table-description">
<tr class="atx-control">
<td>ATX Power:</td>
<td>
<div class="btn-group btn-group-justified" data-toggle="buttons">
<div class="btn-group">
<label class="btn btn-success disabled" title="Turn on ATX power (M80)">
<input type="radio" name="atxPower" value="1">On
</label>
</div>
<div class="btn-group">
<label class="btn btn-danger active disabled" title="Turn off ATX power (M81)">
<input type="radio" name="atxPower" value="0" checked>Off
</label>
</div>
</div>
</td>
</tr>
<tr class="fan-control">
<td>Fan Control:</td>
<td>
<input id="slider_fan_control" type="text" title="Set current fan value (via M106)"/>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Print Status -->
<div id="page_print" class="page">
<div class="row row-progress hidden">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5">
<span id="span_progress_left"></span>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-7">
<span id="span_progress_right"></span>
</div>
</div>
<div class="row row-progress hidden">
<div class="col-md-12">
<div class="progress">
<div class="progress-bar progress-bar-striped" id="progress" role="progressbar"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-push-3 col-lg-7 col-lg-push-2">
<div class="panel panel-default">
<div class="panel-heading">
<span class="title">Layer Statistics</span>
</div>
<div class="panel-body panel-chart">
<div id="chart_print">
<!-- See JS-->
</div>
</div>
</div>
<div class="panel panel-default" id="panel_print_info">
<div class="panel-heading">
<span class="title">Collected Data</span>
</div>
<table class="table table-bordered table-condensed">
<tr>
<th class="col-layertime hidden">Current Layer Time</th>
<th>Print Duration</th>
<th>Warm-Up Time</th>
<th>First Layer Time</th>
<th>First Layer Height</th>
</tr>
<tr>
<td class="col-layertime hidden" id="td_curr_layer">n/a</td>
<td id="td_print_duration">n/a</td>
<td id="td_warmup_time">n/a</td>
<td id="td_fl_time">n/a</td>
<td id="td_fl_height">n/a</td>
</tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="title">Estimations</span>
</div>
<table class="table table-bordered table-condensed" id="table_estimations">
<tr>
<th>Based on</th>
<th>Filament Usage</th>
<th>File Progress</th>
<th>Layer Time</th>
</tr>
<tr>
<th>Time Left</th>
<td id="tl_filament">n/a</td>
<td id="tl_file">n/a</td>
<td id="tl_layer">n/a</td>
</tr>
<tr>
<th>Est. End Time</th>
<td id="et_filament">n/a</td>
<td id="et_file">n/a</td>
<td id="et_layer">n/a</td>
</tr>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-md-pull-6 col-lg-2 col-lg-pull-7 col-left">
<div class="panel panel-default" id="panel_print_control">
<div class="panel-heading">
<span class="title">Print Control</span>
</div>
<div class="panel-body">
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-warning disabled" id="btn_pause" title="Pause current print (M25)">Pause Print</button>
</div>
<div class="btn-group hidden">
<button class="btn btn-danger" id="btn_cancel" title="Cancel paused print (M0)">Cancel</button>
</div>
</div>
<div class="checkbox fan-control disabled">
<label title="Enforce a predefined fan value">
<input type="checkbox" id="override_fan" disabled/> Override Fan Value
</label>
</div>
<div class="fan-control">
<input id="slider_fan_print" type="text" title="Set current fan value (via M106)" disabled/>
</div>
<div class="checkbox disabled">
<label title="Run M1 when the print has finished">
<input type="checkbox" id="auto_sleep" disabled/> Enable Auto-Sleep
</label>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="title">File Information</span>
</div>
<div class="panel-body">
<dl>
<dt>Size:</dt>
<dd id="dd_size">n/a</dd>
<dt>Object Height:</dt>
<dd id="dd_height">n/a</dd>
<dt>Layer Height:</dt>
<dd id="dd_layer_height">n/a</dd>
<dt>Filament Usage:</dt>
<dd id="dd_filament">n/a</dd>
<dt>Generated by:</dt>
<dd id="dd_generatedby">n/a</dd>
</dl>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 col-right">
<div class="panel panel-default">
<div class="panel-heading">
<span class="title">Speed Factor</span>
</div>
<div class="panel-body">
<input id="slider_speed" type="text" title="Set speed factor (via M220)"/>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 col-right">
<div class="panel panel-default">
<div class="panel-heading">
<span class="title">Extrusion Factors</span>
</div>
<div class="panel-body">
<table class="table-description">
<tr class="extr-1">
<td>Extruder 1:</td>
<td>
<input id="slider_extr_1" type="text" title="Set extrude factor override (via M221)" data-drive="0"/>
</td>
</tr>
<tr class="extr-2">
<td>Extruder 2:</td>
<td>
<input id="slider_extr_2" type="text" title="Set extrude factor override (via M221)" data-drive="1"/>
</td>
</tr>
<tr class="extr-3">
<td>Extruder 3:</td>
<td>
<input id="slider_extr_3" type="text" title="Set extrude factor override (via M221)" data-drive="2"/>
</td>
</tr>
<tr class="extr-4">
<td>Extruder 4:</td>
<td>
<input id="slider_extr_4" type="text" title="Set extrude factor override (via M221)" data-drive="3"/>
</td>
</tr>
<tr class="extr-5">
<td>Extruder 5:</td>
<td>
<input id="slider_extr_5" type="text" title="Set extrude factor override (via M221)" data-drive="4"/>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- G-Code Console -->
<div id="page_console" class="page">
<div class="row">
<form class="gcode-input">
<div class="col-xs-7 col-sm-7 col-md-8 col-lg-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Send G-Code..." disabled>
<div class="input-group-btn div-gcodes">
<button type="button" class="btn btn-default dropdown-toggle btn-gcodes disabled" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right ul-gcodes" role="menu">
</ul>
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-primary disabled" title="Send G-Code from input"><span class="glyphicon glyphicon-send"></span> Send</button>
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default" id="btn_clear_log" title="Clear G-Code Console"><span class="glyphicon glyphicon-trash"></span> Clear Log</button>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="container-fluid" id="console_log">
</div>
</div>
</div>
</div>
<!-- G-Code Files -->
<div id="page_files" class="page">
<div class="row">
<div class="col-md-12">
<table class="table-file-navigation">
<tr>
<td>
<ol class="breadcrumb breadcrumb-directory" id="ol_gcode_directory">
<li class="active"><span class="glyphicon glyphicon-folder-open"></span> G-Codes Directory</li>
<li class="pull-right"><span class="glyphicon glyphicon-level-up"></span> Go Up</li>
</ol>
</td>
<td class="hidden-xs hidden-sm hidden online-control">
<button class="btn btn-primary btn-upload disabled" title="Upload one or more G-Code files (drag&amp;drop is supported as well)" data-type="gcode" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload G-Code File(s)</button>
</td>
<td class="hidden-xs hidden online-control">
<button class="btn btn-info" id="btn_new_gcode_directory" title="Create a new directory"><span class="glyphicon glyphicon-folder-open"></span> Make new Directory</button>
</td>
</tr>
</table>
<h1 class="text-center text-muted">Connect to your Duet to display G-Code files</h1>
<table class="table table-bordered table-files table-hover table-striped hidden" id="table_gcode_files">
<thead>
<tr>
<th></th>
<th>File Name</th>
<th class="hidden-xs">Size</th>
<th>Object Height</th>
<th>Layer Height</th>
<th>Filament Usage</th>
<th class="hidden-xs hidden-sm">Generated by</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- Macro Files -->
<div id="page_macros" class="page">
<div class="row">
<div class="col-md-12">
<table class="table-file-navigation">
<tr>
<td>
<ol class="breadcrumb breadcrumb-directory" id="ol_macro_directory">
<li class="active"><span class="glyphicon glyphicon-folder-open"></span> Macros Directory</li>
<li class="pull-right"><span class="glyphicon glyphicon-level-up"></span> Go Up</li>
</ol>
</td>
<td class="hidden-xs hidden-sm hidden online-control">
<button class="btn btn-primary btn-upload disabled" title="Upload one or more macro files (drag&amp;drop is supported as well)" data-type="macro" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload Macro File(s)</button>
</td>
<td class="hidden-xs hidden online-control">
<button class="btn btn-info" id="btn_new_macro_directory" title="Create a new directory"><span class="glyphicon glyphicon-folder-open"></span> Make new Directory</button>
</td>
</tr>
</table>
<h1 class="text-center text-muted">Connect to your Duet to display Macro files</h1>
</div>
<div class="col-xs-12 col-sm-10 col-sm-push-1 col-md-8 col-md-push-2 col-lg-6 col-lg-push-3">
<table class="table table-bordered table-files table-hover table-striped hidden" id="table_macro_files">
<thead>
<tr>
<th></th>
<th>File Name</th>
<th>Size</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- Spools -->
<div id="page_spools" class="page">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<span>Exchange Filament</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="input_bowden_length">Bowden Tube Length:</label>
<div class="input-group">
<input type="number" class="form-control" id="input_bowden_length" value="300" disabled>
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="btn-group-vertical btn-group-vertical-justified">
<div class="btn-group">
<button class="btn btn-danger btn-retract disabled" id="btn_unload_filament" title="Unload current filament spool"><span class="glyphicon glyphicon-arrow-up"></span> Unload Filament</button>
</div>
<div class="btn-group">
<button class="btn btn-success btn-extrude disabled" id="btn_load_filament" title="Load new filament spool"><span class="glyphicon glyphicon-arrow-down"></span> Load Filament</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hidden">
<h1 class="text-center text-muted">TODO: charts for each spool, per-spool values like filament total, filament printed and filament left</h1>
</div>
</div>
</div>
<!-- Maintenance -->
<div id="page_maintenance" class="page">
<div class="row">
<div class="col-md-12">
<!-- TODO: maintenance reminder and bed levelling assistant -->
</div>
</div>
</div>
<!-- Settings -->
<div id="page_settings" class="page">
<form id="frm_settings">
<!-- Page Selector -->
<ul class="nav nav-tabs">
<li class="active"><a href="#page_general" data-toggle="tab">General</a></li>
<li><a href="#page_config" data-toggle="tab">Configuration File</a></li>
<li><a href="#page_listitems" data-toggle="tab">List Items</a></li>
<li><a href="#page_tools" data-toggle="tab">Tools</a></li>
<!--<li><a href="#page_advanced" data-toggle="tab">Advanced</a></li>-->
</ul>
<div class="tab-content">
<!-- General Settings -->
<div class="tab-pane row active" id="page_general">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-left">
<div class="panel panel-default">
<div class="panel-heading">
<span>Software Information</span>
</div>
<div class="panel-body">
<table id="software_info">
<tr>
<th>Firmware Name:</th>
<td id="firmware_name">n/a</td>
</tr>
<tr>
<th>Firmware Version:</th>
<td id="firmware_version">n/a</td>
</tr>
<tr>
<th>Web Interface Version:</th>
<td id="web_version">HTML: 1.06</td>
</tr>
</table>
<span id="copyright">Web Interface by Christian Hammacher<br/>Licensed under the terms of the <a href="http://www.gnu.org/licenses/gpl-2.0.html" target="blank">GPL v2</a></span>
</div>
</div>
<div class="panel panel-default hidden-xs hidden-sm">
<div class="panel-heading">
<span>File Upload for /sys and /www Directories</span>
</div>
<div class="panel-body">
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-lg btn-info btn-upload disabled" title="Upload one or more files to the /sys or /www directory (drag&amp;drop is supported as well)" data-type="generic" data-style="btn-info"><span class="glyphicon glyphicon-cloud-upload"></span> Upload File(s)</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<span>Appearance and Behavior</span>
</div>
<div class="panel-body">
<div class="checkbox">
<label title="Connect automatically to the Duet once the web interface is ready">
<input type="checkbox" id="auto_connect" /> Connect automatically
</label>
</div>
<div class="checkbox">
<label title="Use half Z movements for more accurate Z positioning">
<input type="checkbox" id="half_z" /> Half Z Movements
</label>
</div>
<div class="checkbox">
<label title="Log any successful G-Code in the G-Code Console">
<input type="checkbox" id="log_success" checked /> Log any successful G-Code
</label>
</div>
<div class="checkbox">
<label title="Convert every G-Code to Upper-Case before sending them">
<input type="checkbox" id="uppercase_gcode" checked /> Always Convert G-Codes to Upper-Case
</label>
</div>
<div class="checkbox">
<label title="Display file sizes with a base of 1024 instead of 1000">
<input type="checkbox" id="use_kib" /> Display File Sizes with Binary Prefix
</label>
</div>
<div class="checkbox">
<label title="Show fan sliders to utilize M106 effectively">
<input type="checkbox" id="fan_sliders" checked /> Show Fan Sliders
</label>
</div>
<div class="checkbox">
<label title="Show a small panel on the Control page to toggle ATX power">
<input type="checkbox" id="show_atx" checked /> Show ATX Power control
</label>
</div>
<div class="checkbox">
<label title="Confirm emergency stop by displaying a message box">
<input type="checkbox" id="confirm_stop" /> Confirm Emergency STOP
</label>
</div>
<label id="label_feedrate" for="move_feedrate">Default Move Button Feedrate:</label>
<div class="input-group">
<input type="number" id="move_feedrate" class="form-control" title="Default Feedrate for Head Movement controls" value="6000">
<span class="input-group-addon">mm/min</span>
</div>
<label>Language:</label>
<div class="dropdown" id="dropdown_language">
<button class="btn btn-default dropdown-toggle" type="button" id="btn_language" data-language="en" data-toggle="dropdown">
<span>English</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-language="en" href="#">English</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-right">
<div class="panel panel-default" id="panel_ui_timing">
<div class="panel-heading">
<span>UI Timing</span>
</div>
<div class="panel-body">
<label for="update_interval">Status Update Interval:</label>
<div class="input-group">
<input type="number" id="update_interval" class="form-control" title="Interval at which status updates are requested">
<span class="input-group-addon">ms</span>
</div>
<label for="extended_status_interval">Extended Status Update after every:</label>
<div class="input-group">
<input type="number" id="extended_status_interval" class="form-control" title="Extended status updates are requested after each n-th status response">
<span class="input-group-addon">th response</span>
</div>
<label for="reconnect_delay">Reconnect Delay on Halt:</label>
<div class="input-group">
<input type="number" id="reconnect_delay" class="form-control" title="Time to wait for a reconnect after an emergency stop was reported">
<span class="input-group-addon">ms</span>
</div>
<label for="ajax_timeout">AJAX Timeout:</label>
<div class="input-group">
<input type="number" id="ajax_timeout" class="form-control" title="Maximum time to wait for an AJAX request">
<span class="input-group-addon">ms</span>
</div>
</div>
</div>
</div>
</div>
<!-- List Items -->
<div class="tab-pane row" id="page_listitems">
<div class="col-md-4 col-lg-4 col-left">
<div class="panel panel-default">
<div class="panel-heading">
<span>Default G-Codes</span>
</div>
<table class="table table-striped" id="table_gcodes">
<thead>
<tr>
<th>G-Code</th>
<th>Description</th>
<th></th>
</tr>
</thead>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span>Add new G-Code</span>
</div>
<div class="panel-body">
<table id="table_add_gcode">
<tr>
<td>
<label for="input_gcode">G-Code:</label>
<input type="text" class="form-control" id="input_gcode">
</td>
<td>
<label for="input_gcode_description">Description:</label>
<input type="text" class="form-control" id="input_gcode_description">
</td>
</tr>
<tr>
<td colspan="2" class="text-center">
<button class="btn btn-success disabled" id="btn_add_gcode" title="Add new G-Code item"><span class="glyphicon glyphicon-plus"></span> Add G-Code</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-lg-5">
<div class="panel panel-default" id="panel_head_temps">
<div class="panel-heading">
<span>Default Heater Temperatures</span>
</div>
<div class="panel-body">
<label>Which temperatures do you want to manage?</label>
<div class="radio">
<label>
<input type="radio" name="temp_selection" value="active" checked>Active Temperatures
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="temp_selection" value="standby">Standby Temperatures
</label>
</div>
<ul class="list-group temp-list" id="ul_active_temps"></ul>
<ul class="list-group temp-list hidden" id="ul_standby_temps"></ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span>Add new Temperature</span>
</div>
<div class="panel-body">
<table class="table-add-temp">
<tr>
<td>
<label for="input_add_head_temp">Temperature:</label>
<div class="input-group">
<input type="number" class="form-control" id="input_add_head_temp">
<span class="input-group-addon">°C</span>
</div>
</td>
<td>
<button class="btn btn-success disabled" id="btn_add_head_temp" title="Add new temperature item"><span class="glyphicon glyphicon-plus"></span> Add Temp</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 col-right">
<div class="panel panel-default">
<div class="panel-heading">
<span>Default Bed and Chamber Temperatures</span>
</div>
<div class="panel-body">
<ul class="list-group temp-list" id="ul_bed_temps"></ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span>Add new Temperature</span>
</div>
<div class="panel-body">
<table class="table-add-temp">
<tr>
<td>
<label for="input_add_bed_temp">Temperature:</label>
<div class="input-group">
<input type="number" class="form-control" id="input_add_bed_temp">
<span class="input-group-addon">°C</span>
</div>
</td>
<td>
<button class="btn btn-success disabled" id="btn_add_bed_temp"><span class="glyphicon glyphicon-plus" title="Add new temperature item"></span> Add Temp</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Configuration File -->
<div class="tab-pane row" id="page_config">
<div class="col-md-12" id="div_config">
<h1 class="text-center text-muted">Connect to your Duet to display the configuration file</h1>
</div>
</div>
<!-- Tools -->
<div class="tab-pane row" id="page_tools">
<div class="col-sm-12 col-md-7 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<span>Define new Tool</span>
</div>
<div class="panel-body">
<table id="table_define_tool">
<tr>
<td rowspan="2">
<label for="input_tool_number">Tool Number:</label>
<input type="number" min="0" max="255" value="127" class="form-control" id="input_tool_number" disabled>
</td>
<td>
<label>Associated Heater(s):</label>
<div class="btn-group btn-group-justified" data-toggle="buttons" id="check_heaters">
<label class="btn btn-default disabled" title="Bed">
<input type="checkbox" name="tool_heaters" value="0" disabled> Bed (0)
</label>
<label class="btn btn-primary active disabled" title="Heater 1">
<input type="checkbox" name="tool_heaters" value="1" checked disabled> 1
</label>
<label class="btn btn-default disabled" title="Heater 2">
<input type="checkbox" name="tool_heaters" value="2" disabled> 2
</label>
<label class="btn btn-default disabled" title="Heater 3">
<input type="checkbox" name="tool_heaters" value="3" disabled> 3
</label>
<label class="btn btn-default disabled" title="Heater 4">
<input type="checkbox" name="tool_heaters" value="4" disabled> 4
</label>
<label class="btn btn-default disabled" title="Heater 5">
<input type="checkbox" name="tool_heaters" value="5" disabled> 5
</label>
</div>
</td>
</tr>
<tr>
<td>
<label>Associated Drive(s):</label>
<div class="btn-group btn-group-justified" data-toggle="buttons" id="check_drives">
<label class="btn btn-primary active disabled" title="Extruder 1">
<input type="checkbox" name="tool_drives" value="0" checked disabled> 0
</label>
<label class="btn btn-default disabled" title="Extruder 2">
<input type="checkbox" name="tool_drives" value="1" disabled> 1
</label>
<label class="btn btn-default disabled" title="Extruder 3">
<input type="checkbox" name="tool_drives" value="2" disabled> 2
</label>
<label class="btn btn-default disabled" title="Extruder 4">
<input type="checkbox" name="tool_drives" value="3" disabled> 3
</label>
<label class="btn btn-default disabled" title="Extruder 5">
<input type="checkbox" name="tool_drives" value="4" disabled> 4
</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="text-center">
<button class="btn btn-success disabled" id="btn_add_tool" title="Define a new tool"><span class="glyphicon glyphicon-plus"></span> Add Tool</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Advanced -->
<div class="tab-pane row" id="page_advanced">
<!-- TODO -->
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-primary" title="Apply new settings from this page"><span class="glyphicon glyphicon-ok"></span> Apply Settings</button>
<button class="btn btn-lg btn-warning" id="btn_reset_settings" title="Overwrite all saved settings with default values"><span class="glyphicon glyphicon-erase"></span> Load Factory Defaults</button>
</div>
</div>
</form>
</div>
<!-- Help -->
<div id="page_help" class="page">
<div class="row">
<div class="col-md-12">
<!-- TODO -->
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar Continuation -->
<div class="row">
<div class="col-sm-3 col-md-2 col-lg-2 sidebar sidebar-continuation"></div>
</div>
</div>
<!-- Modal dialogs -->
<div class="modal fade" id="modal_pass_input">
<div class="modal-dialog modal-md">
<div class="modal-content">
<form id="form_password">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Password required</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input_password">Please enter your password:</label>
<input type="password" class="form-control" id="input_password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Verify</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="modal_confirmation">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><!-- See JS--></h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Yes</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_textinput">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><!-- See JS--></h4>
</div>
<div class="modal-body">
<p></p>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="modal_message">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><!-- See JS--></h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> OK</button>
</div>
</div>
</div>
</div>
<input type="file" id="input_file_upload" class="hidden" multiple>
<div class="modal fade" id="modal_upload" data-backdrop="static">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><!-- See JS --></h4>
</div>
<div class="modal-body">
<p>Please wait while the following files are being uploaded:</p>
<table id="table_upload_files">
<thead>
<tr>
<th>Filename</th>
<th>Size</th>
<th>Progress</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="btn_cancel_upload"><span class="glyphicon glyphicon-remove"></span> Cancel Upload(s)</button>
<button type="button" class="btn btn-success hidden" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Close</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.flot.navigate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/interface.js"></script>
</body>
</html>