tag:support.nodebox.net,2012-11-01:/discussions/general-discussion/14781-subnetwork-size-boxNodeBox: Discussion 2020-08-20T20:25:55Ztag:support.nodebox.net,2012-11-01:Comment/414892662016-12-19T02:16:05Z2016-12-19T02:16:33ZSubnetwork - size box<div><p>Frederik can confirm, but I am not aware of any way of doing
this.</p>
<p>I wonder, though, if you really need ten inputs. Perhaps instead
of feeding ten different values into ten different ports, you could
just feed in a single list. Or maybe feed in some more complex
objects, like shapes, and derive the needed values inside your
code. Or maybe break this node into two or more simpler nodes.</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/414892662016-12-19T13:37:09Z2016-12-19T13:37:09ZSubnetwork - size box<div><p>There's no way to change the width of a node in NodeBox. It
would be cool if we could do that, though.</p>
<p>I personally don't see any problem with feeding many inputs to a
subnetwork. There is no good way to create an object in NodeBox to
work with, so sometimes many inputs is what you should do.</p></div>Frederik De Blesertag:support.nodebox.net,2012-11-01:Comment/414892662016-12-23T21:09:32Z2016-12-23T21:09:33ZSubnetwork - size box<div><p>Hi,<br>
thank you for the answers. This is actually the reason, I would
like to create one simple node to make it easier.</p>
<p>Best regards</p></div>Daarantag:support.nodebox.net,2012-11-01:Comment/414892662016-12-24T08:24:34Z2016-12-24T08:24:34ZSubnetwork - size box<div><p>One thing that we could look at is not expose all parameters as
ports. That would clean up the mess substantially as well.</p></div>Frederik De Blesertag:support.nodebox.net,2012-11-01:Comment/414892662017-01-04T00:44:43Z2017-01-04T00:44:43ZSubnetwork - size box<div><p>I can see why you might want to have all ten parameters in a
single subnetwork. But just for fun, here is an alternative...</p>
<p>I have attached a network with two subnetworks: template and
menu. Template has six ports which determine the styling of a
single menu item: position, width, height, bg color, font color,
and font size.</p>
<p>The menu subnetwork takes the template as its first port and
then adds ports for menu string and padding. The result is a
menubar in the style of the template with the position also defined
by the template. If you want the divide the parameters in a
different way (e.g. let the menu define its own position) that
would be easy to do.</p>
<p>I can see some advantages to defining the style separately from
the menubar. This example also shows a very useful technique:
passing lots of different parameters in a single port. To do this I
ungroup the template into multiple objects and do lookups on each
one to derive a total of six parameters.</p>
<p>Screenshots and example code attached. Enjoy!</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/414892662017-02-06T06:30:57Z2017-02-06T06:31:00ZSubnetwork - size box<div><p>HI,<br>
thank you John, your soluition it´s cleaner and
understandable.<br>
I have ignore boxes like "centroid".</p>
<p>I think Nodebox3 could be a great tool for atomic webdesign:<br>
<a href="http://bradfrost.com/blog/post/atomic-web-design/">http://bradfrost.com/blog/post/atomic-web-design/</a></p>
<p>I haved tried to export in pdf , and import it in Adobe
Illustrator.<br>
Unfortunately are text items no more editables.<br>
Maybe a python box could parse the whole structure and generate a
editable pdf.</p>
<p>I connect NodeBox3 with Node.js to generate html code and
preview simultaneously in browser and it works.</p>
<p>Cheers,<br>
Daaran</p></div>chemamengibartag:support.nodebox.net,2012-11-01:Comment/414892662017-02-06T11:12:18Z2017-02-06T11:14:20ZSubnetwork - size box<div><p>HI Daarna,</p>
<p>Glad you found it helpful.</p>
<p>Yes, I agree NodeBox would be a <em>great</em> tool for atomic
web design IF it could do text and images. NodeBox's current
limitation (in the desktop version) of only exporting text paths is
a growing sore spot for me. Frederik says he's thinking about
adding the ability to create text as well as text paths.</p>
<p>A custom Python node that could parse text paths and replace
them with text objects would be almost impossible. But I suppose
you could do something more basic like just writing a file with a
list of text strings and locations using font sizes, etc all
supplied as parameters. You could then create a design in NodeBox
incorporating text paths, strip out the text paths before exporting
your PDF/SVG, and use the Python node to output a separate PDF/SVG
of just the text (in the same locations where the text paths were)
as a side process along the way. You could then combine and overlay
the two files to produce an editable PDF/SVG. A bit desperate, but
a determined person could probably make it work.</p>
<p>I was intrigued by your statement that you have connected
NodeBox3 with Node.js to generate html. Could you say a little more
about that and maybe show us an example? What parts of the html
does NodeBox produce? How are NodeBox and Node.js connected?</p>
<p>Cheers to you too,</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/414892662017-02-11T01:01:06Z2017-02-11T01:01:11ZSubnetwork - size box<div><p>Hi John</p>
<p>For the test with Node.js, I wrote two python blocks to parse
the html code and replace the values:<br>
Block A - Replace all characters ~ , and put values in the same
order<br>
values: Ferrari, car, red<br>
template:<br>
<span><br></span></p>
<h1><span>~</span></h1>
<p class="type"><span>~</span></p>
<p class="color"><span>~</span></p>
<p>Result:<br>
<span><br></span></p>
<h1><span>Ferrari</span></h1>
<p class="type"><span>car</span></p>
<p class="color"><span>red</span></p>
<p>Block B - Repeat a structure for each item<br>
values; Batman, Superman, Spiderman<br>
structure:<br></p>
<ul>
<li class="superhero">~</li>
</ul>
<p>result:<br></p>
<ul>
<li class="superhero">Batman</li>
<li><br></li>
<li class="superhero">Superman</li>
<li><br></li>
<li class="superhero">Spiderman</li>
</ul>
<p>There is also the posibility to nest both Blocks each other</p>
<p>Node.js and NodeBod3:</p>
<p>I use Gulp tasks with BrowserSync to refresh the browser when
files changes.<br>
In Nodebox3, I save the result of all html codes in an
index.html.<br>
At this moment, gulp run the task to compile scss, an other tasks,
and refresh the Browser</p>
<p>Browser <- Gulp <- files changes <.- NodeBox3 <-
Content</p>
<p>The event "on files change" is the conection betwen node and
NodeBox. Actually you could write javascript, css, etc...</p>
<p>Cheers,<br>
Daaran</p></div>chemamengibartag:support.nodebox.net,2012-11-01:Comment/414892662017-02-11T08:39:09Z2017-02-11T08:39:09ZSubnetwork - size box<div><p>Daaran,</p>
<p>Wow - this is very cool!</p>
<p>You could take this idea in many different directions. You could
arrange and resize rectangles arbitrarily on the page in Nodebox,
translate that to canvas layouts in html, and then fill those
rectangles with images using a NodeBox-filtered list of URLs from a
csv or JSON file. Using your gulp setup, you could see the images
change in real time even though you could not see the actual images
inside NodeBox.</p>
<p>I can even imagine taking it one step further and let those
rectangles represent working controls (checkboxes, droplists,
sliders) and producing a web page that would present true
interactive visualizations. My dream would be to do this entirely
within Nodebox and then just "export as HTML".</p>
<p>Thanks for sharing this, Daaran. The GIF was nicely done.</p>
<p>John</p></div>john