node-red-contrib-neuralnetwork
Version:
SmartNode node package, provided by MakerCollider
201 lines (176 loc) • 9.98 kB
HTML
<!--
* Copyright 2015, 2015 MakerCollider.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<script type="text/x-red" data-template-name="dataCollect">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="dataCollect.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]dataCollect.label.placeholder">
</div>
<div class="form-row" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> <span data-i18n="dataCollect.label.in-rules"></span></label>
</div>
<div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
<div id="node-input-in-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 150px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-in-rule-container" style=" list-style-type:none; margin: 0;"></ol>
</div>
</div>
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-in-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="dataCollect.label.addbutton"></span></a>
</div>
<div class="form-row" style="margin-bottom:0;">
<label><i class="fa fa-list"></i> <span data-i18n="dataCollect.label.out-rules"></span></label>
</div>
<div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
<div id="node-input-out-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 150px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-out-rule-container" style=" list-style-type:none; margin: 0;"></ol>
</div>
</div>
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-out-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="dataCollect.label.addbutton"></span></a>
</div>
<div class="form-row"><i class="fa fa-sign-in"></i> <span data-i18n="dataCollect.label.form"></span></div>
<div class="form-row"><label></label>
<span data-i18n="dataCollect.label.inGroupNumber"></span>: <input type="text" id="node-input-inGroupNumber" data-i18n="[placeholder]dataCollect.label.inGroupNumberplaceholder" style="width:100px;"/>
<span data-i18n="dataCollect.label.outGroupNumber"></span>: <input type="text" id="node-input-outGroupNumber" data-i18n="[placeholder]dataCollect.label.outGroupNumberplaceholder" style="width:100px;"/>
</div>
<div class="form-row">
<label for="node-input-sendCmd"><i class="fa fa-tag"></i> <span data-i18n="dataCollect.label.send-cmd"></span></label>
<input type="text" id="node-input-sendCmd" data-i18n="[placeholder]dataCollect.label.cmdplaceholder">
</div>
</script>
<script type="text/x-red" data-help-name="dataCollect">
</script>
<script type="text/javascript">
RED.nodes.registerType('dataCollect', {
color: "#E2D96E",
category: 'brain',
defaults: {
name: {value:""},
inRules: {value:[{v:""}]},
outRules: {value:[{v:""}]},
sendCmd: {value:"send", required: true},
inGroupNumber: {value:1, required: true},
outGroupNumber: {value:1, required: true},
prev_inGroupNumber: {value:1, required: true},
prev_outGroupNumber: {value:1, required: true}
},
inputs: 1,
outputs: 1,
icon: "light.png",
label: function() {
return this.name||"dataCollect";
},
paletteLabel: function () {
return this.name||this._("dataCollect.label.palette");
},
oneditprepare: function() {
function generateInRule(i,rule) {
var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
var row = $('<div/>').appendTo(container);
$('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
$('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row);
var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row);
var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
finalspan.append(' → <span class="node-input-rule-index">'+i+'</span> ');
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
deleteButton.click(function() {
container.css({"background":"#fee"});
container.fadeOut(300, function() {
$(this).remove();
$("#node-input-in-rule-container").children().each(function(i) {
$(this).find(".node-input-rule-index").html(i+1);
});
});
});
$("#node-input-in-rule-container").append(container);
valueField.val(rule.name);
}
function generateOutRule(i,rule) {
var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
var row = $('<div/>').appendTo(container);
$('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
$('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row);
var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row);
var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
finalspan.append(' → <span class="node-input-rule-index">'+i+'</span> ');
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
deleteButton.click(function() {
container.css({"background":"#fee"});
container.fadeOut(300, function() {
$(this).remove();
$("#node-input-out-rule-container").children().each(function(i) {
$(this).find(".node-input-rule-index").html(i+1);
});
});
});
$("#node-input-out-rule-container").append(container);
valueField.val(rule.name);
}
//add input param rule
$("#node-input-add-in-rule").click(function() {
generateInRule($("#node-input-in-rule-container").children().length+1,{name:""});
$("#node-input-in-rule-container-div").scrollTop($("#node-input-in-rule-container-div").get(0).scrollHeight);
});
//add output param rule
$("#node-input-add-out-rule").click(function() {
generateOutRule($("#node-input-out-rule-container").children().length+1,{name:""});
$("#node-input-out-rule-container-div").scrollTop($("#node-input-out-rule-container-div").get(0).scrollHeight);
});
//init
for (var i=0;i<this.inRules.length;i++) {
var rule = this.inRules[i];
generateInRule(i+1,rule);
}
for (var i=0;i<this.outRules.length;i++) {
var rule = this.outRules[i];
generateOutRule(i+1,rule);
}
},
oneditsave: function() {
function saveInRules(e) {
var rules = $("#node-input-in-rule-container").children();
var node = e;
node.inRules= [];
rules.each(function(i) {
var rule = $(this);
var n = rule.find(".node-input-rule-value").val();
if(n.length > 0){
var r = {name:n};
node.inRules.push(r);
}
});
}
function saveOutRules(e) {
var rules = $("#node-input-out-rule-container").children();
var node = e;
node.outRules= [];
rules.each(function(i) {
var rule = $(this);
var n = rule.find(".node-input-rule-value").val();
if(n.length > 0){
var r = {name:n};
node.outRules.push(r);
}
});
}
saveInRules(this);
saveOutRules(this);
this.prev_inGroupNumber = this.inGroupNumber;
this.prev_outGroupNumber = this.outGroupNumber;
}
});
</script>