mirror of
https://github.com/Sebclem/OctoPrint-SimpleEmergencyStop.git
synced 2024-11-24 18:22:58 +01:00
Rebuild button and add option to enable big button #11
This commit is contained in:
Sebastien Clement
parent
8fc2242366
commit
abb2a577b0
@ -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):
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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"]
|
||||
]);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user