Rebuild button and add option to enable big button #11

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):

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;
+}

octoprint_simpleemergencystop/static/js/simpleemergencystop.js

@@ -6,27 +6,31 @@
  */
 $(function () {
     function SimpleemergencystopViewModel(parameters) {
-        var self = this;
+        this.settings = undefined;
-        self.settings = undefined;
+        this.allSettings = parameters[0];
-        self.allSettings = parameters[0];
+        this.loginState = parameters[1];
-        self.loginState = parameters[1];
+        this.printerState = parameters[2];
-        self.printerState = parameters[2];
+        this.confirmation = undefined;
-        self.confirmation = undefined;
 
-        self.onAfterBinding = function() {
+        this.onAfterBinding = function () {
-            self.confirmation = $("#confirmation");
+
-            self.settings = self.allSettings.settings.plugins.simpleemergencystop;
+        };
+        this.onBeforeBinding = function () {
+            this.confirmation = $("#confirmation");
+            this.settings = this.allSettings.settings.plugins.simpleemergencystop;
         };
 
-        self.click = function () {
+        this.click = function () {
-            if(self.settings.confirmationDialog())
+            if (!this.can_send_command())
-                self.confirmation.modal("show");
+                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",
@@ -39,14 +43,33 @@ $(function() {
 
                 }
             });
-            self.confirmation.modal("hide");
+            this.confirmation.modal("hide");
 
         };
 
-        self.visibleTest = function () {
+        this.big_button_visible = function () {
-            return  self.loginState.isUser() && self.printerState.isOperational()
+            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')
+        }
+
 
     }
 

octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2

@@ -1,5 +1,28 @@
-<a data-bind="click: click, visible: visibleTest()"  title="{{ _('!!! Emergency Stop !!!') }}" href="#">
+<a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
-    <i class="icon-remove-sign" style="color: red"></i>
+   href="#" style="padding: 5px 5px 5px 5px">
+    <span class="fa-stack" style="font-size: 15px">
+        <i class="far fa-circle fa-stack-2x" ></i>
+        <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+    </span>
+{#    <i class="" style="font-size: 22px"></i>#}
+</a>
+
+<a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
+   href="#"
+   style="padding: 0px 5px 0px 5px">
+
+    <div class="ses_big_middle">
+        <span class="fa-stack" style="font-size: 11px">
+            <i class="far fa-circle fa-stack-2x" ></i>
+            <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+        </span>
+        <h5>{{ _('Emergency Stop') }}</h5>
+        <span class="fa-stack" style="font-size: 11px">
+            <i class="far fa-circle fa-stack-2x" ></i>
+            <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+        </span>
+    </div>
+
 </a>
 
 

octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2

@@ -3,12 +3,22 @@
     <div class="control-group">
         <label class="control-label">{{ _('Emergency GCODE:') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level" data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE">
+            <input type="text" class="input-block-level"
+                   data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE">
         </div>
+    </div>
+    <div class="control-group">
         <label class="control-label">{{ _('Enable warning dialog') }}</label>
         <div class="controls">
             <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.confirmationDialog">
         </div>
-
     </div>
+    <div class="control-group">
+        <label class="control-label">{{ _('Enable big button') }}</label>
+        <div class="controls">
+            <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.big_button">
+        </div>
+    </div>
+
+
 </form>