Don't allow multiple parallel webcam tests

Disable button when a test is already active. Also have spinner
defined centrally and only made visible on active test.

Should hopefully give better feedback to impatient users ;)

Solves #1897
This commit is contained in:
Gina Häußge 2017-05-02 13:39:38 +02:00
parent 0161d915d6
commit c69ef1598a
4 changed files with 36 additions and 11 deletions

View file

@ -224,37 +224,48 @@ $(function() {
self.terminalFilters.remove(filter);
};
self.testWebcamStreamUrlBusy = ko.observable(false);
self.testWebcamStreamUrl = function() {
if (!self.webcam_streamUrl()) {
return;
}
if (self.testWebcamStreamUrlBusy()) {
return;
}
var text = gettext("If you see your webcam stream below, the entered stream URL is ok.");
var image = $('<img src="' + self.webcam_streamUrl() + '">');
var message = $("<p></p>")
.append(text)
.append(image);
self.testWebcamStreamUrlBusy(true);
showMessageDialog({
title: gettext("Stream test"),
message: message
message: message,
onclose: function() {
self.testWebcamStreamUrlBusy(false);
}
});
};
self.testWebcamSnapshotUrlBusy = ko.observable(false);
self.testWebcamSnapshotUrl = function(viewModel, event) {
if (!self.webcam_snapshotUrl()) {
return;
}
var target = $(event.target);
target.prepend('<i class="icon-spinner icon-spin"></i> ');
if (self.testWebcamSnapshotUrlBusy()) {
return;
}
var errorText = gettext("Could not retrieve snapshot URL, please double check the URL");
var errorTitle = gettext("Snapshot test failed");
self.testWebcamSnapshotUrlBusy(true);
OctoPrint.util.testUrl(self.webcam_snapshotUrl(), {method: "GET", response: "bytes"})
.done(function(response) {
$("i.icon-spinner", target).remove();
if (!response.result) {
showMessageDialog({
title: errorTitle,
@ -274,23 +285,34 @@ $(function() {
var text = gettext("If you see your webcam snapshot picture below, the entered snapshot URL is ok.");
showMessageDialog({
title: gettext("Snapshot test"),
message: $('<p>' + text + '</p><p><img src="data:' + mimeType + ';base64,' + content + '" /></p>')
message: $('<p>' + text + '</p><p><img src="data:' + mimeType + ';base64,' + content + '" /></p>'),
onclose: function() {
self.testWebcamSnapshotUrlBusy(false);
}
});
})
.fail(function() {
$("i.icon-spinner", target).remove();
showMessageDialog({
title: errorTitle,
message: errorText
message: errorText,
onclose: function() {
self.testWebcamSnapshotUrlBusy(false);
}
});
});
};
self.testWebcamFfmpegPathBusy = ko.observable(false);
self.testWebcamFfmpegPath = function() {
if (!self.webcam_ffmpegPath()) {
return;
}
if (self.testWebcamFfmpegPathBusy()) {
return;
}
self.testWebcamFfmpegPathBusy(true);
OctoPrint.util.testExecutable(self.webcam_ffmpegPath())
.done(function(response) {
if (!response.result) {
@ -306,6 +328,9 @@ $(function() {
}
self.webcam_ffmpegPathOk(response.result);
self.webcam_ffmpegPathBroken(!response.result);
})
.always(function() {
self.testWebcamFfmpegPathBusy(false);
});
};

View file

@ -3,7 +3,7 @@
<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>
<button class="btn" type="button" data-bind="click: testWebcamFfmpegPath, enable: webcam_ffmpegPath() && !testWebcamFfmpegPathBusy(), css: {disabled: !webcam_ffmpegPath() || testWebcamFfmpegPathBusy()}"><i class="icon-spinner icon-spin" data-bind="visible: testWebcamFfmpegPathBusy"></i> {{ _('Test') }}</button>
</div>
<span class="help-block" data-bind="visible: webcam_ffmpegPathBroken() || webcam_ffmpegPathOk(), text: webcam_ffmpegPathText"></span>
</div>

View file

@ -3,7 +3,7 @@
<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>
<button class="btn" type="button" data-bind="click: testWebcamSnapshotUrl, enable: webcam_snapshotUrl() && !testWebcamSnapshotUrlBusy(), css: {disabled: !webcam_snapshotUrl() || testWebcamSnapshotUrlBusy()}"><i class="icon-spinner icon-spin" data-bind="visible: testWebcamSnapshotUrlBusy"></i> {{ _('Test') }}</button>
</div>
<span class="help-inline">{% trans %}Fully qualified URL, needs to be reachable by OctoPrint's server{% endtrans %}</span>
</div>

View file

@ -3,7 +3,7 @@
<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>
<button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl() && !testWebcamStreamUrlBusy(), css: {disabled: !webcam_streamUrl() || testWebcamStreamUrlBusy()}"><i class="icon-spinner icon-spin" data-bind="visible: testWebcamStreamUrlBusy"></i> {{ _('Test') }}</button>
</div>
<span class="help-inline">{% trans %}Needs to be reachable from the browser displaying the OctoPrint UI, used to embed the webcam stream into the page.{% endtrans %}</span>
</div>