Refactored printer profile editor

It's now spread across multiple pages, with explanations
added where the data will be used.
This commit is contained in:
Gina Häußge 2016-09-20 17:27:50 +02:00
parent 133377c424
commit 24322f9204
9 changed files with 280 additions and 166 deletions

View file

@ -2,10 +2,33 @@
<p>{% trans %}Please make sure the settings below match your printer. If you plan on connecting more than one printer
to OctoPrint, you can also configure additional printer profiles under Settings > Printer Profiles{% endtrans %}</p>
<div data-bind="visible: editorLoaded" style="display: none">
<!-- ko with: editor -->
{% include "_snippets/settings/printerprofiles/profileEditor.jinja2" %}
<!-- /ko -->
<div class="scrollable" data-bind="visible: editorLoaded" style="display: none">
<ul class="nav nav-pills">
<li class="active"><a href="#wizard_plugin_corewizard_printerprofile_general" data-toggle="tab">{{ _('General') }}</a></li>
<li><a href="#wizard_plugin_corewizard_printerprofile_buildvolume" data-toggle="tab">{{ _('Print bed & build volume') }}</a></li>
<li><a href="#wizard_plugin_corewizard_printerprofile_axes" data-toggle="tab">{{ _('Axes') }}</a></li>
<li><a href="#wizard_plugin_corewizard_printerprofile_extruder" data-toggle="tab">{{ _('Hotend & extruder') }}</a></li>
</ul>
<div class="tab-content scrollable">
<!-- ko with: editor -->
<div id="wizard_plugin_corewizard_printerprofile_general" class="tab-pane active">
{% include '_snippets/settings/printerprofiles/profileEditorGeneral.jinja2' %}
</div>
<div id="wizard_plugin_corewizard_printerprofile_buildvolume" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorBuildvolume.jinja2' %}
</div>
<div id="wizard_plugin_corewizard_printerprofile_axes" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorAxes.jinja2' %}
</div>
<div id="wizard_plugin_corewizard_printerprofile_extruder" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorExtruder.jinja2' %}
</div>
<!-- /ko -->
</div>
</div>
<div data-bind="visible: !editorLoaded()">
Loading...

View file

@ -438,7 +438,14 @@ $(function() {
self.confirmEditProfile(add);
}
});
editDialog.modal("show");
$('ul.nav-pills a[data-toggle="tab"]:first', editDialog).tab("show");
editDialog.modal({
minHeight: function() { return Math.max($.fn.modal.defaults.maxHeight() - 80, 250); }
}).css({
width: 'auto',
'margin-left': function() { return -($(this).width() /2); }
});
};
self.confirmEditProfile = function(add) {

View file

@ -1,150 +1,40 @@
<form class="form-horizontal">
<div class="control-group" data-bind="css: {error: nameInvalid()}">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
<input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'">
<span data-bind="visible: nameInvalid()"><br><span class="help-inline">{{ _('Name must be set') }}</span></span>
</div>
<div id="settings_printerProfiles_editDialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="modal-title"></h3>
</div>
<div class="control-group" data-bind="css: {error: identifierInvalid()}">
<label class="control-label">{{ _('Identifier') }}</label>
<div class="controls">
<input type="text" data-bind="value: identifier, valueUpdate: 'afterkeydown', enable: isNew, css: {disabled: !isNew()}, attr: {placeholder: identifierPlaceholder}">
<span data-bind="visible: identifierInvalid()"><br><span class="help-inline" data-bind="text: identifierInvalidText()"></span></span>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Model') }}</label>
<div class="controls">
<input type="text" data-bind="value: model">
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Color') }}</label>
<div class="controls">
<select data-bind="value: color, options: availableColors, optionsText: 'name', optionsValue: 'key'">
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Form Factor') }}</label>
<div class="controls">
<label class="radio"><input type="radio" name="printerProfileFormFactorGroup" value="rectangular" data-bind="checked: volumeFormFactor"> {{ _('Rectangular') }}</label>
</div>
<div class="controls">
<label class="radio"><input type="radio" name="printerProfileFormFactorGroup" value="circular" data-bind="checked: volumeFormFactor"> {{ _('Circular') }}</label>
</div>
</div>
<div class="control-group">
<div class="control-group">
<label class="control-label">{{ _('Origin') }}</label>
<div class="controls">
<select data-bind="value: volumeOrigin, options: availableOrigins, optionsText: 'name', optionsValue: 'key'">
</select>
<div class="modal-body">
<div class="full-sized-box">
<ul class="nav nav-pills">
<li class="active"><a href="#settings_printerProfiles_editDialog_general" data-toggle="tab">{{ _('General') }}</a></li>
<li><a href="#settings_printerProfiles_editDialog_buildvolume" data-toggle="tab">{{ _('Print bed & build volume') }}</a></li>
<li><a href="#settings_printerProfiles_editDialog_axes" data-toggle="tab">{{ _('Axes') }}</a></li>
<li><a href="#settings_printerProfiles_editDialog_extruder" data-toggle="tab">{{ _('Hotend & extruder') }}</a></li>
</ul>
<!-- ko with: printerProfiles.editor -->
<div class="tab-content scrollable">
<div id="settings_printerProfiles_editDialog_general" class="tab-pane active">
{% include '_snippets/settings/printerprofiles/profileEditorGeneral.jinja2' %}
</div>
<div id="settings_printerProfiles_editDialog_buildvolume" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorBuildvolume.jinja2' %}
</div>
<div id="settings_printerProfiles_editDialog_axes" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorAxes.jinja2' %}
</div>
<div id="settings_printerProfiles_editDialog_extruder" class="tab-pane">
{% include '_snippets/settings/printerprofiles/profileEditorExtruder.jinja2' %}
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Volume') }}</label>
<div class="controls form-inline">
<label>{{ _('X') }}</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeWidth" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
<div class="controls form-inline">
<label>{{ _('Y') }}</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeDepth" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
<div class="controls form-inline">
<label>{{ _('Z') }}</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeHeight" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
<button class="btn btn-primary btn-confirm" data-bind="enabled: printerProfiles.enableEditorSubmitButton, css: {disabled: !printerProfiles.enableEditorSubmitButton()}"><i class="icon-spinner icon-spin" data-bind="visible: printerProfiles.requestInProgress()"></i> {{ _('Confirm') }}</button>
</div>
<div class="control-group">
<label class="control-label">{{ _('Heated Bed') }}</label>
<div class="controls">
<input type="checkbox" data-bind="checked: heatedBed">
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Axis') }}</label>
<div class="controls form-inline">
<label>{{ _('X') }}</label>
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisXSpeed" placeholder="6000">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisXInverted"> {{ _('Invert control') }}
</label>
</div>
<div class="controls form-inline">
<label>{{ _('Y') }}</label>
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisYSpeed" placeholder="6000">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisYInverted"> {{ _('Invert control') }}
</label>
</div>
<div class="controls form-inline">
<label>{{ _('Z') }}</label>
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisZSpeed" placeholder="200">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisZInverted"> {{ _('Invert control') }}
</label>
</div>
<div class="controls form-inline">
<label>{{ _('E') }}</label>
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisESpeed" placeholder="300">
<span class="add-on">mm/min</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Nozzle Diameter') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: nozzleDiameter" placeholder="0.4">
<span class="add-on">mm</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Number of Extruders') }}</label>
<div class="controls">
<input type="number" class="input-mini text-right" min="1" max="10" data-bind="value: extruders">
</div>
</div>
<div class="control-group" data-bind="visible: extruders() > 1">
<label class="control-label">{{ _('Nozzle Offsets (relative to first nozzle T0)') }}</label>
<!-- ko foreach: koExtruderOffsets -->
<div class="controls form-inline">
<label>T<span data-bind="text: idx"></span>:</label>
<label>X</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: x" placeholder="0">
<span class="add-on">mm</span>
</div>
<label>Y</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: y" placeholder="0">
<span class="add-on">mm</span>
</div>
</div>
<!-- /ko -->
</div>
</form>
</div>

View file

@ -0,0 +1,56 @@
<form class="form-horizontal">
<div class="control-group">
<div class="controls">
{{ _('Please define the maximum speed/feedrate of the individual axes and whether their control should be inverted or not.') }}
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('X') }}</label>
<div class="controls form-inline">
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisXSpeed" placeholder="6000">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisXInverted"> {{ _('Invert control') }}
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Y') }}</label>
<div class="controls form-inline">
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisYSpeed" placeholder="6000">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisYInverted"> {{ _('Invert control') }}
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Z') }}</label>
<div class="controls form-inline">
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisZSpeed" placeholder="200">
<span class="add-on">mm/min</span>
</div>
<label class="checkbox">
<input type="checkbox" data-bind="checked: axisZInverted"> {{ _('Invert control') }}
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('E') }}</label>
<div class="controls form-inline">
<div class="input-append">
<input type="number" class="input-mini text-right" data-bind="value: axisESpeed" placeholder="300">
<span class="add-on">mm/min</span>
</div>
</div>
</div>
<p>
<small>{{ _('This information is used for manual control via the "Control" tab. It does NOT influence already sliced files that you upload to OctoPrint!') }}</small>
</p>
</form>

View file

@ -0,0 +1,77 @@
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('Form Factor') }}</label>
<div class="controls">
<label class="radio"><input type="radio" name="printerProfileFormFactorGroup" value="rectangular" data-bind="checked: volumeFormFactor"> {{ _('Rectangular') }}</label>
</div>
<div class="controls">
<label class="radio"><input type="radio" name="printerProfileFormFactorGroup" value="circular" data-bind="checked: volumeFormFactor"> {{ _('Circular') }}</label>
</div>
</div>
<div class="control-group">
<div class="control-group">
<label class="control-label">{{ _('Origin') }}</label>
<div class="controls">
<select data-bind="value: volumeOrigin, options: availableOrigins, optionsText: 'name', optionsValue: 'key'">
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Heated Bed') }}</label>
<div class="controls">
<input type="checkbox" data-bind="checked: heatedBed">
</div>
</div>
<div class="control-group">
<div class="controls">
{{ _('Please define the print volume.') }}
</div>
</div>
<div data-bind="visible: volumeFormFactor() != 'circular'" style="display: none">
<div class="control-group">
<label class="control-label">{{ _('Width (X)') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeWidth" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Depth (Y)') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeDepth" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
</div>
</div>
<div data-bind="visible: volumeFormFactor() == 'circular'" style="display: none">
<div class="control-group">
<label class="control-label">{{ _('Diameter (X/Y)') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeWidth" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Height (Z)') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: volumeHeight" placeholder="200">
<span class="add-on">mm</span>
</div>
</div>
</div>
<p>
<small>{{ _('This information is used for the GCODE Viewer and/or when slicing from OctoPrint. It does NOT influence already sliced files that you upload to OctoPrint!') }}</small>
</p>
</form>

View file

@ -0,0 +1,47 @@
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('Nozzle Diameter') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: nozzleDiameter" placeholder="0.4">
<span class="add-on">mm</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Number of Extruders') }}</label>
<div class="controls">
<input type="number" class="input-mini text-right" min="1" max="10" data-bind="value: extruders">
</div>
</div>
<div data-bind="visible: extruders() > 1" style="display: none">
<div class="control-group">
<div class="controls">
{{ _('Please specify the nozzle offsets of the extruders relative to the first nozzle T0.') }}
</div>
</div>
<!-- ko foreach: koExtruderOffsets -->
<div class="control-group">
<label class="control-label">{{ _('Offset') }} T<span data-bind="text: idx"></span></label>
<div class="controls form-inline">
<label>X</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: x" placeholder="0">
<span class="add-on">mm</span>
</div>
<label>Y</label>
<div class="input-append">
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: y" placeholder="0">
<span class="add-on">mm</span>
</div>
</div>
</div>
<!-- /ko -->
</div>
<p>
<small>{{ _('This information is used for the graph and controls available in the "Temperature" tab, the GCODE viewer and when slicing from within OctoPrint. It does NOT influence already sliced files that you upload to OctoPrint!') }}</small>
</p>
</form>

View file

@ -0,0 +1,29 @@
<form class="form-horizontal">
<div class="control-group" data-bind="css: {error: nameInvalid()}">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
<input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'">
<span data-bind="visible: nameInvalid()"><br><span class="help-inline">{{ _('Name must be set') }}</span></span>
</div>
</div>
<div class="control-group" data-bind="css: {error: identifierInvalid()}">
<label class="control-label">{{ _('Identifier') }}</label>
<div class="controls">
<input type="text" data-bind="value: identifier, valueUpdate: 'afterkeydown', enable: isNew, css: {disabled: !isNew()}, attr: {placeholder: identifierPlaceholder}">
<span data-bind="visible: identifierInvalid()"><br><span class="help-inline" data-bind="text: identifierInvalidText()"></span></span>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Model') }}</label>
<div class="controls">
<input type="text" data-bind="value: model">
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Color') }}</label>
<div class="controls">
<select data-bind="value: color, options: availableColors, optionsText: 'name', optionsValue: 'key'">
</select>
</div>
</div>
</form>

View file

@ -1,15 +0,0 @@
<div id="settings_printerProfiles_editDialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<!-- ko with: printerProfiles.editor -->
{% include '_snippets/settings/printerprofiles/profileEditor.jinja2' %}
<!-- /ko -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
<button class="btn btn-primary btn-confirm" data-bind="enabled: printerProfiles.enableEditorSubmitButton, css: {disabled: !printerProfiles.enableEditorSubmitButton()}"><i class="icon-spinner icon-spin" data-bind="visible: printerProfiles.requestInProgress()"></i> {{ _('Confirm') }}</button>
</div>
</div>

View file

@ -4,4 +4,4 @@
<button class="btn pull-right" data-bind="click: function() { $root.printerProfiles.showEditProfileDialog(); }">{{ _('Add Profile...') }}</button>
{% include "_snippets/settings/printerprofiles/profileImporter.jinja2" %}
{% include "_snippets/settings/printerprofiles/profileEditor.jinja2" %}