Update README.md

Adds the possibility to add margin to button

README.md

@@ -62,7 +62,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 
 [license-shield]: https://img.shields.io/github/license/Sebclem/OctoPrint-SimpleEmergencyStop.svg?style=flat-square
-[maintenance-shield]: https://img.shields.io/maintenance/yes/2021.svg?style=flat-square
+[maintenance-shield]: https://img.shields.io/maintenance/yes/2024.svg?style=flat-square
 [project-stage-shield]: https://img.shields.io/badge/project%20stage-Production-green.svg?style=flat-square
 [releases-shield]: https://img.shields.io/github/release/Sebclem/OctoPrint-SimpleEmergencyStop.svg?style=flat-square
 [releases]: https://github.com/Sebclem/OctoPrint-SimpleEmergencyStop/releases

octoprint_simpleemergencystop/__init__.py

@@ -16,7 +16,9 @@ class SimpleemergencystopPlugin(octoprint.plugin.StartupPlugin,
 		return dict(
 			emergencyGCODE="M112",
 			confirmationDialog=False,
-			big_button=False
+			big_button=False,
+			enableMargin=False,
+			marginValue=0,
 		)
 
 	def on_settings_save(self, data):

octoprint_simpleemergencystop/static/js/simpleemergencystop.js

@@ -49,15 +49,33 @@ $(function () {
                 return user.permissions.includes("control") || user.needs.role.includes("control");
             }
             else return true;
-            
+
         }
 
+        this.ses_margin_css = function () {
+            if (this.settings.enableMargin()) {
+                $('#ses_wrapper').css({
+                    'margin-left':`${this.settings.marginValue()}px`,
+                    'margin-right':`${this.settings.marginValue()}px`
+                });
+            } else {
+                $('#ses_wrapper').css({
+                    'margin-left':'0px',
+                    'margin-right':'0px'
+                });
+            }
+        };
+
+        this.ses_visible = function () {
+            return this.loginState.isUser() && this.hasControlPermition();
+        };
+
         this.big_button_visible = function () {
-            return this.loginState.isUser() && this.settings.big_button() && this.hasControlPermition();
+            return this.settings.big_button();
         };
 
         this.little_button_visible = function () {
-            return this.loginState.isUser() && !this.settings.big_button() && this.hasControlPermition();
+            return !this.settings.big_button();
         };
 
         this.can_send_command = function () {

octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2

@@ -1,28 +1,30 @@
-<div>
-    <a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
-        href="#">
-        <span class="fa-stack">
-            <i class="far fa-circle fa-stack-2x"></i>
-            <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-        </span>
-    </a>
-</div>
+<div id="ses_wrapper" data-bind="css: ses_margin_css(), visible: ses_visible()">
+    <div>
+        <a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
+            href="#">
+            <span class="fa-stack">
+                <i class="far fa-circle fa-stack-2x"></i>
+                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+            </span>
+        </a>
+    </div>
 
-<div>
-    <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
-        href="#">
-        <div class="ses_big_middle">
-            <span class="fa-stack">
-                <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">
-                <i class="far fa-circle fa-stack-2x"></i>
-                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-            </span>
-        </div>
-    </a>
+    <div>
+        <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
+            href="#">
+            <div class="ses_big_middle">
+                <span class="fa-stack">
+                    <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">
+                    <i class="far fa-circle fa-stack-2x"></i>
+                    <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+                </span>
+            </div>
+        </a>
+    </div>
 </div>
 
 <div id="confirmation" class="modal hide fade">
@@ -43,4 +45,4 @@
             _("Proceed")
             }}</a>
     </div>
-</div>
+</div>

octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2

@@ -3,7 +3,7 @@
     <div class="control-group">
         <label class="control-label">{{ _('Emergency GCODE:') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level"
+            <input type="text" class=""
                    data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE">
         </div>
     </div>
@@ -19,6 +19,21 @@
             <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.big_button">
         </div>
     </div>
-
-
+    <div class="control-group">
+        <label class="control-label">{{ _('Enable margin') }}</label>
+        <div class="controls">
+            <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.enableMargin">
+        </div>
+    </div>
+    <div class="control-group">
+        <label class="control-label">{{ _('Margin value:') }}</label>
+        <div class="controls">
+            <div class="input-append">
+                <input type="number" class="" step="5" min="0" data-bind="
+                    value: settings.plugins.simpleemergencystop.marginValue,
+                    enable: settings.plugins.simpleemergencystop.enableMargin()">
+                <span class="add-on">px</span>
+            </div>
+        </div>
+    </div>
 </form>

setup.py

@@ -14,7 +14,7 @@ plugin_package = "octoprint_simpleemergencystop"
 plugin_name = "OctoPrint-SimpleEmergencyStop"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "1.0.5"
+plugin_version = "1.0.6"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module