My First Configurator

As you have seen in the chapter My first part we made the part configurable. That means we prepared the part, so we can later change parameters to get a custom part. In this case we added some expressions to it. With this expressions we can control different parameters of any feature which allows us to change the part for our needs. But it's not always a part we want to configure, it's also possible to configure assemblies.

There are a lot of possiblities to use to make your model individual:

Use expressions to change parameters of features, sketches or working geometry
Add or remove instances from assemblies
Update constraints to reassemble assemblies

Let's start with a simple example. We're going to make the flange configurable.

Create a copy of the file "templateConfigurator.ts" which can be found in buerli-examples in models/history folder
In the create method we first load the flange we want to configure, the part "FlangePrt.ofb" can be found in resources/history/Flange
Return the id of the loaded part and add the example to the store.

💡 Tip: To see how to add your new example to the application, see chapter Introduction

If you don't know how to implement that, take a look into the following code snippet:

import arraybuffer from '../../resources/history/Flange/FlangePrt.ofb'

export const create: Create = async (apiType, params) => {
  const api = apiType as ApiHistory

  const productId = await api.load(arraybuffer, 'ofb')
  return productId[0]
}

As expected you should see the flange in the application. It's the one we've crated in My first part. The next step will be to create the parameters we want to control the expressions with. There is already a definition for parameters in the template. Add two sliders to it, one for the number of holes and one for the flange height.

The number of holes slider has an initial value of 6, a step of 1 and a value range from 2 - 12.
The flange height slider has an initial value of 100, a step of 5 and a value range from 40 - 300.

export const paramsMap: Param[] = [
  { index: 0, name: 'Holes Count', type: ParamType.Slider, value: 6, step: 1, values: [2, 12] },
  { index: 1, name: 'Flange Height', type: ParamType.Slider, value: 100, step: 5, values: [40, 300] },
].sort((a, b) => a.index - b.index)

Start the application again and see how the parameters have been added to your example. If everthings done right, it should look something like that:

drawing

Created parameters (sliders)

To make sure the initial values have effect on the model in the creating method, we call setExpressions() to set the expressions to initial values of defined parameters. Do you remember the names of the expression we defined in My first part?. It's important to set the values to the correct expressions. Add the following code to the lines before returning the product id:

// Set initial values
const holesCount = params.values[0]
const flangeHeight = params.values[1]

await api.setExpressions({
  partId: productId[0],
  members: [
    { name: 'holeCount', value: holesCount },
    { name: 'flangeHeight', value: flangeHeight },
  ],
})

With this initial values set to the model, your flange should look like in the following picture:

drawing

Flange with initial values set

As you probably have realized, the slider has currently no effect on the model, it does not update. To make it work, we also need to set the expressions in the update method. To do that, you can simply copy the lines of code from create method. Your update method should look like this now:

export const update: Update = async (apiType, productId, params) => {
  const api = apiType as ApiHistory
  if (Array.isArray(productId)) {
    throw new Error(
      'Calling update does not support multiple product ids. Use a single product id only.',
    )
  }

  const holesCount = params.values[0]
  const flangeHeight = params.values[1]

  api.setExpressions({
    partId: productId,
    members: [
      { name: 'holeCount', value: holesCount },
      { name: 'flangeHeight', value: flangeHeight },
    ],
  })
  return productId
}

If you change the parameters now your model will update each time.

drawing

Updating the flange with sliders