A simple library to draw option menu or other popup inputs and layout on Node.js console.
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
It could start from the option popup and spawn a child-process to ls the selected folder and return the selected file name and path.
Change selected layout by clicking inside or changing separator size by dragging it.
Allow columns, too. Like used in Bootstrap's Grid-system (Columns, rows) to give the dev better options on how to setup a given layout. I'd also like to control, if the "Logs" should be be rendered in a specific column or row.
It would enable the dev to generate GUI-elements, instead of having to force the design in a "double" or "quad" layout.
Two rows, each with two columns:
Yes, that's actually a QuadLayout, but done manually.
I'd also like it to support two "horizontal views", where the first one contains two rows, and no. 2 is a single big one:
Another solution would be to just support a "triple` layout, maybe two (one for 100% left colum height, and one for 100 right column height - like the example).
Also, just to add it:
Personally I had a hard find spotting the "quad" option. Maybe I just missed the example, but after i noticed [https://github.com/Elius94/console-gui-tools/blob/main/docs/QuadLayout.md) in the docs, I though.... The quad-option must be part of the "type" on ConsoleGuiOptions, and luckily it was.
I understand that the addColumn doesnt really fit into the current solution, if I understand the code-base correctly, so the other alternative with two new Layouts would be a good alternative. Maybe even just one, and a "mirror" function (but that's not that logical, for most users).
Yet another take would be to just allow one to be stretched to 100% height, and tell the user to set the proper pageRatio (Like [[0.3, 0.7],[0.3, 0.7]] , where page 2 (1) is defined with 100% height). But right now, I even struggle to find the function to render a 100% height ConsoleManager.
I'm new to the console-gui-tools, but I've looked at terminal-kit (node), and solutions like urwid (python) and bash solutions like whiptail / dialog and a few others. But console-gui-tools looks very great! In urwid I find myself using way too much time creating simple GUI changes, instead of the functions behind it.
Milestone: 1.2.x
A popup which you can pass a PageBuilder.
It's necessary to add Tests with Mocha/chai and coverage checks.
Also we need to add more examples and a folder containing only components.
The interface definition has the changeFocusKey property marked as required, so types show to be wrong in IDE.
No type errors should appear in in IDE.
const opt: ConsoleGuiOptions = {
title: "Progress Bar Test",
layoutOptions: {
type: "single"
},
logLocation: "popup",
enableMouse: true
};3.2.0
20.7.0
Ubuntu
konsole
Convert all class constructors with a single parameter: An object with a type (Interface) defined, in order to better handle optional parameters, and to simplify coding.
To conform with current coding style standards and to facilitate the declaration of new classes.
@h-sifat mentioned this possibility in #54
// with a single object parameter
new Progress({
x: 3,
y: 23,
length: 20,
id: "prog1",
thickness: 1,
style: pStyle,
theme: "htop",
orientation: "horizontal",
});
// with multiple parameters
new Progress("prog1", 20, 1, 3, 23, pStyle, "htop", "horizontal")To implement it you need to
npm run docs to update the code documentationAll of this will go into forming the new Major Release (v3), as it compromises backwards compatibility because of the syntax change.
Trying to use the InputPopup to get a string returns NaN.
Entering a number logs the correct output. I have tried converting that str variable to string but is looks like the function only returns numbers.
A string as an output
let input = new InputPopup({
id: "popupTypeStr",
title: "Pega el enlace",
value: "",
numeric:false,
})
.show()
.on("confirm",(str) => {
GUI.warn(str)
});
3.2.2
20.8.0
Ubuntu
gnome-terminal
cant use types in an ESM Project ("types": "esnext") with
ts 4.9.x
Error
Could not find a declaration file for module 'console-gui-tools'. 'c:/remoterep/rtptools/node_modules/console-gui-tools/dist/esm/ConsoleGui.mjs' implicitly has an 'any' type.
Try `npm i --save-dev @types/console-gui-tools` if it exists or add a new declaration (.d.ts) file containing `declare module 'console-gui-tools';`ts(7016)
ts 5.3.x
Could not find a declaration file for module 'console-gui-tools'. 'c:/remoterep/rtptools/node_modules/console-gui-tools/dist/esm/ConsoleGui.mjs' implicitly has an 'any' type.
There are types at 'c:/remoterep/rtptools/node_modules/console-gui-tools/dist/types/ConsoleGui.d.ts', but this result could not be resolved when respecting package.json "exports". The 'console-gui-tools' library may need to update its package.json or typings.ts(7016)
Using Types in VSCode (current all is "any")
import { ConsoleManager } from 'console-gui-tools'
(but no types available)
3.4.0
18.16.1
Windows
gitbash
The goal is to make a new kind of widgets. A widget that is printed inside a PageBuilder class, it will use fiew characters or multiple lines but it will embedded inside the rows of the page.
To use the page widgets the user must select one of them (maybe with tab) and use the keyboard, so it's neccessary to add a sort of tabindex on PageBuilder class.
The following list represent some of the possible page widget to do:
Need to manage this!
Currently we can set colors using chalk. If we need to set a color or style on the home page we still have to use it.
I wish to add color syntax to the homepage string like html tags or other escaped strings that will be changed to chalk function in the library.
I want to offset the popups
I think it'll be more convenient to have the pop ups offset feature
IDK...
P/s: Sorry alot for my lack of knowledge and bad English
For example:
many more
It's usefull for print 2d arrays or any other table data on the screen, maybe a scrollable table designed inside a big popup.
Add "key" parameter to button to push it with keyboard key
example:
const button = new Button("btnClickMe", "Click Me!", 11, 3, 10, 10, style1)
button.setKey("x", ctrl=true, alt=false, shift=false)When I tried to type an & sign, it just inputted "undefined"
I typed the following: test&123
Uppercase does not work either (shift key doesn't work)
I would expect the popup input to handle special characters (e.g. "&") properly
const input = await new Promise<string>((resolve, reject) => {
new InputPopup({
id: "popupInput",
title: "Input",
numeric: false,
value: "",
})
.show()
.on("confirm", (out) => {
resolve(out);
GUI.refresh();
})
.on("cancel", () => {
reject();
});
}).catch(() => {
// kill
process.exit(1);
});3.0.3
18.12.1
Other Linux
KDE Konsole on Arch
High Refresh rate, on big screen make the screen flashing very noisely. try to render tty only once and before only return a screen variable.
It should be changed with [TAB] and returned to the upper level by pressing Exit
It's also visible in the readme first animation
currently the process.exit() is needed for node to end correctly, cause the StdIn Interface is not correctly closed.
Implement the GUI correctly even during close.
The changes needed can be seen here. I'm not sure if all components are working, but a small implementation does not need the on("exit") process.exit() structure anymore
main...haeferer:console-gui-tools:main
Now this code works
GUI.on("exit", () => {
console.clear();
})
you can even remove these lines, if you dont want to clear the console on exit
Maybe it can be a standard popup with a simple progressbar inside it.
In this way it should be possible to add a Control to a customPopup or to a part of a layout.
If a control will be placed inside another pagebuilder, his X and Y should be anchored to the parent PageBuilder.
Code runs but when I click the button it does not execute the wanted code.
Should register the click
const { InPageWidgetBuilder, Control } = require('console-gui-tools')
const widget1 = new InPageWidgetBuilder()
widget1.addRow({ text: "┌────────┐", color: "yellow", style: "bold" })
widget1.addRow({ text: "│ START! │", color: "yellow", style: "bold" })
widget1.addRow({ text: "└────────┘", color: "yellow", style: "bold" })
const button1 = new Control({
id: "btn1",
visible: false,
attributes: { x: 30, y: 18, width: 10, height: 3 },
children: widget1
})
button1.on("relativeMouse", (event) => {
if (event.name === "MOUSE_LEFT_BUTTON_RELEASED") {
require('fs').writeFileSync('button.txt', 'Button clicked!')
}
})```
### Library Version
3.3.0
### Node Version
18.5.0
### What operating system are you using?
Windows
### Terminal
Tried CMD & windows terminal. I also tried on my macbook and got the same results.
### Interest to fix the bug
- [ ] I would like to fix this bug!Hi, I just say this issue. I actually had to convert my project from CJS to ESM when I installed your library. Does converting it all to Typescript mean that my program will break again if it is not converted back?
Originally posted by @lather205 in #35 (comment)
Currently it only allows integers because it doesn't manage the "." or "," keys to set decimals.
I consider it a bug.
The input popup set the cursor not at the last character but on the last -1.
This is useful for big option list!
If you define a OptionPopup with selected: "", it throw a error considering selected undefined.
It should allow to set it to empty string
new OptionPopup({
id: "testBox",
title: "title",
options: opts,
selected: ""
})3.0.4
19.3
Windows
Windows Terminal
Hi, excelent work. I'va a question: Will be enabled the mouse in the future?
Currently the lib allows to use only Homepage (top of the screen) and Logs View (bottom of the screen).
It's interesting to give to the user the possibility of adding more than one pages and maybe with a custom layout.
Another thing is to make the layout acts like a tabview, so with a keybord key or combination make it changing the selected tab.
Like Tachimeter or something else. The idea is to build a ASCII rendered circular Gauge
I want the code to accept strings that are above 20 characters.
The example from InputPopup: "
import { ConsoleManager,ConfirmPopup, Box, InPageWidgetBuilder, InputPopup } from "console-gui-tools"
const opt = {
title: "Input Popup Test",
layoutOptions: {
type: "single"
},
logLocation: "popup",
enableMouse: true
}
const GUI = new ConsoleManager(opt)
GUI.on("exit", () => {
closeApp()
})
let nValue = 0
let sValue = ""
GUI.on("keypressed", (key) => {
switch (key.name) {
case "q":
new ConfirmPopup({
id: "popupQuit", title: "Are you sure you want to quit?"
}).show().on("confirm", () => closeApp())
break
case "n":
new InputPopup({
id: "popupInput",
title: "Enter a number:",
value: nValue,
numeric: true
}).show().on("confirm", (value) => {
console.log(You entered: ${value})
nValue = value
refresh()
})
break
case "s":
new InputPopup({
id: "popupInput",
title: "Enter a string:",
value: sValue,
numeric: false
}).show().on("confirm", (value) => {
console.log(You entered: ${value.lenght})
sValue = value
refresh()
})
break
default:
break
}
})
const closeApp = () => {
console.clear()
process.exit()
}
const b = new Box({
id: "box",
x: 2,
y: 3,
width: 45,
height: 4,
style: {
boxed: true,
}
})
const content = new InPageWidgetBuilder()
content.addRow({
text: "Press 'n' to open a Numeric Input Popup",
color: "rgb(255,0,0)",
bg: "rgb(0,0,255)",
})
content.addRow({
text: "Press 's' to open a String Input Popup",
color: "blue",
})
b.setContent(content)
const b1 = new Box({
id: "box1",
x: 2,
y: 7,
width: 45,
height: 4,
style: {
boxed: true,
}
})
const refresh = () => {
const content1 = new InPageWidgetBuilder()
content1.clear()
content1.addRow({
text: Numeric value: ${nValue},
color: "rgb(255,0,0)",
bg: "rgb(0,0,255)",
})
content1.addRow({
text: String value: ${sValue},
color: "blue",
})
b1.setContent(content1)
GUI.refresh()
}"
3.3.0
20.5.1
Other Linux
xterm
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.