Getting outputs in the viewer API

Grasshopper ShapeDiver
1

It’s been a while since I used the viewer API. Last time it was Version 2 and now it is Version 3.

So I updated everything to use the new API version. Now I got to the part where I need to use the outputs to show on the website where the viewer is embedded and I am surprised to find no mention of data outputs in the Viewer API documentation.

Is this still only a backend API feature? I seem to remember you said this would also come to the viewer API.

The outputs are already in the response ticket, but I cannot find the TS code to get it from the ticket response.

Can you point me to an example where it is shown how this works with the new API?

Thank you!

2

Shouldn’t it be something like:

  async function updateOutputs() {

    const computationResponse = await session.customize();
  
    const outputWidthId = "1fe30445fb3da7377e9db2daa014cb2e";
  
    const outputWidth = computationResponse.outputs.find((output: any) => output.id === outputWidthId);
    const width = parseFloat(outputWidth.content[0].data);
    console.log("Width:", width);
  
  }

and this is what we call to update parameters and get back the output?

I don’t understand why there is so much written about Outputs from the API, but nowhere is a concrete example of how to use it. But everything else has dozens of TypeScript examples?

Isn’t this like the second most common thing to do after updating parameters, that you get something back that you want to display, like a price or size or something?

3

Okay, I finally figured it out using the only mention of how to get outputs anywhere in the Shapediver documentation, which seems to be in the upgrade guide for going from V2 to V3 (Viewer 2 - Migration Guide).

Using this information and a bit of help by GPT-4 the code is:

  async function updateOutputs() {
    // Assuming you have the session object already initialized
    await session.customize();
  
    const outputWidthId = "THE_PARAMETER_ID";

    const outputWidth = session.outputs[outputWidthId];
    const width = parseFloat(outputWidth.content[0].data);
    console.log("Width:", width);

  }

then just call this function when you update the parameters.

To get the IDs of your parameters just inspect your viewer and go here:

image
image1646×696 128 KB

The IDs change every time you update something in your model, which is a bit annoying.

There is also a getOutputByName function, but I cannot find any documentation on this.

4

@seltzdesign please check out the documentation of the uid property of outputs, which stays constant every time you reupload a model.
As a general note: You won’t be able to know any outputs uid before uploading the model. Also, if you happen to replace the component in Grasshopper which defines the output, the uid will change. Therefore a better strategy is to identify outputs by their names.

5

Hi Alexander.

thanks for the response. Yes, I was looking for some documentation on the function getOutputByName that is mentioned in the migration guide.

image
image1365×718 49.8 KB

Can you point me to some documentation on that? The documentation you sent the link for looks good, but is too technical. I would love it if you could just have some TypeScript examples like for all the other functions.

6

Here is the reference to the getOutputByName function. You are right that there is little high-level documentation about this topic, the documentation section will be improved.

1 Like