handling some UI logic

This commit is contained in:
Vitor Henrique
2021-03-09 21:34:19 -06:00
parent 5a66368744
commit 2433c5e451
9 changed files with 94 additions and 66 deletions

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@
*.pyc
*.egg-info
.DS_Store
config.yaml

View File

@@ -5,17 +5,16 @@ import octoprint.plugin
import octoprint.util
class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplatePlugin, octoprint.plugin.SettingsPlugin,
octoprint.plugin.AssetPlugin, octoprint.plugin.BlueprintPlugin,
octoprint.plugin.EventHandlerPlugin):
# ~~ TemplatePlugin
def get_template_configs(self):
return [
dict(type="settings", template="enclosure_settings.jinja2", custom_bindings=True)
]
dict(type="settings", template="enclosure_settings.jinja2",
custom_bindings=True)
]
# ~~ AssetPlugin mixin
def get_assets(self):
@@ -23,25 +22,24 @@ class EnclosurePlugin(octoprint.plugin.StartupPlugin, octoprint.plugin.TemplateP
js=["js/enclosure.js", "js/bootstrap-colorpicker.min.js"],
css=["css/bootstrap-colorpicker.css", "css/enclosure.css"])
# ~~ SettingsPlugin
# ~~ SettingsPlugin
def get_settings_defaults(self):
return dict(enclosureOutputs=[])
return dict(enclosureOutputs=[], enclosureInputs=[])
# ~~ SettingsPlugin mixin
def on_settings_save(self, data):
enclosureOutputs = self._settings.get(["enclosureOutputs"])
enclosureInputs = self._settings.get(["enclosureInputs"])
print(data)
octoprint.plugin.SettingsPlugin.on_settings_save(self, data)
# ~~ Softwareupdate hook
def get_update_information(self):
return dict(enclosure=dict(displayName="Enclosure Plugin", displayVersion=self._plugin_version,
# version check: github repository
type="github_release", user="vitormhenrique", repo="OctoPrint-Enclosure", current=self._plugin_version,
# update method: pip
pip="https://github.com/vitormhenrique/OctoPrint-Enclosure/archive/{target_version}.zip"))
# version check: github repository
type="github_release", user="vitormhenrique", repo="OctoPrint-Enclosure", current=self._plugin_version,
# update method: pip
pip="https://github.com/vitormhenrique/OctoPrint-Enclosure/archive/{target_version}.zip"))
__plugin_name__ = "Enclosure Plugin"
@@ -56,4 +54,4 @@ def __plugin_load__():
__plugin_hooks__ = {
# "octoprint.comm.protocol.gcode.queuing" : __plugin_implementation__.hook_gcode_queuing,
"octoprint.plugin.softwareupdate.check_config": __plugin_implementation__.get_update_information
}
}

View File

@@ -11,7 +11,7 @@ $(function () {
self.rpi_outputs = ko.observableArray();
self.rpi_inputs = ko.observableArray();
self.settingsOpen = false;
self.settingsOpen = ko.observable(false);
self.settings_outputs_regular = ko.pureComputed(function () {
return ko.utils.arrayFilter(self.settingsViewModel.settings.plugins.enclosure.rpi_outputs(), function (item) {

View File

@@ -137,17 +137,17 @@ $(function () {
});
self.fromOutputData = function (data) {
self.fromInputEnclosureData = function (data) {
self.isNew(data === undefined);
if (data === undefined) {
var arrRelaysLength = self.enclosureInputs().length;
var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureInputs()[arrRelaysLength - 1].index_id + 1;
var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureInputs()[arrRelaysLength - 1].index_id() + 1;
data = cleanInput(nextIndex);
} else {
objIndex = self.enclosureInputs().findIndex((obj => obj.index_id == data.index_id));
data = self.enclosureInputs()[objIndex];
data = ko.mapping.toJS(self.enclosureInputs()[objIndex]);
}
// general info
@@ -173,7 +173,7 @@ $(function () {
};
self.toOutputData = function (data) {
self.toInputEnclosureData = function (data) {
var output_data = {
index_id: self.index_id(),
label: self.label(),
@@ -276,17 +276,17 @@ $(function () {
return false;
});
self.fromOutputData = function (data) {
self.fromOutputEnclosureData = function (data) {
self.isNew(data === undefined);
if (data === undefined) {
var arrRelaysLength = self.enclosureOutputs().length;
var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id + 1;
var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id() + 1;
data = cleanOutput(nextIndex);
} else {
objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id == data.index_id));
data = self.enclosureOutputs()[objIndex];
data = ko.mapping.toJS(self.enclosureOutputs()[objIndex]);
}
// general info
@@ -347,7 +347,7 @@ $(function () {
};
self.toOutputData = function () {
self.toOutputEnclosureData = function () {
var output_data = {
index_id: self.index_id(),
label: self.label(),
@@ -427,16 +427,29 @@ $(function () {
self.enclosureOutputs = ko.observableArray();
self.enclosureInputs = ko.observableArray();
self.settings_unsaved = ko.observable(false);
self.onBeforeBinding = function () {
self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs())
self.enclosureInputs(self.settingsViewModel.settings.plugins.enclosure.enclosureInputs())
// self.settings_unsaved(false);
};
self.onEventSettingsUpdated = function () {
self.onSettingsBeforeSave = function () {
// self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
};
self.syncSettings = function () {
self.onEventSettingsUpdated = function () {
self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs(self.enclosureOutputs());
self.settingsViewModel.settings.plugins.enclosure.enclosureInputs(self.enclosureInputs());
self.settings_unsaved(false);
};
self.syncSettings = function () {
// self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs(self.enclosureOutputs());
// self.settingsViewModel.settings.plugins.enclosure.enclosureInputs(self.enclosureInputs());
// self.settings_unsaved(false);
};
self.createOutputEditor = function (data) {
@@ -458,17 +471,17 @@ $(function () {
self.removeOutput = function (data) {
self.enclosureOutputs.remove(data);
self.syncSettings();
self.settings_unsaved(true);
};
self.removeInput = function(data){
self.enclosureInputs.remove(data);
self.syncSettings();
self.settings_unsaved(true);
}
self.showOutputEditorDialog = function (data) {
self.outputEditor.fromOutputData(data);
self.outputEditor.fromOutputEnclosureData(data);
var editDialog = $("#settings_outputs_edit_dialog");
@@ -487,7 +500,7 @@ $(function () {
self.showInputEditorDialog = function (data) {
self.inputEditor.fromOutputData(data);
self.inputEditor.fromInputEnclosureData(data);
var editDialog = $("#settings_inputs_edit_dialog");
@@ -513,7 +526,7 @@ $(function () {
self.addOutputs(callback);
self.syncSettings();
// self.syncSettings();
}
};
@@ -526,7 +539,7 @@ $(function () {
self.addInputs(callback);
self.syncSettings();
// self.syncSettings();
}
};
@@ -534,12 +547,14 @@ $(function () {
self.addOutputs = function (callback) {
var isNew = self.outputEditor.isNew();
var output = self.outputEditor.toOutputData();
self.settings_unsaved(true);
var output = ko.mapping.fromJS(self.outputEditor.toOutputEnclosureData());
if (isNew) {
self.enclosureOutputs.push(output);
} else {
objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id == output.index_id));
objIndex = self.enclosureOutputs().findIndex((obj => obj.index_id() == output.index_id()));
var _old_output = self.enclosureOutputs()[objIndex];
self.enclosureOutputs.replace(_old_output, output);
}
@@ -552,12 +567,14 @@ $(function () {
self.addInputs = function (callback) {
var isNew = self.inputEditor.isNew();
var input = self.inputEditor.toOutputData();
self.settings_unsaved(true);
var input = ko.mapping.fromJS(self.inputEditor.toInputEnclosureData());
if (isNew) {
self.enclosureInputs.push(input);
} else {
objIndex = self.enclosureInputs().findIndex((obj => obj.index_id == input.index_id));
objIndex = self.enclosureInputs().findIndex((obj => obj.index_id() == input.index_id()));
var _old_input = self.enclosureInputs()[objIndex];
self.enclosureInputs.replace(_old_input, input);
}

View File

@@ -1,18 +1,33 @@
<h4>{{ _('Raspberry Pi Outputs') }}</h4>
<form class="form-horizontal" onsubmit="return false;">
{% include "output_table.jinja2" %}
<!-- ko if: ($root.settings_unsaved()) -->
<div class="alert alert-block">
<strong>Note: </strong>You have unsaved data, canceling settings will revert all configurations made here.
</div>
<!-- /ko -->
<h4>{{ _('Raspberry Pi Outputs') }}</h4>
{% include "output_table.jinja2" %}
</form>
{% include "output_editor/main_screen.jinja2" %}
<h4>{{ _('Raspberry Pi Inputs') }}</h4>
<form class="form-horizontal" onsubmit="return false;">
<h4>{{ _('Raspberry Pi Inputs') }}</h4>
{% include "input_table.jinja2" %}
{% include "input_table.jinja2" %}
</form>
{% include "input_editor/main_screen.jinja2" %}
<form class="form-horizontal" onsubmit="return false;">
<h4>{{ _('Debug') }}</h4>
<div class="control-group">
<button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>
</div>
<!-- <div class="control-group">
<button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>
</div> -->
</form>

View File

@@ -19,18 +19,18 @@
<div class="control-group">
<label class="control-label">{{ _('Input Type') }}</label>
<div class="controls">
<input type="radio" value="regular_gpio" data-bind="checked: input_type"> {{ _('GPIO Input') }}
<input type="radio" value="regular_gpio" data-bind="checked: inputEditor.input_type"> {{ _('GPIO Input') }}
</div>
<div class="controls">
<input type="radio" value="temperature_sensor" data-bind="checked: input_type"> {{ _('Temperature Sensor') }}
<input type="radio" value="temperature_sensor" data-bind="checked: inputEditor.input_type"> {{ _('Temperature Sensor') }}
</div>
<div class="control-group">
<div class="controls">
<!-- kocomment if: (outputEditor.input_type() == "regular_gpio") -->
<!-- kocomment if: (inputEditor.input_type() == "regular_gpio") -->
<span class="help-inline">
<span class="label label-info">Info:</span> GPIO will input status of the pin (HIGH or LOW) to trigger actions on configured outputs or printer events</span>
<!-- /kocomment -->
<!-- kocomment if: (outputEditor.input_type() == "temperature_sensor") -->
<!-- kocomment if: (inputEditor.input_type() == "temperature_sensor") -->
<span class="help-inline">
<span class="label label-info">Info:</span> Temperature Sensors will input temperature and humidity data.
</span>
@@ -40,18 +40,16 @@
</div>
<!-- kocomment if: (outputEditor.input_type() == "regular_gpio") -->
<!-- kocomment if: (inputEditor.input_type() == "regular_gpio") -->
<div class="control-group">
<label class="control-label">{{ _('Action Type') }}</label>
<div class="controls">
<input type="radio" value="output_control" data-bind="checked: action_type"> {{ _('Output Control') }}
<input type="radio" value="output_control" data-bind="checked: inputEditor.action_type"> {{ _('Output Control') }}
</div>
<div class="controls">
<input type="radio" value="printer_control" data-bind="checked: action_type"> {{ _('Printer') }}
<input type="radio" value="printer_control" data-bind="checked: inputEditor.action_type"> {{ _('Printer') }}
</div>
</div>
<!-- /kocomment -->
</form>

View File

@@ -3,7 +3,7 @@
<div class="control-group">
<label class="control-label" for="settings-enclosure-io1">{{ _('Input IO Number') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: gpio_pin">
<input type="text" class="input-block-level" data-bind="value: inputEditor.gpio_pin">
<span class="help-inline">Input GPIO that will detect the event that should trigger the action. For example
if you have a filament sensor
you put the GPIO pin that the sensor is connected. This can also be a press of a button or any other
@@ -14,7 +14,7 @@
<div class="control-group">
<label class="control-label">Input Pull Resistor</label>
<div class="controls">
<select data-bind="value: input_pull_resistor">
<select data-bind="value: inputEditor.input_pull_resistor">
<option value="input_pull_up">Input Pull-up</option>
<option value="input_pull_down">Input Pull-down</option>
</select>
@@ -26,7 +26,7 @@
<div class="control-group">
<label class="control-label">Event Trigger</label>
<div class="controls">
<select data-bind="value: edge">
<select data-bind="value: inputEditor.edge">
<option value="rise">Rise</option>
<option value="fall">Fall</option>
</select>

View File

@@ -16,8 +16,7 @@
<div class="control-group">
<label class="control-label"> Controlled IO</label>
<div class="controls">
<select data-bind="options: $root.settings_possible_outputs, optionsText: 'label',
optionsValue: 'index_id', value: $data.controlled_io">
<select >
</select>
<span class="help-inline">When the event happen, you want control which OUTPUT?</span>
</div>
@@ -26,7 +25,7 @@
<div class="control-group">
<label class="control-label">Set Controlled IO Value</label>
<div class="controls">
<select data-bind="value: controlled_io_set_value">
<select data-bind="value: inputEditor.controlled_io_set_value">
<option value="low">Low</option>
<option value="high">High</option>
<option value="toggle">Toggle</option>

View File

@@ -4,7 +4,7 @@
<div class="control-group">
<label class="control-label" for="settings-enclosure-dhtModel">{{ _('Sensor Type') }}</label>
<div class="controls">
<select data-bind="value: outputEditor.temperature_sensor_type">
<select data-bind="value: inputEditor.temperature_sensor_type">
<option value="">Select Sensor</option>
<option value="11">DHT11</option>
<option value="22">DHT22</option>
@@ -21,11 +21,11 @@
</div>
<!-- ko ifnot: (outputEditor.temperature_sensor_type() == "si7021") || (outputEditor.temperature_sensor_type() == "bme280") || (outputEditor.temperature_sensor_type() == "tmp102") || (outputEditor.temperature_sensor_type() == "mcp9808") -->
<!-- ko ifnot: (inputEditor.temperature_sensor_type() == "si7021") || (inputEditor.temperature_sensor_type() == "bme280") || (inputEditor.temperature_sensor_type() == "tmp102") || (inputEditor.temperature_sensor_type() == "mcp9808") -->
<div class="control-group">
<label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Pin') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: outputEditor.gpio_pin" value="4">
<input type="text" class="input-block-level" data-bind="value: inputEditor.gpio_pin" value="4">
<span class="help-inline">GPIO pin for temperature sensor, recommended to use 4 as DS18B20 has default
support to pin #4 (BCM)</span>
</div>
@@ -34,11 +34,11 @@
<!-- ko if: (outputEditor.temperature_sensor_type() == "18b20") -->
<!-- ko if: (inputEditor.temperature_sensor_type() == "18b20") -->
<div class="control-group">
<label class="control-label" for="settings-enclosure-dhtPin">{{ _('DS18B20 Serial') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: outputEditor.temperature_sensor_address"
<input type="text" class="input-block-level" data-bind="value: inputEditor.temperature_sensor_address"
value="">
<span class="help-inline">DS18B20 serial value, needs to be used to have support for multiple sensors,
read documentation on github page
@@ -47,18 +47,18 @@
</div>
<!-- /ko -->
<!-- ko if: (outputEditor.temperature_sensor_type() == "si7021") || (outputEditor.temperature_sensor_type() == "bme280") || (outputEditor.temperature_sensor_type() == "tmp102") || (outputEditor.temperature_sensor_type() == "mcp9808") -->
<!-- ko if: (inputEditor.temperature_sensor_type() == "si7021") || (inputEditor.temperature_sensor_type() == "bme280") || (inputEditor.temperature_sensor_type() == "tmp102") || (inputEditor.temperature_sensor_type() == "mcp9808") -->
<div class="control-group">
<label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Address') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: outputEditor.temperature_sensor_address">
<input type="text" class="input-block-level" data-bind="value: inputEditor.temperature_sensor_address">
<span class="help-inline">Sensor address in HEX value, you can find it by running
<code>i2cdetect -y 1</code> on your Raspberry Pi</span>
</div>
</div>
<!-- /ko -->
<!-- ko if: (outputEditor.temperature_sensor_type() == "max31855") -->
<!-- ko if: (inputEditor.temperature_sensor_type() == "max31855") -->
<!-- <div class="control-group">
<label class="control-label" for="settings-enclosure-dhtPin">{{ _('Sensor Pin') }}</label>
<div class="controls">