22c73d831a
Preprocessing for better performancy, unit tests for preprocessing, controls don't need a type anymore (makes things way less complicated and repetitive)
519 lines
18 KiB
JavaScript
519 lines
18 KiB
JavaScript
$(function() {
|
|
function ControlViewModel(parameters) {
|
|
var self = this;
|
|
|
|
self.loginState = parameters[0];
|
|
self.settings = parameters[1];
|
|
|
|
self._createToolEntry = function () {
|
|
return {
|
|
name: ko.observable(),
|
|
key: ko.observable()
|
|
}
|
|
};
|
|
|
|
self.isErrorOrClosed = ko.observable(undefined);
|
|
self.isOperational = ko.observable(undefined);
|
|
self.isPrinting = ko.observable(undefined);
|
|
self.isPaused = ko.observable(undefined);
|
|
self.isError = ko.observable(undefined);
|
|
self.isReady = ko.observable(undefined);
|
|
self.isLoading = ko.observable(undefined);
|
|
|
|
self.extrusionAmount = ko.observable(undefined);
|
|
self.controls = ko.observableArray([]);
|
|
|
|
self.tools = ko.observableArray([]);
|
|
|
|
self.feedRate = ko.observable(100);
|
|
self.flowRate = ko.observable(100);
|
|
|
|
self.feedbackControlLookup = {};
|
|
|
|
self.controlsFromServer = [];
|
|
self.additionalControls = [];
|
|
|
|
self.webcamDisableTimeout = undefined;
|
|
|
|
self.keycontrolActive = ko.observable(false);
|
|
self.keycontrolHelpActive = ko.observable(false);
|
|
self.keycontrolPossible = ko.computed(function () {
|
|
return self.isOperational() && !self.isPrinting() && self.loginState.isUser() && !$.browser.mobile;
|
|
});
|
|
self.showKeycontrols = ko.computed(function () {
|
|
return self.keycontrolActive() && self.keycontrolPossible();
|
|
});
|
|
|
|
self.settings.printerProfiles.currentProfileData.subscribe(function () {
|
|
self._updateExtruderCount();
|
|
self.settings.printerProfiles.currentProfileData().extruder.count.subscribe(self._updateExtruderCount);
|
|
});
|
|
self._updateExtruderCount = function () {
|
|
var tools = [];
|
|
|
|
var numExtruders = self.settings.printerProfiles.currentProfileData().extruder.count();
|
|
if (numExtruders > 1) {
|
|
// multiple extruders
|
|
for (var extruder = 0; extruder < numExtruders; extruder++) {
|
|
tools[extruder] = self._createToolEntry();
|
|
tools[extruder]["name"](gettext("Tool") + " " + extruder);
|
|
tools[extruder]["key"]("tool" + extruder);
|
|
}
|
|
} else {
|
|
// only one extruder, no need to add numbers
|
|
tools[0] = self._createToolEntry();
|
|
tools[0]["name"](gettext("Hotend"));
|
|
tools[0]["key"]("tool0");
|
|
}
|
|
|
|
self.tools(tools);
|
|
};
|
|
|
|
self.fromCurrentData = function (data) {
|
|
self._processStateData(data.state);
|
|
};
|
|
|
|
self.fromHistoryData = function (data) {
|
|
self._processStateData(data.state);
|
|
};
|
|
|
|
self._processStateData = function (data) {
|
|
self.isErrorOrClosed(data.flags.closedOrError);
|
|
self.isOperational(data.flags.operational);
|
|
self.isPaused(data.flags.paused);
|
|
self.isPrinting(data.flags.printing);
|
|
self.isError(data.flags.error);
|
|
self.isReady(data.flags.ready);
|
|
self.isLoading(data.flags.loading);
|
|
};
|
|
|
|
self.onEventRegisteredMessageReceived = function(payload) {
|
|
if (payload.key in self.feedbackControlLookup) {
|
|
var outputs = self.feedbackControlLookup[payload.key];
|
|
_.each(payload.outputs, function(value, key) {
|
|
if (outputs.hasOwnProperty(key)) {
|
|
outputs[key](value);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
self.rerenderControls = function () {
|
|
var allControls = self.controlsFromServer.concat(self.additionalControls);
|
|
self.controls(self._processControls(allControls))
|
|
};
|
|
|
|
self.requestData = function () {
|
|
$.ajax({
|
|
url: API_BASEURL + "printer/command/custom",
|
|
method: "GET",
|
|
dataType: "json",
|
|
success: function (response) {
|
|
self._fromResponse(response);
|
|
}
|
|
});
|
|
};
|
|
|
|
self._fromResponse = function (response) {
|
|
self.controlsFromServer = response.controls;
|
|
self.rerenderControls();
|
|
};
|
|
|
|
self._processControls = function (controls) {
|
|
for (var i = 0; i < controls.length; i++) {
|
|
controls[i] = self._processControl(controls[i]);
|
|
}
|
|
return controls;
|
|
};
|
|
|
|
self._processControl = function (control) {
|
|
if (control.hasOwnProperty("processed") && control.processed) {
|
|
return control;
|
|
}
|
|
|
|
if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output")) {
|
|
control.output = ko.observable("");
|
|
if (!self.feedbackControlLookup.hasOwnProperty(control.key)) {
|
|
self.feedbackControlLookup[control.key] = {};
|
|
}
|
|
self.feedbackControlLookup[control.key][control.template_key] = control.output;
|
|
}
|
|
|
|
if (control.hasOwnProperty("children")) {
|
|
control.children = self._processControls(control.children);
|
|
if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal")) {
|
|
control.layout = "vertical";
|
|
}
|
|
}
|
|
|
|
if (control.hasOwnProperty("input")) {
|
|
for (var i = 0; i < control.input.length; i++) {
|
|
control.input[i].value = ko.observable(control.input[i].default);
|
|
if (!control.input[i].hasOwnProperty("slider")) {
|
|
control.input[i].slider = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
var js;
|
|
if (control.hasOwnProperty("javascript")) {
|
|
js = control.javascript;
|
|
|
|
// if js is a function everything's fine already, but if it's a string we need to eval that first
|
|
if (!_.isFunction(js)) {
|
|
control.javascript = function (data) {
|
|
eval(js);
|
|
};
|
|
}
|
|
}
|
|
|
|
if (control.hasOwnProperty("enabled")) {
|
|
js = control.enabled;
|
|
|
|
// if js is a function everything's fine already, but if it's a string we need to eval that first
|
|
if (!_.isFunction(js)) {
|
|
control.enabled = function (data) {
|
|
return eval(js);
|
|
}
|
|
}
|
|
}
|
|
|
|
control.processed = true;
|
|
return control;
|
|
};
|
|
|
|
self.isCustomEnabled = function (data) {
|
|
if (data.hasOwnProperty("enabled")) {
|
|
return data.enabled(data);
|
|
} else {
|
|
return self.isOperational() && self.loginState.isUser();
|
|
}
|
|
};
|
|
|
|
self.clickCustom = function (data) {
|
|
if (data.hasOwnProperty("javascript")) {
|
|
data.javascript(data);
|
|
} else {
|
|
self.sendCustomCommand(data);
|
|
}
|
|
};
|
|
|
|
self.sendJogCommand = function (axis, multiplier, distance) {
|
|
if (typeof distance === "undefined")
|
|
distance = $('#jog_distance button.active').data('distance');
|
|
if (self.settings.printerProfiles.currentProfileData() && self.settings.printerProfiles.currentProfileData()["axes"] && self.settings.printerProfiles.currentProfileData()["axes"][axis] && self.settings.printerProfiles.currentProfileData()["axes"][axis]["inverted"]()) {
|
|
multiplier *= -1;
|
|
}
|
|
|
|
var data = {
|
|
"command": "jog"
|
|
};
|
|
data[axis] = distance * multiplier;
|
|
|
|
self.sendPrintHeadCommand(data);
|
|
};
|
|
|
|
self.sendHomeCommand = function (axis) {
|
|
self.sendPrintHeadCommand({
|
|
"command": "home",
|
|
"axes": axis
|
|
});
|
|
};
|
|
|
|
self.sendFeedRateCommand = function () {
|
|
self.sendPrintHeadCommand({
|
|
"command": "feedrate",
|
|
"factor": self.feedRate()
|
|
});
|
|
};
|
|
|
|
self.sendExtrudeCommand = function () {
|
|
self._sendECommand(1);
|
|
};
|
|
|
|
self.sendRetractCommand = function () {
|
|
self._sendECommand(-1);
|
|
};
|
|
|
|
self.sendFlowRateCommand = function () {
|
|
self.sendToolCommand({
|
|
"command": "flowrate",
|
|
"factor": self.flowRate()
|
|
});
|
|
};
|
|
|
|
self._sendECommand = function (dir) {
|
|
var length = self.extrusionAmount();
|
|
if (!length) length = self.settings.printer_defaultExtrusionLength();
|
|
|
|
self.sendToolCommand({
|
|
command: "extrude",
|
|
amount: length * dir
|
|
});
|
|
};
|
|
|
|
self.sendSelectToolCommand = function (data) {
|
|
if (!data || !data.key()) return;
|
|
|
|
self.sendToolCommand({
|
|
command: "select",
|
|
tool: data.key()
|
|
});
|
|
};
|
|
|
|
self.sendPrintHeadCommand = function (data) {
|
|
$.ajax({
|
|
url: API_BASEURL + "printer/printhead",
|
|
type: "POST",
|
|
dataType: "json",
|
|
contentType: "application/json; charset=UTF-8",
|
|
data: JSON.stringify(data)
|
|
});
|
|
};
|
|
|
|
self.sendToolCommand = function (data) {
|
|
$.ajax({
|
|
url: API_BASEURL + "printer/tool",
|
|
type: "POST",
|
|
dataType: "json",
|
|
contentType: "application/json; charset=UTF-8",
|
|
data: JSON.stringify(data)
|
|
});
|
|
};
|
|
|
|
self.sendCustomCommand = function (command) {
|
|
if (!command)
|
|
return;
|
|
|
|
var callback = function () {
|
|
$.ajax({
|
|
url: API_BASEURL + "printer/command",
|
|
type: "POST",
|
|
dataType: "json",
|
|
contentType: "application/json; charset=UTF-8",
|
|
data: JSON.stringify(data)
|
|
})
|
|
};
|
|
var data = undefined;
|
|
if (command.hasOwnProperty("command")) {
|
|
// single command
|
|
data = {"command": command.command};
|
|
} else if (command.hasOwnProperty("commands")) {
|
|
// multi command
|
|
data = {"commands": command.commands};
|
|
} else if (command.hasOwnProperty("script")) {
|
|
data = {"script": command.script};
|
|
if (command.hasOwnProperty("context")) {
|
|
data["context"] = command.context;
|
|
}
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
if (command.hasOwnProperty("input")) {
|
|
// parametric command(s)
|
|
data["parameters"] = {};
|
|
_.each(command.input, function(input) {
|
|
if (!input.hasOwnProperty("parameter") || !input.hasOwnProperty("value")) {
|
|
return;
|
|
}
|
|
|
|
data["parameters"][input.parameter] = input.value();
|
|
});
|
|
}
|
|
|
|
if (command.confirm) {
|
|
var confirmationDialog = $("#confirmation_dialog");
|
|
var confirmationDialogAck = $(".confirmation_dialog_acknowledge", confirmationDialog);
|
|
|
|
$(".confirmation_dialog_message", confirmationDialog).text(command.confirm);
|
|
confirmationDialogAck.unbind("click");
|
|
confirmationDialogAck.bind("click", function (e) {
|
|
e.preventDefault();
|
|
$("#confirmation_dialog").modal("hide");
|
|
callback();
|
|
});
|
|
confirmationDialog.modal("show");
|
|
} else {
|
|
callback();
|
|
}
|
|
|
|
};
|
|
|
|
self.displayMode = function (customControl) {
|
|
if (customControl.hasOwnProperty("children")) {
|
|
return "customControls_containerTemplate";
|
|
} else {
|
|
return "customControls_controlTemplate";
|
|
}
|
|
};
|
|
|
|
self.rowCss = function (customControl) {
|
|
var span = "span2";
|
|
var offset = "";
|
|
if (customControl.hasOwnProperty("width")) {
|
|
span = "span" + customControl.width;
|
|
}
|
|
if (customControl.hasOwnProperty("offset")) {
|
|
offset = "offset" + customControl.offset;
|
|
}
|
|
return span + " " + offset;
|
|
};
|
|
|
|
self.onStartup = function () {
|
|
self.requestData();
|
|
};
|
|
|
|
self.onTabChange = function (current, previous) {
|
|
if (current == "#control") {
|
|
if (self.webcamDisableTimeout != undefined) {
|
|
clearTimeout(self.webcamDisableTimeout);
|
|
}
|
|
var webcamImage = $("#webcam_image");
|
|
var currentSrc = webcamImage.attr("src");
|
|
if (currentSrc === undefined || currentSrc.trim() == "") {
|
|
var newSrc = CONFIG_WEBCAM_STREAM;
|
|
if (CONFIG_WEBCAM_STREAM.lastIndexOf("?") > -1) {
|
|
newSrc += "&";
|
|
} else {
|
|
newSrc += "?";
|
|
}
|
|
newSrc += new Date().getTime();
|
|
|
|
webcamImage.attr("src", newSrc);
|
|
}
|
|
} else if (previous == "#control") {
|
|
// only disable webcam stream if tab is out of focus for more than 5s, otherwise we might cause
|
|
// more load by the constant connection creation than by the actual webcam stream
|
|
self.webcamDisableTimeout = setTimeout(function () {
|
|
$("#webcam_image").attr("src", "");
|
|
}, 5000);
|
|
}
|
|
};
|
|
|
|
self.onAllBound = function (allViewModels) {
|
|
var additionalControls = [];
|
|
_.each(allViewModels, function (viewModel) {
|
|
if (viewModel.hasOwnProperty("getAdditionalControls")) {
|
|
additionalControls = additionalControls.concat(viewModel.getAdditionalControls());
|
|
}
|
|
});
|
|
if (additionalControls.length > 0) {
|
|
self.additionalControls = additionalControls;
|
|
self.rerenderControls();
|
|
}
|
|
};
|
|
|
|
self.onFocus = function (data, event) {
|
|
if (!self.settings.feature_keyboardControl()) return;
|
|
self.keycontrolActive(true);
|
|
};
|
|
|
|
self.onMouseOver = function (data, event) {
|
|
if (!self.settings.feature_keyboardControl()) return;
|
|
$("#webcam_container").focus();
|
|
self.keycontrolActive(true);
|
|
};
|
|
|
|
self.onMouseOut = function (data, event) {
|
|
if (!self.settings.feature_keyboardControl()) return;
|
|
$("#webcam_container").blur();
|
|
self.keycontrolActive(false);
|
|
};
|
|
|
|
self.toggleKeycontrolHelp = function () {
|
|
self.keycontrolHelpActive(!self.keycontrolHelpActive());
|
|
};
|
|
|
|
self.onKeyDown = function (data, event) {
|
|
if (!self.settings.feature_keyboardControl()) return;
|
|
|
|
var button = undefined;
|
|
var visualizeClick = true;
|
|
|
|
switch (event.which) {
|
|
case 37: // left arrow key
|
|
// X-
|
|
button = $("#control-xdec");
|
|
break;
|
|
case 38: // up arrow key
|
|
// Y+
|
|
button = $("#control-yinc");
|
|
break;
|
|
case 39: // right arrow key
|
|
// X+
|
|
button = $("#control-xinc");
|
|
break;
|
|
case 40: // down arrow key
|
|
// Y-
|
|
button = $("#control-ydec");
|
|
break;
|
|
case 49: // number 1
|
|
case 97: // numpad 1
|
|
// Distance 0.1
|
|
button = $("#control-distance01");
|
|
visualizeClick = false;
|
|
break;
|
|
case 50: // number 2
|
|
case 98: // numpad 2
|
|
// Distance 1
|
|
button = $("#control-distance1");
|
|
visualizeClick = false;
|
|
break;
|
|
case 51: // number 3
|
|
case 99: // numpad 3
|
|
// Distance 10
|
|
button = $("#control-distance10");
|
|
visualizeClick = false;
|
|
break;
|
|
case 52: // number 4
|
|
case 100: // numpad 4
|
|
// Distance 100
|
|
button = $("#control-distance100");
|
|
visualizeClick = false;
|
|
break;
|
|
case 33: // page up key
|
|
case 87: // w key
|
|
// z lift up
|
|
button = $("#control-zinc");
|
|
break;
|
|
case 34: // page down key
|
|
case 83: // s key
|
|
// z lift down
|
|
button = $("#control-zdec");
|
|
break;
|
|
case 36: // home key
|
|
// xy home
|
|
button = $("#control-xyhome");
|
|
break;
|
|
case 35: // end key
|
|
// z home
|
|
button = $("#control-zhome");
|
|
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);
|
|
}
|
|
button.click();
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
OCTOPRINT_VIEWMODELS.push([
|
|
ControlViewModel,
|
|
["loginStateViewModel", "settingsViewModel"],
|
|
"#control"
|
|
]);
|
|
});
|