Expression Blend and Design

The team blog of the Expression Blend and Design products.

November, 2008

  • Expression Blend and Design

    Hello DeepZoomTools.DLL : Deep Zoom Image Tile Generation Made Easy

    • 43 Comments

    In our most recent release of Deep Zoom Composer, one of the major changes we made was to change how we generated the image tiles both for designing as well as exporting your Deep Zoom Content. In the past, ever since our first release at MIX, our image encoding was done using a combination of SparseImageTool.exe and ImageTool.exe command line tools. Starting with this release, we have retired those tools and have shifted to a preview version of a .NET based DLL that provides image generation capabilities.

    If you look inside your Deep Zoom Composer installation folder, which is by default, [Program Files]\Microsoft Expression\Deep Zoom Composer, you will see a file called DeepZoomTools.dll:

     dztoolsPNG

    This DLL contains all of the functionality needed for you to generate image tiles for compositions and collections. The classes and methods that you can use are as follows:

    public enum ImageFormat { Jpg, Png, Wdp };

    public class Image
        public Image(string path)
        public double MaxViewportWidth
        public double MinViewportWidth
        public string Path
        public Point ViewportOrigin
        public double ViewportWidth

    public class ImageCreator
        public ImageCreator()
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(string source, string destination)

    public class CollectionCreator
        public CollectionCreator()
        public double ImageQuality
        public int TileSize
        public int MaxLevel
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)
        public void Create(ICollection<string> images, string destination)

    public class SparseImageCreator
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public Color BackgroundColor
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)

    The API should be pretty straightforward. A DeepZoomTools.Image is the internal notion of a Deep Zoom image, and it contains all of the information such as the viewport widths, path to source image, origin, etc. ImageCreator is used to define an image and write the image tiles to disk. CollectionCreator and SparseImageCreator take a list of image paths and write the image tiles to disk.

    When I was playing with this, the one thing that confused me was what CollectionCreator expected as its “image path”. It isn’t a string of paths to raw JPG, PNG, etc. files. It is actually a path to the Deep Zoom Image created via ImageCreator/SparseImageCreator. SparseImageCreator does take in a list of paths to the source image, so passing in a list of image files will work for generating sparse images (aka Compositions).

    Do note that this DLL is a pre-release version, and the Live Labs team will decide when and how to more formally release this in the future. Even though Deep Zoom Composer uses this same DLL, there may be future releases of this DLL that are independent of Deep Zoom Composer releases.

    Thanks,
    Kirupa

  • Expression Blend and Design

    Deep Zoom Composer Updated: Seadragon Ajax Support, New API, and more!

    • 24 Comments

    Today, we released another update to Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    NOTE:
    Be sure to uninstall any earlier versions of Deep Zoom Composer before attempting to install our new version.

    Most of the work in this release has been under the hood to fix bugs and usability issues, but we did add a few features that you may find cool to use!

    Seadragon Ajax Support
    One of the biggest changes we made was to revamp our Export UI and provide you with the option of exporting your composition as a Seadragon Ajax project:

     image

    If you haven’t heard about Seadragon Ajax before, it is a JavaScript-based implementation of the Deep Zoom functionality found in Silverlight. You can read more about Seadragon Ajax and the difference between this and Deep Zoom at Lutz Gerhard’s blog.

    New and Improved API
    Something that we’ve mentioned in the past is that we want to make it easier for all of you to integrate Deep Zoom tiling functionality into your own applications. In the past, you only had access to the command-line tools SparseImageTool.exe and ImageTool.exe.

    In this release, we are moving away from the command-line tools and moving to a .NET/managed DLL that you can more easily integrate into your applications. I will be sharing more details on this DLL in a future posting, but all of Deep Zoom Composer now uses this DLL for its internal treatment of tiled images. One nice benefit of this is that you get better reliability and performance when importing and exporting images!

    Updated Project Templates
    In the past, we really haven’t given our project templates much attention. We are changing that with this release with more useable templates for both Silverlight and Seadragon Ajax:

    slTemplate

    The revised templates contain bug fixes and usability issues that many of you have given us feedback on.

    Numerous Bug Fixes
    We deviated a bit from what we said last time that future releases will focus more on under-the-hood changes. The changes you see today are things that many of you had asked us about, so even though we are continuing to invest in stability and performance, do feel free to send us more suggestions. Some oft-asked features may find their way into a future version.

    Thanks To..
    As always, each Deep Zoom Composer release is a collaborative effort from individual from across Microsoft. A large part of this release relied on the efforts of Dan Cory, Melinda Minch, Lutz Gerhard, Avi Dunn , and other colleagues in Live Labs!

    Cheers!
    Celso Gomes, Christian Schormann, Janete Perez, Kirupa Chinnathambi

  • Expression Blend and Design

    2.5D UserControl for Silverlight 2

    • 9 Comments

    2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided an implementation that has no lighting, materials, lines or polygons. But it does enable you to locate 2D (that is, flat) objects at x,y,z coordinates and place the camera where you want it. The implementation then projects the objects onto the camera, scaling and translating them appropriately, and handles mouse input to move the camera.

    You can see a small example demonstrating this below:

    Get Microsoft Silverlight

    Holding the left mouse button and moving the mouse rotates the camera; holding down Ctrl zooms; holding down Shift adjusts the field of view.

    Often, rotation causes an object to come in front of another, in terms of their distance from the camera. So each time it draws the scene, the implementation calculates the distance of each object from the camera and then sorts and draws them from back to front. It also culls (that is, removes from the scene) any object behind the camera. Other frills this implementation has are a kind of depth-of-field effect and a fog effect. The depth-of-field effect can be seen whenever an object gets very close to the camera: in this case its opacity falls off exponentially. The fog effect causes the saturation of distant objects to reduce, and their brightness to increase, so that they appear to be melting into fog or haze.

    Anyway, you can download the source for the above project from the following location:


    folderfiles Download 2.5D User Control Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how

    TwoAndAHalfDUC (the first class in the file TwoAndAHalfDUC.cs) is a UserControl base class from which you can derive your own classes. In that same file you will find the CubeUC class that derives from TwoAndAHalfDUC to provide an example of what to do. All you need to do is provide an override of the InitializeSprites method that creates and initializes a number of TwoAndAHalfDSprite objects.

    The base class always draws the sprites as colored circles (and of course it does this from any viewing angle so the objects behave as spheres would) but you can amend that behavior so that other 2D objects are used. I tried TextBlocks (and scaled them via their RenderTransform) and the result was very interesting.

    Enjoy!

    Steve

  • Expression Blend and Design

    PDC 2008 Session – Microsoft Expression Blend: Tips and Tricks

    • 4 Comments

    If you were unable to attend the PDC this year, don’t worry! Because all of the sessions have been recorded and posted online for you to view at your leisure, you won’t miss out on much. One session that my be of particular interest to you is Pete Blois’s and Doug Olson’s talk about Expression Blend:

    exprblend

    You can view the talk online by clicking the following link: http://channel9.msdn.com/pdc2008/PC47/

    The above link also contains downloadable versions of the video along with the PowerPoint slide deck Pete and Doug used to give their talk.

    Pete and Celso’s Twitter App
    A part of the session focused on how a designer can have a large impact on the look and feel of an application without having to write a lot of code or interfering with the core logic of the application. To highlight this, Pete showed off a Silverlight 2-based Twitter app that he wrote originally:

    peteVersion

    Celso Gomes, one of the designers on our team, took Pete’s application and decided to style it to look as follows:

    celsoVersion

    The functionality is the same, but the way the application looks is vastly different. The static screenshots don’t do Celso’s version justice. If you watch the session, you will see subtle transitions and rollover effects that are pretty cool and give the application a more polished feel.

    To try out this Twitter application for yourself, download the source files below:


    folderfiles Download Twitter Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how Celso and Pete designed and developed the application.

    Cheers!
    Kirupa

Page 1 of 1 (4 items)