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

Use centered text in progress bars

Browse source 
* print progress shows percentage
  * upload progress shows what it always showed, but fully centered
  * GCODE viewer progress shows what it always showed, but fully centered
This commit is contained in:
Gina Häußge 2016-07-27 15:05:16 +02:00
parent eb822c83a3
commit 0a81e8b161
6 changed files with 105 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/octoprint/static/js/app/dataupdater.js
View file

@ -140,9 +140,6 @@ function DataUpdater(allViewModels) {
var data = e.data[prop];
var gcodeUploadProgress = $("#gcode_upload_progress");
var gcodeUploadProgressBar = $(".bar", gcodeUploadProgress);
var start = new Date().getTime();
switch (prop) {
case "connected": {
@ -214,8 +211,6 @@ function DataUpdater(allViewModels) {
break;
}
case "slicingProgress": {
gcodeUploadProgressBar.text(_.sprintf(gettext("Slicing ... (%(percentage)d%%)"), {percentage: Math.round(data["progress"])}));
_.each(self.allViewModels, function(viewModel) {
if (viewModel.hasOwnProperty("onSlicingProgress")) {
viewModel.onSlicingProgress(data["slicer"], data["model_path"], data["machinecode_path"], data["progress"]);
@ -226,48 +221,10 @@ function DataUpdater(allViewModels) {
case "event": {
var type = data["type"];
var payload = data["payload"];
var html = "";
log.debug("Got event " + type + " with payload: " + JSON.stringify(payload));
if (type == "SlicingStarted") {
gcodeUploadProgress.addClass("progress-striped").addClass("active");
gcodeUploadProgressBar.css("width", "100%");
if (payload.progressAvailable) {
gcodeUploadProgressBar.text(_.sprintf(gettext("Slicing ... (%(percentage)d%%)"), {percentage: 0}));
} else {
gcodeUploadProgressBar.text(gettext("Slicing ..."));
}
} else if (type == "SlicingDone") {
gcodeUploadProgress.removeClass("progress-striped").removeClass("active");
gcodeUploadProgressBar.css("width", "0%");
gcodeUploadProgressBar.text("");
new PNotify({title: gettext("Slicing done"), text: _.sprintf(gettext("Sliced %(stl)s to %(gcode)s, took %(time).2f seconds"), payload), type: "success"});
} else if (type == "SlicingCancelled") {
gcodeUploadProgress.removeClass("progress-striped").removeClass("active");
gcodeUploadProgressBar.css("width", "0%");
gcodeUploadProgressBar.text("");
} else if (type == "SlicingFailed") {
gcodeUploadProgress.removeClass("progress-striped").removeClass("active");
gcodeUploadProgressBar.css("width", "0%");
gcodeUploadProgressBar.text("");
html = _.sprintf(gettext("Could not slice %(stl)s to %(gcode)s: %(reason)s"), payload);
new PNotify({title: gettext("Slicing failed"), text: html, type: "error", hide: false});
} else if (type == "TransferStarted") {
gcodeUploadProgress.addClass("progress-striped").addClass("active");
gcodeUploadProgressBar.css("width", "100%");
gcodeUploadProgressBar.text(gettext("Streaming ..."));
} else if (type == "TransferDone") {
gcodeUploadProgress.removeClass("progress-striped").removeClass("active");
gcodeUploadProgressBar.css("width", "0%");
gcodeUploadProgressBar.text("");
new PNotify({
title: gettext("Streaming done"),
text: _.sprintf(gettext("Streamed %(local)s to %(remote)s on SD, took %(time).2f seconds"), payload),
type: "success"
});
} else if (type == "PrintCancelled") {
if (type == "PrintCancelled") {
if (payload.firmwareError) {
new PNotify({
title: gettext("Unhandled communication error"),

89
src/octoprint/static/js/app/viewmodels/files.js
View file

@ -58,6 +58,8 @@ $(function() {
self.localTarget = undefined;
self.sdTarget = undefined;
self.uploadProgressText = ko.observable();
self._uploadInProgress = false;
// initialize list helper
@ -449,10 +451,60 @@ $(function() {
self.requestData();
};
self.onEventSlicingStarted = function(payload) {
self.uploadProgress
.addClass("progress-striped")
.addClass("active");
self.uploadProgressBar.css("width", "100%");
if (payload.progressAvailable) {
self.uploadProgressText(_.sprintf(gettext("Slicing ... (%(percentage)d%%)"), {percentage: 0}));
} else {
self.uploadProgressText(gettext("Slicing ..."));
}
};
self.onSlicingProgress = function(slicer, modelPath, machinecodePath, progress) {
self.uploadProgressText(_.sprintf(gettext("Slicing ... (%(percentage)d%%)"), {percentage: Math.round(progress)}));
};
self.onEventSlicingCancelled = function(payload) {
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
self.uploadProgressBar
.css("width", "0%");
self.uploadProgressText("");
};
self.onEventSlicingDone = function(payload) {
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
self.uploadProgressBar
.css("width", "0%");
self.uploadProgressText("");
new PNotify({
title: gettext("Slicing done"),
text: _.sprintf(gettext("Sliced %(stl)s to %(gcode)s, took %(time).2f seconds"), payload),
type: "success"
});
self.requestData();
};
self.onEventSlicingFailed = function(payload) {
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
self.uploadProgressBar
.css("width", "0%");
self.uploadProgressText("");
var html = _.sprintf(gettext("Could not slice %(stl)s to %(gcode)s: %(reason)s"), payload);
new PNotify({title: gettext("Slicing failed"), text: html, type: "error", hide: false});
};
self.onEventMetadataAnalysisFinished = function(payload) {
self.requestData();
};
@ -461,7 +513,29 @@ $(function() {
self.requestData();
};
self.onEventTransferStarted = function(payload) {
self.uploadProgress
.addClass("progress-striped")
.addClass("active");
self.uploadProgressBar
.css("width", "100%");
self.uploadProgressText(gettext("Streaming ..."));
};
self.onEventTransferDone = function(payload) {
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
self.uploadProgressBar
.css("width", "0");
self.uploadProgressText("");
new PNotify({
title: gettext("Streaming done"),
text: _.sprintf(gettext("Streamed %(local)s to %(remote)s on SD, took %(time).2f seconds"), payload),
type: "success"
});
self.requestData(payload.remote, "sdcard");
};
@ -531,8 +605,8 @@ $(function() {
.done(function() {
if (data.result.done) {
self.uploadProgressBar
.css("width", "0%")
.text("");
.css("width", "0%");
self.uploadProgressText("");
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
@ -561,8 +635,8 @@ $(function() {
hide: false
});
self.uploadProgressBar
.css("width", "0%")
.text("");
.css("width", "0%");
self.uploadProgressText("");
self.uploadProgress
.removeClass("progress-striped")
.removeClass("active");
@ -576,15 +650,14 @@ $(function() {
var progress = parseInt(data.loaded / data.total * 100, 10);
self.uploadProgressBar
.css("width", progress + "%")
.text(gettext("Uploading ..."));
.css("width", progress + "%");
self.uploadProgressText(gettext("Uploading ..."));
if (progress >= 100) {
self.uploadProgress
.addClass("progress-striped")
.addClass("active");
self.uploadProgressBar
.text(gettext("Saving ..."));
self.uploadProgressText(gettext("Saving ..."));
}
};

8
src/octoprint/static/js/app/viewmodels/printerstate.js
View file

@ -30,6 +30,7 @@ $(function() {
self.filepos = ko.observable(undefined);
self.printTime = ko.observable(undefined);
self.printTimeLeft = ko.observable(undefined);
self.printTimeLeftOrigin = ko.observable(undefined);
self.sd = ko.observable(undefined);
self.timelapse = ko.observable(undefined);
@ -88,6 +89,12 @@ $(function() {
return 0;
return self.progress();
});
self.progressBarString = ko.pureComputed(function() {
if (!self.progress()) {
return "";
}
return _.sprintf("%d%%", self.progress());
});
self.pauseString = ko.pureComputed(function() {
if (self.isPaused())
return gettext("Continue");
@ -191,6 +198,7 @@ $(function() {
self.filepos(data.filepos);
self.printTime(data.printTime);
self.printTimeLeft(data.printTimeLeft);
self.printTimeLeftOrigin(data.printTimeLeftOrigin);
};
self._processZData = function(data) {

7
src/octoprint/templates/sidebar/files.jinja2
View file

@ -57,8 +57,11 @@
</span>
{% endif %}
</div>
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
<div class="bar" style="width: 0%"></div>
<div id="gcode_upload_progress" class="progress progress-text-centered">
<span class="progress-text-back" data-bind="text: uploadProgressText"></span>
<div class="bar">
<span class="progress-text-front" data-bind="copyWidth: ':parent :parent :parent :parent form', text: uploadProgressText"></span>
</div>
</div>
<div>
<small class="muted">{{ _('Hint: You can also drag and drop files on this page to upload them.') }}</small>

7
src/octoprint/templates/sidebar/state.jinja2
View file

@ -9,8 +9,11 @@
{{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong><br>
{{ _('Printed') }}: <strong data-bind="text: byteString"></strong><br>
<div class="progress">
<div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }"></div>
<div class="progress progress-text-centered">
<span class="progress-text-back" data-bind="text: progressBarString()"></span>
<div class="bar" id="job_progressBar" data-bind="style: {width: progressString() + '%'}">
<span class="progress-text-front" data-bind="copyWidth: ':parent :parent', text: progressBarString()"></span>
</div>
</div>
<div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">

7
src/octoprint/templates/tabs/gcodeviewer.jinja2
View file

@ -5,8 +5,11 @@
<input id="gcode_slider_commands" type="text" style="width: 554px">
</div>
<div class="progress" >
<div class="bar" style="width: 0%;" data-bind="text: ui_progress_text, style: { width: ui_progress_percentage() + '%' }"></div>
<div class="progress progress-text-centered">
<span class="progress-text-back" data-bind="text: ui_progress_text"></span>
<div class="bar" style="width: 0;" data-bind="style: { width: ui_progress_percentage() + '%' }">
<span class="progress-text-front" data-bind="copyWidth: ':parent :parent', text: ui_progress_text"></span>
</div>
</div>
<div class="row-fluid">