Problems with interactions with Shapediver parameters and visualizer

Grasshopper ShapeDiver
1

Hello. I’ve looked at the Kitchen Configurator interaction example in the CodeSandBoxes of their API documentation, however I still have questions about it in grasshopper about how the outputs and parameters themselves were generated.

Therefore I would like to ask where I can find the grasshopper files used in the mentioned example in order to analyze them in detail. Thanks.

interactions - CodeSandbox

Interactions - Part 3

image
image1478×264 21 KB

2

Please note that this example was created mostly to demonstrate the Interactions Engine, and how to use it to make objects in the 3D scene clickable and draggable. It was not meant to be a tutorial for the full workflow between Grasshopper and the viewer, and as such does not necessarily demonstrate the best way to do so, especially because the workflow you want to implement needs to match your needs, which vary widely from one project to another.

As a side note, we are planning to create one such tutorial in the near future, with full documentation of what happens on the Grasshopper side as well as the viewer side.

That being said, I am sharing below the Grasshopper file relative to this example, and here are a few notes about the setup:

  • The Grasshopper definition creates three elements: the room, the top shelf (hanging) and the bottom shelf (on the floor). They are all output to the viewer using Display components, and you will note that the definition makes use of the name attribute to make it easy for the viewer to find each element with the API.
  • The definition contains two text inputs, which are used to send a small json object that contains a transformation matrix. For each of the two inputs, the input transformation matrix is then used to place the object in the room. You can test the inputs using the sample json object contained in the definition.
  • The idea of the example is then the following: once the shelves have been made draggable using the API (see code example), the user can drag the elements in the viewer. Once elements are released, the API includes a transformation matrix from the previous position to the new one. This matrix returned by the viewer is then included in a json object which is sent as a new text input value to one of the two text inputs (depending on which element was dragged: top shelf or bottom shelf).
  • The ShapeDiver model now recomputes the definition to match the position in Grasshopper to the new position defined by the dragging operation. This ensures that the state in the viewer always matches the state in Grasshopper.

Here the definition:
kitchenconfigurator-32-6.gh (36.7 KB)

3

Hey, Can you please upload a tutorial for the same? I’m trying to do this draggable and clickable interaction on my model. I’ve created a website where I can interact with the model and parameters using viewer API, but now I want to make it more interactive so that users can just drag and snap the shelves, and bays to customize as per their requirements.