ShapeDiver update multiple parameters in direct embedding approach

Grasshopper ShapeDiver
,
1

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.

image
image1495×668 82.3 KB

At the HTML file, I have two range inputs, one for controlling the width, and the other one for the length.
image
image1236×135 9.44 KB

In the shapeDiver model loader js file, I created two separate functions to update the parameters through the API.
image
image1177×138 5.58 KB

Parameter names have been double-checked that match with the grasshopper component names.
image
image1463×717 118 KB

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

2

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.

3

Hi Pavol,

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

4

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.

5

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.

6

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

7

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.

8

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

9

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

10

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.

11

Thanks so much Mathieu!

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

1 Like