From abb2a577b0d0b4e540831a91995add96a3b50e4f Mon Sep 17 00:00:00 2001 From: Sebastien Clement Date: Wed, 25 Mar 2020 20:44:23 +0100 Subject: [PATCH] Rebuild button and add option to enable big button #11 --- octoprint_simpleemergencystop/__init__.py | 3 +- .../static/css/simpleemergencystop.css | 61 ++++++++++++++ .../static/js/simpleemergencystop.js | 79 ++++++++++++------- .../simpleemergencystop_navbar.jinja2 | 27 ++++++- .../simpleemergencystop_settings.jinja2 | 18 ++++- 5 files changed, 153 insertions(+), 35 deletions(-) create mode 100644 octoprint_simpleemergencystop/static/css/simpleemergencystop.css diff --git a/octoprint_simpleemergencystop/__init__.py b/octoprint_simpleemergencystop/__init__.py index 27b639a..58b3ae5 100644 --- a/octoprint_simpleemergencystop/__init__.py +++ b/octoprint_simpleemergencystop/__init__.py @@ -15,7 +15,8 @@ class SimpleemergencystopPlugin(octoprint.plugin.StartupPlugin, def get_settings_defaults(self): return dict( emergencyGCODE="M112", - confirmationDialog=False + confirmationDialog=False, + big_button=False ) def on_settings_save(self, data): diff --git a/octoprint_simpleemergencystop/static/css/simpleemergencystop.css b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css new file mode 100644 index 0000000..72253a4 --- /dev/null +++ b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css @@ -0,0 +1,61 @@ +.ses_small i { + color: red; +} + +.ses_small_disabled i { + color: grey; + cursor: default; +} + +.ses_small_disabled { + cursor: default; +} + +.ses_big_disabled { + cursor: default; +} + +.ses_big_disabled .ses_big_middle{ + background-color: grey; +} +.ses_big_disabled .ses_big_middle h5 { + color: lightgray; +} + +.ses_big_disabled .ses_big_middle i { + color: lightgray; +} + +.ses_big_middle { + display: inline-block; + height: calc(100% - 10px); + margin: 4px 0 5px 0; + padding: 0 5px 0 5px; + background: red; + border-style: solid ; + border-width: 1px; + border-radius: 5px; +} + +.ses_big_middle h5 { + font-size: 15px; + text-shadow: none; + font-weight: bold; + padding: 0 2px 0 2px; + margin: 0; + /*background-color: red;*/ + height: 100%; + text-align: center; + line-height: 30px; + color: white; + display: inline; +} + +.ses_big i { + /*font-size: 20px;*/ + /*font-weight: bold;*/ + /*display: inline;*/ + color: yellow; + text-shadow: none; + vertical-align: middle; +} diff --git a/octoprint_simpleemergencystop/static/js/simpleemergencystop.js b/octoprint_simpleemergencystop/static/js/simpleemergencystop.js index 72fa447..300c1c1 100644 --- a/octoprint_simpleemergencystop/static/js/simpleemergencystop.js +++ b/octoprint_simpleemergencystop/static/js/simpleemergencystop.js @@ -4,49 +4,72 @@ * Author: Sebastien Clement * License: AGPLv3 */ -$(function() { +$(function () { function SimpleemergencystopViewModel(parameters) { - var self = this; - self.settings = undefined; - self.allSettings = parameters[0]; - self.loginState = parameters[1]; - self.printerState = parameters[2]; - self.confirmation = undefined; + this.settings = undefined; + this.allSettings = parameters[0]; + this.loginState = parameters[1]; + this.printerState = parameters[2]; + this.confirmation = undefined; - self.onAfterBinding = function() { - self.confirmation = $("#confirmation"); - self.settings = self.allSettings.settings.plugins.simpleemergencystop; + this.onAfterBinding = function () { + + }; + this.onBeforeBinding = function () { + this.confirmation = $("#confirmation"); + this.settings = this.allSettings.settings.plugins.simpleemergencystop; }; - self.click = function () { - if(self.settings.confirmationDialog()) - self.confirmation.modal("show"); + this.click = function () { + if (!this.can_send_command()) + return; + if (this.settings.confirmationDialog()) + this.confirmation.modal("show"); else - self.sendCommand() + this.sendCommand() }; - self.sendCommand = function () { + this.sendCommand = function () { $.ajax({ - url: API_BASEURL+"plugin/simpleemergencystop", - type: "POST", - dataType: "json", - data: JSON.stringify({ - command: "emergencyStop" - }), - contentType: "application/json; charset=UTF-8", - success: function (data,status) { + url: API_BASEURL + "plugin/simpleemergencystop", + type: "POST", + dataType: "json", + data: JSON.stringify({ + command: "emergencyStop" + }), + contentType: "application/json; charset=UTF-8", + success: function (data, status) { - } + } }); - self.confirmation.modal("hide"); + this.confirmation.modal("hide"); }; - self.visibleTest = function () { - return self.loginState.isUser() && self.printerState.isOperational() + this.big_button_visible = function () { + return this.loginState.isUser() && this.settings.big_button() }; + this.little_button_visible = function () { + return this.loginState.isUser() && !this.settings.big_button() + }; + + this.can_send_command = function () { + return this.loginState.isUser() && this.printerState.isOperational() + }; + + this.little_button_css = function () { + return this.printerState.isOperational() ? "ses_small" : "ses_small_disabled"; + }; + this.big_button_css = function () { + return this.printerState.isOperational() ? "ses_big" : "ses_big ses_big_disabled"; + }; + + this.get_title = function () { + return this.printerState.isOperational() ? gettext('!!! Emergency Stop !!! ') : gettext('Printer disconnected') + } + } @@ -54,7 +77,7 @@ $(function() { OCTOPRINT_VIEWMODELS.push([ SimpleemergencystopViewModel, - ["settingsViewModel","loginStateViewModel","printerStateViewModel"], + ["settingsViewModel", "loginStateViewModel", "printerStateViewModel"], ["#navbar_plugin_simpleemergencystop"] ]); diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 index 97ff57e..accd807 100644 --- a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 +++ b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 @@ -1,5 +1,28 @@ - - + + + + + +{# #} + + + + +
+ + + + +
{{ _('Emergency Stop') }}
+ + + + +
+ diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2 index a822620..3345927 100644 --- a/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2 +++ b/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2 @@ -1,14 +1,24 @@ -

{{_("Simple Emergency Stop")}}

+

{{ _("Simple Emergency Stop") }}

- +
- +
+
+
-
+
+ +
+ +
+
+ +