Rebuild button and add option to enable big button #11

This commit is contained in:
Sebastien Clement 2020-03-25 20:44:23 +01:00
parent 8fc2242366
commit abb2a577b0
5 changed files with 153 additions and 35 deletions

View File

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

View File

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

View File

@ -4,49 +4,72 @@
* Author: Sebastien Clement
* License: AGPLv3
*/
$(function() {
$(function () {
function SimpleemergencystopViewModel(parameters) {
var self = this;
self.settings = undefined;
self.allSettings = parameters[0];
self.loginState = parameters[1];
self.printerState = parameters[2];
self.confirmation = undefined;
this.settings = undefined;
this.allSettings = parameters[0];
this.loginState = parameters[1];
this.printerState = parameters[2];
this.confirmation = undefined;
self.onAfterBinding = function() {
self.confirmation = $("#confirmation");
self.settings = self.allSettings.settings.plugins.simpleemergencystop;
this.onAfterBinding = function () {
};
this.onBeforeBinding = function () {
this.confirmation = $("#confirmation");
this.settings = this.allSettings.settings.plugins.simpleemergencystop;
};
self.click = function () {
if(self.settings.confirmationDialog())
self.confirmation.modal("show");
this.click = function () {
if (!this.can_send_command())
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",
dataType: "json",
data: JSON.stringify({
command: "emergencyStop"
}),
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 () {
return self.loginState.isUser() && self.printerState.isOperational()
this.big_button_visible = function () {
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"]
]);

View File

@ -1,5 +1,28 @@
<a data-bind="click: click, visible: visibleTest()" title="{{ _('!!! Emergency Stop !!!') }}" href="#">
<i class="icon-remove-sign" style="color: red"></i>
<a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
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>

View File

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