pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Parametric commands for custom controls can now define sliders instead of input fields

Browse source
This commit is contained in:
Gina Häußge 2015-02-22 22:19:43 +01:00
parent 60a747620c
commit 09ecd68fde
4 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

3
src/octoprint/static/js/app/viewmodels/control.js
View file

@ -122,6 +122,9 @@ function ControlViewModel(loginStateViewModel, settingsViewModel) {
if (control.type == "parametric_command" || control.type == "parametric_commands") {
for (var i = 0; i < control.input.length; i++) {
control.input[i].value = control.input[i].default;
if (!control.input[i].hasOwnProperty("slider")) {
control.input[i].slider = false;
}
}
} else if (control.type == "feedback_command" || control.type == "feedback") {
control.output = ko.observable("");

16
src/octoprint/static/less/octoprint.less
View file

@ -508,6 +508,10 @@ ul.dropdown-menu li a {
>div.distance {
text-align: left;
}
.slider {
margin-bottom: 10px;
}
}
.box {
@ -534,16 +538,20 @@ ul.dropdown-menu li a {
height: 30px;
}
.slider {
margin-bottom: 10px;
}
.slider-handle {
width: 14px;
height: 14px;
margin-left: -7px;
margin-top: -3px;
}
.custom_parametric_command {
.slider {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 2px;
}
}
}
/** GCODE viewer */

23
src/octoprint/templates/tabs/control.jinja2
View file

@ -108,10 +108,10 @@
<script type="text/html" id="customControls_sectionTemplate">
<h1 data-bind="text: name"></h1>
<div data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<div class="custom_section" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
</script>
<script type="text/html" id="customControls_rowTemplate">
<div class="row-fluid">
<div class="row-fluid custom_row">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
@ -120,32 +120,37 @@
<script type="text/html" id="customControls_sectionRowTemplate">
<h1 data-bind="text: name"></h1>
<div class="row-fluid">
<div class="row-fluid custom_row custom_section">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="customControls_commandTemplate">
<form class="form-inline">
<form class="form-inline custom_command">
<button class="btn" data-bind="text: name, enable: $root.isCustomEnabled($data), click: function() { $root.clickCustom($data) }"></button>
</form>
</script>
<script type="text/html" id="customControls_feedbackCommandTemplate">
<form class="form-inline">
<form class="form-inline custom_feedback_command">
<button class="btn" data-bind="text: name, enable: $root.isCustomEnabled($data), click: function() { $root.clickCustom($data) }"></button> <span data-bind="text: output"></span>
</form>
</script>
<script type="text/html" id="customControls_feedbackTemplate">
<div>
<div class="custom_feedback">
<strong data-bind="text: name"></strong>: <span data-bind="text: output"></span>
</div>
</script>
<script type="text/html" id="customControls_parametricCommandTemplate">
<form class="form-inline">
<form class="form-inline custom_parametric_command">
<!-- ko foreach: input -->
<label data-bind="text: name"></label>
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
<label data-bind="text: name"></label>
<!-- ko if: slider -->
<input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}">
<!-- /ko -->
<!-- ko ifnot: slider -->
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
<!-- /ko -->
<!-- /ko -->
<button class="btn" data-bind="text: name, enable: $root.isCustomEnabled($data), click: function() { $root.clickCustom($data) }"></button>
</form>