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

Refactor timelapse form & add reset button

Browse source
This commit is contained in:
Gina Häußge 2017-10-26 16:33:00 +02:00
parent 8bf3f4ff50
commit 09509ca61d
4 changed files with 106 additions and 58 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

15
src/octoprint/static/js/app/viewmodels/timelapse.js
View file

@ -21,6 +21,8 @@ $(function() {
self.timelapseMinDelay = ko.observable(self.defaultMinDelay);
self.timelapseCapturePostRoll = ko.observable(self.defaultCapturePostRoll);
self.serverConfig = ko.observable();
self.persist = ko.observable(false);
self.isDirty = ko.observable(false);
@ -52,6 +54,9 @@ $(function() {
self.saveButtonEnabled = ko.pureComputed(function() {
return self.isDirty() && !self.isPrinting() && self.loginState.isUser();
});
self.resetButtonEnabled = ko.pureComputed(function() {
return self.saveButtonEnabled() && self.serverConfig() !== undefined;
});
self.timelapseType.subscribe(function() {
self.isDirty(true);
@ -158,6 +163,11 @@ $(function() {
}
// timelapse config
self.fromConfig(response.config);
self.serverConfig(response.config);
};
self.fromConfig = function(config) {
self.timelapseType(config.type);
if (config.type === "timed" && config.interval !== undefined && config.interval > 0) {
@ -388,6 +398,11 @@ $(function() {
.done(self.fromResponse);
};
self.reset = function() {
if (self.serverConfig() === undefined) return;
self.fromConfig(self.serverConfig());
};
self.displayTimelapsePopup = function(options) {
if (self.timelapsePopup !== undefined) {
self.timelapsePopup.remove();

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

@ -976,6 +976,10 @@ ul.dropdown-menu li a {
text-align: center;
}
.text-block {
display: block;
}
.overflow_visible {
overflow: visible !important;
}

143
src/octoprint/templates/tabs/timelapse.jinja2
View file

@ -2,72 +2,101 @@
<div class="alert" data-bind="visible: isPrinting()">
{{ _('Take note that timelapse configuration is disabled while your printer is printing.') }}
</div>
<h1>{{ _('Timelapse Configuration') }}</h1>
<label for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
<select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: !isPrinting() && loginState.isUser()">
<option value="off">{{ _('Off') }}</option>
<option value="timed">{{ _('Timed') }}</option>
<option value="zchange">{{ _('On Z Change') }}</option>
</select>
<span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-warning">{{ _('Warning') }}</span> {{ _('Do not use with spiralized ("Joris") vases or similar continuous Z models.') }}</span>
<span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-info">{{ _('Note') }}</span> {% trans %}Does not work when printing from the printer's SD Card (no way to detect the change in Z reliably). Use "Timed" mode for those prints instead.{% endtrans %}</span>
<div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled">
<label for="webcam_timelapse_interval">{{ _('Interval between snapshots (in seconds)') }}</label>
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('sec') }}</span>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
<div class="controls">
<select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: !isPrinting() && loginState.isUser()">
<option value="off">{{ _('Off') }}</option>
<option value="timed">{{ _('Timed') }}</option>
<option value="zchange">{{ _('On Z Change') }}</option>
</select>
<span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-info">{{ _('Note') }}</span> {% trans %}Does not work when printing from the printer's SD Card (no way to detect the change in Z reliably). Use "Timed" mode for those prints instead.{% endtrans %}</span>
</div>
</div>
</div>
<label for="webcam_timelapse_fps">{{ _('Timelapse frame rate (in frames per second)') }}</label>
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_fps" data-bind="value: timelapseFps, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
<span class="add-on">{{ _('fps') }}</span>
</div>
<label for="webcam_timelapse_postRoll">{{ _('Timelapse post roll (in rendered seconds)') }}</label>
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
<span class="add-on">{{ _('sec') }}</span>
</div>
<div id="webcam_timelapse_capturePostRoll" data-bind="visible: timelapseType() == 'timed'">
<label class="checkbox">
<input type="checkbox" data-bind="checked: timelapseCapturePostRoll, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()"> {{ _('Capture post roll images') }}
<span class="help-block">{{ _('If this is unchecked, OctoPrint will simply repeat the last frame for the post roll instead of continuing to capture new frames.') }}</span>
</label>
</div>
<div id="webcam_timelapse_retractionsettings" data-bind="visible: timelapseType() == 'zchange'">
<label for="webcam_timelapse_retractionZHop">{{ _('Retraction Z-Hop (in mm)') }}</label>
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_retractionZHop" data-bind="value: timelapseRetractionZHop, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('mm') }}</span>
<div id="webcam_timelapse_mindelay" class="control-group" data-bind="visible: timelapseType() == 'zchange'">
<label class="control-label" for="webcam_timelapse_minDelay">{{ _('Minimum interval') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_minDelay" data-bind="value: timelapseMinDelay, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('sec') }}</span>
</div>
<span class="help-block">{{ _('OctoPrint will rate limit snapshots to this minimum interval. This it to prevent against performance issues with vase mode/continous z prints.') }}</span>
</div>
</div>
<span class="help-block">{{ _('Enter the retraction z-hop used in the firmware or the gcode file to trigger snapshots for the timelapse only if a real layer change happens. For this to work properly your retraction z-hop has to be different from your layerheight!') }}</span>
</div>
<div id="webcam_timelapse_mindelay" data-bind="visible: timelapseType() == 'zchange'">
<label for="webcam_timelapse_minDelay">{{ _('Minimum delay between snapshots (in sec)') }}</label>
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_minDelay" data-bind="value: timelapseMinDelay, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('sec') }}</span>
<div id="webcam_timelapse_timedsettings" class="control-group" data-bind="visible: intervalInputEnabled">
<label class="control-label" for="webcam_timelapse_interval">{{ _('Snapshot interval') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('sec') }}</span>
</div>
</div>
</div>
<span class="help-block">{{ _('OctoPrint will not allow a snapshot to be taken based on a z-change unless the last one was more than this delay ago. This is to prevent issues if you accidentally print a vase mode type file while this timelapse mode is active.') }}</span>
</div>
<div data-bind="visible: loginState.isAdmin">
<label class="checkbox">
<input type="checkbox" data-bind="checked: persist, enable: isOperational() && !isPrinting() && loginState.isUser()"> {{ _('Save as default') }}
<span class="help-block">{{ _('Check this to make your selected timelapse mode and options persist across restarts.') }}</span>
</label>
</div>
<div class="control-group">
<label class="control-label" for="webcam_timelapse_fps">{{ _('Timelapse frame rate') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_fps" data-bind="value: timelapseFps, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
<span class="add-on">{{ _('fps') }}</span>
</div>
</div>
</div>
<div>
<button class="btn" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save changes') }}</button>
<span class="help-inline" data-bind="visible: saveButtonEnabled">{{ _('You have unsaved changes.') }}</span>
</div>
<div class="control-group">
<label class="control-label" for="webcam_timelapse_postRoll">{{ _('Timelapse post roll') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
<span class="add-on">{{ _('sec') }}</span>
</div>
<span class="help-block">{{ _('OctoPrint will take additional pictures to add this many seconds to the end of your rendered timelapse.') }}</span>
</div>
</div>
<div class="control-group" data-bind="visible: timelapseType() == 'timed'">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: timelapseCapturePostRoll, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()"> {{ _('Capture post roll images') }}
<span class="help-block">{{ _('If this is unchecked, OctoPrint will simply repeat the last frame for the post roll instead of continuing to capture new frames.') }}</span>
</label>
</div>
</div>
<div id="webcam_timelapse_retractionsettings" class="control-group" data-bind="visible: timelapseType() == 'zchange'">
<label class="control-label" for="webcam_timelapse_retractionZHop">{{ _('Retraction Z-Hop') }}</label>
<div class="controls">
<div class="input-append">
<input type="number" class="input-mini" id="webcam_timelapse_retractionZHop" data-bind="value: timelapseRetractionZHop, valueUpdate: 'afterkeydown', enable: !isPrinting() && loginState.isUser()">
<span class="add-on">{{ _('mm') }}</span>
</div>
<span class="help-block">{{ _('Enter the retraction z-hop used in the firmware or the gcode file to trigger snapshots for the timelapse only if a real layer change happens. For this to work properly your retraction z-hop has to be different from your layerheight!') }}</span>
</div>
</div>
<div class="control-group" data-bind="visible: loginState.isAdmin">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: persist, enable: isOperational() && !isPrinting() && loginState.isUser()"> {{ _('Save as default') }}
<span class="help-block">{{ _('Check this to make your selected timelapse mode and options persist across restarts.') }}</span>
</label>
</div>
</div>
<div class="control-group">
<div class="controls">
<strong class="text-center text-block" data-bind="visible: saveButtonEnabled">{{ _('You have unsaved changes. Don\'t forget to save them.') }}</strong>
<button class="btn btn-primary btn-block" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save changes') }}</button>
<button class="btn btn-block" data-bind="click: reset, enable: resetButtonEnabled">{{ _('Reset to active configuration') }}</button>
</div>
</div>
</form>
</div>
<h1>{{ _('Finished Timelapses') }}</h1>