Button to iframe interaction

1

I have 3D scene (Verge3D) inserted into Hype project using iframe (attached).
The buttons defined in 3D scene (round buttons) works of course however buttons created in Hype (square buttons with 'green' and orange' IDs) does not work.
How to make interface created in Hype interact with iframe element?

Cube.zip (1.0 MB)

2

Hmmm.

Ones like this are always going to be a bit of a pain.

To be honest. I have tried to make this more Hype compliant by getting what seem to be the main files into hype.
Now although this works (so far ) this may not actually be conducive to what you need or want to do.
But here it is anyway..

My steps,

I removed the widget. My advise id do not use a widget to place an iframe into. You effectively get two nested iframes.

Normally I would say use a rect and place your iframe into that but again I did not go that route.

1, I add a rectangle and gave it the id of v3d-container
2, I added these files to the Hype resources.
Screenshot 2021-05-01 at 18.53.46

NOTE:

The environment.hdr is an image. You MUST uncheck Automatically Optimise when exporting

3, I then Added this in Hype function

window.hyperes = "${resourcesFolderName}/"

via a On Prepare For Display JS action.

Screenshot 2021-05-01 at 18.55.38

4, I then edited the Test6.js

Changing the lines from

 var PUZZLES_DIR = '/puzzles/';

    var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', '');
    
    var sceneURL = params.load ? params.load : '__URL__Test6.gltf'.replace('__URL__', '';

to

var PUZZLES_DIR = '/puzzles/';
 var hpyePath =window.hyperes
var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', hpyePath );

var sceneURL = params.load ? params.load : '__URL__Test6.gltf'.replace('__URL__', hpyePath);

The prep() function will run before all the other js is loaded.
This will put the hype resource folder name into the windows global scope.

When the Test6.js loads it will be able to use this to be able to use the correct path to the files.
This not only allows things ( again hopefully ) work after export and placed on a server( or locally with cross origin restrictions of in the browser or via Whisk.app or other local server app) but will also work during Hype preview.

Thats it.

The button you have have the correct ids already that the eventListners set up in the visual_logic.js
will respond to them being clicked without any other setup.

Now as I say this works as is and I did not use any of your other files which means this setup may not be what you really need.

3d.hype.zip (912.4 KB)

Also note I suggest to start from scratch.
If you convert you project you may get an error.

Screenshot 2021-05-01 at 19.30.51
Screenshot 2021-05-01 at 19.30.511040×100 19.9 KB

Not sure why this isstill being generated still but I only get it in your original file ( actually a copy of it, the original one I must have done something and I forget what I did that stops it.
But a new project does not have this? )

3 Likes
3

Many thanks. I still need to understand it and test it with my bigger project but at first glance it looks excellent.

4

No prob.

Just figured out how i cleared that error in your original project.
I edited the visual_logic.js file and saved it. The edit was just a console.log but doing that flushed Hypes cache of the file set up.

So if you do use a conversion of the original project ( I would not) then just open the visual_logic.js and add a newline or space ( where it will not matter) and save.
This will flush Hypes cache..
Maybe @jonathan can explain that one better. This is not what I would expect to have to do, especially as there is no actual change to the visual_logic.js file.

1 Like
5

My guess would have been that visual-logic.js was inserted into the head and loaded before v3d.js and therefore would result in that error. But the steps to resolve this type of problem would be to remove the file and add it back so that it is last on the load list. So I'm not sure... maybe it is a newline or encoding issue that you hit.

6

Yep, The load order was what I expected it to be but I checked the order and it matched correctly with the new project done from scratch.

So not sure myself but that is why I felt it was some sort of caching issue within hype from when the project was opened. I don't think is was anything to do with the file itself. If it was then a project created from scratch would have had the same thing going on.

The steps to replicated the issue are easy enough. Just open a copy of the original and follow my steps above.

1 Like