node-ui
Advanced tools
Readme
<img style="border:1px solid;border-color:#000000;align=left" src=./img/NodeUILB.png width="100%" height="330px" />
Create WinForm easily with the power of NodeUI module
NodeUI is designed to be the simplest way possible to make lightweight WinForms in NodeJS.
$npm i NodeUI
const NodeUI = require("NodeUI");
Creating a new WinForm with some properties
var UI = new NodeUI({
visible: true,
backColor: "#FFFFFF",
title: "New Form",
width: 750,
icon: "./icon.ico",
});
Creating a new label on the UI
var newLabel = UI.Label({
text: "Hey, i am new label !",
x: 20,
y: 10,
width: 60
});
Working with events
UI.on('ready', () => {
newLabel.text = "UI SEEMS READY !";
UI.eval(`return "ALIVE"`); // Evaluate a string as C# code
});
newLabel.on('click', () => {
UI.title = "newLabel has been clicked !";
})
// Evaluation result from the previous UI Function call (Returned: "ALIVE")
UI.on('evalResult', function(response) {
console.log(response);
});
const NodeUI = require("NodeUI");
// A control can be a Button, a Label, a TextBox, a CheckBox etc..
// UI is the constructor, holding all main events and is able to create new controls
var UI = new NodeUI();
| GET | SET | DESCRIPTION |
|---|---|---|
| UI.x | UI.x = int | WinForm x position relative to the current screen |
| UI.y | UI.y = int | WinForm y position relative to the current screen |
| UI.tag | NONE | Identifier that is unique to each form |
| UI.icon | UI.icon = string | WinForm icon (C:/.../image.png | ./image.png ) |
| UI.width | UI.width = int | WinForm width |
| UI.title | UI.title = string | WinForm title |
| UI.height | UI.height = int | WinForm height |
| UI.closed | NONE | Check if the WinForm has been closed |
| UI.topMost | UI.topMost = bool | WinForm position on top or not of all window |
| UI.enabled | UI.enabled = bool | WinForm being interactible with |
| UI.visible | UI.visible = bool | WinForm visibility |
| UI.foreColor | UI.foreColor = string e.g "#FF0000" | WinForm elements color (Has to be HEX with # | Transparent is #FF000000) |
| UI.backColor | UI.backColor = string e.g "#FF0000" | WinForm background color (Has to be HEX with # | Transparent is #FF000000) |
| UI.backImage | UI.backImage = string e.g "./image.png" | WinForm background image (C:/.../image.png | ./image.png ) |
get tag() {return this.#config.tag}
notify(notification){this.#applyConfig({notify: notification})}
eval(evalString) {this.#applyConfig({evalString: evalString})}
get visible() {return this.#config.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get title() {return this.#config.title}
set title(title) {this.#applyConfig({title: title})}
get closed() {return this.#config.closed}
close() {this.#applyConfig({close: true})}
get foreColor() {return this.#config.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#config.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#config.enabled}
set enabled(enabled) {this.#applyConfig({enabled: enabled})}
get backImage() {return this.#config.backImage}
set backImage(backImage) {this.#applyConfig({backImage: backImage})}
get topMost() {return this.#config.topMost}
set topMost(topMost) {this.#applyConfig({topMost: topMost})}
get x() {return this.#config.xPos}
set x(xPos) {this.#applyConfig({x: xPos })}
get y() {return this.#config.y }
set y(yPos) {this.#applyConfig({y: yPo })};
get width() {return this.#config.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#config.height}
set height(height) {this.#applyConfig({height: height})}
get icon() {return this.#config.icon}
set icon(icon) {this.#applyConfig({icon: icon})}
get consoleVisible() {return this.#config.consoleVisible};
set consoleVisible(consoleVisible) {this.#applyConfig({consoleVisible: consoleVisiblel})}
// MessageBox that will be shown
UI.notify("MessageBox !")
// Function that will make able the user to execute C# on the fly
// NOTE: You need to provide a return
// NOTE: Returned content (can be custom) will be transmited trought the UI event 'evalResult' (See Bottom)
// NOTE: Executed code is not linked to the main form, anything executed is being ran inside a [CodeDomProvider](https://docs.microsoft.com/en-us/dotnet/api/system.codedom.compiler.codedomprovider?view=dotnet-plat-ext-6.0)
UI.eval(` /
MessageBox.Show("C# Evaluated Code");
return 0.ToString();
`)
// Close the WinForm (Not required)
UI.close();
UI and all of the futurely created controls have dedicated events.
UI.on('ready', () => { }); // Can be used when UI is ready
UI.on('warning', function(warning) { }); // Warnings are not critical but interesting to look at for potential fix
UI.on('error', function(error) { }); // Errors are critical and need to be A. Looked at or B. Reported to us
UI.on('click', () => { }); // WinForm is being clicked on
UI.on('mouseEnter', () => { }); // Mouse enter the WinForm
UI.on('mouseLeave', () => { }); // Mouse leave the WinForm
UI.on('mouseMove', function(x, y) { }); // Mouse move over the WinForm
UI.on('uiClose', () => { }); // When the WinForm is being resized
UI.on('notificationClosed', () => { }); // When a notification from UI.notify has been closed
UI.on('evalResult', function(result) { }); // Returned content from the function UI.eval
var newLabel = UI.Label({ [PROPRIETIES] });
get parent() {return this.#labelConfig.parent}
get tag() {return this.#labelConfig.tag}
get text() {return this.#labelConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#labelConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#labelConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#labelConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#labelConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#labelConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#labelConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#labelConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#labelConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newLabel.on('click', () => { });
newLabel.on('mouseEnter', () => { });
newLabel.on('mouseLeave', () => { });
newLabel.on('mouseMove', function(x, y) { });
var newButton = UI.Button({ [PROPRIETIES] })
get parent() {return this.#buttonConfig.parent}
get tag() {return this.#buttonConfig.tag}
get text() {return this.#buttonConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#buttonConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#buttonConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#buttonConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#buttonConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#buttonConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#buttonConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get backImage() {return this.#config.backImage}
set backImage(backImage) {this.#applyConfig({backImage: backImage})}
get foreColor() {return this.#buttonConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#buttonConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#buttonConfig.enabled}
set enabled(enabled) {this.#applyConfig({enabled: enabled})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newButton.on('click', () => { });
newButton.on('mouseEnter', () => { });
newButton.on('mouseLeave', () => { });
newButton.on('mouseMove', function(x, y) { });
var newCheckBox = new UI.checkBox({ [PROPRIETIES] })
get parent() {return this.#checkBoxConfig.parent}
get tag() {return this.#checkBoxConfig.tag}
get checked() {return this.#checkBoxConfig.checked}
set checked(checked) {this.#applyConfig({checked: checked})}
get x() {return this.#checkBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#checkBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#checkBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#checkBoxConfig.height }
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#checkBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#checkBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#checkBoxConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#checkBoxConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#checkBoxConfig.enabled }
set enabled(enabled) {this.#applyConfig({enabled: enabled}) }
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newCheckBox.on('mouseClick', () => { });
newCheckBox.on('mouseEnter', () => { });
newCheckBox.on('mouseLeave', () => { });
newCheckBox.on('mouseMove', function(x, y) { });
newCheckBox.on('checkChanged', function(true) { });
Note: checkChanged has one argument that is either true or false.
var newPictureBox = UI.PictureBox({ [PROPRIETIES] });
get parent() {return this.#pictureBoxConfig.parent}
get tag() {return this.#pictureBoxConfig.tag}
get x() {return this.#pictureBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#pictureBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#pictureBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#pictureBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get height() {return this.#pictureBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#pictureBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#pictureBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get backColor() {return this.#pictureBoxConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get image() {return this.#pictureBoxConfig.image}
set image(image) {this.#applyConfig({image: image})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newPictureBox.on('mouseClick', () => { });
newPictureBox.on('mouseEnter', () => { });
newPictureBox.on('mouseLeave', () => { });
newPictureBox.on('mouseMove', function(x, y) { });
var newTextBox = UI.TextBox({ [PROPRIETIES] });
get parent() {return this.#textBoxConfig.parent}
get tag() {return this.#textBoxConfig.tag}
get text() {return this.#textBoxConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#textBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#textBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#textBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#textBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#textBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#textBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#textBoxConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#textBoxConfig.backColor }
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newTextBox.on('mouseClick', () => { });
newTextBox.on('mouseEnter', () => { });
newTextBox.on('mouseLeave', () => { });
newTextBox.on('mouseMove', function(x, y) { });
newTextBox.on('textChanged', function(newText) { });
var newProgressBar = UI.ProgressBar({ [PROPRIETIES] });
get parent() {return this.#textBoxConfig.parent}
get tag() {return this.#textBoxConfig.tag}
get x() {return this.#textBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#textBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#textBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#textBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#textBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#textBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get value() {return this.#textBoxConfig.value}
set value(value) {this.#applyConfig({value: value})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newProgressBar.on('mouseClick', () => { });
newProgressBar.on('mouseEnter', () => { });
newProgressBar.on('mouseLeave', () => { });
newProgressBar.on('mouseMove', function(x, y) { });
FAQs
Create WinForm easily with the power of NodeUI module
The npm package node-ui receives a total of 0 weekly downloads. As such, node-ui popularity was classified as not popular.
We found that node-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.