Scott Mueller's dashboard

Scott Mueller replied on February 08, 2009 10:59 to the question "Why does zIndex for full-screen mode have to be so high?" in Microsoft Live Labs:

Sorry, getsatisfaction's html parser didn't agree with my code... Here's a link to the code:
http://jsbin.com/uratu/edit

Scott Mueller replied on February 08, 2009 10:56 to the question "Why does zIndex for full-screen mode have to be so high?" in Microsoft Live Labs:

This is what I did and it works great for both full page and regular mode (I don't even need to check which mode the viewer is in):


var chooserBox = $('

<h3>Choices</h3>

').append(links);
var underlay = $('

');
chooser = $('

').append(underlay).append(chooserBox);
// so that clicks don't penetrate the choosing screen onto the visualization links
chooserActive = true;
underlay.click(removeChooser);
viewer.addControl(chooser.get()[0], Seadragon.ControlAnchor.NONE);
// need to set position after adding the control to get the box height
chooserBox.css("top", viewer.viewport.getContainerSize().y/2 - chooserBox.get()[0].offsetHeight/2).css("left", viewer.viewport.getContainerSize().x/2 - 230);

Scott Mueller replied on February 08, 2009 10:24 to the question "How do I add an event handler for a click without dragging?" in Microsoft Live Labs:

Hi Aseem, ok so this works great. However, none of my regular html links work anymore within the visualization. I have a control that is a link to a flash version of my visualization which is editable (and inferior :), but I need the editing capability). I also have popups as I described in the thread on z-indexes when you click on certain nodes within the visualization. These popups (now they are controls with Seadragon.ControlAnchor.NONE) have links within them that just call viewport.panTo and zoomTo. None of these links work. You can click on them and they change color like links normally do. But you're not taken anywhere...

Scott Mueller replied on February 07, 2009 18:13 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

Just a quick point, you mentioned the problem is when, somehow, the viewport's center (x, y) becomes (NaN, NaN). This problem happens on specific zoomTo values regardless of what I set in viewer.viewport.panTo(), if that helps...

Scott Mueller replied on February 07, 2009 00:39 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

Thanks Aseem, I appreciate you working on this over the weekend. Let me know what I can do to help.

Scott Mueller replied on February 07, 2009 00:30 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

you can fully view the code and problem now at www.fightgame.com/seatest.html

Scott Mueller replied on February 07, 2009 00:17 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

ok, finally, am able to transfer the tree_5_files directory to www.fightgame.com (http://www.fightgame.com/tree_5_files). It kept crashing cyberduck, so I downloaded filezilla and it has 2000 images left to upload... maybe another 5 minutes it should be done.

Scott Mueller replied on February 07, 2009 00:09 to the question "How to change the background color in full screen mode" in Microsoft Live Labs:

No, there's no flicker at all with me, i thought that there might be because of your comments on the resize event firing after the full page mode going into effect, but I didn't see any flicker. The background image works great. I did it as firstChild.style.background = 'url(someimage.jpg 0 0 repeat';

Scott Mueller replied on February 06, 2009 23:53 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

Aseem, thanks so much for the quick response. I'm actually at a conference on my laptop, so I was hoping you could figure it out without the images. But I guess they're pretty important :). I'll upload them somewhere now.

Scott Mueller replied on February 06, 2009 23:03 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

Well I don't know how to post it well here. Go to http://jsbin.com/awoho and view source (google analytics is inserted by jsbin, the problem happens whether it's in there or not).

Scott Mueller replied on February 06, 2009 22:54 to the question "Bug in full page mode crashes seadragon, requires page reload" in Microsoft Live Labs:

getsatisfaction changed my seadragon init code... The code they replaced it with was:
<image><size height="1400" width="92790"></size></image>');
}


That SHOULD'VE looked like this:

&script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js">
&script type="text/javascript">
var viewer = null;

function init() {
viewer = new Seadragon.Viewer("container");
viewer.addEventListener("open", onOpen);
viewer.addEventListener("resize", onViewerResize);
viewer.openDzi("http://localhost:8080/test/images/tree_5.xml", '&Image TileSize="256" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008"><size height="1400" width="92790">');
}
</size>

Scott Mueller asked a question in Microsoft Live Labs on February 06, 2009 22:50:

Bug in full page mode crashes seadragon, requires page reload

With very specific zoom, picture size and container sizes, going to full page mode gives an empty screen and seadragon never comes back (I can switch back to regular mode, but visualization is gone). Suddenly full page mode started doing this for me, it was very strange. After wasting too much time on this, it seems that seadragon doesn't like particular zoom, picture size and container sizes. Below's the basic code that reproduces this problem. In navigateTo, if I multiply zoom by 1.0001 or 0.9999, everything's perfect... I'm guessing this has to do with dividing by a power of 2 the full width of the image? But then I change the container width slightly (904 to 894) and that makes everything work too. Let me know if the actual test image files are needed. This is a pretty major issue for me of course, I can't go live without this fixed. Oh, there are no errors in firefox or safari. IE7 gives an error, but I'm not sure it has to do with this, I don't have access to IE7 at the moment. Seadragon crashes with the below on ALL browsers. Lastly, the below crashes if I don't zoom at all or I zoom in and then go to full page. However, if I zoom OUT even a tiny bit and then go to full page, it works perfect.


<!DOCTYPE html SYSTEM>
<html>
<head>
<image><size height="1400" width="92790" /></image>');
}

function onViewerResize(viewer) {
if (viewer.isFullPage()) {
alert("fullpage");
}
}

function onOpen() {
var zoomInteractiveThreshold = 0.125 * 92790 / viewer.viewport.getContainerSize().x;
navigateTo(0.931091712469016, 0.003771958185149262, zoomInteractiveThreshold/2);
}

function navigateTo(x, y, zoom) {
viewer.viewport.panTo(new Seadragon.Point(x, y), false);
viewer.viewport.zoomTo(zoom, null, false);
//viewer.viewport.zoomTo(12.830475663716815, null, false);
}

Seadragon.Utils.addEvent(window, "load", init);
<style type="text/css">
#container
{
width: 904px;
height: 357px;
background-color: black;
border: 1px solid black;
color: white; /* for error messages, etc. */
}
</style>
</head>

<body>

</body>
</html>

Scott Mueller replied on February 06, 2009 22:07 to the question "How to change the background color in full screen mode" in Microsoft Live Labs:

Works perfect! Thanks Aseem. I guess there's an instant when the background is black since the resize callback function is called after the viewer has been modified to full page. But I don't see it at all. I made the background of the first child of viewer.elmt an image and it made the background an image like I really wanted. Are there any issues with doing this?

I'm very anxious to share my visualization! I'll give you the URL shortly.

Scott Mueller replied on February 06, 2009 00:24 to the question "Why does zIndex for full-screen mode have to be so high?" in Microsoft Live Labs:

I think your suggestion is great. I'm going to implement my solution just like your about screen. Thanks Aseem!

Scott Mueller replied on February 04, 2009 21:11 to the question "Why does zIndex for full-screen mode have to be so high?" in Microsoft Live Labs:

Aseem, thank you for the response and suggestion. My specific issue is I have links within the visualization. Some of the links take you to another location within the visualization and some links take you to another webpage. But some links take you to more than 1 place, so I need to ask the user where he wants to go. I do this by displaying a modal dialog box where the screen behind the dialog box is inaccessible and faded black a little.

I don't think the modal dialog is possible as a control, but I'm open to implementing this differently. I guess I could add a control when the user clicks on one of these links where the control is centered where the mouse is or in the center of the viewport. This control would list the link's destinations. Clicking anywhere else on the viewport would remove the control. Seadragon.ControlAnchor.NONE apparently requires css to absolutely position the control. Sounds like I can easily figure out where to place the control absolutely. I would use Seadragon.Viewer.isFullPage() to possibly position it differently. How can I tell when someone has clicked elsewhere in the viewport outside of my box with a list of links? Is there a way to slightly fade black the viewport behind the control? Is there a way to make this control appear above the other controls (I'm already using all 4 corners with a link, a legend and a message)?

It would be nice if Seadragon could make the zIndex a property that could be adjusted.

Scott Mueller asked a question in Microsoft Live Labs on February 02, 2009 09:35:

How do I add an event handler for a click without dragging?

I have the following code to add a mouse click event:
Seadragon.Utils.addEvent(viewer.elmt, "click", checkNode);

works great, when the mouse is clicked my checkNode function is called. Problem is that function is called even when the mouse is clicked only to drag the image around. I only want checkNode to be called if the mouse was not dragged. Or at least I'd like to be able to check if the mouse was dragged within checkNode. Is this possible?

Scott Mueller asked a question in Microsoft Live Labs on February 02, 2009 09:25:

Why does zIndex for full-screen mode have to be so high?

In seadragon-min.js (v0.8), the zIndex of the viewport in full screen mode is set to 99999999. But I need to place a javascript modal dialog box on top of everything if a user clicks on certain things. Works perfect in seadragon's regular mode. But even if I set the zIndex of my modal dialog box to 99999999 + 1, it appears underneath seadragon. I see my modal dialog box when I get out of full screen mode.

So I changed the zIndex to 99 in seadragon-min.js and everything works perfect now! I'm guessing 99999999 is the limit, at least in firefox? Why is it so high? Will I be screwing anything up by having zIndex set to 99?

Scott Mueller replied on January 30, 2009 06:44 to the question "How to change the background color in full screen mode" in Microsoft Live Labs:

Thanks Aseem, I'd love at least a trick or hack to achieve this. My visualization looks really incredible with Seadragon right now, but full screen doesn't look so good purely because of this :(.

Scott Mueller asked a question in Microsoft Live Labs on January 27, 2009 10:19:

How to change the background color in full screen mode

First of all, beautiful job on Seadragon Ajax! In normal inline Seadragon Ajax mode, the background is white and works perfect with my application which also has a white background. But in full screen (well full-window I mean) mode, the background is black and doesn't look good with my application. I've tried changing the css for the viewer.elmt, but I'm unable to change the background color for full screen mode. How can I do this?

While I'm asking, ideally I can actually place an image in the background instead of a color. A nice blue gradient gives a beautiful clouds effect for what I'm doing. Maybe this is possible by setting the background transparent and putting the image in a lower z-order? I'm assuming I could use PNG tiles that have transparent parts too showing the background image through.