ShapeDiver Screenshot and squid

Grasshopper ShapeDiver
1

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?

2

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.

3

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.

4

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.

5

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.

Datenblatt
Datenblatt840×1189 88.8 KB

Could the problem you are experiencing come from somewhere else?

6

Hi. I used the function from the parent window. All other functions work that way, but since this one created a problem, I moved it in the iframe window and it works. Thanks for the solution.

7

Is it possible to get screenshot image that has fixed screen ratio or fixed size? We apply this code here: http://ddc-make.com/spaciousa/varianten2.html However, screen ratio depends on screen ratio of device- consequently, screenshot on mobile devices are stretched