Shapediver Embedding with iframe | error:SDVReflector is not defined

(Martin Wiesner) #1

Dear Shapediver team,

i am trying to integrate a shapediver model over an iframe into a django web-app.
I’ve got a Pro account of shapediver and i used the embedding code out of my model and i uncommented the line for api access as written in the documentation.

The viewer loads the model correctly But I get the error when trying to call the parameters in the console:

SDVReflector is not defined

I’ve also tried it in parallel with a simple Wordpress page, with the same problem.
I’m sure it is really a basic issue but at the moment I am really struggling with it.

Thank you very much and best regards!

Martin

(Alexander Schiftner) #2

The SDVReflector object gets defined as soon as the first message is received from the iframe. It’s important that the id of the iframe is sdv-iframe or sdv-frame, others are ignored.
You might be running into a timing problem. Please try to move the script tag for the sdv_reflector.min.js to a place before the iframe.

(Martin Wiesner) #3

thank you very much for the answer!

i tried this. But it seems to stay the same problem at least if i understood it right. I’m honestly not a devoloper, i’m a designer, sorry about my silly problems.

When i put it in JS bin i get at least an answer in the console:

But this wasn’t the answer i expected

api=SDVReflector.get(‘api’)
[object Object] {
addEventListenerAsync: function(){var c=Array.prototype.slice.call(arguments),d=module$src$shared$util$GlobalUtils.default.ArrayToObject©;
if(p(d)){console.log(“argsobj needs reflection:”,d);var e=module$src$shared$util$GlobalUtils.default.createRandomId();return k(d,e,!0).then(function(){return m({id:a,command:b,arguments_id:e})})}return m({id:a,command:b,arguments:c})},
apps: [object Object] {
controls: [object Object] { … },
domElements: [object Object] { … },
exportModal: [object Object] { … },
overlays: [object Object] { … },
settings: [object Object] { … }
},
clearProcessCallbackAsync: function(){var c=Array.prototype.slice.call(arguments),d=module$src$shared$util$GlobalUtils.default.ArrayToObject©;
if(p(d)){console.log(“argsobj needs reflection:”,d);var e=module$src$shared$util$GlobalUtils.default.createRandomId();return k(d,e,!0).then(function(){return m({id:a,command:b,arguments_id:e})})}return m({id:a,command:b,arguments:c})},
createAsynchronousFunctionsAsync: function(){var

Could you perhaps please help me a little bit more.
Perhaps it is easier with this js bn thing.

best regards an thanks in advance!

(Alexander Schiftner) #4

Doesn’t seem like a problem, your call to api=SDVReflector.get('api') seems to have succeeded as expected. This gives you the api object to use for controlling the viewer. As an example, you can go ahead now and change parameters, control the camera, etc
An example to start with:

(Martin Wiesner) #5

awesome! i managed to get it to work in the JsBIN for one single parameter

Still it does not work in wordpress or in the django web app.
What could be the potential reasons?

best regards and thank you very much!

(Alexander Schiftner) #6

There are a trillion reasons why this might not be working in your specific setup :wink:
If you post a publicly accessible link to your example we might be able to help you.

(Martin Wiesner) #7

Hello again,

i prepared a publicly accessible link:
http://mwiesner.pythonanywhere.com/kreisimquadrat/introduction/9/
(just click on start to start the 3d-view)

Perhaps i have to explain a little bit my approach.
I want to optimize parameters of a design and i have a algorithm (PSO) which edits parameters of multiple designs based on user-ratings. This works quite well with 2D-Designs and now i want to find out if i can edit 3D-Design with this approach powered with shapediver.

The algorithm is enbedded in a django webapp. So the parameter value is transfered to the html which seems to work. But the communication with the shapediver iframe doesn’t work at the moment.

I am very happy about help in this quite special case!

best regards
Martin

(Mathieu Huard) #8

Thanks for the link. As it turns out, there is a bug in the platform: the URL inside the iframe should start with https:, otherwise the origin check fails and the API object can’t be loaded.
It should look like this:
<iframe id="sdv-iframe" src="https://viewer.shapediver.com/v2/2.7.0/iframe/remote.html...
I tested it in your page and it solved the problem.
However there is still an error in the link you sent, because then your are making a call to update a parameter value using an value that is not valid (setting 184 to a parameter that accepts values between 5 and 20). If you try to set a correct value, it works as expected.

The bug will be fixed very soon on the platform, in the meantime don’t forget to do this small change manually. As a side note, we had missed this until now because most users use direct embedding, which is more flexible and provides more features. Is there any reason you prefer using the iframe? Otherwise consider using direct embedding, which is better documented at the moment.

(Martin Wiesner) #9

Ah! :sweat_smile: Yeah now it works properly!
Thank you so much…

i started to use the iframe version, because i thought that i only had the license with PRO for this version. But probably this is a stupid misunderstanding on my part.

But it would also be interesting for me to understand the differences. Which version is better in terms of loading time? I don’t need complex interfaces at the moment, because currently only the algorithm changes parameters.

(Mathieu Huard) #10

The iframe version makes it easier to load the viewers with all the GUI elements. It is also the only way at the moment to embed several models on the same page. However, some of the advanced API functionality is not available through the iframe. Reading and updating parameters works fine though.

Direct embedding might be slightly faster, especially if you don’t need any of the UI, then you can load the 3d view only. The API is fully available for directly embedded models, and some of its functions are more convenient (synchronous responses).

If you want to try it, switching to direct embedding shouldn’t be too much work for your application. Find everything you need in the documentation.

(Martin Wiesner) #11

Thank you very much for your answer, thats very interesting!

in fact i would like to load two windows with shapediver models side by side at the same time to show the users models in parallel to find out which variant is more attractive in a Coice test.

One challenge is that I would like to control both models at the same time (zoom, rotate, etc.). Is there already a solution?

http://mwiesner.pythonanywhere.com/kreisimquadrat/evaluate/10852/10853/

Many greetings and many thanks!

(Mathieu Huard) #12

First of all, an update on embedding several viewers: it is actually an issue we are working on at the moment. It will be possible both for iframe and direct embedding in the near future. For now, it is possible to embed two viewers in iframes, but the API will not work properly. After the next update, multiple viewers and their respective APIs will be available in all cases.

As for controlling both viewers at the same time, there is no straightforward way to do this. Below is an idea of how you could do this (once the above issue is fixed!).
I guess you could set a listener on the viewer containers for mouse move events (while mouse down), get the camera of the active viewer using the API (api.scene.camera.get()) and then set the camera in the other one (api.scene.camera.updateAsync()). Of course, since you have two viewers, there is a different api interface object for each of them, so it would look like this:

apiViewer2.scene.camera.updateAsync(apiViewer1.scene.camera.get().data);

I wouldn’t expect the performance of this setup to be ideal, but on principle it should work.

(Martin Wiesner) #13

Dear Mathieu,

thank you very much!
For me this would be really essential.

Is there a time frame when this could be realized? At the moment i want to buy a years license.
This functionality would be really important because i want to compare diferent models. So will it be possible to use this in some months or are we talking about a longer timeframe?

best regards

Martin

(Mathieu Huard) #14

We are working on the fix at the moment, so I expect it should be possible in the next couple of weeks. I will update the topic once it’s ready.