DRY - let's use some snippets in the webcam settings

Makes the dialog components reusable for our wizard. Should probably
be done throughout...
This commit is contained in:
Gina Häußge 2015-08-21 10:50:33 +02:00
parent b8fb16a074
commit c5cc3d0394
9 changed files with 52 additions and 84 deletions

View file

@ -26,7 +26,8 @@
</p>{% endtrans %}
<form class="form-horizontal" data-bind="with: settingsViewModel">
{% include "dialogs/_snippets/configurewebcamurls.jinja2" %}
{% include "_snippets/settings/webcam/webcamStreamUrl.jinja2" %}
{% include "_snippets/settings/webcam/webcamSnapshotUrl.jinja2" %}
</form>
<h4>{{ _('Timelapse Recordings') }}</h4>
@ -37,5 +38,5 @@
</p>{% endtrans %}
<form class="form-horizontal" data-bind="with: settingsViewModel">
{% include "dialogs/_snippets/configureffmpeg.jinja2" %}
{% include "_snippets/settings/webcam/ffmpegPath.jinja2" %}
</form>

View file

@ -0,0 +1,9 @@
<div class="control-group" title="{{ _('Bitrate to use for encoding the timelapse video') }}">
<label class="control-label" for="settings-webcamBitrate">{{ _('Timelapse bitrate') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-mini text-right" data-bind="value: webcam_bitrate" id="settings-webcamBitrate">
<span class="add-on">bit/s</span>
</div>
</div>
</div>

View file

@ -0,0 +1,7 @@
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_watermark" id="settings-webcamWatermark"> {{ _('Enable OctoPrint watermark in timelapse movies') }}
</label>
</div>
</div>

View file

@ -0,0 +1,17 @@
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_flipH" id="settings-webcamFlipH"> {{ _('Flip webcam horizontally') }}
</label>
</div>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_flipV" id="settings-webcamFlipV"> {{ _('Flip webcam vertically') }}
</label>
</div>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_rotate90" id="settings-webcamRotate90"> {{ _('Rotate webcam 90 degrees counter clockwise') }}
</label>
</div>
</div>

View file

@ -1,12 +1,3 @@
<div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
<label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
<button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
</div>
</div>
</div>
<div class="control-group" title="{{ _('URL to use for retrieving webcam snapshot images for timelapse creation') }}">
<label class="control-label" for="settings-webcamSnapshotUrl">{{ _('Snapshot URL') }}</label>
<div class="controls">

View file

@ -0,0 +1,9 @@
<div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
<label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
<button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
</div>
</div>
</div>

View file

@ -1,87 +1,21 @@
<h3>{{ _('Webcam') }}</h3>
<form class="form-horizontal">
<div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
<label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
<button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_flipH" id="settings-webcamFlipH"> {{ _('Flip webcam horizontally') }}
</label>
</div>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_flipV" id="settings-webcamFlipV"> {{ _('Flip webcam vertically') }}
</label>
</div>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_rotate90" id="settings-webcamRotate90"> {{ _('Rotate webcam 90 degrees counter clockwise') }}
</label>
</div>
</div>
{% include "_snippets/settings/webcam/webcamStreamUrl.jinja2" %}
{% include "_snippets/settings/webcam/webcamOrientation.jinja2" %}
</form>
<h3>{{ _('Timelapse Recordings') }}</h3>
<form class="form-horizontal">
<div class="control-group" title="{{ _('URL to use for retrieving webcam snapshot images for timelapse creation') }}">
<label class="control-label" for="settings-webcamSnapshotUrl">{{ _('Snapshot URL') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level" data-bind="value: webcam_snapshotUrl, valueUpdate: 'afterkeydown'" id="settings-webcamSnapshotUrl">
<button class="btn" type="button" data-bind="click: testWebcamSnapshotUrl, enable: webcam_snapshotUrl(), css: {disabled: !webcam_snapshotUrl()}">{{ _('Test') }}</button>
</div>
</div>
</div>
<div class="control-group" title="{{ _('Full path to the FFMPEG binary') }}" data-bind="css: {error: webcam_ffmpegPathBroken, success: webcam_ffmpegPathOk}">
<label class="control-label" for="settings-webcamFfmpegPath">{{ _('Path to FFMPEG') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level" data-bind="value: webcam_ffmpegPath, valueUpdate: 'afterkeydown'" id="settings-webcamFfmpegPath">
<button class="btn" type="button" data-bind="click: testWebcamFfmpegPath, enable: webcam_ffmpegPath(), css: {disabled: !webcam_ffmpegPath()}">{{ _('Test') }}</button>
</div>
<span class="help-block" data-bind="visible: webcam_ffmpegPathBroken() || webcam_ffmpegPathOk(), text: webcam_ffmpegPathText"></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: webcam_watermark" id="settings-webcamWatermark"> {{ _('Enable OctoPrint watermark in timelapse movies') }}
</label>
</div>
</div>
{% include "_snippets/settings/webcam/webcamSnapshotUrl.jinja2" %}
{% include "_snippets/settings/webcam/ffmpegPath.jinja2" %}
{% include "_snippets/settings/webcam/watermark.jinja2" %}
<div>
<div><small><a href="#" class="muted" onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="icon-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
<div class="hide">
<div class="control-group" title="{{ _('Bitrate to use for encoding the timelapse video') }}">
<label class="control-label" for="settings-webcamBitrate">{{ _('Timelapse bitrate') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-mini text-right" data-bind="value: webcam_bitrate" id="settings-webcamBitrate">
<span class="add-on">bit/s</span>
</div>
</div>
</div>
<div class="control-group" title="{{ _('Number of FFMPEG encoding threads') }}">
<label class="control-label" for="settings-webcam_ffmpegThreads">{{ _('FFMPEG threads') }}</label>
<div class="controls">
<input class="input-mini" data-bind="value: webcam_ffmpegThreads" id="settings-webcamFfmpegThreads" type="number" step="1" min="1">
</div>
</div>
{% include "_snippets/settings/webcam/ffmpegBitrate.jinja2" %}
{% include "_snippets/settings/webcam/ffmpegThreads.jinja2" %}
</div>
</div>
</form>