tag:support.nodebox.net,2012-11-01:/discussions/nodebox-2-3/5862-shuffle-layout-of-a-posterNodeBox: Discussion 2017-09-08T07:43:28Ztag:support.nodebox.net,2012-11-01:Comment/414467852016-12-13T11:20:16Z2016-12-13T11:20:16ZShuffle layout of a Poster<div><p>Alexandre,</p>
<p>Yes, you can use NodeBox to shuffle among different layouts, up
to a point, but it may drive you crazy.</p>
<p>NodeBox is missing two things that a real layout engine needs:
images and text!</p>
<p>You may not have noticed yet, but NodeBox does not have a bitmap
image node. It is vector-only. Another NodeBoxer created a custom
image node, but to use it inside of NodeBox you have to output
vector paths (lines or dots), which is not practical for rendering
most images. So if you want to layout PNGs or JPGs inside (desktop)
NodeBox, you're out of luck.</p>
<p>At first glance, NodeBox seems to have text. But in fact, it
only has text paths. In order to render text you have to convert
strings into vector paths. You don't have a lot of control over how
the text converts (e.g. no way to specify leading), and once it
turns into paths there is no way to recover the actual text.</p>
<p>If you output your NodeBox rendering as an SVG, that SVG will
have nothing but vector paths - no text objects. And because each
letter turns into an elaborate set of paths, even a small amount of
text will turn into thousands of paths - which eventually slows
NodeBox to a crawl. In practice it can only handle a few thousand
words.</p>
<p>I gather that NodeBox Live does or will have actual text
objects, and because it lives in an html page you should be able to
mix PNGs or JPGs in with your display (though this may be tricky).
Frederik can tell you more about that. People have asked for both
images and text objects in desktop NodeBox; Frederik says he is
thinking about it.</p>
<p>Nevertheless, some simple layout shuffling is possible in
desktop NodeBox. I whipped up a quick example which reads in a text
file and renders it in a 1, 2, or 3-column layout. Just change the
"columns" value at the top of the network.</p>
<p>The zip file contains the code and a short sample text by Mark
Twain. The basic approach is to read the text file and produce a
single column of rendered text. I then overlay 1-3 properly sized
rectangles and take an intersection of the text shapes under each
rectangle. I am then free to position the rectangles anywhere I
want to form various layouts.</p>
<p>There are several pesky problems. Because the text is not
arranged in a fixed leading, slight variations arise between
paragraphs (depending on whether the final line of the paragraph
has descenders, what font you are using, etc.) This makes it tricky
to divide the text column precisely. For this simple example I just
adjusted the column heights by hand so that no words got cut in
half. Unfortunately, you would have to adjust this height fudge
factor with each new text or font change.</p>
<p>(I did once create a way of controlling leading in NodeBox text,
but it's kind of a hack. I posted it so you can hunt for it in the
forum.)</p>
<p>Another problem is that doing intersections on thousands of text
shapes is slow. Even for this short (200 word) example, it takes
about 10 seconds to calculate a new layout. I did a three column
layout of a 1200 word story and it took well over a minute.</p>
<p>For one-off projects, NodeBox gives you a lot of control over
the layout. I wouldn't advise trying to build a robust, precise
general-purpose layout engine in NodeBox though. But please feel
free to examine my example code. I think it will give you a feel
for how to approach problems like this in NodeBox.</p>
<p>Please let me know if this helps.</p>
<p>Thanks!</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/414467852016-12-13T13:24:04Z2017-09-08T07:43:27ZShuffle layout of a Poster<div><p>Hi Jonh, thanks so much for the detailed infos and code! Saved me a ton of time into trial and error.</p>
<p>Your example looks cool, but as you mentioned it's very slow for a simple layout change. Also, without images it doesn't fit my use case.</p>
<p>You are right, I didn't know about the limitation of not being able to use images and proper text manipulation , That itself kills this project ! : /</p>
<p>I also investigated P5.js but it looks like it doesn't support vector files (SVG), and I really need that.</p>
<p>My last hope is Nodebox.live, which I did a quick test, but as far as I understand it's not finished, SVG importing for example is not working. Have you tested, how stable is it?</p>
<p>On Frederik's personal page I found that he worked on something similar to what I am trying to do, but I don't know if it's available yet nor if he will release as open source:<br>
<a href="http://www.enigmeta.com/projects/logic-layout/">http://www.enigmeta.com/projects/logic-layout/</a></p>
<p>thanks!</p></div>alexandretag:support.nodebox.net,2012-11-01:Comment/414467852016-12-13T15:53:00Z2016-12-13T15:53:05ZShuffle layout of a Poster<div><p>Jonh, I just found out about this beautiful JS node editor:</p>
<p><a href="http://idflood.github.io/ThreeNodes.js/index_optimized.html">http://idflood.github.io/ThreeNodes.js/index_optimized.html</a></p>
<p>Have you used it? Looks amazing! I'm investigating to see i it
handles SVG.</p></div>alexandretag:support.nodebox.net,2012-11-01:Comment/414467852016-12-19T02:09:32Z2016-12-19T02:09:32ZShuffle layout of a Poster<div><p>Hi Alexandre,</p>
<p>I hadn't seen that one before. Looks interesting, but I've seen
similar tools before and have ultimately found them lacking.</p>
<p>Most visual tools, like this one, try to display all the
properties of each node in the main display, which results in
differently sized and sometimes very large node boxes. They also
allow connections any which way. This is flexible, but quickly
results in a big tangled mess which is hard to read or modify. They
basically just take text-based coding and do a simplistic
one-to-one replacement of property to node, without trying to
redesign the experience of coding from the ground up.</p>
<p>NodeBox, in contrast, has compact nodes, all the same size, and
a continuous top to bottom flow with no loops. The result is a much
cleaner overall structure. I have created NodeBox networks with
thousands of nodes and links and have been able to put them aside
and make sense of them months later. It definitely does have its
limitations, and requires you to think in a different
non-procedural way, but I have found it surprisingly powerful.</p>
<p>The tool you found is also still under development. It's export
options appear to be limited or non-existent. Sometimes these tools
continue to grow and flourish, sometimes the get off to a promising
start and just sit there, half finished. Time will tell.</p>
<p>Nodebox 3 has also been mostly static for the last year or so
while Frederik focuses most of his limited time on NodeBox Live; he
says he will continue to enhance NodeBox 3 but if and when that
happens he will find a long wish list waiting for him. This is the
way of all open source projects.</p>
<p>If you do find this new tool useful and make something cool with
it, let us know!</p>
<p>John</p>
<p>P.S. Did you find my previous example code useful? Are you going
to try shuffling layouts in NodeBox?</p></div>johntag:support.nodebox.net,2012-11-01:Comment/414467852016-12-19T16:34:45Z2016-12-19T16:34:45ZShuffle layout of a Poster<div><p>Hey John, thanks so much for helping me again!</p>
<p>I had replied giving some feedback on your code, but it didn't
reach the forum. Apologies for that!</p>
<p>Yep, your code is exactly what I was looking for! The problem is
that not being able to import images and text is a totally deal
breaker for me.</p>
<p>I asked Frederik for beta access to Nodebox.live which does
import images. Text I am not sure, just sent an email asking him
about it.</p>
<p>My goal is to make an online interactive SVG designer tool
similar to the one I currently have, but with procedural
powers:<br>
<a href="https://gyazo.com/0a4ff1468b0505c9fb1216bfc37ccafe">https://gyazo.com/0a4ff1468b0505c9fb1216bfc37ccafe</a></p>
<p>Currently investigating if Nodebox Live can do it! I am not sure
if I can build UI interactive stuff with it (rotate with mouse,
change colors, etc).</p>
<p>Have you tried Nodebox.live? Think it's possible to build such a
tool with it?</p>
<p>again, thanks for your help!</p>
<p>P.S.:About the tool I sent, it looks like the project had been
abandoned, so I don't think makes sense to take the time to learn
it. But the UI looks very cool! : )</p></div>alexandre