# Noisecraft - anyone heard of it? **URL:** \ **Category:** General\ **Created:** [14 July 2023 09:45 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813 "2023-07-14T09:45:07Z")\ **Posts on this page:** 20\ **Page:** 2

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [30 August 2023 16:15 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/21 "2023-08-30T16:15:36Z")

> [@gregorius](#): > > How does google sheets do that? They seem to have it down pat. Are you planning to have parallel updates of data by multiple users? Or just one user manipulating the data? O(1) or O(n) headaches! # 🤯 The dynamics are actually quite easy since Node-RED with uibuilder already provides all the tools. Even the multi-user issue is dealt with already since uibuilder already surfaces a number of properties (client id, tab id, page name, ip address) and custom ones are easily added if needed. What you do with the data back in Node-RED is, of course, entirely down to your skill with authoring flows and wrangling data. 😁 Actually, another thread reminded me about [Perspective | Perspective (finos.org)](https://perspective.finos.org/) which does much of what I'm looking for - except one major thing, you cannot update data via the grid as far as I can tell. Which is sad because I can easily create a uibuilder extermal template that would let anyone easily throw a Perspective data view onto a web page. It is just a few lines of code. ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [3 September 2023 19:38 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/22 "2023-09-03T19:38:05Z")

Anyone here know what happened to [http://www.interfacevision.com/](http://www.interfacevision.com/) (highlight from me): > It is with a sad heart that we've decided to not pursue monetization of Interface Vision's core technologies. We've done a lot of amazing things, but there just isn't a market for **visual programming environments** : yet. It will happen: it's inevitable. But just not now. That statement seems to have been from 2014. (they also have a long list of visual programming interfaces - [Visual Programming Languages - Snapshots](http://blog.interfacevision.com/design/design-visual-progarmming-languages-snapshots/)) I got there from [https://www.nodegraph.com/](https://www.nodegraph.com/) - which seems to be a research group from Facebook. ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [3 September 2023 21:43 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/23 "2023-09-03T21:43:29Z")

Seems to have been a 1-man band. Also his list didn't even include Node-RED!!! And clearly there was already a market when he wrote that, he just couldn't leverage it it would seem. After all, Node-RED dates from before then. > [@gregorius](#): > > I got there from [https://www.nodegraph.com/](https://www.nodegraph.com/) - which seems to be a research group from Facebook. Also annoying that they don't mention Node-RED which is an excellent example of a node graph! Not really surprising that most of the examples of node-graph processing come from the music and visual world since those are obvious use-cases for the orchestration of, often highly time-dependent, actions. But of course, that is a very different use-case to Node-RED's asynchronous processing that was originally intended to orchestrate sensors and robotic controls. I still think that Node-RED has one of the easiest approaches to get into visual programming, the use of JavaScript objects ("messages") greatly simplifies the visual aspects, minimising the number and spaghetti nature of the wiring. ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 07:22 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/24 "2023-09-04T07:22:44Z")

> [@TotallyInformation](#): > > Also annoying that they don't mention Node-RED which is an excellent example of a node graph! By the look of things Nodegraph is Meta/Facebook thing that might have been stopped since AI gained traction. Most activity ceased around 2021, coincident? Plus Node-RED isn't react based, Facebook wouldn't push a jQuery based product ... > [@TotallyInformation](#): > > I still think that Node-RED has one of the easiest approaches to get into visual programming, the use of JavaScript objects ("messages") greatly simplifies the visual aspects I agree with you but also understand people have difficulty understanding visual programming. Why did AI take off and Visual Programming (VP) didn't even though _usable_ VP has been around far longer than usable AI? I would suggestion that VP entails higher complexity at the entry level than AI and hence people go the "simpler" path of using AI. In the long term, VP is simpler and more understandable and maintainable but we humans think in terms of minutes, not months. > [@TotallyInformation](#): > > minimising the number and spaghetti nature of the wiring. Speaking of spaghetti, can anyone recommend a library that automagically organises a node graph into a clean layout? Just the way mermaid can layout any diagram, is there something similar for a "random" node graph? ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 08:10 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/25 "2023-09-04T08:10:33Z")

Sorry for the spam, this [hacker news discussion from 2019](https://news.ycombinator.com/item?id=19025639) is quite eye opening since one of the first comment is (highlights are mine): > Experience with tools like Blender or Nuke and particularly with visual programming in games engines is actually where a lot of the better informed dislike of visual programming comes from. > The biggest problem with these tools is scalability and maintainability. You will hear many stories in the games and VFX industries of nightmare literal spaghetti code created with visual programming tools that is impossible to debug, refactor or optimize. > Visual programming seems easy for very small examples but it doesn't scale. It has no effective means of **versioning** , **diffing** or **merging** and usually lacks good mechanisms for abstraction, reuse and hierarchical structure. It doesn't have tooling for **refactoring** and typically lacks tooling for performance profiling. > [...] Node-RED does get a mention in [this comment](https://news.ycombinator.com/item?id=19028677) 🙂 _My Conclusion_: Visual Programming won't take off unless all the tools that programmers are used to have an equivalent approach in VP - at least amongst programmers. Non-programmers probably won't approach VP since it's even more niche than using emacs and some scripting language such PHP or Python! However Node-RED being Web-based, is the perfect starting point for teaching everyone about VP. ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [4 September 2023 10:39 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/26 "2023-09-04T10:39:31Z")

> [@gregorius](#): > > Visual Programming (VP) didn't I would disagree that VP didn't take off. It most certainly did. And in many forms. Blockly, for example is used in many (most?) schools to teach computer logic and programming before moving on to written languages (usually Python). And visual tools are used in hundreds of different products and have been available for decades. Blockly, LabView, Microsoft PowerPlatform (itself several generations down a visual programming path), .... - the list goes on and on. Currently, I would suggest that AI is perceived as an easy way out of having to think about logic at all! Ask a question, get your answer. No need to map out the logic. Of course, this is a total fallacy. Since the only logic that LLM tools supply is the logic someone else has already laid out. It is a dead-end. But everyone is excited because they think it is a quick and easy way out of having to actually think for themselves. LLM's are also a somewhat dangerous dead-end in that the cost to both train and run them is enormous and likely to be highly unsustainable. Make use of free ones while you can. (Though maybe someone will invent more efficient runtime models, that's the potential of innovation of course). Not to say that LLM and ML doesn't have a place - and an important one too. But, as usual, it won't be what most people think. > [@gregorius](#): > > In the long term, VP is simpler and more understandable and maintainable but we humans think in terms of minutes, not months. And, on that we certainly both agree. > [@gregorius](#): > > Speaking of spaghetti, can anyone recommend a library that automagically organises a node graph into a clean layout? Just the way mermaid can layout any diagram, is there something similar for a "random" node graph? There are certainly libraries that do this. Let me check my list. 🙂 I believe that there are a number of layout theories - math approaches - that can be used as well though that is way above my head. OK, apologies for the length of the following. Not all of it will be relavent - it comes from my Obsidian knowledgebase and lists many of the graph-based libraries and tools that I'm aware of. Certainly some of these have auto-layout capabilities. Even the venerable graphviz has several auto-layout options. * * * | Name | Descr | $ | Comments | | --- | --- | --- | --- | | [baklavajs](https://github.com/newcat/baklavajs) | Graph/node editor for VueJs | 0 | Interesting Unreal engine style flow-based display and processing. | | [beautiful-react-diagrams](https://github.com/beautifulinteractions/beautiful-react-diagrams) | React components and hooks to build diagrams | | | | [butterfly](https://github.com/alibaba/butterfly) | Renderer for interactive diagrams and flowcharts | | | | [cytoscape.js](https://js.cytoscape.org/) | Canvas based renderer with utilities and algorithms | | [blog](https://blog.js.cytoscape.org/) | | [diagram-maker](https://awslabs.github.io/diagram-maker) | Interactive editor for any graph-like data | 0 | Online editor | | [Flowy](https://github.com/alyssaxuu/flowy) | Flowchart library | 0 | Flowcharts only | | [flow-builder](https://github.com/bytedance/flow-builder) | React-based renderer for workflows and process diagrams | | | | [Flume](https://github.com/chrisjpatty/flume) | A React-powered node editor and runtime engine | 0 | Unreal engine style flow-based display and processing. | | ~~[GoJS](https://gojs.net/)~~ | ~~Diagramming library with a focus on customization and interactivity~~ | `$$$` | Go library | | ~~[jointjs](https://www.jointjs.com/)~~ | ~~JavaScript diagramming library~~ | `$$$` | | | ~~[jsplumb](https://jsplumbtoolkit.com/community)~~ | ~~Open source project written in Typescript that gives you the tools you need to visually connect DOM elements~~ | 0 (Limited), `$$$` | Free version is too limiting | | ~~[kedro-viz](https://github.com/kedro-org/kedro-viz)~~ | ~~Visualises Kedro data and machine-learning pipelines~~ | | Specialist | | [litegraph.js](https://github.com/jagenjo/litegraph.js) | A graph node engine and editor | 0 | Unreal engine style flow-based display and processing. | | [mermaid](https://mermaid-js.github.io/mermaid) | JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. | 0 | Widely embedded in other tools. [Live Editor](https://mermaid.live/) | | ~~[ngx-graph](https://github.com/swimlane/ngx-graph)~~ | ~~Graph visualization library for Angular~~ | | Angular only | | [nice-dag](https://github.com/eBay/nice-dag) | Lightweight javascript library, which is used to present a DAG diagram | | | | [nodl](https://github.com/emilwidlund/nodl) | Framework for computational node graphs | 0 | Unreal engine style flow-based display and processing. | | [Pintora](https://github.com/hikerpig/pintora) | Extensible javascript text-to-diagrams library that works in both browser and Node.js. Inspired by Mermaid and PlantUML | 0 | | | [react-dag-editor](https://github.com/microsoft/react-dag-editor) | React component to create graphic user interface | | | | [react-digraph](https://github.com/uber/react-digraph) | A library for creating directed graph editors | | | | [react-flow](https://github.com/wbkd/react-flow) | React library for rendering node-based UIs | | | | [reaflow](https://github.com/reaviz/reaflow) | React library for building workflow editors | | | | [rete](https://github.com/retejs/rete/) | Framework for visual programming and node editors | 0 | Unreal engine style flow-based display and processing. | | [sigma.js](https://github.com/jacomyal/sigma.js) | Visualization framework for large graphs | | | | [vue-flow](https://github.com/bcakmakoglu/vue-flow) | Flowchart component for Vue 3 | | Simplified graph view | | [X6](https://github.com/antvis/X6) | X6 is an HTML and SVG-based graph editing engine that provides low-cost customization capabilities and out-of-the-box built-in extensions to quickly build DAG diagrams, ER diagrams, flowcharts, lineage diagrams, and more. | | Mostly Chinese. | * * * ## Apache ECharts [Website](https://echarts.apache.org/en/index.html) [Docs](https://echarts.apache.org/handbook/en/get-started/) [GitHub](https://github.com/apache/echarts) Includes Graph types. ## Arbor.js [arbor.js » introduction (arborjs.org)](http://arborjs.org/introduction) [samizdatco/arbor: a graph visualization library using web workers and jQuery (github.com)](https://github.com/samizdatco/arbor) > "a graph visualization library built with web workers and jQuery." ## D3.js [Website](https://d3js.org/) [Docs](https://github.com/d3/d3/wiki) [GitHub](https://github.com/d3/d3) Data visualisation ## d3-graphviz [magjac/d3-graphviz: Graphviz DOT rendering and animated transitions using D3 (github.com)](https://github.com/magjac/d3-graphviz) ## Dracula [strathausen/dracula: JavaScript layout and representation of connected graphs. (github.com)](https://github.com/strathausen/dracula) [Dracula Graph Library – Graph Computation, Layout, Algorithms for JavaScript (graphdracula.net)](https://www.graphdracula.net/) ## G6 (AntV) [Introduction | G6 (gitee.io)](https://antv-g6.gitee.io/en/docs/manual/introduction) ## Graphviz (C) DOT Language. Command line only. ## Vega - Incl Tree & Network views [A Visualization Grammar | Vega](https://vega.github.io/vega/) ## Vis.js (Community Edition) - Incl Network view [vis.js (visjs.org)](https://visjs.org/) > 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. ## VivaGraphJS [website](https://github.com/anvaka/VivaGraphJS) * * * ### Layouting - [elkjs](https://github.com/kieler/elkjs) - A port of the Java ELK layouting library to Javascript - [d3-hierarchy](https://github.com/d3/d3-hierarchy) - Helpers and algorithms for working with hierarchical graphs - [d3-force](https://github.com/d3/d3-force) - Library for creating interactive force directed graphs - [d3-dag](https://erikbrinkman.github.io/d3-dag/) - D3 plugin to work with DAG data structures - [dagrejs](https://github.com/dagrejs/dagre) - Directed graph layout algorithms for Javascript - [graphology-layout](https://graphology.github.io/standard-library/layout.html) - Layout algorithms - [springy](https://github.com/dhotson/springy) - Force directed graph layouts ### Graph Utilities - [behave-graph](https://github.com/bhouston/behave-graph) - Extensible behaviour-graph execution engine - [behave-flow](https://github.com/beeglebug/behave-flow) - UI for behave-graph using react-flow - [graphlib](https://github.com/dagrejs/graphlib) - Helpers for directed graphs in JS - [graphology](https://github.com/graphology/graphology) - Utilities and algorithms for all kinds of graphs ### Misc - [flume](https://github.com/chrisjpatty/flume) - Business logic graph editor - [mermaid](https://github.com/mermaid-js/mermaid) - Flowchart and sequence diagrams generation - [pintora](https://github.com/hikerpig/pintora) - Text-to-diagrams library - [quick-erd](https://github.com/beenotung/quick-erd) - Generate entity-relationship diagrams (ERD) from text, and reverse engineer ERD text from live database **[Overview | Welcome to PyFlow homepage! (wonderworks-software.github.io)](https://wonderworks-software.github.io/PyFlow/)** is a general purpose visual scripting framework for python. [Ryven - Flow-based visual scripting for Python](https://ryven.org/) - A simple and powerful visual nodes editor for Python, and a framework for building nodes executing any Python code. ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 16:57 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/27 "2023-09-04T16:57:20Z")

> [@TotallyInformation](#): > > I would disagree that VP didn't take off. It most certainly did. And in many forms. Blockly, for example is used in many (most?) schools to teach computer logic and programming before moving on to written languages (usually Python). Sure VP is a thing in many places but in your statement _before moving on to written languages_ is partly what I mean: why isn't _learning written programming languages before moving to VP_. I kind of mean that when I say VP didn't take off. Another example: if I want to write a node or two for Node-RED, why is that I have to do that in my text editor (ie. emacs)? If I want to extend emacs, I code that extension in emacs. Yet extensions to Node-RED (and I assume all other VP environments) have to be written in an textual environment. The concept of visual programming is alive and well but that VP becomes the go-to concept for programming hasn't happened. I know many people believe that VP imagery becomes too complex as more functionality comes along, i.e. visual spaghetti code but Node-RED seems to have found good solutions to that (i.e. subflows, link nodes, groups and custom nodes). > [@TotallyInformation](#): > > There are certainly libraries that do this. Let me check my list. Thank you for that list, gave me plenty of food for thought. I was thinking of how to auto layout a Node-RED flow. A dynamically created flow I should say and I want to automagically layout it out. Again one my off-the-wall ideas of how to use Node-RED! ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 September 2023 17:39 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/28 "2023-09-04T17:39:05Z")

> [@gregorius](#): > > I was thinking of how to auto layout a Node-RED flow. Note that there has been an attempt long time ago (see [pull request](https://github.com/node-red/node-red/pull/2267)), but unfortunately it has never been merged... ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 18:18 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/29 "2023-09-04T18:18:31Z")

Ah, sweet! I'll give that a try ... I was playing around with [elkjs](https://www.npmjs.com/package/elkjs) but it simply won't work in a function node ... I used it directly in node and it worked fine, but as a function node it does nothing. ---

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\ **Post date:** [4 September 2023 18:27 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/30 "2023-09-04T18:27:23Z")

You can also package a Subflow as a node [Packaging a Subflow as a module : Node-RED](https://nodered.org/docs/creating-nodes/subflow-modules) so yes you can almost create nodes for node-red by using node-red. (A la emacs example you gave) ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 September 2023 18:29 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/31 "2023-09-04T18:29:26Z")

You 'might' also get some ideas from [this](https://discourse.nodered.org/t/read-flows-json-and-position-the-nodes-in-most-efficient-readable-way/78158) discussion. Anyway if you could manage to implement something le that - with your meanwhile already known skills - that would be very welcome... ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 18:46 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/32 "2023-09-04T18:46:53Z")

> [@BartButenaers](#): > > Note that there has been an attempt long time ago (see [pull request](https://github.com/node-red/node-red/pull/2267)), but unfortunately it has never been merged... Thanks for that, I got it working in a [flow](https://flowhub.org/f/e02ba6e534f7a0f4) - that uses the [ClientCode](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection) node that executes frontend Javascript from a backend trigger. So I took what Nick had done and put it in a client-code node with an inject node attached. Now anyone who wants an initial layout engine can copy the nodes from the flow above. (Sorry for the own advertising but the flow might genuinely help!) ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 18:57 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/33 "2023-09-04T18:57:12Z")

> [@dceejay](#): > > You can also package a Subflow as a node [Packaging a Subflow as a module : Node-RED](https://nodered.org/docs/creating-nodes/subflow-modules) so yes you can almost create nodes for node-red by using node-red. (A la emacs example you gave) I saw the subflow extra configuration but never got warm to it, if there was a button "Submit here" ok, I'd go for it but there isn't. Hence my playing around with FlowHub and getting flow sharing done via Node-RED only ... admittedly I have no idea how authentication and trust could work but at least sharing is working! Plus I would also like to have node development in Node-RED - something to manage the package.json, readme, etc ... the .js and .html are easily taken care of as templates. ---

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [4 September 2023 19:01 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/34 "2023-09-04T19:01:16Z")

> [@gregorius](#): > > Sure VP is a thing in many places but in your statement _before moving on to written languages_ is partly what I mean: why isn't _learning written programming languages before moving to VP_. I kind of mean that when I say VP didn't take off. I think that it seems hard enough to create a computer language, to then abstract that to a visual paradigm is even harder. Which is why VPL's tend to be in specialist areas where it is easier to apply that, such as music, images and video. To create a general-purpose visual programming environment is extremely hard. Even Node-RED is far from perfect after all though it has proven very useful in many different use-cases, there is still a lot it cannot do. (Not a particular criticism by the way, just an observation). Visual tools use models and models are, by necessity, somewhat simplified otherwise they become so complex that the visual aspect is no longer so useful. Written language, on the other hand, can be extremely complex but still comprehensible. I'm sure there are lots of biological and social reasons for this - I'm no expert. > [@gregorius](#): > > Another example: if I want to write a node or two for Node-RED, why is that I have to do that in my text editor (ie. emacs)? You don't. You can take a sub-flow and turn that into a node. > [@gregorius](#): > > that VP becomes the go-to concept for programming hasn't happened. I know many people believe that VP imagery becomes too complex as more functionality comes along Ah, as I said above. 🙂 > [@gregorius](#): > > but Node-RED seems to have found good solutions to that (i.e. subflows, link nodes, groups and custom nodes). It is indeed, one of the best in my opinion. But it is still FAR from being a complete, open-ended, programming environment. And there are many tasks that are FAR easier to do in language than visually. I don't think that will ever completely change, I believe it is some aspect of our brains. After all, while visual communication (e.g. cave paintings) massively pre-date written language, it would seem that written language was what really triggered the massive innovation across the world. ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 September 2023 19:35 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/35 "2023-09-04T19:35:06Z")

> [@gregorius](#): > > Now anyone who wants an initial layout engine can copy the nodes from the flow above. Summarized: I love it 😍 Thanks for sharing this!! Very useful. Although your ClientCode node is a very convenient way to implement this, hopefully you (or somebody else) can ever implement this a bit more in the flow editor UI. Not sure if plugins (like [this](https://github.com/kazuhitoyokoi/node-red-contrib-plugin-header/blob/main/package.json#L11) one) can be used for something like that, e.g. to add a new action... BTW when I imported your flow, it contained a series of html escaped characters: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c692a9bf69cfdd115aefe2f2ec9d49d4fe0cc9b3.png) And some escaped characters are no issue for the Monaco code editor, but the browser doesn't like them: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9cd48bded25ccc5a0a349702f5efa41b97a5feec.png) After fixing that, it seemed to work fine: ![auto-layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1eec174b0f5678cd71fe636e206f01dc515bfd4a.gif) ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 19:38 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/36 "2023-09-04T19:38:50Z")

> [@TotallyInformation](#): > > But it is still FAR from being a complete, open-ended, programming environment. And there are many tasks that are FAR easier to do in language than visually. I don't think that will ever completely change, I should qualify my VP expectations: I spend a lot of time typing on the keyboard when I use Node-RED, no question. So yes, I still do a lot of textual coding and yes, that won't disappear anytime soon (perhaps with a Neuromancer-style direct interface we'll get rid of the keyboard). But I'm firmly a fan of the the old adage _a picture is worth a thousand words_ - somewhere between all text, no visuals and all visuals, no text is the sweet spot. Where? I don't know. I definitely hope that all that we have learned from textual programming doesn't fall by the wayside - as it happening with AI. ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 20:00 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/37 "2023-09-04T20:00:23Z")

> [@BartButenaers](#): > > BTW when I imported your flow, it contained a series of html escaped characters: Argh, I can import all I want, it just works ☹ - I have had escaped-stuff-problems before in other flows but not in this one - it just works. Using Firefox on Mac ... and those encoding bugs are just rabbit holes (looking at you [geolib](https://github.com/manuelbieh/geolib/blob/c6f10635062e4a52db2dc674caad2dcd11e39216/src/constants.ts#L3) and the ° symbol). On the other hand, I wonder why it would do that but not with a normal function node? Perhaps I did code something incorrectly somehow ... I just copied it from the github diff window, nothing special. I'll have an investigate ... thanks for the heads up 👍 > [@BartButenaers](#): > > Although your ClientCode node is a very convenient way to implement this, hopefully you (or somebody else) can ever implement this a bit more in the flow editor UI. I just want to be able to hit the inject button and have things happen in my editor 🙂 Thanks for the link, I was wondering how to get a user-made header onto Node-RED. > [@BartButenaers](#): > > Summarized: I love it 😍 > Thanks for sharing this!! Very useful. Thank you, much appreciated just as much as I enjoyed finding and using your SVG node 👍 Ended up multi-coloured blinking SVGs! Btw thinking about how to change the code ... first step is width of nodes, the code assumes 200px for all nodes. ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 September 2023 20:16 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/38 "2023-09-04T20:16:32Z")

> [@gregorius](#): > > the code assumes It might be useful if some settings were (somehow) _ **easily** _ adjustable, because they are user dependent. For example I like to have a smaller distance horizontally between my nodes, while other users like to have them separated widely... Not sure if this is somehow related to the Node-RED [lint](https://github.com/node-red/nrlint) tool settings. Never had time to play with it. Just thinking out loud now... ---

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\ **Post date:** [4 September 2023 20:34 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/39 "2023-09-04T20:34:19Z")

> [@BartButenaers](#): > > It might be useful if some settings were (somehow) _ **easily** _ adjustable I'm using `document.getElementById(id).getBBox().width` to get the width of the node, then there needs to be spacer that can/should be adjustable but to avoid overlap the width of the node needs to be known. Also it's the width of the parent node, which is another issue on its own ... 🙂 I also had a look at the [flow data](https://github.com/gorenje/flows.flowhub.org/blob/main/e02ba6e534f7a0f4/flows.json) for the client-code flow, there is no > in there (for the client code code) - if you edit the node, is there > in the Node-RED editor window? ---

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [4 September 2023 20:40 UTC](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813/40 "2023-09-04T20:40:04Z")

> [@BartButenaers](#): > > Not sure if plugins (like [this](https://github.com/kazuhitoyokoi/node-red-contrib-plugin-header/blob/main/package.json#L11) one) can be used for something like that, e.g. to add a new action Yes, a plug in can register actions to be available from the command palette which in turn can be bound to shortcuts [Previous page](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813.md?page=1) [Next page](https://discourse.nodered.org/t/noisecraft-anyone-heard-of-it/79813.md?page=3)