React Parameter Listing

Grasshopper ShapeDiver
1

Hi There,

We have successfully direct embedded one of our models using React framework with the help from the previous posts about react framework in this forum. But we are currently unable to retrieve a list of parameters. Are we doing something wrong here?

Here is the error we are getting:

image_2019_11_07T19_43_44_885Z
image_2019_11_07T19_43_44_885Z.png862×200 32.3 KB

And here is the code that we are using:

class SDViewer extends React.Component {
constructor(props) {
super(props);
// create a reference to the viewer container created in render
this.containerSD = React.createRef();
this.api = null;
}

componentDidMount() {
	// container for the viewer
	// here the reference works and the container is loaded correctly
	let _container = this.containerSD.current;

	// viewer settings
	const settings = {
		container: _container,
		ticket:
			'85d9977f5426033e058a60c8b81c2c91d331d5eec7bdfed66d354132539d4efb0d01bd6e5d7bc61bc8894b820fff1922d2a2e7e6b7f5883d244f93f0c9ce73daa540ccd7b6d1a1d9ccc40307c3549ff3bbce1a7e902ac438abb53b472d73f2fd2578881f8846e73c4af238f34b9725c41232a2e3129d-d34ace0dbe577c6152ee63654b9e807c',
		modelViewUrl: this.props.modelViewUrl
	};
	this.api = new window.SDVApp.ParametricViewer(settings);
	console.log(this.api.parameters.get());
}

render() {
	return <div className='sdv-container' ref={this.containerSD} />;
}

}

2

The model gets loaded asynchronously, therefore the parameter definitions are typically not yet available immediately after constructing an instance of the viewer. I have updated our React example on Codepen, to demonstrate how to solve this. A snippet from this example:

async componentDidMount() {
    // container for the viewer
    // here the reference works and the container is loaded correctly
    let _container = this.containerSD.current;

    // ShapeDiver Viewer constructor settings
    // Refer to https://app.shapediver.com/api for details
    let settings = {
      container:   _container,
      showSceneMode: 1 // do not show the scene automatically
    };
    // construct an instance of the viewer
    this.api = new window.SDVApp.ParametricViewer(settings);
    
    // register a ShapeDiver CommPlugin
    await this.api.plugins.registerCommPluginAsync({
      // ticket of the model as shown on app.shapediver.com
      ticket: this.props.ticket,
      // URL of the ShapeDiver backend system used
      modelViewUrl: this.props.modelViewUrl,
      // runtime id to use for this CommPlugin (you might register several)
      runtimeId: 'CommPlugin_1',
      // the following setting tells the viewer to wait with loading of geometry
      deferGeometryLoading: true 
    });
    console.log('ShapeDiver CommPlugin successfully loaded');
    
    // get parameters of the model
    this.parameters = await this.api.parameters.get().data;
    console.log('Available model parameters', this.parameters);
    
    // optionally change parameter values before showing the scene
    //await this.api.parameters.updateAsync([
    //  {name: INSERT_NAME_OF_PARAMETER, value: INSERT_VALUE},
    //  {id: INSERT_ID_OF_PARAMETER, value: INSERT_VALUE},
    //]);

    // refresh (load geometry), because the initial parameter update might not have changed any values
    await this.api.plugins.refreshPluginAsync('CommPlugin_1');
   
    // finally show the scene
    await this.api.updateSettingAsync('scene.show', true);
}

Please refer to https://app.shapediver.com/api for details of the API calls, available settings, etc

3

Thank you so much for your help and the quick response!