ShapeDiver update multiple parameters in direct embedding approach

Hi ShapeDiver team,

I am developing a website with a shapeDiver model embedded.
I would like to access grasshopper parameters and update them through the website interface.


At the HTML file, I have two range inputs, one for controlling the width, and the other one for the length.

In the shapeDiver model loader js file, I created two separate functions to update the parameters through the API.

Parameter names have been double-checked that match with the grasshopper component names.

The issue is there is an Uncaught reference error when I move the stair width slider that is shown at the first picture which points to the HTML file line 71 where I set two input ranges and control them in js file.

Best,
Shaun Wu

This code example shows you how to generate UI from model parameters for direct embedding:

I hope this helps and let us know if you have any questions.

Hi Pavol,

I checked this example already.
It doesn’t work if I have multiple input sliders to update.

We have updated the code example and it has 2 sliders now. Please have a look and if you still struggle share a CodePen or a minimal example so we can help you to debug.

Hi Pavol,

I made a simple example for it.

It is working perfectly on the CodePen, but if i try the same code in my local host, i got the same Uncaught reference error.
Weird.

Hi Pavol,

It turns out that my local host HTML was pointing to the wrong file.
It is nice and running as expected now.
Thanks for your supports.

Best,
Shaun

Hi,

I am interested in seeing if a similar example has been updated to work in the Shapediver V3 viewer. I have been looking for examples of this type of HTML integration, but the examples in the V3 viewer don’t fit my needs as well as this example appears to.

What are you trying to achieve exactly?

Have you checked the simple parameter update example here?

You can also have a look at the migration guide which details equivalences between the version 2 and 3 of the viewer: Viewer 2 - Migration Guide

Hi Mathieu,

I have looked at the parameter update example, but the parameter values are hard-coded into the sample code. I am not understanding how to set that to be a variable and how to trigger a change in the viewer when an HTML input updates the variable, much like the simple HTML-based slider in the example in this forum thread. I think just the parameter update example that you linked, but with a text box or slider defined in the index.html file that controls the viewer is all I need to get where I want to go.

My typescript/javascript experience is limited, so I’m sure there is something really basic that I am missing, but this one has been stumping me. So far all of the examples that I have found in V3 either don’t have an HTML interface or are auto-generating all of the HTML elements, which is a lot more than what I need.

Thanks,
Scott

If I understood correctly, you need an example that is more complex than the simple parameter example above but not as detailed as the example where a full HTML interface is created from model parameters.

Here is my attempt at providing an example matching your requirement: https://codesandbox.io/p/sandbox/parameter-change-slider-lpkr8d

Let me know if that helps.

Thanks so much Mathieu!

I think this is perfect and clarifies a lot to me about how this works.

1 Like