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(
emergencyGCODE="M112",
confirmationDialog=False,
big_button=False
big_button=False,
enableMargin=False,
marginValue=0,
)
def on_settings_save(self, data):

View File

@ -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 () {

View File

@ -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>

View File

@ -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>