From 1007d18fd02dcaec121d7f3fca2d58f26f14f749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Fri, 21 Aug 2015 10:32:11 +0200
Subject: [PATCH] Reorganization of the webcam settings dialog

---
 src/octoprint/server/views.py                 |  2 +-
 .../templates/dialogs/settings/webcam.jinja2  | 89 ++++++++++++++-----
 2 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/src/octoprint/server/views.py b/src/octoprint/server/views.py
index 01a056ac..a65f9281 100644
--- a/src/octoprint/server/views.py
+++ b/src/octoprint/server/views.py
@@ -146,7 +146,7 @@ def index():
 		section_features=(gettext("Features"), None),
 
 		features=(gettext("Features"), dict(template="dialogs/settings/features.jinja2", _div="settings_features", custom_bindings=False)),
-		webcam=(gettext("Webcam"), dict(template="dialogs/settings/webcam.jinja2", _div="settings_webcam", custom_bindings=False)),
+		webcam=(gettext("Webcam & Timelapse"), dict(template="dialogs/settings/webcam.jinja2", _div="settings_webcam", custom_bindings=False)),
 		api=(gettext("API"), dict(template="dialogs/settings/api.jinja2", _div="settings_api", custom_bindings=False)),
 
 		section_octoprint=(gettext("OctoPrint"), None),
diff --git a/src/octoprint/templates/dialogs/settings/webcam.jinja2 b/src/octoprint/templates/dialogs/settings/webcam.jinja2
index 40c062ed..3357690f 100644
--- a/src/octoprint/templates/dialogs/settings/webcam.jinja2
+++ b/src/octoprint/templates/dialogs/settings/webcam.jinja2
@@ -1,27 +1,16 @@
+<h3>{{ _('Webcam') }}</h3>
+
 <form class="form-horizontal">
-    {% include "dialogs/_snippets/configurewebcamurls.jinja2" %}
+    <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>
 
-    {% include "dialogs/_snippets/configureffmpeg.jinja2" %}
-
-    <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">
-            <input type="text" class="input-block-level" data-bind="value: webcam_bitrate" id="settings-webcamBitrate">
-        </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-block-level" data-bind="value: webcam_ffmpegThreads" id="settings-webcamFfmpegThreads" type="number" step="1" min="1">
-        </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>
     <div class="control-group">
         <div class="controls">
             <label class="checkbox">
@@ -40,3 +29,59 @@
         </div>
     </div>
 </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>
+
+    <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>
+        </div>
+    </div>
+
+</form>