From 6b86d05cbfa3efd865896266efacae73c3b70dce Mon Sep 17 00:00:00 2001 From: Jason F Date: Sat, 23 Dec 2017 12:02:53 -0500 Subject: [PATCH] Added file loading animation The file download is relatively quick but the there's a freeze or slowdown when dialog is being shown -- that's why it's not a progress bar. The UI is essentially frozen while the text is loaded into the edit dialog so there's no good way to do a progress bar. --- .editorconfig | 0 .gitignore | 0 MANIFEST.in | 0 README.md | 0 babel.cfg | 0 extras/GcodeEditor.md | 0 extras/assets/img/edit_gcode.png | Bin extras/assets/img/edit_gcode2.png | Bin octoprint_GcodeEditor/__init__.py | 1 + .../static/css/GcodeEditor.css | 73 ++++++++++++++++++ .../static/js/GcodeEditor.js | 73 ++++++++++-------- .../templates/GcodeEditor.jinja2 | 5 +- .../templates/GcodeEditor_settings.jinja2 | 0 requirements.txt | 0 setup.py | 2 +- translations/README.txt | 0 16 files changed, 119 insertions(+), 35 deletions(-) mode change 100644 => 100755 .editorconfig mode change 100644 => 100755 .gitignore mode change 100644 => 100755 MANIFEST.in mode change 100644 => 100755 README.md mode change 100644 => 100755 babel.cfg mode change 100644 => 100755 extras/GcodeEditor.md mode change 100644 => 100755 extras/assets/img/edit_gcode.png mode change 100644 => 100755 extras/assets/img/edit_gcode2.png mode change 100644 => 100755 octoprint_GcodeEditor/__init__.py create mode 100755 octoprint_GcodeEditor/static/css/GcodeEditor.css mode change 100644 => 100755 octoprint_GcodeEditor/static/js/GcodeEditor.js mode change 100644 => 100755 octoprint_GcodeEditor/templates/GcodeEditor.jinja2 mode change 100644 => 100755 octoprint_GcodeEditor/templates/GcodeEditor_settings.jinja2 mode change 100644 => 100755 requirements.txt mode change 100644 => 100755 setup.py mode change 100644 => 100755 translations/README.txt diff --git a/.editorconfig b/.editorconfig old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/MANIFEST.in b/MANIFEST.in old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/babel.cfg b/babel.cfg old mode 100644 new mode 100755 diff --git a/extras/GcodeEditor.md b/extras/GcodeEditor.md old mode 100644 new mode 100755 diff --git a/extras/assets/img/edit_gcode.png b/extras/assets/img/edit_gcode.png old mode 100644 new mode 100755 diff --git a/extras/assets/img/edit_gcode2.png b/extras/assets/img/edit_gcode2.png old mode 100644 new mode 100755 diff --git a/octoprint_GcodeEditor/__init__.py b/octoprint_GcodeEditor/__init__.py old mode 100644 new mode 100755 index 1c65887..fc2a6fa --- a/octoprint_GcodeEditor/__init__.py +++ b/octoprint_GcodeEditor/__init__.py @@ -12,6 +12,7 @@ class GcodeEditorPlugin(octoprint.plugin.TemplatePlugin, def get_assets(self): return dict( js=["js/GcodeEditor.js"], + css=["css/GcodeEditor.css"] ) def get_settings_defaults(self): diff --git a/octoprint_GcodeEditor/static/css/GcodeEditor.css b/octoprint_GcodeEditor/static/css/GcodeEditor.css new file mode 100755 index 0000000..4714837 --- /dev/null +++ b/octoprint_GcodeEditor/static/css/GcodeEditor.css @@ -0,0 +1,73 @@ + +.loading { + font-size: 40px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.loading span { + /** + * Use the blink animation, which is defined above + */ + animation-name: blink; + /** + * The animation should take 1.4 seconds + */ + animation-duration: 1.4s; + /** + * It will repeat itself forever + */ + animation-iteration-count: infinite; + /** + * This makes sure that the starting style (opacity: .2) + * of the animation is applied before the animation starts. + * Otherwise we would see a short flash or would have + * to set the default styling of the dots to the same + * as the animation. Same applies for the ending styles. + */ + animation-fill-mode: both; +} + +.loading span:nth-child(2) { + /** + * Starts the animation of the third dot + * with a delay of .2s, otherwise all dots + * would animate at the same time + */ + animation-delay: .2s; +} + +.loading span:nth-child(3) { + /** + * Starts the animation of the third dot + * with a delay of .4s, otherwise all dots + * would animate at the same time + */ + animation-delay: .4s; +} + +@keyframes blink { + /** + * At the start of the animation the dot + * has an opacity of .2 + */ + 0% { + opacity: .2; + } + /** + * At 20% the dot is fully visible and + * then fades out slowly + */ + 20% { + opacity: 1; + } + /** + * Until it reaches an opacity of .2 and + * the animation can start again + */ + 100% { + opacity: .2; + } +} diff --git a/octoprint_GcodeEditor/static/js/GcodeEditor.js b/octoprint_GcodeEditor/static/js/GcodeEditor.js old mode 100644 new mode 100755 index 779c8a9..2bfad18 --- a/octoprint_GcodeEditor/static/js/GcodeEditor.js +++ b/octoprint_GcodeEditor/static/js/GcodeEditor.js @@ -23,7 +23,7 @@ $(function() { self.maxGcodeSize = ko.observable(); self.maxGcodeSizeMobile = ko.observable(); - self.saveGcode = function() { + self.saveGcode = ko.pureComputed(function() { var fName = self._sanitize(self.destinationFilename()); var gtext = self.gcodeTextArea(); @@ -32,7 +32,7 @@ $(function() { OctoPrint.files.upload("local", file); $("#gcode_edit_dialog").modal("hide"); - } + }); self.canSaveGcode = ko.pureComputed(function() { return !(self.printerState.isPrinting() && self.printerState.filename() === self.destinationFilename()); @@ -69,6 +69,9 @@ $(function() { "Pragma": "no-cache", "Expires": "0", "Cache-Control": "no-cache, no-store, must-revalidate" + }, + beforeSend: function() { + $('#loading_modal').modal("show"); } // Done }).done(function(data) { @@ -84,6 +87,10 @@ $(function() { }); } + $('body').on('shown', '#gcode_edit_dialog', function(e){ + $('#loading_modal').modal("hide"); + }); + function removeEditButtons() { $("#files div.gcode_files div.entry .action-buttons div.btn-mini.editGcode").remove(); } @@ -221,61 +228,61 @@ $(function() { } // Get root file path - function getRootFilePath() { - + function getRootFilePath() { + // Initialize entry var entry = self.files.listHelper.allItems[0]; - + // Check if OctoPrint version doesn't use upload folders if(entry && !entry.hasOwnProperty("parent")) { - + // Construct root file path var root = { children: {} }; - + // Go throguh all entries for(var index in self.files.listHelper.allItems) - + // Add entry to root's children root.children[index] = self.files.listHelper.allItems[index]; - + // Return root return root; } - + // Loop while entry has a parent while(entry && entry.hasOwnProperty("parent") && typeof entry["parent"] !== "undefined") - + // Set entry to its parent entry = entry["parent"]; - + // Return entry return entry; } // Get G-code path and name - function getGcodePathAndName(entry, gcodeUrl) { - - // Check if entry is a folder - if(entry && entry.hasOwnProperty("children")) - - // Go through each entry in the folder - for(var child in entry.children) { - - // Check if current child is the specified G-code file - var value = getGcodePathAndName(entry.children[child], gcodeUrl); - if(typeof value !== "undefined") - - // Return upload date - return value; - } - - // Otherwise check if entry is the specified G-code file - else if(entry && entry.hasOwnProperty("name") && entry.refs && entry.refs.hasOwnProperty("download") && entry["refs"]["download"] === gcodeUrl) - - // Return path and name - return (typeof self.files.currentPath !== "undefined" ? "/" : "") + (entry.hasOwnProperty("path") ? entry["path"] : entry["name"]); + function getGcodePathAndName(entry, gcodeUrl) { + + // Check if entry is a folder + if (entry && entry.hasOwnProperty("children")) + + // Go through each entry in the folder + for(var child in entry.children) { + + // Check if current child is the specified G-code file + var value = getGcodePathAndName(entry.children[child], gcodeUrl); + if(typeof value !== "undefined") + + // Return upload date + return value; + } + + // Otherwise check if entry is the specified G-code file + else if(entry && entry.hasOwnProperty("name") && entry.refs && entry.refs.hasOwnProperty("download") && entry["refs"]["download"] === gcodeUrl) + + // Return path and name + return (typeof self.files.currentPath !== "undefined" ? "/" : "") + (entry.hasOwnProperty("path") ? entry["path"] : entry["name"]); } // Encode quotes https://github.com/donovan6000/M33-Fio/blob/master/octoprint_m33fio/static/js/m33fio.js#L681 diff --git a/octoprint_GcodeEditor/templates/GcodeEditor.jinja2 b/octoprint_GcodeEditor/templates/GcodeEditor.jinja2 old mode 100644 new mode 100755 index 87ab79f..75e87d1 --- a/octoprint_GcodeEditor/templates/GcodeEditor.jinja2 +++ b/octoprint_GcodeEditor/templates/GcodeEditor.jinja2 @@ -13,7 +13,6 @@
-
@@ -34,3 +33,7 @@ >{{ _('Save') }} + +
+
Loading...
+
diff --git a/octoprint_GcodeEditor/templates/GcodeEditor_settings.jinja2 b/octoprint_GcodeEditor/templates/GcodeEditor_settings.jinja2 old mode 100644 new mode 100755 diff --git a/requirements.txt b/requirements.txt old mode 100644 new mode 100755 diff --git a/setup.py b/setup.py old mode 100644 new mode 100755 index b069029..179cb65 --- a/setup.py +++ b/setup.py @@ -14,7 +14,7 @@ plugin_name = "OctoPrint-GcodeEditor" # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module -plugin_version = "0.2.4" +plugin_version = "0.2.5" # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin # module diff --git a/translations/README.txt b/translations/README.txt old mode 100644 new mode 100755