Skip to content

Commit

Permalink
Merge pull request #106 from synman:synman/issue103
Browse files Browse the repository at this point in the history 
Easier jogging - joystick and keyboard?
  • Loading branch information
@synman
synman authored Dec 30, 2022
2 parents 0cdfdfb + 0312576 commit e620fa2
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 12 deletions.
126 changes: 124 additions & 2 deletions octoprint_bettergrblsupport/static/js/bettergrblsupport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,6 @@ $(function() {

self.onWebcamLoaded = function() {
if (self.webcamLoaded()) return;

console.log("Webcam stream loaded");
self.webcamLoaded(true);
self.webcamError(false);
};
Expand Down Expand Up @@ -1108,6 +1106,130 @@ $(function() {
}
return span + " " + offset;
};

self.onKeyDown = function (data, event) {
if (!self.settings.feature_keyboardControl()) return;

var button = undefined;
var visualizeClick = true;
var simulateTouch = false;

switch (event.which) {
case 37: // left arrow key
// X-
button = $("#control-west");
simulateTouch = true;
break;
case 38: // up arrow key
// Y+
button = $("#control-north");
simulateTouch = true;
break;
case 39: // right arrow key
// X+
button = $("#control-east");
simulateTouch = true;
break;
case 40: // down arrow key
// Y-
button = $("#control-south");
simulateTouch = true;
break;
case 49: // number 1
case 97: // numpad 1
// toggle operator
button = $("#control-distance-operator");
break;
case 50: // number 2
case 98: // numpad 2
// Distance 0.1
button = $("#control-distance-0");
break;
case 51: // number 3
case 99: // numpad 3
// Distance 1
button = $("#control-distance-1");
break;
case 52: // number 4
case 100: // numpad 4
// Distance 5
button = $("#control-distance-2");
break;
case 53: // number 5
case 101: // numpad 5
// Distance 10
button = $("#control-distance-3");
break;
case 54: // number 6
case 102: // numpad 6
// Distance 50
button = $("#control-distance-4");
break;
case 55: // number 7
case 103: // numpad 7
// Distance 100
button = $("#control-distance-5");
break;
case 33: // page up key
case 87: // w key
// z lift up
button = $("#control-zup");
break;
case 34: // page down key
case 83: // s key
// z lift down
button = $("#control-zdown");

break;
case 36: // home key
// xy home
button = $("#control-home");
$("#control-axes-XY").click();
break;
case 35: // end key
// z home
button = $("#control-home");
$("#control-axes-Z").click();
break;
default:
event.preventDefault();
return false;
}

if (button === undefined) {
return false;
} else {
event.preventDefault();
if (visualizeClick) {
button.addClass("active");
setTimeout(function () {
button.removeClass("active");
}, 150);
}
if (simulateTouch) {
button.mousedown();
setTimeout(function () {
button.mouseup();
}, 150);
} else {
button.click();
}
}
};

$(document).ready(function() {
$(this).keydown(function(e) {
if (OctoPrint.coreui.selectedTab != undefined &&
OctoPrint.coreui.selectedTab == "#tab_plugin_bettergrblsupport" &&
OctoPrint.coreui.browserTabVisible && $(":focus").length == 0) {
self.onKeyDown(undefined, e);
}
});

$(this).keyup(function(e) {
// console.log("keyup");
});
});
}

// cute little hack for removing "Print" from the start button
Expand Down
20 changes: 10 additions & 10 deletions octoprint_bettergrblsupport/templates/bettergrblsupport_tab.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
<td colspan=3 align="center">
<span class="btn-group" data-toggle="buttons-radio" style="margin: 0px 0px 10px 0px;">
<!-- ko foreach: origin_axes -->
<button type="button" class="btn origin_axis" style="border: 1px solid;" data-bind="click: function() { $root.origin_axis($data) }, text: $data, css: { active: $root.origin_axis() === $data }"></button>
<button type="button" class="btn origin_axis" style="border: 1px solid;" data-bind="attr: { id: 'control-axes-' + $data }, click: function() { $root.origin_axis($data) }, text: $data, css: { active: $root.origin_axis() === $data }"></button>
<!-- /ko -->
</span>
</td>
Expand All @@ -112,15 +112,15 @@
</tr>
<tr>
<td style="padding: 0px 0px 10px 0px;">
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('up')}">
<button id="control-zup" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('up')}">
<i class="fa fa-arrow-up"></i>
</button>
</td>
<td style="padding: 0px 0px 10px 0px;">
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('northwest')}, mousedown: function() {jog('northwest')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-up" style="transform: rotate(-45deg);"></i>
</button>
<button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('north')}, mousedown: function() {jog('north')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<button id="control-north" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('north')}, mousedown: function() {jog('north')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-up"></i>
</button>
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('northeast')}, mousedown: function() {jog('northeast')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
Expand All @@ -135,28 +135,28 @@
</button>
</td>
<td style="padding: 0px 0px 10px 0px;">
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('west')}, mousedown: function() {jog('west')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<button id="control-west" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('west')}, mousedown: function() {jog('west')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-left"></i>
</button>
<button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="enable: is_operational() && !is_printing() && state() == 'Idle', click: function() {moveHead('home')}">
<button id="control-home" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="enable: is_operational() && !is_printing() && state() == 'Idle', click: function() {moveHead('home')}">
<i class="fa fa-home"></i>
</button>
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('east')}, mousedown: function() {jog('east')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<button id="control-east" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('east')}, mousedown: function() {jog('east')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-right"></i>
</button>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 0px;">
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('down')}">
<button id="control-zdown" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('down')}">
<i class="fa fa-arrow-down"></i>
</button>
</td>
<td style="padding: 0px 0px 20px 0px;">
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('southwest')}, mousedown: function() {jog('southwest')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-down" style="transform: rotate(45deg);"></i>
</button>
<button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('south')}, mousedown: function() {jog('south')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<button id="control-south" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('south')}, mousedown: function() {jog('south')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
<i class="fa fa-arrow-down"></i>
</button>
<button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('southeast')}, mousedown: function() {jog('southeast')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
Expand All @@ -168,12 +168,12 @@
<td colspan=3 align="center" class="distance">
<span>
<span>
<button type="button" class="btn" style="border: 1px solid; width: 35px; margin: 5px 0px 0px 0px" data-bind="click: function() { operatorClicked() }, text: operator"></button>
<button id="control-distance-operator" type="button" class="btn" style="border: 1px solid; width: 35px; margin: 5px 0px 0px 0px" data-bind="click: function() { operatorClicked() }, text: operator"></button>
</span>
<span style="margin: 0px 1px 0px 1px">&nbsp;</span>
<span align="center" class="btn-group">
<!-- ko foreach: distances -->
<button type="button" class="btn dist" style="border: 1px solid; margin: 5px 0px 0px 0px" data-bind="click: function() { $parent.distanceClicked($data) }, text: $data, enable: $root.operator() != 'J'"></button>
<button id="control-distance-$data" type="button" class="btn dist" style="border: 1px solid; margin: 5px 0px 0px 0px" data-bind="attr: { id: 'control-distance-' + $index() }, click: function() { $parent.distanceClicked($data) }, text: $data, enable: $root.operator() != 'J'"></button>
<!-- /ko -->
</span>
<span style="margin: 0px 1px 0px 1px">&nbsp;</span>
Expand Down

0 comments on commit e620fa2

Please sign in to comment.