Getting started with Trimble Creator to make a Live Component

I thought it might be helpful to try to summarise what I learned in order to get started with creating a Live Component. Some of the issues I faced are already documented in a previous thread Issues getting started with Trimble Creator.

@slbaumgartner suggested it might be helpful to create a downloadable document from this thread, and I’ve now done that. Here’s a link to it:
Live component tutorial.pdf (745.8 KB)

The images in the PDF are links to the images in this forum, so will only work if you have an internet connection while viewing the PDF (and otherwise, the document would be very bulky).

Here are some of the things I found I needed to learn.

1 General principles of using Creator
Creator works by creating a ‘graph’ of nodes, each of which performs a specific function or creates geometry, and has inputs and outputs. The output of one node generally connects to the input of one or more other nodes to affect its behaviour, unless it is the last node in a sequence that creates geometry.

Click on the ‘scholar’s cap’ to open a series of very basic tutorials about how Creator looks and works. That’s helpful, but didn’t take me very far. To get further, you needed to try to create something simple.

Start by creating a new node by double clicking in the Graph part of the Creator web page.

There’s a wide range of types of nodes, of which the most immediately useful to start with are value nodes and geometry nodes. You can see the options by clicking on the three-line menu at the right of the node creation box that pops up when you double click on a blank part of the Graph area.

A value node can be a parameter or a list.

A Parameter will appear in the dialogue of inputs which control the Live Component. In Creator they appear if you click on the Parameter icon, second from bottom on top left of the Creator window.
image

The built in tutorial explains that you can convert a value node into a parameter most easily by selecting it with a left mouse click, and tapping the letter p on the keyboard. That turns the node from grey to blue (or vice versa if you tap it again). In the next image I’ve converted the width node into a parameter.

Or you can R-click and toggle the Parameter option with a L-click.

When I do all three, they all show up in the Parameter list:

By default, Creator works in length units of mm, and other units are for the moment bugged (but a fix is promised) - something that caused me initial grief when I had set the units to inches. (To set the units R-click on a blank area of the Graph window.)

You can adjust their values either by moving the corresponding slider, or by typing over the values on the right. And you can refine the behaviour by setting some of the inputs to the number node, for example to adjust the slider value in steps rather than continuously, or to set hard or soft max and min constraints on the input value.

Value nodes can have many different types:

And geometry nodes come in several flavours too. I just used the geometry/create/box to start with. Or you can search for ‘box’ in the text box that pops up in the Create node dialogue.

I found it easiest to get started by thinking about what parameters I would want to control my Live Component.

My initial aim was to create a simple ‘bookshelf’ - a construction with two upright sides, a top and bottom, and a space below the bottom shelf.

It would look like this in its simplest form when drawn.

To create it, I would need a way of specifying its overall width, depth and height, the number of shelves, the thickness of uprights, and the thickness of horizontals, and the size of the space under the bottom shelf (the ‘plinth’ height).

There are quite a number of different ways to create geometry. I chose a very simple one: use ‘box’ nodes to create uprights and horizontals. There are several others which I only learned about later.

2. Create a box with parameters for width, depth and height
So I started by attempting to draw a very simple ‘box’ for one upright. That would need either three separate Value inputs for width, depth and height (x, y, z) dimensions, or one Vector input with three elements.

And I would need a ‘box’ node to create a rectangular geometric object.

So I started with three value nodes, attempting to connect them to the inputs of a box node.

You can give the values each a name, by clicking on the pencil icon beside the default name of the type of node. It only appears if you zoom close enough.
image
So I labelled my three number boxes as width, depth and height. You can still see the type of node by zooming in close again.

image

But I found they wouldn’t connect directly.

The box node expects these inputs (you get to see them by clicking on the left hand ‘dot’ on the node which appears when you hover the mouse over the node):

There are lots of sorts of value nodes, but I just want a number node (a floating point value).

A number node only outputs these items:
image

I didn’t (and still don’t) quite understand the purpose of the second output from the Number node (input is null) but the first one is straightforward - the value entered in the input.

You make connections between nodes by using the mouse to drag an output of one node over another node, and selecting which input to connect it to. (Or the reverse - connect an input of one node to the output of another).

But a value output won’t connect to the scale input of a box, which expects three values as a vector.

I find by poking around a bit that there is a type of node which takes three inputs x, y and z and outputs a vector. To make the connection between three values and the vector that the box input requires, I used an xyz to vector node, and connected it between the three value boxes and the scale input of the box node.

To start making the connection, click on the output dot on a number node, click on the value item, then drag the mouse to the xyz to vector node. That opens a list of x, y and z inputs. Click the mouse on the respective dimension to complete the connection between width value and x scale.

Make all three connections, and assign values to the parameters.

And connect the vector output of the xyz to vector to the scale input of the box.
image

Click on the box node, and the box itself will appear in the model part of the Creator window.

A point I kept overlooking is that by default, the box node is set with a uniform scale value of 1000.

That means that instead of my upright being 25 x 400 x 900mm it’s actually that size in metres, not mm - 1000 times too big.

Apparently that’s by design, to draw by default a box which is a one metre cube.

I kept falling into this trap, even when I had been told about it. I’m not at all sure that it’s a good idea. I expect that a 1 unit box should be drawn as a 1 unit cube, in whatever units have been set. And when I later tried to align the axes and position of my upright, I couldn’t understand why it wouldn’t move - because my movements were in mm, but the box was a thousand times bigger (in metres), and the movement was imperceptible.

To correct this, just type 1 into the uniform scale field in the box node.

That makes the box shrink to the size of a dot until you zoom the view using the spanner/wrench icon toolbar to expand the view (equivalent to Zoom Extents in SketchUp).
image

3 Position the box
I wanted my initial shelf upright to have its origin at its bottom left hand corner, like a default group or component in SU, so guessed that the way to do this is by using an align node.

That takes a geometry node as input, and outputs geometry at a different location.

When you first inspect the potential inputs, you see this:
image
But if you change the x align target from none to min, and also change the new field that opens from first connection or primitive to value, do the same for the y and z inputs, and also change the new last box to include in align you get this:


The aligned box now has its origin at bottom left (the min value of its x, y, and z coordinates), and has moved right, back and up relative to the original, to place it at the origin.

4 Copy the upright to the other side of the shelves
This involves using another type of node - copy and calculating the distance to move it - the width of the shelves less the thickness of the upright.

But at this point, I’ve used the width parameter to set the width of the box, not the overall width of the shelves.

We need another input - the width (thickness) of the upright to replace the original width parameter.

So add another number parameter - thickness of upright.

And while we are at it, edit some of the other values - for min and max values, and the step (the amount by which the parameter sliders move when you move the slider a small distance).

You can make these ‘soft’ or ‘hard’ constraints. The soft constraint sets the minimum and maximum values shown on the slider, but you can type a value outside this range. A ‘hard’ constraint won’t accept typed values outside the min-max range.

Now to copy the upright to the right, by a distance which is the overall width minus the upright thickness.

There’s probably more ways than one to do this. I used two more nodes - an expression node to calculate the x value of the move distance vector = width - thickness of upright followed by an xyz to vector node to create a vector [x 0 0] to plug into the translate input of the copy node.

Connect the width value to the input a of the expression node, and the thickness of upright value to the b input, and set the expression field to (a - b). For a simple expression like this, you can omit the parentheses.

Then connect the output result of the expression to the x input of the xyz to vector node, and the output of that node to the translate input of the copy node.

I set this up, highlighted the copy node, and nothing showed.

Ah, two further traps. First, I forgot to change the value of width to the overall width of the shelf unit, and had left it at the same value as the thickness of the upright. Result, zero - the copy just sits on top of the original. Second, unlike SketchUp, with which I’m familiar, the number of copies created includes the original, and I’d left this value at the default of 1 copy. Change that to 2, and a second upright appears when you select both the align and copy nodes in the graph.

That’s as much as I have time for at the moment.

To be continued in further sections as time allows:

  • adding a shelf and a new parameter for thickness of shelf
  • adding a new input for number of shelves and making copies of them
  • adding a new input for plinth height, and recalculating shelf positions
  • adding an option and parameter to inset the middle shelves from the front of the uprights, top and bottom.

Edit - now done. See below.

7 Likes

Thanks John… I am standing on the shoulders of giants :slight_smile: . will step thru your process on both of your posts

I have had reservations about trying to work with the Live Component process. After looking at the roadmap you are providing, I will begin the trek. Keep the information stream alive. Thanks
Dave

5 Adding a shelf, and a new parameter for thickness of shelf
Next step in my process is to add a new parameter for the thickness of horizontals, as it may not be the same as the thickness of the uprights.

As before, add a number node and set its input parameters.


Choose your own values for the parameters, to suit your intended application.

And as before, connect it via an xyz to vector to a box and align node, taking the x value from another expression node to calculate the shelf length as overall width - 2 * upright thickness, the depth from the overall depth and the thickness from the thickness of horizontal number output value, and align the origin to an x value of thickness of upright.

I got this result:

which puts the bottom shelf in the right place:

… and the right length to fit between the uprights:

6 Adding a new input for number of shelves and making copies of them
Next step is to add a new parameter for the number of shelves (including top and bottom).

This time, it needs to be an integer not a floating point number node.

And to complete the geometry of the model connect as follows:

A new expression node to calculate the vertical spacing between horizontals, using inputs
a = overall height
b = thickness of horizontals
c = number of horizontals

and expression = (a - b)/(c - 1)

The result from this expression feeds into an xyz to vector node to drive the translate vector in the copy function, and outputs a stack of horizontals spaced to match the top and bottom of the uprights.
image

If the model is left like this, when imported into SketchUp it will be all loose geometry.

So we can use a group node to make (SU) groups out of the upright and horizontal elements,

and then further group the whole model:

To check that the logic and calculations are correct, use the parameter sliders to explore what happens in the model when you change the parameters, and adjust if you find it doesn’t work as you expect.

For example, vary the number of horizontals:
image
image
image

Vary the depth, and the thickness of horizontals and uprights, to create a frame rather than shelves:

The graph at this stage:

To find and work with the Live Component, open http://creator.trimble.com and search for JWM Test 2.

To be continued

2 Likes

7 Adding a parameter to move the bottom shelf up to leave room for a plinth
So far, the bottom shelf just sits on the floor. Many bookcases or shelves have a space under the bottom shelf to leave room for a plinth.

So I want to add another parameter for the plinth height, and adapt the Live Component shelf positions to accommodate it.

First, add a new number node, make it a parameter, and name it ‘plinth height’. Set useful values for defaults, min and max values, and the step to use when moving the parameter slider.

Then connect it to position the z height of the bottom shelf by connecting it to the bottom horizontal’s align node and the input for z value or z offset.

You also need to recalculate the vertical spacing between horizontals. So re-connect the old variable number of horizontals from c to d in the input list for the spacing node, and connect the new plinth height/value to the old input for c, and edit the expression to read
(a - b - c)/(d-1)
or in words
spacing = (height - thickness of horizontal - plinth height)/(number of horizontals - 1)

Result:

8 Inset the front of middle horizontals
As a final stage in this tutorial I added the option to inset the middle horizontals from the front of the uprights, leaving the top and bottom horizontals the full overall depth.

The result will look like this:

In a real world bookcase this might be done purely for aesthetic reasons, or to allow inset doors to be added.

By now, you should I hope be able to work out how to do this by following the graph which enables this.

It has

  • one extra number parameter node to specify the front inset
  • an extra ‘chain’ of geometry nodes with an expression node to calculate the overall depth of the middle horizontals, then using box, align and copy nodes, feeding into the final group node.

I also added calculated constraints to the max values in three input nodes. One prevents the thickness of uprights being more than half the overall width, a second prevents the plinth height from exceeding the (overall height less the number of horizontals times their thickness), and the third limits the maximum front inset becoming greater than the overall depth.

Here’s a link to the JWM shelves 4 graph and model:
https://creator.trimble.com/graph?assetURI=whp:f64f1187-524e-4b7b-93cf-9c262bd71825&layout=left

Examine the nodes to explore how the graph creates the shelves shown above.

Please add any comments or questions to this thread

1 Like

Hello John
Very nice return of experience sharing!
The community with its most beautiful face! :+1: :clap:

Next challenges:

  • Propose an adjustment of the 2ᵉ shelf from below with a special dimension.
  • Project UV to match the grain of the wood and add a choice of materials with the ability to veneer a field of different materials.

Are you accepting the challenges?

I’ll give it a go, but not immediately - I have several other things I need to do first.

But thanks for the suggestions.

I also want to work out how to create an inset at the bottom of the uprights for the plinth, which would make the component usable for the carcass of kitchen cabinets.

NOTE: See the beginning of my first post - I’ve now converted the tutorial content of my contributions to the thread into a downloadable PDF document.

1 Like