The idea is to download a fact sheet as an image (png) file that contains a screenshot of the 3d view. We use two different tickets, one for visualisation and the other one for exports of the png fact sheet and cad production file. The exports work fine except that the fact sheet does not include a screenshot. Alternative is to use the first ticket meant for visualisation.
If you are using the backend API and not instantiating an online viewer, there is no way to get a screenshot. If you only want to use the backend API, you could instead generate a line drawing using Make2D and Squid directly in Grasshopper, but this will only be a wireframe, not a rendered view.
We use both APIs, viewer and backend. We already have a screenshot from the viewer API. Can that screenshot be sent as a parameter value using backend API in order to get an export with a screenshot?
The ShapeDiver viewer is a Javascript application that creates a WebGL context around a 3D model and opens an API to interact with the model parameters and the 3D scene. First, include the Javascript viewer in your web application. The latest stable version is available here:
Then you need to decide where the viewer will be embedded in the application. Typically, you will create an empty div with an id, for example sdv-container, after which you can simply load the viewer with a few lines of javascript:
// container for the viewer, typically this is a div
var _container = document.getElementById(‘sdv-container’);
// viewer settings
var _viewerSettings = {
// container to use
container: _container,
// when creating the viewer, we want to get back an API v2 object
api: {version: 2},
// level of log messages which will be sent to the browser console
loggingLevel: SDVApp.constants.loggingLevels.NONE,
// instantly show the 3D scene
showSceneMode: SDVApp.constants.showSceneModes.INSTANT,
// ticket for a ShapeDiver model
ticket: ‘TICKET_STRING’
};
// create the viewer, get back an API v2 object
var api = new SDVApp.ParametricViewer(_viewerSettings);
This should be enough to render the viewer in a front-end application. You can control the size of the 3D viewer by setting explicit sizes on the container.
The API object includes all the interfaces to interact with the viewer.
Add a ShapeDiverImageInput parameter to your Grasshopper definition and include the imported file inyour exported fact sheet.
Save a screenshot with the viewer API using getScreenshot().
Use the saved screenshot to update the ShapeDiverImageInput parameter (potentially using the backend API).
Let me know if you have trouble doing so. Alternatively, you could use a ShapeDiverTextInput parameter, save the screenshot somewhere on your servers and use its URL as input to import the image, instead of the file input.
Yes, my question was about this third point in the workflow, how to update the ShapeDiverImageInput parameter using the backend API. Is there an example?
The idea is that a user work with the viewer API and when he sets the parameters that he needs he will click download. This download should invoke backend API and set all the parameter values that the user chose and a screenshot of the viewer. We managed to do all these things except to update image parameter through backend API. We might also use an alternative approach.
I will get back to you about using file parameters through the backend API. In the meantime, you could use the workaround I described above: connect a ShapeDiverTextInput to the ShapeDiverImageInput component. That lets you specify an image URL to be imported in the definition. In this case, you would have to get the screenshot in the viewer and store it somewhere, then use the URL of this location as input to the backend API call.