Use event listeners to subscribe to a parameter change

Grasshopper ShapeDiver
1

I want to be able to run specific code when a user changes a parameter of a model, I will do this using the ShapeDiver API. I believe I can get this working using event listeners, but I cant get it working following the ShapeDiver API documentation. I hope someone can help.

Cheers

2

You can use the VALUE_UPDATE event from the parameters interface:

api.parameters.addEventListener(api.parameters.EVENTTYPE.VALUE_UPDATE, function(res) {
  console.log(res);
  // do something
});
3

Thanks for your reply. I believe thats the code used in the documentation, trying that gives me the following error:
image

Ive also tried window.api which doesnt work as well and gives the same error.

This is my code:

image
image785×521 68.5 KB

I should note that the ‘message’ event listener works fine.

4

Do you also correctly get the list of model parameters before you call SetupEventListeners()? It seems to me that this could be a timing issue. Depending on your environment, you might also need to add window. before calling the API?

5

Yeah I do, this is the console when refreshing the page

image
image878×431 31 KB

6

I just realized that you are probably using iframe embedding, which is not compatible with the event listeners. You will need to switch to direct embedding, as shown in this template for example:

7

Thanks for your reply. The reason for using iframes over direct embedding was because I was getting the following errors using direct embedding:

image
image837×286 19.9 KB

I also seem to be unable to render any kind of parameter controls when using direct embedding. Could this be due to these errors I’m having or something else?

Thanks!

8

Those errors happen in some cases but should not cause any issues. The controls are not part of the core viewer, if you want to include them instead of your own controls, you need to include a slightly more complicated template:

9

Thank you for your help! I have got embedding working now.

I was wondering if you could help with another query I have.

A model I’m working with has had two data outputs setup, yet when I attempt to log all exports on said model, an empty array is returned. See code and returned data below.
The following code:
image

Returns this:
image

I also have some models with around 6 different exports setup yet when I make an API call to fetch all exports I only have 4 returned.

I hope you can help.
Thanks

10

If you are using data outputs, as you mentioned above, the correct function to use is

api.scene.getData();

If you are actually talking about file exports, then I can test your model if you send me a link to it.

11

That works great. Thanks!