Understanding Visual Components in Node-RED

[Aishwarya Kaliki]

Hi,

I've been looking for tools to visualize and connect components, and Node-RED seems to do exactly what I want. However, it also does much more. I'm trying to figure out a way to decouple the front-end (UI) from the actual application, i.e. just use the graphical editor. All I need is the JSON data, without the complex script generation that is going on.

So my question is, is there a simple way to separate the editor and GUI from the back-end logic? From what I've seen as I studied the code, they seem to be really interconnected.

If that is not possible, could you tell me the libraries you used to design the front end, specifically the drag and drop components and the interconnecting wires? I noticed that you used jQuery extensively, and from what I can see, D3 for event handling on the UI components. You've also embedded the Orion Editor for text editing capabilities such as for the function and template nodes. However, I can't seem to figure out where the drag-drop functionality or SVG manipulation happen. Am I missing something?

Thanks for your help.

Regards,

Aishwarya  

[Emil Oberg]

If you want to create a directed graph yourself, you probably want to look more closely at D3 (which is what Node-RED is using). Example: http://bl.ocks.org/rkirsling/5001347

If you want to use Node-RED as backend, you may send a GET request to /flows to get the JSON of all the flows. Similar, a GET request to /nodes will give you a JSON of the installed nodes (a a request to /settings all the settings...).

Emil

[Nicholas O'Leary]

Hi Aishwarya,

it isn't a very simple task today to separate them out, but that is something we plan to make easier to do in the near future.

There are essentially three parts:

1. the runtime that knows how to 'run' the flow json definition

2. the runtime API that provides http endpoints for getting/setting the flow json, the node definitions etc

3. the editor that is served by the runtime, but runs in the browser

To separate it out properly, we need to make #2 a more clearly defined layer in the code that could have alternative implementations of #1 plugged in. As I said, this isn't trivial today, but is something we plan to look at.

You've identified all the libraries we use in the UI - jQuery for basic jQueryness and d3 doing the heavy lifting of rendering the flow. The interactiveness of the flow editing is in:

    public/red/ui/view.js

Nick

--
http://nodered.org
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Aishwarya Kaliki]

Emil,

Thanks for the suggestions! I've already started combing through D3 and it looks to be very powerful. However, it's not just a directed graph that I want to build. I also want to incorporate the concept of nodes, and Node-RED is perfect for this. At the same time I don't want to incorporate Node-RED entirely, with all its additional functionality. Thats why I was looking for a way to use just the UI.

Thank you for the insight into how to get the JSON data I want, it really helps!

Regards,

Aishwarya  

[Aishwarya Kaliki]

Hi Nick,

Those are exactly the details I was looking for! From the code, I thought there might not be a clear demarcation, but I wanted to be sure. 

Unfortunately I'm on a very strict timeline and from what I know, it would probably be easier to start with D3 and incorporate some of the elements and design of Node-RED as I go. 

Thank you for your help!

Regards,

Aishwarya

[Emil Oberg]

Cool!

Other things which may be of interest:

• For the HTTP API you might want to take a look at red/api/index.js (notice: this is the current master branch, these files look differently if you downloaded Node-RED from NPM).
• Also maybe take a look at Node-RED-CLI which invokes that api.
• The flows are saved as json on your drive. Check your Node-RED root folder, you'll have a flows_something.json there (this file is configurable). If you don't want to make http calls you can just read this file.
• And lastly, just open up the developer tool in your browser, set it to monitor network traffic and check the XHR going between the browser and Node. These are the same methods you may use.
  

E

[Julian Knight]

I do have a list of Javascript libraries that provide graphs (directed and otherwise) if that is of any help. Just let me know.

[Aishwarya Kaliki]

Great! This will probably save me a lot of time.

Thanks again!

[Aishwarya Kaliki]

Julian,

I would appreciate a few suggestions. I want to create a really fluid drag-drop ui very similar to what Node-RED has. Do you know any libraries that can achieve that other than jQuery UI and D3?

Regards,

Aishwarya

[Julian Knight]

Hi Aishwarya, I'm not sure I know enough about each library to predict whether they will do what you want. I've long been on a quest to find a good tool that will do data-driven diagrams in the browser (As GraphViz does stand-alone but using browser/Canvas/SVG) which is why I regularly go hunting for good graph libraries. Anyway. here is a dump of my page of notes on the subject, I hope that one of them may be of use.:

			Lists of tools List of HTML5 Graph & Chart & visualisation tools http://d.hatena.ne.jp/munetoh/20120409 UML Specific tools: http://modeling-languages.com/uml-tools/
	Not charts!   http://jointjs.com JointJS diagramming library lets you create fully interactive diagramming tools for all modern browsers. JointJS is not only a drawing library but its MVC (more MV) architecture separates graph, element and link models from their rendering. This makes it easy to plug JointJS to your backend application. Moreover, JointJS is built with Backbone MVC library, so if you know Backbone, you'll feel like at home with JointJS. The same goes for a lot of constructs you'll see in JointJS. JointJS is not trying to reinvent the wheel for technologies that are common to web developers. Things that you learn with JointJS will be helpful to you elsewhere. JointJS is based on jQuery, Underscore, Backbone and SVG. Diagrams consist of elements connected with links. A diagram in JointJS is represented by a model joint.dia.Graph. This model then collects cells (a term representing both elements and links). A cell could therefore be either an element (joint.dia.Element or its inheritants) or a link (joint.dia.Link). In JointJS (starting from version 0.6), you manipulate models, not views. Uses SVG. Can style SVG elements using CSS, see: Fills and Strokes tutorial on MDN       Free: Cytoscape.js - Cytoscape.js is an open-source graph theory (a.k.a. network) library written in JavaScript. You can use Cytoscape.js for graph analysis and visualisation. Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your webapp, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad. Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera. Cytoscape.js also has graph analysis in mind: The library contains many useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server. Draw2D - Create Visio like drawings, diagrams or workflows in JavaScript and HTML5 jsPlumb - provides a means for a developer to visually connect elements on their web pages. It uses SVG in modern browsers, and VML on IE 8 and below Canviz is a JavaScript library for drawing Graphviz graphs to a web browser canvas. More technically, Canviz is a JavaScript xdot renderer. It works in most modern browsers. SigmaJS VisJS (also timelines and 3d plots) - npm, DOT lang - easy to use, also supports DOT language (with limitations) - no grouped nodes. Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d. Arbor Springy (simplistic?) VivagraphJS, replaced by ngraph Jquery.graphviz Dagre - Graph layout for JavaScript. Very simple, uses D3 or JointJS for rendering Dracula Js-graph.it (Simple blocks and connectors) Ngraph  - Ngraph is a set of graph related algorithms. It can be used in a browser or on the server side. This repository is a collection of examples, which show how to use some of them or build your own. CanvasXpress - a standalone HTML5 graphing library written in Javascript that includes a simple and unobtrusive user interface to explore complex data sets. CanvasXpress is supported in all major browsers in computers and mobile devices. Includes Network, Tree, TagCloud, and other interesting types   SPECIALIST js-sequence-diagrams - Turns text into UML sequence diagrams. A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Raphaël to draw the image.     Not Free GoJs - Looks fab. Interactive Diagrams for the Web - unlimited trial but watermarked, USD thousands jGraph USD 10's thousands ZoomCharts - USD hundreds yFiles   From <http://stackoverflow.com/questions/24213988/system-mapping-solution-for-sharepoint-2013/24215010?noredirect=1#comment37455463_24215010>     Non-JavaScript GraphViz - the grandaddy Gravizo (need to call the url http://g.gravizo.com/g? followed by your graph description in DOT, PlantUML or UMLGraph syntax. ) GsVcc http://sketchlet.sourceforge.net http://plantuml.sourceforge.net/ (Uses GraphViz) Showgraph - Simple graph editor with automatic layout for directed graphs visualization       Old List   Programatic Data Visualisation Tools PHP PEAR Package for GraphViz JointJs - a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams. Tulip Windows - C++/Python - “Tulip is an information visualization framework dedicated to the analysis and visualization of relational data. Tulip aims to provide the developer with a complete library, supporting the design of interactive information visualization applications for relational data that can be tailored to the problems he or she is addressing” uDraw(Graph) Multi (Java) - “creates your flow charts, diagrams, hierarchies or structure visualizations using automatic layout” - multi-platoform The Visual Understanding Environment (VUE) (Java) is an Open Source project based at Tufts University. The VUE project is focused on creating flexible tools for managing and integrating digital resources in support of teaching, learning and research. VUE provides a flexible visual environment for structuring, presenting, and sharing digital information. Allows import of xml/csv data to auto-create nodes and lines. GraphViz Multi - C (Cmd Line) - “open source graph visualization software” NodeViz Web - PHP/JS - “embed interactive network diagrams on a web page”- doesn't actually do the network analysis (see the website for tools to do that) D3 - JS - “a JavaScript library for manipulating documents based on data” Networkx - Python - “NetworkX is a Python language software package for the creation, manipulation, and study of the structure, dynamics, and functions of complex networks.” https://github.com/strathausen/dracula, http://dracula.ameisenbar.de/ https://github.com/bpartridge/graphviz.js - JavaScript - “experimental port of the Graphviz graph visualization software to in-browser Javascript” jsPlumb - Odd combination of needing HTML and JS programming to achieve - odd effects between jQuery interactions and jsPlumb. WireIt - JS, YIU - really designed for programatic web interfaces (like Yahoo Pipes), also has an editor plotutils - The GNU plotutils package contains software for both programmers and technical users. Its centerpiece is libplot, a powerful C/C++ function library for exporting 2-D vector graphics in many file formats, both vector and bitmap. On the X Window System, it can also do 2-D vector graphics animations. Compendium SmartDraw (Not free) AutoDia - cmd line - parse source data into dia format. supposedly easy to write own parsers. jQuery http://stackoverflow.com/questions/4712189/how-to-draw-a-line-between-2-elements-using-jquery-and-refreshing-that-line http://www.openstudio.fr/Library-for-simple-drawing-with.html?lang=fr http://stackoverflow.com/questions/536676/how-to-draw-a-line-between-draggable-and-droppable http://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs http://monkeyandcrow.com/blog/drawing_lines_with_css3/ TO LOOK http://stackoverflow.com/questions/3679436/how-can-i-combine-objects-in-the-raphael-javascript-library http://www.sonivis.org/ - Needs MySQL - “SONIVIS is an Eclipse-based open source software for analysing and visualizing virtual information spaces such as Wiki, Weblogs, or Social Network Sites. The objective is to investigate different development stages of these information spaces and therefore to recommend appropriate knowledge management activities depending on each stage” http://www.atlantis-interactive.co.uk/products/datasurf/default.aspx - “free SQL visualization tool - it is a free animated graphing tool which allows you to easily visualize complex schemas - use it to “surf” through your data” - see also Schema surf http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript http://code.google.com/p/canviz/ - JavaScript - “Canviz is a JavaScript library for drawing Graphviz graphs to a web browser canvas. More technically, Canviz is a JavaScript xdot renderer. It works in most modern browsers.” http://cytoscape.github.com/cytoscapeweb/ http://jsplumb.org/jquery/stateMachineDemo.html http://js-graph-it.sourceforge.net/ https://github.com/bpartridge/graphviz.js http://www.manageability.org/blog/stuff/open-source-graph-network-visualization-in-java/view http://www.graphdracula.net/ Related Tools http://www.umlgraph.org/ GraphVizio - A Visio addin for Graphviz “allows you to layout Visio diagrams using the renowned Graphviz algorithms” GraphViz can be used with Google http://gephi.org/ - an interactive visualization and exploration platform for all kinds of networks and complex systems, dynamic and hierarchical graphs. yEd - supports data import http://igraph.sourceforge.net/index.html http://www.diagramming.org/ yUML http://yuml.me/ http://www.dokuwiki.org/plugin:yuml - yUML plugin for DokuWiki http://digitalkaoz.github.com/yuml-php/ http://blog.henyo.com/2009/07/easy-use-case-diagrams-with-yuml.html http://www.tobinharris.com/past/2009/5/2/yuml-and-jquery-for-large-diagrams/ JavaScript Tools JavaScript InfoViz Toolkit http://processingjs.org/ http://raphaeljs.com/ https://github.com/mbostock/d3 Searches to Try network graph visualization edge node undirected and directed graphs Sugiyama scheme; it produces so called layered, or hierarchical layouts D3 http://bost.ocks.org/mike/d3/workshop/ https://github.com/mbostock/d3/wiki/Partition-Layout http://stackoverflow.com/questions/9539294/adding-new-nodes-to-force-directed-layout http://bl.ocks.org/1962173 http://bl.ocks.org/950642 http://bl.ocks.org/1095795 /var/www/dokuwiki/data/pages/dev/visualisations.txt · Last modified: 2012-06-15 13:32 by Julian Knight   Page Tools Edit this page Old revisions Backlinks Back to top   From <https://totallyinformation.net/wiki/dev:visualisations>
			Online Tools: http://www.nomnoml.com/ - easy to use UML flavoured tool with simple explanation of UML components. Capable of doing simple flowcharts.   This is a list of known graph drawing libraries. See a website with interactive data.   From <https://github.com/anvaka/graph-drawing-libraries>

[vikram sai]

Hi Aishwarya,

Did you get the solution for your requirement ? 

[Kekk]

Hello all,
i am also working on separating the front-end from the application

Thanks and warm regards,

[Nick O'Leary]

Hi

just to note, this was a 2.5 year old thread you have replied to.

Have you see the roadmap we published on the Node-RED blog earlier in the summer? That set out our plans for the future development of the project which included splitting out the editor and runtime.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack

---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/471bc1ab-299e-4041-b34f-9877043cfb01%40googlegroups.com.