changing template structure

This commit is contained in:
Vitor de Miranda Henrique
2020-12-20 23:39:19 -06:00
parent b94f8e84d4
commit b5c5ad13c1
19 changed files with 234 additions and 101 deletions

View File

@@ -23,6 +23,10 @@ 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
def get_settings_defaults(self):
return dict(enclosureOutputs=[])
# ~~ Softwareupdate hook
def get_update_information(self):
return dict(enclosure=dict(displayName="Enclosure Plugin", displayVersion=self._plugin_version,

View File

@@ -11,7 +11,7 @@
<!-- <div class="controls">
<h5>IO <span data-bind="text: $index"> </span></h5>
</div> -->
<div class="control-group">
<!-- <div class="control-group">
<label class="control-label">{{ _('Output Type') }}</label>
<div class="controls">
<label class="radio">
@@ -55,7 +55,7 @@
</div>
<div class="controls">
<label class="radio">
<input type="radio" value="gcode_output" data-bind="checked: output_type, attr: {name: 'output_type_' + $index() }"> {{ _('Gcode') }}
<input type="radio" value="gcode_output" data-bind="checked: output_type, attr: {name: 'output_type_' + $index() }"> {{ _('GCode') }}
</span>
</label>
</div>
@@ -65,23 +65,23 @@
</span>
</label>
</div>
</div>
</div> -->
<!-- ko if: ($data.output_type() != "temperature_alarm") -->
<div class="control-group">
<!-- <div class="control-group">
<label class="control-label">{{ _('Label') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: label">
<span class="help-inline">Name displayed on Enclosure Tab</span>
</div>
</div>
</div> -->
<!-- /ko -->
<div class="control-group">
<!-- <div class="control-group">
<label class="control-label">{{ _('Id') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: index_id" disabled="true">
<span class="help-inline">Id used for API control</span>
</div>
</div>
</div> -->
<!-- ko if: ($data.output_type() == "shell_output") -->
<div class="control-group">
<label class="control-label">{{ _('Script') }}</label>
@@ -92,22 +92,22 @@
</div>
<!-- /ko -->
<!-- ko ifnot: ($data.output_type() == "gcode_output" || $data.output_type() == "temperature_alarm" || $data.output_type() == "shell_output" || $data.output_type() == "ledstrip") -->
<div class="control-group">
<label class="control-label">{{ _('IO Number') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: gpio_pin">
<!-- <div class="control-group"> -->
<!-- <label class="control-label">{{ _('IO Number') }}</label> -->
<!-- <div class="controls"> -->
<!-- <input type="text" class="input-block-level" data-bind="value: gpio_pin"> -->
<!-- ko ifnot: ($data.output_type() == "neopixel_indirect") -->
<span class="help-inline">GPIO number that will be controlled.</span>
<!-- <span class="help-inline">GPIO number that will be controlled.</span> -->
<!-- /ko -->
<!-- ko if: ($data.output_type() == "neopixel_indirect") -->
<span class="help-inline">
<span class="label label-danger">Attention</span> Neopixel requires a microcontroller (ex: arduino)
connected to I2C bus. This is the pin on the
microcontroller that is connected to the Neopixel.
</span>
<!-- <span class="help-inline"> -->
<!-- <span class="label label-danger">Attention</span> Neopixel requires a microcontroller (ex: arduino) -->
<!-- connected to I2C bus. This is the pin on the -->
<!-- microcontroller that is connected to the Neopixel. -->
<!-- </span> -->
<!-- /ko -->
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<!-- /ko -->
<!-- ko if: ($data.output_type() == "pwm" ) -->
@@ -253,14 +253,14 @@
<!-- /ko -->
<!-- ko if: ($data.output_type() == "regular" || $data.output_type() == "temp_hum_control" ) -->
<div class="control-group">
<!-- <div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: active_low"> {{ _('Active Low') }}
</label>
<span class="help-inline">Active low means that the GPIO will turn on when receive a low signal (ground) from Raspberry PI</span>
</div>
</div>
</div> -->
<!-- /ko -->
<!-- ko if: ($data.output_type() == "regular" || $data.output_type() == "gcode_output" || $data.output_type() == "shell_output" || $data.output_type() == "ledstrip") -->

View File

@@ -1,8 +1,8 @@
$(function () {
var cleanOutput = function () {
var cleanOutput = function (index_id) {
return {
index_id: "",
index_id: index_id,
label: "",
output_type: "Regular",
gpio: {
@@ -15,18 +15,24 @@ $(function () {
var self = this;
self.isNew = ko.observable(false);
self.index_id = ko.observable();
self.label = ko.observable();
self.output_type = ko.observable();
self.gpio_pin = ko.observable();
self.enclosureOutputs = undefined;
self.fromOutputData = function (data) {
self.isNew(data === undefined);
if (data === undefined) {
data = cleanOutput();
var arrRelaysLength = self.enclosureOutputs().length;
var nextIndex = arrRelaysLength == 0 ? 1 : self.enclosureOutputs()[arrRelaysLength - 1].index_id + 1;
data = cleanOutput(nextIndex);
}
self.index_id(data.index_id);
self.label(data.label);
self.output_type(data.output_type);
self.gpio_pin(data.gpio.pin_name);
@@ -46,7 +52,7 @@ $(function () {
};
// end of EnclosureOutputEditorViewModel
};
};
function EnclosureViewModel(parameters) {
var self = this;
@@ -57,6 +63,15 @@ $(function () {
self.enclosureOutputs = ko.observableArray();
self.onBeforeBinding = function () {
self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
// console.log(self.settingsViewModel.settings.plugins.enclosure)
};
self.onEventSettingsUpdated = function () {
self.enclosureOutputs(self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs());
};
self.createOutputEditor = function (data) {
var outputEditor = new EnclosureOutputEditorViewModel();
@@ -64,6 +79,7 @@ $(function () {
};
self.outputEditor = self.createOutputEditor();
self.outputEditor.enclosureOutputs = self.enclosureOutputs;
self.showOutputEditorDialog = function (data) {
@@ -87,10 +103,12 @@ $(function () {
self.addOutputs = function () {
var output = self.outputEditor.toOutputData();
self.settingsViewModel.settings.plugins.enclosure.enclosureOutputs.push(output);
};
self.print = function () {
console.log(self);
self.print_data = function () {
console.log(self.enclosureOutputs.root);
// console.log(self);
};
// end of EnclosureViewModel

View File

@@ -1,5 +0,0 @@
<h4>{{ _('Raspberry Pi Outputs') }}</h4>
{% include "outputTable.jinja2" %}
{% include "outputEditor.jinja2" %}

View File

@@ -0,0 +1,5 @@
<h4>{{ _('Raspberry Pi Outputs') }}</h4>
{% include "output_table.jinja2" %}
{% include "output_editor/main_screen.jinja2" %}

View File

@@ -1,44 +0,0 @@
<div id="settings_outputs_edit_dialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="modal-title">Add / Edit Output</h3>
</div>
<div class="modal-body">
<div class="full-sized-box">
<ul class="nav nav-pills">
<li class="active"><a href="#settings_outputs_edit_dialog_general" data-toggle="tab">{{ _('General') }}</a></li>
<li><a href="#settings_outputs_edit_dialog_buildvolume" data-toggle="tab">{{ _('Print bed & build volume') }}</a></li>
<li><a href="#settings_outputs_edit_dialog_axes" data-toggle="tab">{{ _('Axes') }}</a></li>
<li><a href="#settings_outputs_edit_dialog_extruder" data-toggle="tab">{{ _('Hotend & extruder') }}</a></li>
</ul>
<div class="tab-content">
<div id="settings_outputs_edit_dialog_general" class="tab-pane active">
{% include "outputEditorGeneral.jinja2" %}
</div>
<div id="settings_outputs_edit_dialog_buildvolume" class="tab-pane">
<h3 class="modal-title">test2</h3>
</div>
<div id="settings_outputs_edit_dialog_axes" class="tab-pane">
<h3 class="modal-title">test3</h3>
</div>
<div id="settings_outputs_edit_dialog_extruder" class="tab-pane">
<h3 class="modal-title">test4</h3>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
<button class="btn btn-primary btn-confirm">{{ _('Confirm') }}</button>
</div>
</div>

View File

@@ -1,9 +0,0 @@
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
<input type="text" data-bind="value: outputEditor.label">
<span class="help-inline">Name displayed on Enclosure Tab</span>
</div>
</div>
</form>

View File

@@ -1,16 +0,0 @@
<table class="table table-striped table-hover table-condensed table-hover" id="settings_enclosure_outputs" style="">
<thead>
<tr>
<th class="settings_printerProfiles_profiles_name">Id</th>
<th class="settings_printerProfiles_profiles_model">Type</th>
<th class="settings_printerProfiles_profiles_action">GPIO</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
<div class="control-group">
<button class="btn pull-right" data-bind="click: function() { $root.showOutputEditorDialog(); }">Add Outputs...</button>
</div>

View File

@@ -0,0 +1,4 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,70 @@
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('Output ID') }}</label>
<div class="controls">
<input type="text" data-bind="value: outputEditor.index_id" readonly>
<span class="help-inline">Auto generated ID for Output</span>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
<input type="text" data-bind="value: outputEditor.label">
<span class="help-inline">Name displayed on Enclosure Tab</span>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Output Type') }}</label>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="regular" data-bind="checked: outputEditor.output_type"> {{ _('Regular IO') }}
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="pwm" data-bind="checked: outputEditor.output_type"> {{ _('PWM') }}
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="neopixel" data-bind="checked: outputEditor.output_type"> {{ _('NeoPixel Direct') }}
</span>
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="led_strip" data-bind="checked: outputEditor.output_type"> {{ _('RGB LED Strip') }}
</span>
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="temp_hum_control" data-bind="checked: outputEditor.output_type"> {{ _('Temperature / Humidity Control') }}
</span>
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="temperature_alarm" data-bind="checked: outputEditor.output_type"> {{ _('Temperature Alarm') }}
</span>
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="gcode_output" data-bind="checked: outputEditor.output_type"> {{ _('GCode') }}
</span>
</label>
</div>
<div class="controls">
<label class="radio">
<input type="radio" name="output_type_radio" value="shell_output" data-bind="checked: outputEditor.output_type"> {{ _('Shell Script') }}
</span>
</label>
</div>
</div>
</form>

View File

@@ -0,0 +1,21 @@
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('IO Number') }}</label>
<div class="controls">
<input type="text" data-bind="value: outputEditor.gpio_pin">
<span class="help-inline">GPIO number that will be controlled.</span>
</div>
</div>
<!-- <div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: active_low"> {{ _('Active Low') }}
</label>
<span class="help-inline">Active low means that the GPIO will turn on when receive a low signal (ground) from Raspberry PI</span>
</div>
</div> -->
</form>

View File

@@ -0,0 +1,37 @@
<div id="settings_outputs_edit_dialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="modal-title">Add / Edit Output</h3>
</div>
<div class="modal-body">
<div class="full-sized-box">
<ul class="nav nav-pills">
<li class="active"><a href="#settings_outputs_edit_dialog_general" data-toggle="tab">{{ _('General') }}</a></li>
<!-- ko ifnot: (outputEditor.output_type() == "gcode_output" || outputEditor.output_type() == "temperature_alarm" || outputEditor.output_type() == "shell_output" || outputEditor.output_type() == "led_strip") -->
<li><a href="#settings_outputs_edit_dialog_io" data-toggle="tab">{{ _('IO Settings') }}</a></li>
<!-- /ko -->
</ul>
<div class="tab-content">
<div id="settings_outputs_edit_dialog_general" class="tab-pane active">
{% include "general_info.jinja2" %}
</div>
<div id="settings_outputs_edit_dialog_io" class="tab-pane">
{% include "io_output.jinja2" %}
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Abort') }}</button>
<button class="btn btn-primary btn-confirm" data-bind="click: function() { $root.addOutputs(); }">{{ _('Save') }}</button>
</div>
</div>

View File

@@ -0,0 +1,5 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,4 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,4 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,4 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,5 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,3 @@
<form class="form-horizontal">
</form>

View File

@@ -0,0 +1,23 @@
<table class="table table-striped table-hover table-condensed table-hover" id="settings_enclosure_outputs" style="">
<thead>
<tr>
<th class="">Id</th>
<th class="">Type</th>
<th class="">GPIO</th>
</tr>
</thead>
<tbody data-bind="foreach: $root.enclosureOutputs">
<tr data-bind="attr: {title: name}">
<td class="" data-bind="text: index_id"></td>
<td class="" data-bind="text: label"></td>
<td class="" data-bind="text: output_type"></td>
</tr>
</tbody>
</table>
<div class="control-group">
<button class="btn pull-right" data-bind="click: function() { $root.showOutputEditorDialog(); }">Add
Outputs...</button>
</div>
<button class="btn pull-right" data-bind="click: function() { $root.print_data(); }">Test</button>