Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Easier jogging - joystick and keyboard? #106

Merged
merged 1 commit into from
Dec 30, 2022
Merged

Easier jogging - joystick and keyboard? #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 124 additions & 2 deletions octoprint_bettergrblsupport/static/js/bettergrblsupport.js
View file
Open in desktop
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
Open in desktop
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