Loading Profile...
Vector Graphics in Seadragon & Zoomism.com
SeaDragon is just fantastic! But how about vector graphics? are there any examples using vectors on the web?
Me, I created this site in Flash - to promote the whole idea of zooming and especially SeaDragon: www.zoomism.com ... (a poor-mans seadragon)
Me, I created this site in Flash - to promote the whole idea of zooming and especially SeaDragon: www.zoomism.com ... (a poor-mans seadragon)
I’m amazed
Follow this praise to get notifications on your dashboard.
-
Inappropriate?We currently don't do much of anything with vectors, but it is certainly something we're thinking about. You're obviously aware that much can be done with them; and for the record, your site is pretty fantastic at showing how the zooming metaphor can be applied.
I’m like, totally psyched
4 Comments
Add a comment
-
What about zooming into text in Seadragon? Vector text in Seadragon was specifically included in the tech demo at TED (www.ted.com/talks/blaise_aguera_y_arc...)
Is this still possible? Another online Seadragon forum said that the only way to use text in Seadragon is to render it as a high-res PNG, but this doesn't seem sensible from a CPU or bandwidth point of view.
I'm dead keen on this functionality. -
zrenneh,
We currently don't have special mechanisms for rendering text in any of the shipped Seadragon products such as Seadragon Mobile, Seadragon Ajax or Silverlight Deep Zoom. However, there are good examples of using Deep Zoom with prerendered rasterized text images such as the Playboy Archive [NSFW]. By separately managing the metadata they even support full text search. Another example: http://www.breviscloud.com/publicatio...
Is there any specific use case you have trouble implementing with the current toolset?
Cheers,
Daniel -
Thanks for the quick reply Daniel.
I'm hoping to put my thesis online. Basic version at http://understandingdata.dlow.org with props to you guys.
I was hoping to make the text reconfigurable: for example, at the moment there is no bibliography, it's scattered throughout the text. I thought it would be nice to have the different text areas slide over one another, and vector seemed to be the way to do this, although I could use pre-rendered text and alpha. I also assumed that vector would be a lower-bandwidth way of dealing with loads of text - you could embed a font and then just send the text and typographic detail. I also assumed from the TED demo that you guys had already done this! Maybe it wasn't ready for public release.
I'm keen to add internal links, but Seadragon composer doesn't seem to allow creating links within certain areas - it seems you have to cut out little images for the links and the destinations. I think I'll look more into the documentation!
Cheers,
H -
Nice piece, by the way, zrenneh!
-
Inappropriate?Kevin (or anyone else on the Seadragon team), what are the odds of us seeing alpha transparency support in Seadragon tech in the near future? To me, not having any support severely limits its applications as far as presentation goes.
Also, how easy would it be for end users to alter the shape of the Seadragon embed window? I don't mean the dimensions of the rectangle, but literally the type of geometric shape of the frame without resorting to some sort of overlaid partially transparent png, gif, or other transparency supporting graphics file hiding part of the Seadragon window.. -
Inappropriate?I see... please work on that. At various places I have seen SeaDragon would or will support vectors. With Flash it is possible to build a pseudo-seadragon, but Flash yet does not support progressive JPG and it is not at all designed to use vast amounts of vectors on one page. It slows down significantly, so there is something to work on. Adobe will too I guess. As well as Apple and Google. And thanks. I sure hope its you guys who land this first. -
Inappropriate?Hey Nathanael,
Alpha transparency is already supported, both in Seadragon Ajax and Silverlight Deep Zoom -- if the image uses PNG tiles, the alpha channels on those PNG tiles are maintained.
There are two issues to be aware of:
1. If the image uses tile overlap*, Seadragon Ajax incorrectly combines the alpha, which creates visible artifacts. Silverlight Deep Zoom does it correctly. With pure Javascript, it's tough for us so we don't currently know of a way to fix this.
2. With Seadragon Ajax only, alpha transparency won't work in IE6, because IE6 doesn't (by default) use the alpha channel from PNGs. We know of a workaround and we may implement it in the (near) future.
I hope this answers your transparency question. Let me know if I misunderstood what you were asking.
By the way, I'm curious why you think transparency is a vital requirement. What sorts of applications did you have in mind?
Best,
Aseem
* Fyi, Deep Zoom Composer by default does use tile overlap, but Photo Zoom doesn't. However, I don't think you can control the image format with Photo Zoom (it's JPEG). So, you'd have to generate the DZI yourself. DZI is an open format, but fortunately there are already some tools available which will allow you to specify the image format and (lack of) tile overlap. Two that I know of are our own .NET DLL (which now ships with Deep Zoom Composer), and a Python script by Kapil Thangavelu (requires Python Imaging Library).
I’m interested
-
Inappropriate?Also, to answer your second question, Nathanael, changing the geometry of the Seadragon viewer is next to impossible as far as I know. This is a limitation of current HTML/CSS, just like how you can't change the fact that a <div> is rectangular.
I'm also not sure that using transparent images would help you achieve that. If they're transparent in the region you want to show, there's still an image there, so mouse clicks wouldn't go through, preventing you from being able to interact with the viewer. If you instead took the more conventional approach of a "viewport" (nested elements, the outer one having "overflow: hidden"), you again are restricted to a rectangular shape.
I’m not sure it's possible
-
Inappropriate?@bevo I've just posted about your site on my blog:
http://dragonosticism.wordpress.com/2...
It's a pity the scroll wheel doesn't work on a Mac; plenty of other Flash sites do it just fine, for instance Daniel Gasienica's Tandem:
http://gasi.ch/blog/hello-tandem/
Perhaps he can help you get it sorted out?
I’m happy to see so many people zooming!
-
Inappropriate?oh thanks, thats a nice surprise.
I am working on the mac mouse wheel part, I know where to look... and there is a lot more to improve. I hope people anyway get the idea (using arrow keys), Thats what its all about at this stage.
I’m :)
-
Inappropriate?Bevo,
First of all, great work on your website.
Sure, I'd be glad to help. For mouse wheel support in Flash on the Mac, you'll find an ActionScript class and a JavaScript file to include and some instructions on the following blog http://hasseg.org/blog/?p=138
Let me know if you need more help to make it work.
Regarding vector support for ZUIs, I suggest you to keep an eye on the OpenZoom project at http://openzoom.org/
Cheers,
Daniel
P.S. It would be fantastic if someone with both ActionScript and JavaScript expertise could combine all of the previously mentioned code with the following JS Injection technique: http://www.actionscript.org/resources...
This would save us from deploying both ActionScript and JavaScript on the client and would make the experience much more seamless.
I’m inspired by other people's enthusiasm for zooming!
-
Inappropriate?great to see Openzoom!
-
Inappropriate?Bevo,
Check out this visualization of the Z-Order (Morton-Order) in OpenZoom for the beauty of vectors in ZUIs:
http://gasi.ch/blog/openzoom-visualiz... -
Inappropriate?Another great example for a zooming environment using vectors, bitmaps, video & text on a website is Alba Water built with OpenZoom:
http://www.albawater.com.vn/
–Daniel4 Comments Add a comment
-
Pretty slick! Are the vectors supported directly in OpenZoom?
The scroll wheel isn't working on the Mac in Safari 4, by the way. -
just wow! who made it?
-
@igilman: OpenZoom basically offers you a MultiScaleContainer control where you can place any sprite object supported by the Flash Player: vectors, text, video, bitmaps, etc. The rendering is handled by the Flash Player vector rendering engine. Multiscale images are just a special case of such sprites which react to scale changes of the scene.
@bevo I've found out about the site when user trublin added a praise «I love OpenZoom!» on the OpenZoom Get Satisfaction site. It's not there anymore... maybe he wasn't so happy after all ;)
P.S. Yeah, many people, especially those developing on Windows, forget about the workaround for mouse wheel support in Flash Player on Mac even though I offer a one-line solution to it in the OpenZoom SDK:
http://docs.openzoom.org/sdk/org/open... -
Daniel, slick stuff!
-
Inappropriate?I still love Opeenzoom Daniel.
Thanks igilman, I didn't notice that the scroll wheel was not working on Mac. I'll check this right away... after my week end. ;)1 Comment Add a comment
-
trublin, looks great now!
EMPLOYEE
EMPLOYEE
EMPLOYEE
EMPLOYEE
