q3k
/
OctoPrint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modified the appearance of the jogging controls with a view to adding finer control

master
Richard Mitchell 2013-02-09 11:22:09 +00:00
parent 9f52e90e44
commit 878bee784a
2 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
octoprint/static/css/ui.css
View File

@ -144,4 +144,28 @@ table th.timelapse_files_action, table td.timelapse_files_action {
.overflow_visible {
overflow: visible !important;
}
}
#controls {
overflow: hidden;
}
#controls .jog-panel {
float: left;
margin-right: 20px;
}
#controls .jog-panel > h4 {
border-bottom: 1px solid #ddd;
}
#controls .jog-panel > div {
text-align: center;
}
#controls .box {
width: 40px;
height: 40px;
margin-right: 20px;
margin-bottom: 20px;
}

44
octoprint/templates/index.html
View File

@ -169,23 +169,33 @@
</div>
</div>
<div class="tab-pane" id="controls">
<div style="width: 350px; height: 70px">
<div style="width: 70px; float: left;">&nbsp;</div>
<div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', 10) }">Y+</button></div>
<div style="width: 70px; float: left;">&nbsp;</div>
<div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', 10) }">Z+</button></div>
<!-- XY jogging control panel -->
<div id="jog_xy" class="jog-panel">
<h4>XY</h4>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', 10) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', -10) }"><i class="icon-arrow-left"></i></button>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }"><i class="icon-home"></i></button>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', 10) }"><i class="icon-arrow-right"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', -10) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
<div style="width: 350px; height: 70px">
<div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', -10) }">X-</button></div>
<div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }">Home</button></div>
<div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', 10) }">X+</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(), click: function() { $root.sendHomeCommand('Z') }">Home</button></div>
</div>
<div style="width: 350px; height: 70px">
<div style="width: 70px; float: left;">&nbsp;</div>
<div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', -10) }">Y-</button></div>
<div style="width: 70px; float: left;">&nbsp;</div>
<div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', -10) }">Z-</button></div>
<!-- Z jogging control panel -->
<div id="jog_z" class="jog-panel">
<h4>Z</h4>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', 10) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('Z') }"><i class="icon-home"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', -10) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
<div data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
@ -433,4 +443,4 @@
<!--<script type="text/javascript" src="{{ url_for('static', filename='gcodeviewer/lib/jquery-ui-1.9.0.custom.js') }}"></script>-->
</body>
</html>
</html>