javascript lightbox over unity web app

Hi I managed to get a lightbox behaving properly over a unity web-app on an html page !?! ok, there are 2 caveats:

1 - the browser must be at least firefox 3.6+, chrome, explorer 7+ on winXP -OR- firefox 4 ,chrome or safari 5 on OSX 10.6+.
2 - the lightbox calls transparent pngs in it's CSS, i needed to comment them out as they don't render OVER Unity.

Method:
0 - you have a unity web app embedded in an index.html and you want web content displayed over the top on occasion.

1 - go get rokbox!
http://www.rockettheme.com/extensions-joomla/rokbox
...originally written for the joomla CMS there is a standalone version for free download. Rokbox uses javascript and the mootools library to do it's thing... put the unzipped rokbox folder *near* your html (just remember the path).

1a - read it's documentation.. please

2 - make another html page that will sit inside the rokbox lightbox - in my case i put a JW Player and an RSS widget on this page.

3 - get rokbox to call your new html from your index.html, and voila! it should work... but it may look a bit screwed up due to the transparent pngs, find the CSS file that controls rokbox's appearance and comment them out...in most installs the default theme should be at '.../rokbox/themes/light/rokbox-style.css' , and the offending pngs are near the top and look like eg:
#rokbox-top.rokbox-left{background:url(tl.png) 0 0 no-repeat;clear:both;}
that's the top left corner rounded png, get rid of it so it looks like eg:
#rokbox-top.rokbox-left{}.

4 - without the pngs you are left with a rectangular rokbox (DON'T delete #rokbox-close params in the CSS, it's the close button), so you can muck about with the margins and paddings for rokbox to get it looking like you want, or perhaps do special margins and paddings in the new html page and resize rokbox to accommodate... there is also a hunk of code in the rokbox documentation i recommend putting in the head of your index.html, it's all the editable parameters of rokbox.

notes: that's about it this isn't a CSS or html tutorial, otherwise it would be a lot longer than this, which is just an introduction to a tool (rokbox) and the methodology - but let me assure you that it IS possible to overlay web content over Unity web app while it's playing wish i could show you what i've done but it's under lock&key until release.

 

As I dont quite understand how this is working: do you have a demo on this? So we can have a look? Is it working with transparency and focus back on webplayer if u close it?

Thx mucho

 

Sure thing, JangoFett As of a few days ago, a now public example of a lightbox with media in it playing OVER THE TOP of a unity web app is at:

http://volvo.virtualeye.tv/

... I'm not the Unity developer that built this particular web player, we have some clever guys here that concentrate solely on Unity apps, I do the html,css and javascript technologies that support the app if it ends up on a website... I can knock around in Unity, but to be honest I've only ever output web players myself so I can try and do things around them on a webpage.

So as my initial post declares, we're using rokbox and now also JWPlayer to put more media in front of the user while they 'play'. Both rokbox and JWPlayer can be controlled from within the Unity web app via .JS... so go and take a look.

If you follow one of the yachts, you can click a media button in the Unity app to bring up icons along their sailpath that show geographically where the crew sent out an image, a podcast or a movie that was uploaded to youtube.... click on one of the media icons and a lightbox will popup over the top of the Unity app with the relevant media inside it

addendum:
Focus shifts from the webplayer to the lightbox and back, via a close button on the lightbox or by clicking elsewhere in the browser window. A darker transparency layer behind the lightbox is also functioning, but is not consistently visible across the tested browsers. Tested browsers that happily run the lightbox/mediaplayer/Unity combo are:

Firefox 3.6+, chrome, explorer 7+ on WinXP -OR- firefox 4+ ,chrome or safari 5+ on OSX 10.6+ -OR- firefox, chrome and explorer(x86) on Win7. ( + denotes all versions above the shown version).

 

Thank you Squirrel for sharing with us.

I have experienced the workaround you have described, and it works.

I have made additional tests and here's my conclusion : the only HTML element you can successfully display over the web player is the IFRAME. However, its background has to be fully opaque. Usage of transparency make it invisible. Don't mess with Rokbox, make it simpler .

I hope that helps interested readers.

The next step would be to explain this behaviour in details.

 

If you don't need a lightbox (Rokbox) displaying different media over a Unity Web Player... then by all means, don't use it. In my case, however, I was specifically asked to set up a lightbox system that pops up over a webplayer, that it had to contain video, sound, and/or images, and that it be .JS based so our Unity developers could call it from within the Player if need be.

Both Rokbox and JWPlayer (and JPlayer) come with an API to make those calls easier to do. I appreciate that's all fairly complex, and that in *most* cases it won't be required. If you find yourself in a situation like me though, you may appreciate a thread like this as at least a starting point

What makes the whole lightbox thing hard to do is the fact that the Unity Web Player talks directly to your video card, things like CSS 'z-index' in the browser won't work, it gets ignored. Anyone who's experienced issues with cursor focus in the browser while playing a webplayer, or noticed the display *blip* when coming back to the browser from fullscreen mode in the webplayer will have an appreciation of this.

You're right though, I'd like to figure out a simpler way to do this, for sure

 

Hi Squirrel!

I was really interested in this topic but unfortunately when I go to http://volvo.virtualeye.tv/ it crashes the unity plugin (tested on safari or firefox).

I was just curios how do you managed the focus going back to unity web player. Because we're using html iframe overlay but when we get back the focus should be manually triggered clicking inside unity window.

I appreciate if you can help me.

Thanks.

 

Have you tried Javascript's window.focus() ?

Code (csharp):

1. <!-- from your iframe -->
2. <script type="text/javascript">
3. window.onunload = window.onbeforeunload = window.parent.focus;
4. </script>
5.  

I haven't tested it.

 

Numid: no, it doens't work. When you go back to previous window you've to click on the embed to get back the focus.