the WPF way...: apps

Initial release of XamlXporter (0.1 alpha)

Thu, 26 Oct 2006 12:02:49 GMT

As promised I've uploaded the source and binaries of XamlXporter. XamlXporter is a script for exporting Illustrator artwork in WPF/XAML. It is written in C# 2.0 for easier maintainence.

It currently exports the following objects from Illustrator CS2:

Strokes
Linear and Radial gradients
Text (single - line only)
Opacities
Visibility
Paths
Colors (CMYK, RGB, Spot, Gradients, Gray)
Layers, Groups, CompoundPaths
XAML comments

For more details about this project visit http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=xamlxporter

A previous blog post about this project can be found here.

Technorati tags: wpf, xaml, illustrator, exporter, codeplex, release

XAML Exporter for Illustrator using the CS2 COM Type Library

Fri, 13 Oct 2006 16:04:37 GMT

Technorati tags: WPF, XAML, Apps, Exporter, Illustrator

I guess the title for this blog post answers 90% of what I had to say ;)

Yes, I have spent the last few days working on using the scripting object model for Illustrator CS2 to export the artwork to WPF/XAML. The code is entirely in C# / .Net 2.0 and uses the Illustrator CS2 COM Type Library. Now you may be wondering why I did one more Illustrator-XAML exporter, when there is already one by Michael Swanson. Couple of reasons:

I wanted to add some export options for creating ControlTemplates, DataTemplates etc. as the top-level tag instead of Viewbox. That way I could just load them up in Expression Interactive designer and add animations, data-bindings etc.
The source code for Swanson's plugin was not available. It was in C++ and really a step back for me, after having spent a considerable amount to time in the C# world ;)
I also wanted to add a XAML preview and a simple XAML editor like XamlPad, all in the same application.
Moving forward, I would be adding some more features that are fine-tuned to the way in which we consume Illustrator artwork, in our company. We are building our own Designer - Developer workflow and to make that more seamless, the Exporter will need to have some more features.

I am also glad to announce that I will be making the code freely available on CodePlex. I have already setup the project here. Once I finish cleaning up the code I'll upload it. If people are really interested, I could speed up things a little ;)

Here are some screenshots of the Exporter. I am using a 3rd party component for the Ribbon UI. I'll be replacing that with a plain Winforms UI.

1. The artwork in Illustrator:

2. The application with the exporter XAML + preview. The editor is just like in XamlPad. You can edit and see the changes happen dynamically to the preview. I am using the TextEditor component from the SharpDevelop project, which gets me the Visual Studio style syntax highlighting, code-folding etc...

3. The preview zoomed in:

4. Some text

Here is a quick rundown of exported objects:

Strokes
Linear and Radial gradients
Text (single - line only)
Opacities
Visibility
Paths
Colors (CMYK, RGB, Spot, Gradients, Gray)
Layers, Groups, CompoundPaths
XAML comments

A Water ripple effect using a 3D Mesh

Tue, 12 Sep 2006 12:40:03 GMT

Particle effects like fire, fog, snow, ripples in water are very captivating. I love the way Max OSX uses these effects to create a great user experience. For example OSX has a nice ripple effect in the background when you add a Dashboard Widget. That effect has been my inspiration for creating something similar in WPF. Fortunately WPF makes it a lot simpler to create effects like that using the 3D API.

I had done effects like fire, plasma, jello and also water using the VGA graphics. Back then it was pretty cumbesome but the techniques employed are still valid. Unfortunately I don't have any of the source code so it was back to Google for help. After a bit of searching I found a great tutorial for creating the water effect.

In short the tutorial suggests that the ripple is a change in the elevation of the different points on the surface. The elevation changes happen sinusoidally (like a sine wave) coupled with a damping effect. The way I created the effect is by using a MeshGeometry3D and subdividing it into a grid of points. More the number of points in the mesh, more smooth is the effect. Once we have the mesh of points, the next step is to change their elevation. In my case my mesh was positioned at Z=0 (ie. in the XY-plane), so all I had to do was to change the Z-coordinate. To get an animated effect, I set up a DispatcherTimer at an interval of 100 milliseconds and at every interval I use the technique from the tutorial to manipulate the Z-coordinate.

The end result can be seen in this Quicktime movie. You can also download the binary and check it out on your own machine. Make sure you have the RC1 release of .Net Framework 3.0 installed.

Reusability

One of the challenges I have right now is in making these effects reusable. Making 2D effects reusable is more simpler since most of them can be encapsulated into a Storyboard but effects which require 3D Mesh deformations and morphs are more challenging. There are couple of options however:

Subclass Viewport3D and use the CompositionTarget.Rendering event
Use Attached Properties to attach to different UI controls

I will explore these and put up some posts once I have the desired results.

Screens and Transitions - a cool WPF app

Fri, 08 Sep 2006 15:40:12 GMT

I have been working on a cool new WPF application that is supposed to run on a big Plasma display. It is going to be a non-interactive application that shows some information in the form of screens. A screen is a term we are using to denote a visual representation of some information. Some examples of screens we have include a Statistics screen that shows some numbers in a tabular format, a Photo Album that neatly lays out some photos (say from the last night's party) and does some cool slideshow effects, etc. Each screen will stay on the display for a certain time after which a transition-animation will be played to switch to a different screen. The application has a plugin architecture, which makes screens as well as transitions, pluggable. A developer could create his own nifty screen, package it into a DLL and drop it into a known location. The application would pick that up the next time it loads.

Similarly transitions between screens are also pluggable. Some of the transitions that we have developed are Cube Rotations where the previous and the next screen are visually mapped to the two side faces of a cube; when the cube completes its rotation, the new screen fills the display. There are other transitions like fade-ins, zoom-ins and a flip-card like transition (think about the transition to Dashboard widgets options page in MacOSX). In fact the Cube rotation is also similar to the fast-user-switching in MacOSX...we are certainly getting lot of inspiration from that OS ;)

If you have seen the North Face demo from the PDC and/or read the North Face White paper, then you can think about this application as the generalized version. Here is a nice screenshot of the app while it is performing the Cube rotation. You can see the screens mapped to the two sides of the Cube. The right hand side screen is blurred intentionally.

What is exciting about this project is the integration with the Windows Workflow foundation. We use WF to describe the list of screens and transitions. The workflow itself is designed using a Visual Designer and exported as a XOML file. The app picks up the XOML and runs throught the screens/transitions as described in the workflow. The workflow side of things was done by my colleague. There are lot of interesting things about WPF and WF that we learned in this project and I'll blog about them in future posts.