Keeping a Photosynth image as background ...

  • Question
  • Updated 5 years ago
  • Answered
I'd like to embed a Photosynth image in a webpage that uses positioned div segments ... and I'd like the synth to remain a controllable background image. A playing synth using the iframe embed always seems to play on top ... and try as I might, I haven't found a way to keep it in the background.
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
  • hoping this is possible!

Posted 5 years ago

  • 1
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
You should be able to achieve this by making the Photosynth embed -- which is a Silverlight <object> -- windowless. As you can see from that MSDN page, windowless plugins have limitations, but it may be good enough for your case. Hope this helps!
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
Thanks for the prompt reply! I'm not sure how to implement your suggestion. I'm using Dreamweaver's visual environment ... and I'd like the Photosynth to stay in the background even when the delayLoad is set to false. In this test page the iframe static image stays in the background until the Photosynth is actually opened.

You can see my testing page and code here: http://www.whippetfield.com/indext.htm

I just noticed that the test page works perfectly in Firefox ... but not in MSIE or Chrome.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Official Response
Ah, thanks for sharing your webpage. That sheds a lot of light. I see that the embed is just an <iframe>, and you don't have control over the Silverlight <object> that's created inside that <iframe>.

(Btw, I was surprised that it worked in Firefox; I wouldn't have expected it to.)

The "proper" fix would thus need to be implemented by the Photosynth team. They could e.g. expand their <iframe> embed to accept a ?windowless=true parameter, and in that case, instantiate the Silverlight viewer in windowless mode.

There are no easy workarounds on your side until that happens, unfortunately. It's certainly possible to take their <iframe> source code and tweak here and there to get this to work, but that's non-trivial and probably not a good idea either.

You may want to post this request on the official Photosynth forum at http://photosynth.net/forum.aspx instead of this one (which they still monitor but isn't their official one). Good luck!
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
Thanks again for the reply. I've posted this request on the forum you suggested, but would also be interested in trying the "tweaking" the iframe code once it is in my web page. If you could include some suggestions, or a link to a page where this has been accomplished, I'd certainly appreciate it.
Photo of Nathanael Lawrence

Nathanael Lawrence

  • 791 Posts
  • 54 Reply Likes
I can't shed too much light here, but as diagnostic information I did a quick little test and loaded up Jon's page in the four major browsers on Snow Leopard and the 5 major browsers on Windows 7. In all browsers the iframe begins in the background, but after the XAP is allowed to load, the results diverge rather interestingly.

Here's how the results break down:

(Windows 7) Embedded synth comes to foreground. :: Internet Explorer 9 *1
(Windows 7) Embedded synth comes to foreground. :: Opera 10.62
(Windows 7) Embedded synth comes to foreground. :: Safari 5.0.2 (7533.18.5)
(Windows 7) Embedded synth stays in background. :: Firefox 4.0b4
(Windows 7) Embedded synth comes to foreground. :: Chrome 6.0.472.63:

(Mac OS 10.6.4) Embedded synth stays in background. :: Opera 10.62
(Mac OS 10.6.4) Embedded synth stays in background. :: Safari 5.0.2 (6533.18.5)
(Mac OS 10.6.4) Embedded synth stays in background. :: Firefox 3.6.10
(Mac OS 10.6.4) Embedded synth stays in background. :: Chrome 6.0.472.63

Both of the Webkit-based browsers are inconsistent between operating systems as to their z-index layout. Likewise, Opera with their own layout engine is inconsistent between OSes. Firefox with its Gekko engine turns out to be the only one that renders the z-index visually identically, even though I was using Firefox 3 on the Mac and Firefox 4 Beta on Windows. I am very interested to know why the code got the intended results on all browsers on OSX, whereas 3/4 of the browsers which are on both OSes failed to perform the same on Windows.

*1 The page renders in Quirks mode by default, but using IE9's developer tools to force the page to render using IE9 HTML5 and CSS3 compliance mode didn't fix the problem. I didn't look at the page source code to see what's going on, but Dreamweaver code should be relatively clean, if not perfectly standards compliant.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
You're seeing the divergent behavior across OSes because Mac OS X does not support windowed plugins at all, so all plugins are windowless by default. And thus I was surprised that Firefox on Windows rendered it as if it were windowless. Thanks for the research!
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
Thanks for the replies. I've experimented with Zoom.it ... trying to achieve the same result (a zoomable, panable image that remains in the background) and found that the script provided works perfectly in Chrome, but not at all in Firefox or MSIE. The code can be seen here: http://www.whippetfield.com/indext2.htm

Your continued help and interest is appreciated.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Ah, this is because the Zoom.it embed actually doesn't use a plugin in Chrome, i.e. instead of Silverlight, the viewer uses pure HTML and JavaScript. (This is because Silverlight 3, the runtime our viewer requires, did not officially support Chrome; we go by their officially supported list to determine whether we should use Silverlight or not.) Thus windowed/windowless is not an issue in Chrome. EDIT: you'll also notice the same behavior in IE and Firefox if you disable Silverlight (via each browser's respective Manage Add-Ons dialog).
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
I've also noticed that on the Mac side the Zoom.it script does not work in Firefox, and causes Safari to lock up the machine (running Tiger) with an error loop that posts Javascript "Sorry, but Seadragon Ajax can't run on your browser ..." and requires a power down to recover. (ref: http://www.whippetfield.com/indext2.htm)
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
This is quite worrying! Can you clarify what you mean by "does not work in Firefox"? And what versions of Firefox and Safari are you running? This might have to do with OS X Tiger, but I'm not sure.
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
The Safari attempt to load http://www.whippetfield.com/indext2.htm locks up the machine in such a way that going to Restart does not work because it is grayed out ... and if you hide Safari, the clicking restart produces a message that says Safari prevented restart. You've got to do a power-down reset to recover.

FireFox 3.6.8 is running on Tiger, and the attempt to load this page results in a black rectangle (that should contain the zoom.it image) appearing in the correct place at the correct z-index, behind, above and to the left of the other divAP. It remains black, has no controls, and does nothing if it's clicked.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
What version of Safari do you have? Also, does the standard Mac OS X "Force Quit" command work? It's cmd+alt+Esc I believe. At least then you don't have to reboot your entire computer.

In the Firefox case, what do you see if you right-click in the blankness? Does the context menu say "Silverlight", or just the standard Firefox context menu?
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
The Safari I'm using is v 2.0 (412) ... and the "Force Quit" does work. No combination of keys and/or clicks will do anything to the black rectangle visible in Firefox ... except Ctrl + click which gives me the ability to Copy, Select All, or View Selection Source ... the standard Firefox context menu. The view source option shows the html code for the div.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Ah, Safari 2 is very old! I would strongly encourage you to upgrade to a newer version -- they're up to Safari 5 already. =) (wikipedia) I don't think we would ever prioritize fixing bugs for a browser three major versions old. (Most sites dropped support for even Safari 3 a while back.)

Hmm, I'm at a loss for what could be going on in Firefox. Just out of curiosity, does the HTML code for the div have an <object> tag in it? Also, when you see that "Sorry, but Seadragon Ajax can't run [...]" alert in Firefox, can you do me a favor and open up the Error Console (via the Tools menu) and copy/paste the error message you see in there? Thanks!
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
The HTML code recovered in Firefox does not contain an object tag:





This is the complete code shown by the request.
div id="apDiv1"
div id="__seadragon1" class="__seadragon" style="width: auto; height: 400px; border: 1px solid black; background: none repeat scroll 0% 0% black; color: white; margin: 0px; padding: 0px;" /div
/div

(pointy brackets removed)

The "Seadragon Ajax can't run ..." message is from index2.htm and occurs in Safari, not Firefox. The black box displayed in Safari does briefly flash a "Zoom.it" message in the lower left corner, and then waits for quite a while before displaying the "Can't ..." message. I'm going to get a newer version of Safari & see what happens.
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
At the urging of Aseem, I installed v4.0.5 on the Mac running Tiger ... and the Safari version of indext2.htm worked perfectly there too. Thanks for the suggestion.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Glad to hear that upgrading to a newer version of Safari did the trick!
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
In order to reach a similar result, I created a panorama in ICE of about 28Mb, and used it as input to Deep Zoom Composer. In Deep Zoom, I created a set of files & uploaded them to my server. The results of this test can be seen at http://www.whippetfield.com/indext3.htm. I've found that using this method produces the expected and proper results in MSIE and Firefox on the PC, but produces only a static black box where the image should be if viewed with Chrome. The page also works perfectly in Firefox on a Mac running Tiger, but locks the Mac up if accessed through Safari.

Of all the various ways I've tried to produce a zoomable, panable, big image that runs in an apDiv environment, the best, by a mile, is what happens when a Photosynth embed is used, and the results are viewed using FireFox. The other methods of producing the stitched-together image are much more difficult, don't look as good, take longer, and the end product still does not work in all browsers.

I'd like to thank the Microsoft team for this kind of experiment, and hope that you folks will keep doing this kind of thing ... and that eventually, Photosynth will be able to accomplish this particular task too.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Glad to hear at least it's making some progress!

The Deep Zoom Composer output you used is "Seadragon Ajax", yes? The good news is that this *should* work everywhere precisely because Seadragon Ajax is JavaScript-only, i.e. no Silverlight plugin, so again windowed vs. windowless is not an issue.

I'm thus very surprised to hear that it doesn't work for you in Chrome. It works for me perfectly. What version of Chrome are you on, and what version of Windows? It's also again worrying to hear that Safari is crashing for you even in this plugin-free case.

If you like the Photosynth view the best, your best hope is still that the Photosynth team adds a windowless option to their embed. Good luck with that. =)
Photo of Jon RennerJR

Jon Renner

  • 11 Posts
  • 0 Reply Likes
Something must have bonked my Chrome test, because http://www.whippetfield.com/indext3.htm works perfectly on all browsers this morning. And this same test page works in Firefox on the Mac ... but produces the message, "JavaScript Sorry, but Seadragon Ajax can't run on your browser. Please try IE8 or Firefox 3."

Is there a guide to writing an embed script of my own that might work with a completed Photosynth image or another contact that I might ask?
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Glad to hear it works in Chrome now for you. I don't think there's any guide to writing your own embed script, but if you ask the Photosynth team, they might be able to give you some pointers. Good luck!