Send JavaScript from button to HTML Widget?

[jpatten]

Hi All,

I have a panorama in a HTML widget. The panorama has some javaScript that will start an autorotate. The function is: pano.autorotate();

How do I use a Hype button to send that autorotate function to the panorama sitting in the HTML widget? What does the JavaScript in the button look like?

Thank you!

[MarkHunte]

Hi this probably will need doing by posting a message to the widget.
for example see this thread.

I have 2 hype documents with 1 scene each one. The first document have 2 timelines, the main one (that does nothing) and a second one that triggers an animation, there is also a Javascript that play the timeline and looks like this: hypeDocument.startTimelineNamed('timeline', hypeDocument.kDirectionForward) that works just fine, within that document there is an iframe wich contains the second document that have the "PLAY" button, that button triggers this javascrip for trying to control the…

But it would be easier to help you if you can post an example project with the panarama. This way we can test some approches to help you.

[jonathan]

An example would be useful. One tip is that you may be able to get away with using a Rectangle element and editing the Inner HTML instead of using an HTML Widget. HTML Widgets are iframes under-the-hood, and this can make communication to them harder.

[jpatten]

Hi All,

Just getting back to this little challenge....

Working from Mark's example, I created a little sample of what I am after. The Hype project has child navigation buttons in left margin with the goal of controlling the parent html5 pano in the widget on the right. I am trying to figure out if it is possible to send javaScript command to the parent html widget?

HypePano.zip (223.8 KB)

Also if helpful, I uploaded the panorama: https://dl.dropboxusercontent.com/u/6767916/CraterLake.zip

And here is the Hype document served: http://jpatten.on-rev.com/HypePano/PanoParent.html

Thank you!

[MarkHunte]

Can I ask why you need everything in its own widget?.

[jpatten]

Hi Mark,

No reason, other than an example someone shared was done similarly as parent/child (JavaScript to control the start of timeline, though different from my question.)

However, it could be useful if you were going to do a series of projects that reused layout components, I.e. Navigation buttons, etc.

I a man not tied to that design. I'd be happy putting my buttons in the same scene as the pano HTML widget if I could get it to work.

Thank you!
John Patten
SUSD

[MarkHunte]

Ok,

I will have a look at it further, I did get a version working but a bit different to you setup of using a widget for the pano. Although I still ran into cross domain issues when testing locally and not through a server.

I will put the Nav in a symbol. Which should allow you you to re use them in other projects by exporting the symbol.

[MarkHunte]

Here is an example.

This will work using the Hype Preview or when placed on a server. and not as a local export due to cross domain security.

In this I have this function createPanoViewer that runs on scene load

	window.viewer = pannellum.viewer('panorama', {
    "panorama": '${resourcesFolderName}/lake.jpeg',
    "autoLoad": true,
    "showControls": false
});

This creates the viewer in a Rectangle that has the id of panorama.

The viewer can be controlled by the buttons using the pannellum API.

Each button is give an id which is used to determine which button is clicked and what action to then take.

The buttons all call the same function name buttons

switch (element.id) {
  case 'pan-up':
window.viewer.setPitch(window.viewer.getPitch() + 10); 
break;
  case 'pan-down':
   window.viewer.setPitch(window.viewer.getPitch() - 10);
break;
  case 'pan-left':
  window.viewer.setYaw(window.viewer.getYaw() - 10);
break;
  case 'pan-right':
window.viewer.setYaw(window.viewer.getYaw() + 10);
break;
  
  case 'zoom-in':
window.viewer.setHfov(window.viewer.getHfov() - 10);
break;

case 'zoom-out':
 window.viewer.setHfov(window.viewer.getHfov() + 10);
break;

case 'autoRotate':
 window.viewer.startAutoRotate();
break;
 case 'FullScreen':
  window.parent.viewer.toggleFullscreen();
break;
  default:
return;
}

In the head file we link to the cdns like so.

 <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
   <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

pan.hype.zip (2.9 MB)

[jpatten]

Thanks Mark!

This was just what I was after and it gives me more ideas too