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

@@ -4,49 +4,72 @@
  * Author: Sebastien Clement
  * License: AGPLv3
  */
-$(function() {
+$(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",
+                url: API_BASEURL + "plugin/simpleemergencystop",
-                 type: "POST",
+                type: "POST",
-                 dataType: "json",
+                dataType: "json",
-                 data: JSON.stringify({
+                data: JSON.stringify({
-                     command: "emergencyStop"
+                    command: "emergencyStop"
-                 }),
+                }),
-                 contentType: "application/json; charset=UTF-8",
+                contentType: "application/json; charset=UTF-8",
-                 success: function (data,status) {
+                success: function (data, status) {
 
-                 }
+                }
             });
-            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')
+        }
+
 
     }
 
@@ -54,7 +77,7 @@ $(function() {
     OCTOPRINT_VIEWMODELS.push([
         SimpleemergencystopViewModel,
 
-        ["settingsViewModel","loginStateViewModel","printerStateViewModel"],
+        ["settingsViewModel", "loginStateViewModel", "printerStateViewModel"],
 
         ["#navbar_plugin_simpleemergencystop"]
     ]);

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

@@ -1,14 +1,24 @@
-<h3>{{_("Simple Emergency Stop")}}</h3>
+<h3>{{ _("Simple Emergency Stop") }}</h3>
 <form class="form-horizontal">
     <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>
-         <label class="control-label">{{ _('Enable warning dialog ') }}</label>
+    </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>