@marco.jacovone/cnodes-ui
v0.22.2
Published
A javascript UI for cnodes
Downloads
307
Readme
cnodes-ui
An ultimate UI for cnodes
cnodes-ui is a User Interface specifically developed for cnodes. It is inspired by the interface model proposed for the Unreal Engine product, which has been hugely successful in the developer community.
I therefore decided to develop a project completely created in javascript, to make a tool available to the community that they can use within their own projects.
I strongly believe in the separation between the graphic interface and the processing engine. This is the reason that prompted me to create two distinct projects.
Taking advantage of this separation, it is possible to imagine the scenario in which the graphic part is integrated within a WEB client, while the server part, which is able to independently execute the processes defined with the client, can be integrated into the backend.
Getting started
You can turn any HTML element into a cnodes-ui canvas. Lets start with a simple HTML file such as
<html>
<head>
<style>
html,
body,
div {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script
type="text/javascript"
src="https://unpkg.com/@marco.jacovone/cnodes-ui/dist/main.js"
></script>
</head>
<body>
<div id="my-canvas-id"></div>
</body>
<script type="text/javascript">
// Create the canvas on the div element
let canvas = cnui.canvas("my-canvas-id");
// To create an empty canvas, lets define a empty program
let prg = cnui.program();
canvas.program = prg;
</script>
</html>Now you can play with links with only two elements: Enter and Exit, the main entry point and exit point of the prg program. Connections let you compose your program with your favorite custom nodes.
To insert some nodes, for example a For node and a If node, you can type
// Create two nodes: For and If
let prg = cnui.Env.getInstance("Program"); // or cnui.Program.instance()
let forNode = cnui.Env.getInstance("For");
let ifNode = cnui.Env.getInstance("If");
prg.addNode(forNode).addNode(ifNode);
canvas.program = prg;Nodes will overlap, to give a position to nodes, you can set a pos structure
let forNode = cnui.Env.getInstance("For");
let ifNode = cnui.Env.getInstance("If");
forNode.meta = {
pos: {
x: 400,
y: 100,
},
};
ifNode.meta = {
pos: {
x: 700,
y: 100,
},
};
prg.addNode(forNode).addNode(ifNode);
canvas.program = prg;You can now edit your node graph, and whenever you want, you can export the resulting program by typing
let exp = cnui.Env.export(prg);
console.log(JSON.stringify(exp));This program (the exp variable) can be stored and loaded into a CNODES program instance to execute.
let prg = cnui.Env.import(JSON.parse(`{"id":"NID_3","version":1,...`));
// process execution is now asyncronous, this allow nodes to
// be async and to efficiently wait for background events such as
// webservice call. So await it with an IEF...
(async () => await prg.process())();The cnodes engine doesn't require the cnodes-ui library to work, because it doesn't have any dependency.
Update:
0.18.25 Introduces new Dark theme!
Documentation
Check out our Documentation section.
Demo
Try a demo test board at:
Once you've built the graph, you can press the Run button ti test its effect. please check the console to see the "Console" node output.
State of the art
The project is actually in a early alpha stage, but is growing rapidly ;-)