ShapeDiver Screenshot and squid

I was thinking of making fact sheet for the configurator and I would like to add 3d view screenshot in generated jpeg.

I am wondering is it possible to make screenshot of 3d view in ShapeDiver ?
If answer is yes, would it be possible somehow to use that image and to add it to squid?

Hi @Bojan_T, to take a screenshot there is a function called api.scene.getScreenshotAsync(). This will give you as response a base 64 image which you can send as a file to a ShapeDiverImageInput component which will give you a bitmap in GH that you can process via Squid. Step by step your code could look like this:

  1. You need a function that converts base 64 images into files:
    function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
    u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
    }

  2. Get the screenshot via the api function api.scene.getScreenshotAsync().

  3. Add a function that gets executed just after the screenshot is ready:
    api.scene.getScreenshotAsync().then(function(res){});.

  4. Inside this function the data response will contain the base 64 image which can be converted into file with the function in the first step:
    api.scene.getScreenshotAsync().then(function(res){var file = dataURLtoFile(res.data,"a.png");});.

  5. Now this file can be sent as a parameter update to the ShapeDiverImageInput component which in this example is called TextureFile:
    api.scene.getScreenshotAsync().then(function(res){ var file = dataURLtoFile(res.data,"example.png"); api.parameters.updateAsync({name:"TextureFile",value:file});});.

I have already tested this function and you can find the example here: https://app.shapediver.com/m/screenshot-test

Hope this helps.

Hi Edwin,

Thank you. I tried with this code, but it doesn’t work to me. For getScreenshotAsync() it returns that it is not function. Also I tried your example https://app.shapediver.com/m/screenshot-test , but it doesn’t create screenshots, it only replace image texture. Can you send me full example of code and grasshopper definition that works?

Thanks in advance.

Hi,

We used your code to take a screenshot and update parameter called Screenshot_proba of type File, format [image/png] and everything works fine except the last line:

api.parameters.updateAsync({name:“Screenshot_proba”,value:file});

On a browser console I got message:

code: “value_reject”
msg: “Parameter value rejected”

Can you suggest what might be the problem? You can see logs about model parameters and screenshot data in a browser console on http://ddc-make.com/spaciousa/proba.html when clicking the screenshot button.

Thanks.

Hi @dubravkasl, when I use the function directly in the iframe it works without any problems. I could make the download of the file and the screenshot is there.


Could the problem you are experiencing come from somewhere else?