Skip to content

Commit

Permalink
Add attribute (#47)
Browse files Browse the repository at this point in the history 
* [modify] send msg, attribute, help text

* [modify] grid, size attribute

* [modify] node color, grid, size attribute

* [modify] node color
  • Loading branch information
@zzunsik
zzunsik authored Oct 2, 2022
1 parent bcb11a6 commit 62f0ff7
Show file tree
Hide file tree
Showing 8 changed files with 496 additions and 106 deletions.
116 changes: 106 additions & 10 deletions dashboard/nodes/soop_dropdown.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,109 @@
<style></style>
<script type="text/javascript">
const dropdownPositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
function getGroupGrid(nodeId) {
const groupId = $("#node-input-group").val();
const groupNode = RED.nodes.node(groupId);
groupNode._def.reflectEdit(groupId, nodeId);
return groupNode.groupState;
}
function getXYWH() {
const x = parseInt($("#node-input-widgetX").val());
const y = parseInt($("#node-input-widgetY").val());
const w = parseInt($("#node-input-width").val());
const h = parseInt($("#node-input-height").val());
return { x, y, w, h };
}
// Validate the widget to place on (x, y, w, h).
function validateXYWH(arr) {
const { x, y, w, h } = getXYWH();
// If x, y, w, h is under or over idx of arr -> return false
if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
return false;
}
// If the space is alredy filled, return false
for (let i = x; i < x + w; i++) {
for (let j = y; j < y + h; j++) {
if (arr[j][i]) {
return false;
}
}
}
return true;
}
// Create a table with array
function newTable(arr) {
const row = arr.length;
const col = arr[0].length;
// Append a row for column header(1,2,....)
$("#group-table>tbody").append('<tr id="col-header"></tr>');
$("#col-header").append("<th></th>");
for (let j = 0; j < col; j++) {
$("#col-header").append(`<th scope="col">${j}</th>`);
}
// Append group row and col
for (let i = 0; i < row; i++) {
// append row
$("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
// Append a col for row header(1,2,...)
$(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
// Append col
for (let j = 0; j < col; j++) {
const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
$(`#row${i}`).append(tag);
}
}
// Table Design
$(".col").css("border", "dotted black 1px");
$(".col").css("width", "20px");
$(".col").css("height", "20px");
$(".filled").css("background-color", "#DEDEDE");
$(".empty").css("background-color", "#FFFFFF");
$("th").css("border", "none");
}
// Remove color for new node and return the original color for filled or empty space
function removeColor(w, h) {
for (let i = 0; i < w; i++) {
for (let j = 0; j < h; j++) {
$(`#row${j}>#col${i}`).removeClass("new-node");
}
}
$(".filled").css("background-color", "#DEDEDE");
$(".empty").css("background-color", "#FFFFFF");
}
// Add color for new node
function addColor() {
const { x, y, w, h } = getXYWH();
for (let i = x; i < x + w; i++) {
for (let j = y; j < y + h; j++) {
$(`#row${j}>#col${i}`).addClass("new-node");
}
}
$(".new-node").css("background-color", "#D9E5FF");
}
// Add new node on group grid
function addNewNode(arr) {
// Remove 'new-node' class in every row-col
const { x, y, w, h } = getXYWH();
removeColor(arr[0].length, arr.length);
// if (x, y, w, h) is ok, then put. or error.
if (validateXYWH(arr)) {
addColor();
$(dropdownPositionSelector).removeClass("input-error");
} else {
$(dropdownPositionSelector).addClass("input-error");
console.log(`You can not put a node on (${y}, ${x})`);
}
}
RED.nodes.registerType("soop_dropdown", {
category: "soop-dashboard",
color: "rgb(255, 189, 27)",
color: "#1153FC",
defaults: {
name: { value: "" },
label: { value: "dropdown" },
tooltip: { value: "" },
group: { type: "soop_group", required: true },
order: { value: 0 },
width: { value: 0 },
height: { value: 0 },
width: { value: 1, validate: RED.validators.number(), required: true },
height: { value: 1, validate: RED.validators.number(), required: true },
widgetX: { value: 0, validate: RED.validators.number(), required: true },
widgetY: { value: 0, validate: RED.validators.number(), required: true },
options: {
Expand All @@ -30,14 +123,17 @@
outputs: 1,
icon: "ui_dropdown.png",
oneditprepare: function () {
$.fn.groupTable = function (arr) {
$(this).append('<table border="1" id="group-table"><tbody></tbody></table>');
newTable(arr);
$(dropdownPositionSelector).on("change", () => addNewNode(arr));
};
$("#node-input-group-table").groupTable(getGroupGrid(this.id));

if (this.multiple === undefined) {
$("#node-input-multiple").prop("checked", false);
}
$("#node-input-size").elementSizer({
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group",
});

var un = new Set(
this.options.map(function (o) {
return o.value;
Expand Down
24 changes: 11 additions & 13 deletions dashboard/nodes/soop_dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,24 @@ module.exports = function (RED) {
this.multiple = config.multiple || false;
this.state = [" ", " "];
var node = this;
node.status({});

var group = RED.nodes.getNode(config.group);
if (!group) {
return;
}
var tab = RED.nodes.getNode(group.config.tab);
if (!tab) {
return;
}
// var group = RED.nodes.getNode(config.group);
// if (!group) {
// return;
// }
// var tab = RED.nodes.getNode(group.config.tab);
// if (!tab) {
// return;
// }

const group = "";
var control = {
nodeId: node.id,
nodeType: "dropdown",
group: group,
size: [config.width || group.config.width || 3, config.height || 1],
size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
label: config.label,
tooltip: config.tooltip,
width: config.width || group.config.width || 3,
height: config.height || 1,
name: config.name || "",
time: "",
};
Expand All @@ -37,7 +35,7 @@ module.exports = function (RED) {

node.on("input", function (msg) {
dashboard.emitState({
node_id: node.id,
nodeId: node.id,
key: msg.payload,
});
});
Expand Down
135 changes: 121 additions & 14 deletions dashboard/nodes/soop_gauge.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,110 @@
<script type="text/javascript">
const gaugePositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
function getGroupGrid(nodeId) {
const groupId = $("#node-input-group").val();
const groupNode = RED.nodes.node(groupId);
groupNode._def.reflectEdit(groupId, nodeId);
return groupNode.groupState;
}
function getXYWH() {
const x = parseInt($("#node-input-widgetX").val());
const y = parseInt($("#node-input-widgetY").val());
const w = parseInt($("#node-input-width").val());
const h = parseInt($("#node-input-height").val());
return { x, y, w, h };
}
// Validate the widget to place on (x, y, w, h).
function validateXYWH(arr) {
const { x, y, w, h } = getXYWH();
// If x, y, w, h is under or over idx of arr -> return false
if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
return false;
}
// If the space is alredy filled, return false
for (let i = x; i < x + w; i++) {
for (let j = y; j < y + h; j++) {
if (arr[j][i]) {
return false;
}
}
}
return true;
}
// Create a table with array
function newTable(arr) {
const row = arr.length;
const col = arr[0].length;
// Append a row for column header(1,2,....)
$("#group-table>tbody").append('<tr id="col-header"></tr>');
$("#col-header").append("<th></th>");
for (let j = 0; j < col; j++) {
$("#col-header").append(`<th scope="col">${j}</th>`);
}
// Append group row and col
for (let i = 0; i < row; i++) {
// append row
$("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
// Append a col for row header(1,2,...)
$(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
// Append col
for (let j = 0; j < col; j++) {
const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
$(`#row${i}`).append(tag);
}
}
// Table Design
$(".col").css("border", "dotted black 1px");
$(".col").css("width", "20px");
$(".col").css("height", "20px");
$(".filled").css("background-color", "#DEDEDE");
$(".empty").css("background-color", "#FFFFFF");
$("th").css("border", "none");
}
// Remove color for new node and return the original color for filled or empty space
function removeColor(w, h) {
for (let i = 0; i < w; i++) {
for (let j = 0; j < h; j++) {
$(`#row${j}>#col${i}`).removeClass("new-node");
}
}
$(".filled").css("background-color", "#DEDEDE");
$(".empty").css("background-color", "#FFFFFF");
}
// Add color for new node
function addColor() {
const { x, y, w, h } = getXYWH();
for (let i = x; i < x + w; i++) {
for (let j = y; j < y + h; j++) {
$(`#row${j}>#col${i}`).addClass("new-node");
}
}
$(".new-node").css("background-color", "#D9E5FF");
}
// Add new node on group grid
function addNewNode(arr) {
// Remove 'new-node' class in every row-col
const { x, y, w, h } = getXYWH();
removeColor(arr[0].length, arr.length);
// if (x, y, w, h) is ok, then put. or error.
if (validateXYWH(arr)) {
addColor();
$(gaugePositionSelector).removeClass("input-error");
} else {
$(gaugePositionSelector).addClass("input-error");
console.log(`You can not put a node on (${y}, ${x})`);
}
}
RED.nodes.registerType("soop_gauge", {
category: "soop-dashboard",
color: "rgb(255, 189, 27)",
color: "#5F86FE",
defaults: {
name: { value: "" },
label: { value: "gauge_name" },
group: { type: "ui_group", required: true },
width: { value: 0 },
height: { value: 0 },
group: { type: "soop_group", required: true },
width: { value: 1, validate: RED.validators.number(), required: true },
height: { value: 1, validate: RED.validators.number(), required: true },
widgetX: { value: 0, validate: RED.validators.number(), required: true },
widgetY: { value: 0, validate: RED.validators.number(), required: true },
gType: { value: "gauge" },
format: { value: "{{msg.payload}}" },
units: { value: "%" },
Expand All @@ -26,6 +123,13 @@
return this.min + " - " + this.max;
},
oneditprepare: function () {
$.fn.groupTable = function (arr) {
$(this).append('<table border="1" id="group-table"><tbody></tbody></table>');
newTable(arr);
$(gaugePositionSelector).on("change", () => addNewNode(arr));
};
$("#node-input-group-table").groupTable(getGroupGrid(this.id));

if (this.gType === undefined) {
this.gType = "gauge";
$("#node-input-gtype").val("gauge");
Expand All @@ -36,12 +140,6 @@
$("input[type=radio][name=colorPicking]")[0].checked = true;
}

$("#node-input-size").elementSizer({
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group",
});

let pickers = $("input[type=radio][name=colorPicking]");
for (var i = 0; i < pickers.length; i++) {
if (pickers[i].value == this.colorPicking) pickers[i].checked = true;
Expand All @@ -59,10 +157,19 @@
<input type="text" id="node-input-group" />
</div>
<div class="form-row">
<label><i class="fa fa-object-group"></i> Size</label>
<input type="hidden" id="node-input-width" />
<input type="hidden" id="node-input-height" />
<button class="editor-button" id="node-input-size"></button>
<label for="node-input-group-table"><i class="fa fa-table"></i> Group table</label>
<div id="node-input-group-table" style="width:70%; display: inline-block;">
<div style="margin-bottom:10px">
<label for="node-input-widgetX" style="width:auto;">x</label>
<input type="text" id="node-input-widgetX" value="0" style="width:30px; margin-right:10px;" />
<label for="node-input-widgetY" style="width:auto;">y </label>
<input type="text" id="node-input-widgetY" value="0" style="width:30px; margin-right:10px;" />
<label for="node-input-width" style="width:auto;">w</label>
<input type="text" id="node-input-width" value="1" style="width:30px; margin-right:10px;" />
<label for="node-input-height" style="width:auto;">h</label>
<input type="text" id="node-input-height" value="1" style="width:30px; margin-right:10px;" />
</div>
</div>
</div>
<div class="form-row">
<label for="node-input-gType"><i class="fa fa-list"></i> Type</label>
Expand Down
21 changes: 11 additions & 10 deletions dashboard/nodes/soop_gauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@ module.exports = function (RED) {
RED.nodes.createNode(this, config);
const node = this;

const group = RED.nodes.getNode(config.group);
if (!group) {
return;
}
const tab = RED.nodes.getNode(group.config.tab);
if (!tab) {
return;
}
// const group = RED.nodes.getNode(config.group);
// if (!group) {
// return;
// }
// const tab = RED.nodes.getNode(group.config.tab);
// if (!tab) {
// return;
// }

const group = "";
let state = {
node_id: config.id,
nodeId: node.id,
nodeType: config.type,
group: config.group,
size: [config.width, config.height],
size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
name: config.name,
time: "",
gType: config.gType,
Expand Down
Loading

0 comments on commit 62f0ff7

Please sign in to comment.