Draw NDBX

john's Avatar

john

25 Dec, 2022 01:48 PM

NOTE: Version 2 now available for download - see below.

Draw NDBX is a Nodebox network that can draw other Nodebox networks. It can even draw itself (see screenshot)!

To use it, simply point to any .ndbx file in the net_table node at the top.

WARNING - it can take a MINUTE or more to generate a net table for a large NodeBox network. So render the net_table node, get a cup of coffee, and then, when the data table displays, EXPORT it as a CSV. Then reset the import_csv3 node to point at this new CSV file and make sure the imported CSV is connected to the null2 node below it. Once this is done the stats and draw_net nodes will run (reasonably) fast.

Render (double-click) the draw_net node to see the root level of your network. The draw_net node has several settings:

  • Check "Include frame" to include a background and parent marker for each network. If you don't check this, only the actual network will be drawn and subsequent settings will be ignored.
  • Bg color allows you to define a colored background for your network.
  • Check "Classic grid" to ignore Bg color and instead draw a dark gray grid just like the actual Nodebox app does.
  • Check "Mark subnets" to draw red ovals around any subnetwork nodes in your drawing; this makes those nodes easier to spot

You will notice the drawn network looks slightly different than the original. Icons are not drawn inside each node. The connection lines are drawn as dotted lines if they are feeding data one item at a time (range = value), and as solid lines if they are feeding data all at once (range = list). This vital distinction, hidden in the Nodebox app, can now be seen at a glance. The port nubs at the top of each node are drawn rounded for value ports and rectangular for list ports; this allows you to see the setting even if a line is not currently connected to it.

If you have one or more subnetworks, those can also be drawn. Just advance to the next frame using the frame control in the lower left corner. Each time you advance the frame, another subnetwork will be drawn. Be patient: draw_net can sometimes take 10 or 20 seconds to draw complex networks or subnetworks.

If you wish, you can save ALL the drawings at once by exporting a movie or exporting a range of individual SVGs, PNGs, or PDFs. The stats table displays the total number of subnetworks or distinct subnetworks. You will probably want to check the "Drop duplicates" checkbox in the subnets node to avoid drawing multiple copies of the same subnetwork (which can happen, for example, if you use the same node from the Cartan Node Library in multiple places). Check the stats node to see how many distinct subnetworks you have, then export the movie from frame 0 (the root) to this number of subnetworks. It may take quite a while to render a movie for a large network with many subnetworks, but once this is done you can step through each frame of the movie instantly.

You can also display stats for your network by rendering the draw_table node below the stats node. This will show you the following stats:

  • File name
  • Canvas width and height
  • Code Libraries (normally 0 unless your network requires one or more linked code libraries)
  • Total number of nodes (including nodes inside subnetworks)
  • Total number of connections
  • Depth (the number of sub levels). A simple network with no subnetworks will have a depth of 0. A subnetwork with a sub-subnetwork inside it will give your network a total depth of 2.
  • Changed ports. This is the number of ports across all nodes with a value set to something other than the default value. If you hook standard nodes together without ever changing a single parameter, you will have 0 changed ports. The higher this number, the more specific changes you made to the behavior of your original nodes.
  • The number of different node types used in your network
  • The total number of subnetworks (including sub-subnetworks, etc.)
  • The total number of distinct subnetworks (once duplicate subnetworks have been removed)

Please give this contraption a try on your networks and report back on how well it worked and what other features you would like to see.

I highly encourage advanced users to change the draw_net subnetwork and experiment with different ways of representing Nodebox networks. A network drawing is simply a data visualization, in this case the data is the structure of the network as listed in the net table. There are an infinite number of possible ways to represent this data depending on what you want to emphasize.

For example, you could simplify the drawing by reducing each node to a single dot and producing a standard network graph. It is possible (though difficult) to alter the layout to make subnetworks big enough to display its innards on the parent level. In theory you could draw root level nodes as big dots, subnetwork nodes as smaller dots, sub-subnetwork nodes as even tinier dots, etc.

You could also visualize the full depth of a network by drawing a tree with a row of root nodes at the top, a row of subnetwork nodes below that, etc. Or you could simply draw a bar chart showing the number of nodes at each level. You could use my treemap node to create a treemap showing the variety of node types used and the relative occurrence of each type.

OR you could use different aspects of the net table to create generative art. Here the goal would be not to understand the details of a network but instead to use it as a kind of random number generator to create complex and interesting patterns. The sky is the limit here.

If you do create some new visualizations or art pieces using this tool, please consider sharing them with us.

Go forth and create!

John

  1. Support Staff 1 Posted by john on 28 Dec, 2022 11:19 PM

    john's Avatar

    Draw NDBX v2

    Version 2 improvements:

    • Dashboard layout with network, stats, and treemap
    • Draw_net node adds a scale option
    • Adjustable title now appears at top of display
    • Treemap shows node type usage arranged by category
    • Only subnetwork diagram shows in subsequent frame, each sized to fit
    • Layout node adapts to current canvas size and allows margin adjustments

    With v2 you can now make a nice looking poster dashboard display. The four elements - title, network diagram, stat panel, and treemap - are all size adjustable. Network diagrams vary widely; some are tall and skinny, others fat and wide, some tiny, some huge. As a result you may want to adjust element scaling, margins, and canvas size to get the most pleasing presentation for each network.

    Please give it a try and let me know what other improvements you'd like to see!

    John

  2. 2 Posted by florisdejonge on 21 Jun, 2024 05:39 PM

    florisdejonge's Avatar

    Hi John, I still really like this node to show to people how Nodebox works. For example: I can add a card of the plotted network to the artworks that's been generated by it. A couple of questions: I added the text_svg node instead of the textpath within the draw_nodes network, but then all the connecting lines go haywire and I can't seem to get them right. I now manually do this in Illustrator or Inkscape. Any ideas? Also, could you consider adding more controls to changing the fill and stroke color?

    Floris

  3. Support Staff 3 Posted by john on 22 Jun, 2024 12:07 AM

    john's Avatar

    Floris,

    After I posted this a few years ago I received no reaction whatsoever, so was not sure if anyone had even seen it, let alone tried using it. So I am delighted to hear that you have been using it. And using it to add a card to your plots is an EXCELLENT use case - even better if you can plot that card!

    So I assume what you were trying to do was to replace all text paths for labels with text_svg so that you could plot the labels, yes? The reason you ran into trouble was that textpath produces a single path with contours, while text_svg produces a group of separate paths. This confuses other parts of my very complex network downstream.

    So behold! I have attached a new version, Plot NDBX, that works just like Draw NDBX v2 but replaces all the text paths with textSVGs (using the Hershey font).

    Please give it a spin and let me know if you can plot the networks OK.

    Once I hear back from you I will consider your other requests. One thing I notice is that textSVG draws left aligned. This is easy enough to fix using an align node, but perhaps it should also be an option (though I don't like to go beyond 7 ports).

    John

  4. 4 Posted by lastvector on 22 Jun, 2024 06:44 AM

    lastvector's Avatar

    John

    ...I received no reaction whatsoever, so was not sure if anyone had even seen it...

    It's understandable. But I also find it a bit misleading.

    Because apart from posting a reply, forum visitors didn't
    have many options to show their appreciation.

    For example, with likes. There also doesn't seem to be
    any display of how often a page has been viewed.

    Btw i downloaded it also and hat look at it.

    gottfried

  5. Support Staff 5 Posted by john on 22 Jun, 2024 07:43 AM

    john's Avatar

    Gottfried,

    That is the problem: this forum software has no like button and no view stats. As a result, it's harder for people to show appreciation, and I have to constantly "fly blind", posting with little or no feedback.

    Frederik, the inventor of Nodebox and the person who started this forum, is aware of this issue, and has talked about migrating the (now sizable) content to more modern software, but even if a free solution could be found, it would take more time and effort than he can afford at present.

    So we'll all just have to muddle through. In the meantime, I deeply appreciate people like you who are willing to post - even if it's just a simple Thanks.

  6. 6 Posted by florisdejonge on 22 Jun, 2024 09:30 AM

    florisdejonge's Avatar

    Hi John,

    Thanks for the quick reply and update of the node. I think we discussed the first instance of the node in an Instagram chat. But I hadn't really looked into the second version, since I don't use this node that often and was happy using the first version which I adapted a bit to my own use. Since I couldn't get the svg-text to work with the connections I thought the second version might not have the same problem. But I kept struggling with the align nodes - I just did't know where to place them within a specific subnetwork. So, thanks for your help.

    Anyway, the Hershey-text does work in this updated version. It takes some relinking when I applied it to my original file. One thing regarding file management: I store all libraries in a separate folder to which I link all the dependencies, so I don't have any duplicate scripts in all folders. But somehow the nodelist.py stays greyed out. Any ideas?

    In regard to other requests I understand that it's the most clean to have a maximum of 6 input nodes. I am happy to change it myself within the subnetworks. But when there's an update, I would have to do those changes again and its harder to keep track of different versions. But maybe a solution would be a separat 'change_design' subnetwork which takes the 'draw_net' subnetwork as input in which one could that fill color, and stroke color and width.

  7. Support Staff 7 Posted by john on 22 Jun, 2024 11:09 AM

    john's Avatar

    Floris,

    I have no idea why your nodelist.py would be grayed out. It is not grayed out for me, whether I link to a local copy or to the original I store in my library folder. Have you tried replacing your current copy of nodelist.py or linking to local copy instead (like the one in the Plot NDBX folder I attached above)?

    I would love to see a photograph or, better yet, one of your videos showing a plotter drawing a Nodebox network. Do you get any interesting comments on the network cards you include with your art?

    A change_design node which takes draw_net as in input would certainly be one way of adding many more styling options. One wrinkle: the textSVG version would have to be handled differently than the original version. I could simplify that issue by make textSVGs look more like normal text paths by modifying the textSVG node to output a single path with contours instead of a group of separate paths, but this would require yet another external module (contours.py) and would force you to keep track of which version of textSVG you are using in all your projects.

    There are many, many possible style options. You said "fill and stroke color" - for what element(s)? Each box representing a node has a fill, stroke, and strokewidth, the same for port nubs and link lines - which vary in color by output type, so they don't have just one color. You could also change the method for distinguishing value links from list links (e.g. changing the dot size for dotted lines, using all kinds of different dashes instead, not making any distinction, etc.), colors for subnetwork ovals or alternative shapes or methods for highlighting subnetorks, etc.. And that just scratches the surface.

    What I'd REALLY like to see is something far more radical. I would like to see people completely re-invision how NodeBox networks are represented. Maybe dispose of the labels altogether, reduce each node to a dot, and focus on just capturing the linkages, including subnetworks and sub-subnetworks. Or showing the full depth of nested subnetworks in a single diagram. Or representing node functions as different shapes to make it easier to see node types at a glance without having to read labels. Or something even more radical.

    In other words, treat a NDBX network as raw data and approach it as a pure data visualization challenge. Figure out what aspects of a network you want to emphasize and devise a way of making that more visually apparent. You could also try animating networks in all sorts of different ways.

    I realize it would be hard to do this for anyone but me because the current network diagrams are not abstracted out in a clean way. Each node is a complex group of paths put together in a specific way that you need to understand in order to modify. This is why what should have been a simple substitution of a text_SVG for a textpath went awry.

    Maybe instead of producing a complex drawing I should instead output a set of tables for the nodes, ports, and links that would feed into a style node. This would make it easier to replace the default style with something different, though it will still require some tricky Nodebox coding. For example, changing the shape of the node boxes would force changes to the port nubs, and changing the X,Y locations of the port nubs would force a redrawing of the links. So you couldn't alter the default style too much without breaking everything.

    Bottom line: there is no clean and simple way of tackling this problem. Whatever I do is going to be messy, complicated, and require more work from the end user to manage and maintain. Maybe we could take this in baby steps. Replacing textpaths with text_SVGs was one such step. What is the next very specific thing you need?

  8. 8 Posted by florisdejonge on 23 Jun, 2024 05:58 PM

    florisdejonge's Avatar

    Hi John,

    I was able to copy and paste the other nodelist.py. The reason still puzzles me.

    Attached is an example of the subnetwork I adapted. I changed everything to a white fill with a black border and changed the width of the connectors. If I would want to change it again I would have to go back and change settings of different subnetworks. Not really a problem, but it takes a bit of searching everytime.

    I don't use this node really regularly, so this doesn't have a high priority as far as I'm concerned. I have plotted the network for a postcard exchange for Plot Party and used it for the 'debug view' prompt for Genuary. You can find an example of it here. As you can see I added a viewer (I think in Illustrator). Both times the responses were positive, so I'd consider adding it more often (as far as that's possible with really complex networks). Right now I'm working on a poster. And I really want to make more video's of the plotter plotting, but I usually don't get to it.

    But if the node would be easier to adapt, maybe I'd use it more often. The radical option you propose sounds interesting and it could result in all kinds of data visualizations of a nodebox network. But I do think that this current node which represents what networks in nodebox look like are quite educational for a neutral spectator. You also mention a more general by using a set of tables, but can you explain how this would differ from the table that's already used as input? I can imagine one could rebuilt the design from there.

    Thinking out loud here: would it be possible to make some kind of search and replace function? With a lookup node for fill and stroke. And different unique values are also the ones one could choose from in a rollout menu? Is that even possible? And then filtered and changed and put back into a table? See screenshot for my line of thinking so far. I can't find where you've explained to make a rollout menu, the forum is a maze in that regard. Do you know in which thread to find it?

    Floris

  9. Support Staff 9 Posted by john on 24 Jun, 2024 02:42 AM

    john's Avatar

    Floris,

    Thanks for this thoughtful response. You may yet inspire me to action.

    To answer your last question first: my instructions for making menus is indeed deeply buried, so I made a separate post for posterity that should be easier to find:

    http://support.nodebox.net/discussions/general-discussion/15232-how...

    Your example of how you changed the style was very helpful. One question for you: what is "Classic Grid"?

    The idea I floated for separate tables would just be a way of reorganizing the internal structure of the draw_net node. Instead of outputting the whole thing as a single group, I could output the node boxes, labels, and links as separate lists which would then be combined in a cleanly separated final step. This would allow you to add separate styling controls for boxes, labels, links, and frames. Outputting the labels as a table instead of a list of text paths would make it possible for end users to set the label font using an external control.

    The basic problem here is that there are many style elements in my network diagrams, far more that the five you suggested, Even if we keep the basic design of boxes and links fixed (which I agree is a sensible choice), I can think of many elements an end user might want to style using external controls:

    • Boxes and port nubs:
      • box fill, stroke width, and stroke color
      • nub fill, stroke width, and stroke color
      • option to use type category colors for box fill or stroke
      • option to use type category colors for nub fill or stroke
    • Labels:
      • label font (or option to use SVG font instead)
      • option to select different SVG fonts for labels?
      • label alignment
      • label size
      • font color (fill for text paths, stroke color for SVGs)
    • Links
      • link color
      • option to use type category colors for link color
      • link width (stoke width for all at once, dot size for one at a time)
      • value link style (open dots, filled dots, dashes, etc.)
    • Frame and Global Options
      • show frame
      • frame fill, stroke width, and stroke color
      • show subnet highlighting
      • subnet highlighting style (oval color and stroke width, other options?)
      • type category color palette (standard or custom color list)
      • scale

    It would also be tempting to provide an way to provide an overall style that you could set with one click, perhaps a "make everything black and white" as you did. This would be especially useful for plotters like you.

    I think your "search and replace" approach, if I understand it correctly, would be another way to arrive at a similar end result. That is, I could leave draw_net as it is but feed it into a new node which would output a table with a row for each element, listing the element, element type, fill, stroke width, and stroke color. Then you could filter by element type and use my apply_color node to redefine the color properties for each element type.

    This would work for colors, but not for fonts (since I can't change the font once the label is rendered as a textpath).

    Another variation, similar to both approaches, would be to provide a style node that would take as inputs a prototype box, prototype nub, prototype label, prototype link, and prototype subnet oval. These prototypes would all be simple shapes that users could change by modifying ordinary colorize nodes. The labels would have to be handled differently with a node that would actually feed in a small table or list of font properties, but that could be made transparent to the end user. This style node would output a style table that could either be applied after the fact like your search and replace approach, or added as another input to the draw_net node. In the latter case, the draw_net node would consult the style table every time style properties were assigned anywhere.

    Aside: when I first read your idea for search and replace I thought you were proposing something more general: a way to globally find and identify certain types of node across any network. It would certainly be cool to light up all the colorize nodes at all levels, though this would computationally intensive and difficult to fit on a single screen for large networks. The only way I could think of to implement replacements would be to use a modified version of my (somewhat kludgy) write_table node to output a complete NDBX text file. In theory you could create a global search and replace function with user friendly feedback, but in practice I think Nodebox is way too slow to actually pull this off. You can already do the same thing in any text editor, but this is risky and it's hard to see what you are actually doing until it's too late. The correct solution would be to add global search and replace to the Nodebox app itself, but that isn't going to happen anytime soon, if ever.

    Great discussion. I will think more about this!

    John

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Draw_NDBX_Screenshot.png 492 KB
  • Draw_NDBX.zip 113 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

15 Jul, 2024 07:37 PM
11 Jul, 2024 03:48 PM
28 Jun, 2024 01:51 PM
27 Jun, 2024 02:56 PM
27 Jun, 2024 01:57 PM

 

26 Jun, 2024 08:17 PM
26 Jun, 2024 11:35 AM
24 Jun, 2024 02:42 AM
24 Jun, 2024 12:46 AM
23 Jun, 2024 08:07 AM
08 Jun, 2024 09:05 AM