From 324601dfedd2b9910875d3c05d8144541a959a04 Mon Sep 17 00:00:00 2001 From: Richard Mitchell Date: Fri, 1 Mar 2013 21:52:15 +0000 Subject: [PATCH 1/4] Did clever stuff at first for restart but replacing the appearance of start is all that is needed I believe --- octoprint/static/css/ui.css | 6 ++++++ octoprint/static/js/ui.js | 2 +- octoprint/templates/index.html | 8 +++++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/octoprint/static/css/ui.css b/octoprint/static/css/ui.css index 92f6857..b7ca7a9 100644 --- a/octoprint/static/css/ui.css +++ b/octoprint/static/css/ui.css @@ -46,6 +46,12 @@ body { padding: 0px 15px; } +.print-control .btn { + padding-left: 4px; + padding-right: 4px; +} + + /** Tables */ table { diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js index d96485a..a799e51 100644 --- a/octoprint/static/js/ui.js +++ b/octoprint/static/js/ui.js @@ -1240,7 +1240,7 @@ $(function() { //~~ Print job control - $("#job_print").click(function() { + $("#job_print, #job_restart").click(function() { $.ajax({ url: AJAX_BASEURL + "control/print", type: "POST", diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html index 814ac7b..5af55f7 100644 --- a/octoprint/templates/index.html +++ b/octoprint/templates/index.html @@ -74,9 +74,11 @@
- - - +
+ + + +
From b2408c92a5ec9fd31dc36f9dec6de6bf7947a8b0 Mon Sep 17 00:00:00 2001 From: Richard Mitchell Date: Fri, 1 Mar 2013 21:57:13 +0000 Subject: [PATCH 2/4] Didn't add the restart button after all --- octoprint/static/js/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js index a799e51..d96485a 100644 --- a/octoprint/static/js/ui.js +++ b/octoprint/static/js/ui.js @@ -1240,7 +1240,7 @@ $(function() { //~~ Print job control - $("#job_print, #job_restart").click(function() { + $("#job_print").click(function() { $.ajax({ url: AJAX_BASEURL + "control/print", type: "POST", From 943d734993b35fa435486695922fe5a868b12e62 Mon Sep 17 00:00:00 2001 From: Richard Mitchell Date: Fri, 1 Mar 2013 22:19:58 +0000 Subject: [PATCH 3/4] That was easy enough to continue temp monitoring whilst paused --- octoprint/util/comm.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/octoprint/util/comm.py b/octoprint/util/comm.py index c8f8d8d..3161084 100644 --- a/octoprint/util/comm.py +++ b/octoprint/util/comm.py @@ -393,8 +393,8 @@ class MachineCom(object): self._changeState(self.STATE_OPERATIONAL) elif time.time() > timeout: self.close() - elif self._state == self.STATE_OPERATIONAL: - #Request the temperature on comm timeout (every 2 seconds) when we are not printing. + elif self._state == self.STATE_OPERATIONAL or self._state == self.STATE_PAUSED: + #Request the temperature on comm timeout (every 5 seconds) when we are not printing. if line == '': self._sendCommand("M105") tempRequestTimeout = time.time() + 5 From 260606601dc56c129470f35347bb3089e8ede681 Mon Sep 17 00:00:00 2001 From: Richard Mitchell Date: Sat, 2 Mar 2013 10:56:32 +0000 Subject: [PATCH 4/4] Title and limited color control via settings --- octoprint/server.py | 8 ++++ octoprint/settings.py | 4 ++ octoprint/static/css/ui.css | 75 +++++++++++++++++++++++++++++++ octoprint/static/js/ui.js | 34 ++++++++++++++ octoprint/templates/index.html | 10 ++--- octoprint/templates/settings.html | 18 ++++++++ 6 files changed, 144 insertions(+), 5 deletions(-) diff --git a/octoprint/server.py b/octoprint/server.py index 565ced0..2a49645 100644 --- a/octoprint/server.py +++ b/octoprint/server.py @@ -336,6 +336,10 @@ def getSettings(): [movementSpeedX, movementSpeedY, movementSpeedZ, movementSpeedE] = s.get(["printerParameters", "movementSpeed", ["x", "y", "z", "e"]]) return jsonify({ + "appearance": { + "name": s.get(["appearance", "name"]), + "color": s.get(["appearance", "color"]) + }, "printer": { "movementSpeedX": movementSpeedX, "movementSpeedY": movementSpeedY, @@ -369,6 +373,10 @@ def setSettings(): data = request.json s = settings() + if "appearance" in data.keys(): + if "name" in data["appearance"].keys(): s.set(["appearance", "name"], data["appearance"]["name"]) + if "color" in data["appearance"].keys(): s.set(["appearance", "color"], data["appearance"]["color"]) + if "printer" in data.keys(): if "movementSpeedX" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "x"], data["printer"]["movementSpeedX"]) if "movementSpeedY" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "y"], data["printer"]["movementSpeedY"]) diff --git a/octoprint/settings.py b/octoprint/settings.py index c2013bc..e0bb981 100644 --- a/octoprint/settings.py +++ b/octoprint/settings.py @@ -48,6 +48,10 @@ old_default_settings = { default_settings = old_default_settings.copy() default_settings.update({ + "appearance": { + "name": "OctoPrint", + "color": "white" + }, "controls": [], "printerParameters": { "movementSpeed": { diff --git a/octoprint/static/css/ui.css b/octoprint/static/css/ui.css index b7ca7a9..9ac805b 100644 --- a/octoprint/static/css/ui.css +++ b/octoprint/static/css/ui.css @@ -4,6 +4,77 @@ body { padding-top: 60px; } +/* This would be far simpler using .less */ +#navbar .navbar-inner.white { + background-color: #FAFAFA; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #F2F2F2); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #F2F2F2); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner.red { + background-color: #F22828; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #F22828); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #F22828); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #F22828); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #F22828); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #F22828); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner.orange { + background-color: #F27728; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #F27728); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #F27728); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #F27728); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #F27728); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #F27728); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner.yellow { + background-color: #F2DE28; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #F2DE28); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #F2DE28); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #F2DE28); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner.green { + background-color: #77FF28; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #77FF28); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #77FF28); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #77FF28); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #77FF28); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #77FF28); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner.blue { + background-color: #2877FF; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #2877FF); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #2877FF); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #2877FF); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #2877FF); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #2877FF); /* Standard syntax; must be last */ +} + +/* Colors too close together in RGB to tell apart clearly - so no indigo I'm afraid */ + +#navbar .navbar-inner.violet { + background-color: #7728FF; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, #FFFFFF, #7728FF); /* For Chrome and Safari */ + background-image: -moz-linear-gradient(top, #FFFFFF, #7728FF); /* For old Fx (3.6 to 15) */ + background-image: -ms-linear-gradient(top, #FFFFFF, #7728FF); /* For pre-releases of IE 10*/ + background-image: -o-linear-gradient(top, #FFFFFF, #7728FF); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, #FFFFFF, #7728FF); /* Standard syntax; must be last */ +} + +#navbar .navbar-inner .brand, #navbar .navbar-inner .nav>li>a { + /* color: black; /* need a color that suits all backgrounds, removed for now */ + text-shadow: none; /* shadow stands out too much on colored backgrounds */ +} + /** OctoPrint application tabs */ .octoprint-container .tab-content { @@ -227,6 +298,10 @@ ul.dropdown-menu li a { height: 30px; } +/** Settings dialog */ +#settings_dialog { + width: 650px; +} /** General helper classes */ .text-right { diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js index d96485a..7a069a3 100644 --- a/octoprint/static/js/ui.js +++ b/octoprint/static/js/ui.js @@ -202,6 +202,14 @@ function PrinterStateViewModel() { } } +function AppearanceViewModel(settingsViewModel) { + var self = this; + + self.name = settingsViewModel.appearance_name; + self.color = settingsViewModel.appearance_color; +} + + function TemperatureViewModel(settingsViewModel) { var self = this; @@ -1045,6 +1053,12 @@ function GcodeViewModel() { function SettingsViewModel() { var self = this; + self.appearance_name = ko.observable(undefined); + self.appearance_color = ko.observable(undefined); + + /* I did attempt to allow arbitrary gradients but cross browser support via knockout or jquery was going to be horrible */ + self.appearance_available_colors = ko.observable(["white", "red", "orange", "yellow", "green", "blue", "violet"]); + self.printer_movementSpeedX = ko.observable(undefined); self.printer_movementSpeedY = ko.observable(undefined); self.printer_movementSpeedZ = ko.observable(undefined); @@ -1083,6 +1097,9 @@ function SettingsViewModel() { } self.fromResponse = function(response) { + self.appearance_name(response.appearance.name); + self.appearance_color(response.appearance.color); + self.printer_movementSpeedX(response.printer.movementSpeedX); self.printer_movementSpeedY(response.printer.movementSpeedY); self.printer_movementSpeedZ(response.printer.movementSpeedZ); @@ -1106,6 +1123,10 @@ function SettingsViewModel() { self.saveData = function() { var data = { + "appearance" : { + "name": self.appearance_name(), + "color": self.appearance_color() + }, "printer": { "movementSpeedX": self.printer_movementSpeedX(), "movementSpeedY": self.printer_movementSpeedY(), @@ -1218,6 +1239,7 @@ $(function() { var connectionViewModel = new ConnectionViewModel(); var printerStateViewModel = new PrinterStateViewModel(); var settingsViewModel = new SettingsViewModel(); + var appearanceViewModel = new AppearanceViewModel(settingsViewModel); var temperatureViewModel = new TemperatureViewModel(settingsViewModel); var controlsViewModel = new ControlsViewModel(); var speedViewModel = new SpeedViewModel(); @@ -1238,6 +1260,16 @@ $(function() { gcodeViewModel ); + //~~ Show settings - to ensure centered + $('#navbar_show_settings').click(function() { + $('#settings_dialog').modal() + .css({ + width: 'auto', + 'margin-left': function() { return -($(this).width() /2); } + }); + return false; + }) + //~~ Print job control $("#job_print").click(function() { @@ -1390,6 +1422,8 @@ $(function() { ko.applyBindings(speedViewModel, document.getElementById("speed")); ko.applyBindings(gcodeViewModel, document.getElementById("gcode")); ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog")); + ko.applyBindings(appearanceViewModel, document.getElementById("navbar")); + ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]); var webcamElement = document.getElementById("webcam"); if (webcamElement) { diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html index 5af55f7..131b2cc 100644 --- a/octoprint/templates/index.html +++ b/octoprint/templates/index.html @@ -1,7 +1,7 @@ - OctoPrint + OctoPrint @@ -23,13 +23,13 @@ -
-
+