ManuelW/octoprint-customControl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Work on Input part and small fixes

Browse Source
This commit is contained in:
Marc 2015-04-22 09:30:04 +02:00
parent 03a85d24d0
commit 71e04c3673
4 changed files with 125 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
octoprint_customControl/static/js/customControl.js
View File

@ -66,30 +66,34 @@
return controls; return controls;
}; };
self._processInput = function (control) { self._processInput = function (list) {
for (var i = 0; i < control.input.length; i++) { var inputs = [];
if (!control.processed) {
control.input[i].value = ko.observable(control.input[i].default);
control.input[i].default = ko.observable(control.input[i].default);
}
if (control.processed) for (var i = 0; i < list.length; i++) {
control.input[i].value(control.input[i].default()); var input = {
name: ko.observable(list[i].name),
parameter: ko.observable(list[i].parameter),
defaultValue: ko.observable(list[i].defaultValue)
};
if (!control.input[i].hasOwnProperty("slider")) if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object")
control.input[i].slider = ko.observable(false); input.slider = ko.mapping.fromJS(list[i].slider);
else if (!control.processed) else
control.input[i].slider = ko.observable(control.input[i].slider); input.slider = false;
inputs.push(input);
} }
return inputs;
} }
self._processControl = function (parent, control) { self._processControl = function (parent, control) {
control.id = ko.observable("settingsCustomControl_id" + self.staticID++); control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
control.parent = parent; control.parent = parent;
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("deflt")) { if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("defaultValue")) {
control.template = ko.observable(control.template); control.template = ko.observable(control.template);
control.regex = ko.observable(control.regex); control.regex = ko.observable(control.regex);
control.deflt = ko.observable(control.deflt); control.defaultValue = ko.observable(control.defaultValue);
} }
if (control.hasOwnProperty("children")) { if (control.hasOwnProperty("children")) {
@ -130,7 +134,10 @@
} }
if (control.hasOwnProperty("input")) { if (control.hasOwnProperty("input")) {
self._processInput(control); if (control.processed)
control.input(self._processInput(control.input()));
else
control.input = ko.observableArray(self._processInput(control.input));
} }
var js; var js;
@ -198,6 +205,8 @@
self.createElement = function (invokedOn, contextParent, selectedMenu) { self.createElement = function (invokedOn, contextParent, selectedMenu) {
if (invokedOn.attr('id') == "base") { if (invokedOn.attr('id') == "base") {
self.customControlDialogViewModel.reset();
self.customControlDialogViewModel.show(function (ret) { self.customControlDialogViewModel.show(function (ret) {
self.controlsFromServer.push(ret); self.controlsFromServer.push(ret);
self.rerenderControls(); self.rerenderControls();
@ -213,6 +222,8 @@
return; return;
} }
self.customControlDialogViewModel.reset({ parent: parentElement });
self.customControlDialogViewModel.show(function (ret) { self.customControlDialogViewModel.show(function (ret) {
parentElement.children.push(self._processControl(parentElement, ret)); parentElement.children.push(self._processControl(parentElement, ret));
}); });
@ -286,8 +297,8 @@
} }
if (element.hasOwnProperty("regex")) if (element.hasOwnProperty("regex"))
data.regex = element.regex(); data.regex = element.regex();
if (element.hasOwnProperty("deflt")) if (element.hasOwnProperty("defaultValue"))
data.deflt = element.deflt(); data.defaultValue = element.defaultValue();
if (element.hasOwnProperty("width")) if (element.hasOwnProperty("width"))
data.width = element.width(); data.width = element.width();
@ -347,7 +358,6 @@
delete element.command; delete element.command;
delete element.commands; delete element.commands;
delete element.input;
if (ret.command != undefined) if (ret.command != undefined)
element.command = ret.command; element.command = ret.command;
@ -355,9 +365,10 @@
element.commands = ret.commands; element.commands = ret.commands;
if (ret.input != undefined) { if (ret.input != undefined) {
element.input = ret.input; element.input(self._processInput(ret.input));
self._processInput(element);
} }
else
delete element.input;
break; break;
} }
case "output": { case "output": {
@ -382,7 +393,6 @@
{ {
switch (selectedMenu.attr('cmd')) { switch (selectedMenu.attr('cmd')) {
case "createContainer": { case "createContainer": {
self.customControlDialogViewModel.reset();
self.customControlDialogViewModel.title(gettext("Create container")); self.customControlDialogViewModel.title(gettext("Create container"));
self.customControlDialogViewModel.type("container"); self.customControlDialogViewModel.type("container");
@ -390,7 +400,6 @@
break; break;
} }
case "createCommand": { case "createCommand": {
self.customControlDialogViewModel.reset();
self.customControlDialogViewModel.title(gettext("Create Command")); self.customControlDialogViewModel.title(gettext("Create Command"));
self.customControlDialogViewModel.type("command"); self.customControlDialogViewModel.type("command");
@ -398,7 +407,6 @@
break; break;
} }
case "createOutput": { case "createOutput": {
self.customControlDialogViewModel.reset();
self.customControlDialogViewModel.title(gettext("Create Output")); self.customControlDialogViewModel.title(gettext("Create Output"));
self.customControlDialogViewModel.type("output"); self.customControlDialogViewModel.type("output");

65
octoprint_customControl/static/js/customControlDialog.js
View File

@ -26,10 +26,14 @@
if (self.element() == undefined || self.element().input == undefined) if (self.element() == undefined || self.element().input == undefined)
return false; return false;
_.each(self.element().input(), function (element, index, list) { var inputs = self.element().input()
if (element.hasOwnProperty("slider")) for(var i = 0; i < inputs.length; i++)
return true; {
}); if (inputs[i].hasOwnProperty("slider")) {
if (typeof inputs[i].slider == "object")
return true;
}
}
return false; return false;
}); });
self.span = function(parameter) { self.span = function(parameter) {
@ -54,7 +58,7 @@
name: undefined, name: undefined,
collapsable: true, collapsable: true,
commands: "", commands: "",
deflt: "", defaultValue: "",
script: "", script: "",
javascript: "", javascript: "",
enabled: "", enabled: "",
@ -71,12 +75,21 @@
if (typeof data == "object") if (typeof data == "object")
element = _.extend(element, data); element = _.extend(element, data);
self.element(ko.mapping.fromJS(element)); var mapped = ko.mapping.fromJS(element);
} if (data.hasOwnProperty("input")) {
self.useInputs(true);
//_.each(mapped.input(), function (e, index, list) {
// if (e.hasOwnProperty("slider") && !$.isFunction(e.slider))
// e.slider = ko.observable(e.slider);
//});
}
self.element(mapped);
}
self.show = function (f) { self.show = function (f) {
var dialog = $("#customControlDialog"); var dialog = $("#customControlDialog");
var primarybtn = $('.btn-primary', dialog); var primarybtn = $('div.modal-footer .btn-primary', dialog);
primarybtn.unbind('click').bind('click', function (e) { primarybtn.unbind('click').bind('click', function (e) {
var obj = ko.mapping.toJS(self.element()); var obj = ko.mapping.toJS(self.element());
@ -112,9 +125,9 @@
var input = { var input = {
name: element.name, name: element.name,
parameter: element.parameter, parameter: element.parameter,
default: element.default defaultValue: element.defaultValue
}; };
if (element.hasOwnProperty("slider")) { if (element.hasOwnProperty("slider") && element.slider != false) {
input["slider"] = { input["slider"] = {
}; };
@ -125,6 +138,8 @@
if (element.slider.hasOwnProperty("step") && element.slider.step != "") if (element.slider.hasOwnProperty("step") && element.slider.step != "")
input.slider.step = element.slider.step; input.slider.step = element.slider.step;
} }
el.input.push(input);
}); });
} }
break; break;
@ -132,7 +147,7 @@
case "output": { case "output": {
el.template = obj.template; el.template = obj.template;
el.regex = obj.regex; el.regex = obj.regex;
el.deflt = obj.deflt; el.defaultValue = obj.defaultValue;
el.width = obj.width; el.width = obj.width;
el.offset = obj.offset; el.offset = obj.offset;
@ -149,6 +164,34 @@
keyboard: false keyboard: false
}); });
} }
self.removeInput = function (data) {
self.element().input.remove(data);
}
self.addInput = function () {
var obj = {
name: ko.observable(""),
parameter: ko.observable(""),
defaultValue: ko.observable(""),
slider: false
}
self.element().input.push(obj);
}
self.addSliderInput = function () {
var obj = {
name: ko.observable(""),
parameter: ko.observable(""),
defaultValue: ko.observable(""),
slider: {
min: ko.observable(""),
max: ko.observable(""),
step: ko.observable("")
}
}
self.element().input.push(obj);
}
} }
// view model class, parameters for constructor, container to bind to // view model class, parameters for constructor, container to bind to

20
octoprint_customControl/templates/octoprint_customControl.jinja2
View File

@ -16,7 +16,7 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">{{ _('Layout') }}</label> <label class="control-label">{{ _('Layout') }}</label>
<div class="controls"> <div class="controls">
<select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select> <select data-bind="options: $parent.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
</div> </div>
</div> </div>
<!-- ko if: name && name() != "" --> <!-- ko if: name && name() != "" -->
@ -35,7 +35,7 @@
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label> <label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
</div> </div>
<!-- ko if: $root.useInputs --> <!-- ko if: $root.useInputs -->
<div class="control-group"> <div class="control-group">
@ -57,16 +57,18 @@
<div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div> <div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
<div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div> <div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
<div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div> <div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
<!-- ko if: $root.hasSlider --> <!-- ko if: slider -->
<div class="span2"><input class="span12" data-bind="value: slide().min"></input></div> <div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input class="span12" data-bind="value: slide().max"></input></div> <div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input class="span12" data-bind="value: slide().step"></input></div> <div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
<div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
<!-- /ko --> <!-- /ko -->
<div class="span1"><a title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput($data)"><i class="icon-trash"></i></a></div> <div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="offset11 span1"><a title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div> <div class="offset10 span1"><a href="#" title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
<div class="span1"><a href="#" title="Add Slider" class="btn btn-primary" data-bind="click: $root.addSliderInput"><i class="icon-plus"></i></a></div>
</div> </div>
</div> </div>
<!-- /ko --> <!-- /ko -->
@ -88,7 +90,7 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">{{ _('Default Message') }}</label> <label class="control-label">{{ _('Default Message') }}</label>
<div class="controls"> <div class="controls">
<input style="width: 97%" data-bind="value: deflt"></input> <input style="width: 97%" data-bind="value: defaultValue"></input>
</div> </div>
</div> </div>
<!-- /ko --> <!-- /ko -->

55
octoprint_customControl/templates/octoprint_customControl_settings.jinja2
View File

@ -2,8 +2,9 @@
<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser"> <div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
</div> </div>
<div style="clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div> <!-- "width: 588px" to be the same as teh real Control tab-->
<div style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;"> <ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
<li> <li>
@ -44,24 +45,24 @@
</ul> </ul>
<!-- Templates for custom controls --> <!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate"> <script type="text/html" id="settingsCustomControls_containerTemplate">
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }"> <div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: layout() == 'vertical' --> <!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div> <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko --> <!-- /ko -->
<!-- ko if: layout() == 'horizontal' --> <!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div> <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko --> <!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' --> <!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid"> <div class="row-fluid custom_section custom_section_horizontal_grid">
<!-- ko foreach: children --> <!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div> <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko --> <!-- /ko -->
</div> </div>
<!-- /ko --> <!-- /ko -->
</div> </div>
</script> </script>
<script type="text/html" id="settingsCustomControls_containerTemplate_accordion"> <script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
<div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }"> <div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
@ -73,7 +74,7 @@
</div> </div>
<!-- /ko --> <!-- /ko -->
<!-- ko if: layout --> <!-- ko if: layout -->
<div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }"> <div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
<!-- ko if: layout() == 'vertical' --> <!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div> <div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
@ -93,25 +94,27 @@
</div> </div>
</script> </script>
<script type="text/html" id="settingsCustomControls_controlTemplate"> <script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline control-tab custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }"> <form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko --> <!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko --> <!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('deflt') } --><!-- /ko --> <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
</form> </form>
</script> </script>
<script type="text/html" id="settingsCustomControls_controlTemplate_input"> <script type="text/html" id="settingsCustomControls_controlTemplate_input">
<!-- ko foreach: input --> <!-- ko foreach: input -->
<div class="form-inline">
<label style="cursor: default" data-bind="text: name"></label> <label style="cursor: default" data-bind="text: name"></label>
<!-- ko if: slider --> <!-- ko if: slider -->
<input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}"> <input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
<!-- /ko --> <!-- /ko -->
<!-- ko ifnot: slider --> <!-- ko ifnot: slider -->
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value"> <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
<!-- /ko --> <!-- /ko -->
</div>
<!-- /ko --> <!-- /ko -->
</script> </script>
<script type="text/html" id="settingsCustomControls_controlTemplate_output"> <script type="text/html" id="settingsCustomControls_controlTemplate_output">
<label style="cursor: default" data-bind="text: deflt"></label> <label style="cursor: default" data-bind="text: defaultValue"></label>
</script> </script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command"> <script type="text/html" id="settingsCustomControls_controlTemplate_command">
<button class="btn" data-bind="text: name"></button> <button class="btn" data-bind="text: name"></button>