Adds the possibility to add margin to button

This commit is contained in:
Arie Boven 2024-03-23 14:27:22 +01:00
parent 070603cbe7
commit 8243622ba3
4 changed files with 69 additions and 32 deletions

View File

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

View File

@ -49,15 +49,33 @@ $(function () {
return user.permissions.includes("control") || user.needs.role.includes("control"); return user.permissions.includes("control") || user.needs.role.includes("control");
} }
else return true; 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 () { 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 () { 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 () { this.can_send_command = function () {

View File

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

View File

@ -3,7 +3,7 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">{{ _('Emergency GCODE:') }}</label> <label class="control-label">{{ _('Emergency GCODE:') }}</label>
<div class="controls"> <div class="controls">
<input type="text" class="input-block-level" <input type="text" class=""
data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE"> data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE">
</div> </div>
</div> </div>
@ -19,6 +19,21 @@
<input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.big_button"> <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.big_button">
</div> </div>
</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> </form>