Subnetwork - size box
HI,
I have a node with 10 inputs. Can I change the width of the node?
Thanks!
-
subnetwork.JPG
10.5 KB
subnetwork.JPG
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
Support Staff 1 Posted by john on 19 Dec, 2016 02:16 AM
Frederik can confirm, but I am not aware of any way of doing this.
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.
John
Support Staff 2 Posted by Frederik De Ble... on 19 Dec, 2016 01:37 PM
There's no way to change the width of a node in NodeBox. It would be cool if we could do that, though.
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.
3 Posted by Daaran on 23 Dec, 2016 09:09 PM
Hi,
thank you for the answers.
This is actually the reason, I would like to create one simple node to make it easier.
Best regards
Support Staff 4 Posted by Frederik De Ble... on 24 Dec, 2016 08:24 AM
One thing that we could look at is not expose all parameters as ports. That would clean up the mess substantially as well.
Support Staff 5 Posted by john on 04 Jan, 2017 12:44 AM
I can see why you might want to have all ten parameters in a single subnetwork. But just for fun, here is an alternative...
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.
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.
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.
Screenshots and example code attached. Enjoy!
John
6 Posted by chemamengibar on 06 Feb, 2017 06:30 AM
HI,
thank you John, your soluition it´s cleaner and understandable.
I have ignore boxes like "centroid".
I think Nodebox3 could be a great tool for atomic webdesign:
http://bradfrost.com/blog/post/atomic-web-design/
I haved tried to export in pdf , and import it in Adobe Illustrator.
Unfortunately are text items no more editables.
Maybe a python box could parse the whole structure and generate a editable pdf.
I connect NodeBox3 with Node.js to generate html code and preview simultaneously in browser and it works.
Cheers,
Daaran
Support Staff 7 Posted by john on 06 Feb, 2017 11:12 AM
HI Daarna,
Glad you found it helpful.
Yes, I agree NodeBox would be a *great* 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.
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.
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?
Cheers to you too,
John
8 Posted by chemamengibar on 11 Feb, 2017 01:01 AM
Hi John
For the test with Node.js, I wrote two python blocks to parse the html code and replace the values:
Block A - Replace all characters ~ , and put values in the same order
values: Ferrari, car, red
template:
<span>
<h1> ~ </h1>
<p class="type"> ~ </p>
<p class="color"> ~ </p>
</span>
Result:
<span>
<h1> Ferrari </h1>
<p class="type"> car </p>
<p class="color"> red </p>
</span>
Block B - Repeat a structure for each item
values; Batman, Superman, Spiderman
structure:
<li class="superhero"> ~ </li>
result:
<li class="superhero"> Batman </li>
<li class="superhero"> Superman </li>
<li class="superhero"> Spiderman </li>
There is also the posibility to nest both Blocks each other
Node.js and NodeBod3:
I use Gulp tasks with BrowserSync to refresh the browser when files changes.
In Nodebox3, I save the result of all html codes in an index.html.
At this moment, gulp run the task to compile scss, an other tasks, and refresh the Browser
Browser <- Gulp <- files changes <.- NodeBox3 <- Content
The event "on files change" is the conection betwen node and NodeBox. Actually you could write javascript, css, etc...
Cheers,
Daaran
Support Staff 9 Posted by john on 11 Feb, 2017 08:39 AM
Daaran,
Wow - this is very cool!
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.
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".
Thanks for sharing this, Daaran. The GIF was nicely done.
John