Shapediver interaction

dragline5.gh (11.9 KB)
dragline.gh (10.7 KB)

Hi there, I am trying to use interaction in ShapeDiver, such as drag, hover, and select, with these two Grasshopper files. However, it’s not working. Could you please check these Grasshopper files to see if they are set up correctly for these features?

@mcneel @shapediver seriously It’s really frustrating to feel like customer support isn’t a priority after paying for a subscription. When we run into problems and reach out for help, there’s either no response or we’re left waiting with no updates. This comes across as unprofessional and gives the impression that you don’t value your customers. A simple acknowledgment or update would go a long way.

please look into this

Hi @logic_shala, thank you for your feedback. I would like to first address the concerns of your last message, and then get to the topic of your initial support request.

The forum is meant to support all ShapeDiver users, regardless of their subscription. We typically strive to answer within a few hours, and almost always fulfill this commitment. As such, since you posted on friday afternoon about a complex topic, it was not possible to mobilize the resources of our small team to already provide you an answer, and I think you will understand that our team typically does not work over the weekend.

On the other hand, could you please point me to instances where “there’s either no response or we’re left waiting with no updates”? I am wondering who the “We” is that you are referring to, especially because you created a ShapeDiver account a few hours before you posted your request, which is your first post ever on the McNeel forum. Additionally, you are referring to the fact that you are paying a subscription, but you have only started a free trial. If you do convert your trial into a Business subscription, you will indeed get a private support email address with faster response times and more in-depth support about your issues.

Now about your request, I think a little bit of context would go a long way. I am guessing you are trying to setup interactions using the viewer API, and looking at your files, it seems you are following at least one example or tutorial which you found somewhere. Could you let me know exactly what you are trying to achieve, and if you already started writing the code of your application? From your definitions, I think the first missing thing is to replace vanilla Grasshopper components such as the Custom Preview with the ShapeDiver Display component, in order to properly set up your interactions.

As a side note, if you are struggling with the web development side of things, I would suggest you have a look at our new interaction compnents, and maybe wait for the Points Input component that we will release in the next couple of weeks. This will let you setup interactions without having to write any code. You could sign up for our webinar next week to learn more about those features: ShapeDiver Fall '24 Update | Live Webinar

I’m currently working on developing a web interface where I can modify a 3D model by dragging points on the model. Yes, you are correct, this is my new account. I created this account because I wasn’t getting a response on my paid account. It’s been more than 5 days since I posted a question, and it’s still unanswered. Thank you for your reply. So, I believe I need to change the component in Grasshopper to enable web interaction. Am I correct?

Hi @mathieu1,

dragline.gh (15.0 KB)
src.zip (1.6 KB)

I’ve made some changes to the new script. Now, I can select the points on the line using web interaction. However, it’s currently selecting all the points and the drag function changes the color of the points, but it’s not updating the 3D model. I’ve attached the GH script and my web interaction code for you to review.

Have you read about using the name attribute in the Display component to organize the scene tree in the viewer? By giving names to specific objects, you can easily identify them with the API and make sure to select them individually, instead of selecting a node that contains all the objects grouped together.

You can check this example that does something similar to what you are trying to achieve. The grasshopper definition is structured like this:

240404-pointdragging.gh (11.7 KB)

Hi how can i add Zoom extend in my web application. Can you please refer me some documentation or any implementation on codesandbox ?

You can use the zoomTo function of the viewer API. If you leave the scene path empty, it will zoom to the extents of the entire scene.

Hi @mathieu1,

The zoom-to feature is working fine; thank you for that! I need some help with drag interactions. I have a .gh file that contains some shapes. When I drag them, they should create a new design, but currently, the new values are not being updated, and the design isn’t changing.

Additionally, I would like to restrict the dragging motion to a coordinate range of -1 to 1. Right now, when I’m dragging, the values exceed that range. Also, I’ve noticed that the Y-coordinate always remains zero, and I’m unsure why that is happening.
one thing more after dragging its reloading model again.

It would be very helpful if you could take a look at this. Could you also recommend some detailed documentation on dragging interactions? I’m attaching both the .gh file and the code for your reference.

Thank you!
panels[1].gh (50.8 KB)
src.zip (4.1 KB)

@mathieu1 can you please look into this ?

Hello @logic_shala,

I’ll go through your request step-by-step so that I’m sure to answer all of it. Please note that as this is something we have to look at in detail and which takes some time for us, it is not always possible to answer you immediately.

  • the new values are not being updated: you used the name points instead of curve points when creating the JSON that you send to GH. If you change it to curve points the data is sent correctly.
  • I would like to restrict the dragging motion to a coordinate range of -1 to 1: From you logic in GH I assume you mean a range from 0 to 1? For that you have to normalize the values depending on the size of the model. You can see that in the code snippet below.
  • I’ve noticed that the Y-coordinate always remains zero: The coordinate system that is used is Z-up so you have to use the Z-coordinate instead of Y.
  • Could you also recommend some detailed documentation on dragging interactions?: You can see the three part interaction tutorial on our help desk.

So combined, the working code looks like this:

// whenever the dragging stops create the input for the parameter und customize the session
addListener(EVENTTYPE.INTERACTION.DRAG_END, async () => {
    // get the current length and height of the panel
    const length = +(session.getParameterByName('length of the panel')[0].value as string);
    const height = +(session.getParameterByName('Height of the panel')[0].value as string);

    session.getParameterByName('Points-1')[0].value = JSON.stringify({
        'curve points': sphereNodes.map((n) => {
            // get the x coordinate of the sphere
            const xCoordinate = n.boundingBox.boundingSphere.center[0];
            const yCoordinate = n.boundingBox.boundingSphere.center[2];

            // calculate the normalized coordinates
            return [
                xCoordinate / length,
                yCoordinate / height,
            ];
        }),
    });
    await session.customize();
});

Cheers, Michael

@MajorMeerkatThe3rd, thank you so much! I really appreciate this.

Hi @MajorMeerkatThe3rd my demo project is ready .Its working fine in my local system but when i uploaded the files on my hosting its not working showing server error 404
Screenshot 2024-10-22 124914

Hello @logic_shala

the issue you show here is actually not something related to ShapeDiver. The favicon.ico is the small icon that is shown on the browser tab. Like in this tab, it’s the Rhino icon.

Are there any other errors related to ShapeDiver?

Cheers, Michael

Hi @MajorMeerkatThe3rd, can you tell me how to insert the three-dot options in our web application?

Hello @logic_shala,

in the future, if you have a new question for a new topic, please open a new thread.

All of these three functions are easily achieved by using the SessionApi.

  • Reload default values: Set the value properties of the parameters to their defval properties.
  • Import parameter values: Set the value properties of the parameters to the values specified in the JSON. This is mostly likely a dictionary with the key being the id of the parameter and the value being the stringified value.
  • Export parameter values: Create a JSON from the values of the parameters by creating a dictionary with the key being the id of the parameter and the value being the stringified value.

Cheers, Michael