December 07, 2004

XAML + Sparklines

Via a tip from a colleague who read Chris Sells’ blog, I poked around with Sean Gerety’s Sparklines XAML samples. I’m still a XAML newbie, but I struggled through the syntax and created a XAML sample that is closer to Tufte’s Sparklines samples on the Tufte site.

Sparklines2

And here is my XamlPad window:

The point of this graphic, which I think might have been lost in Sean’s version, is that the red dot represents the last data point in the sparkline and that red color is associated with the red ticker price after the MSFT symbol. There is nothing wrong with Sean’s sample, but I didn’t feel like the sparkline was a word-sized graphic the way Tufte envisoned them. That said, the concept can be stretched many ways, I’m sure and Sean’s interpretation is probably very valid. 

Here is my code.

<Border ID="root" xmlns="http://schemas.microsoft.com/2003/xaml" Height="30" Width="200">
<Canvas>
 <Canvas Left="0" Top="13"><Text>Blah, blah, blah</Text></Canvas>
 <Canvas Left="80" Top="-10">
  <TransformDecorator>
   <TransformDecorator.Transform>
    <ScaleTransform ScaleX="0.3" ScaleY="1.2" />
   </TransformDecorator.Transform>
   <Polyline Points="1,26.23&#xD;&#xA;2,26.19&#xD;&#xA;3,26.14&#xD;&#xA;4,26.1&#xD;&#xA;5,25.76&#xD;&#xA;6,25.89&#xD;&#xA;7,25.73&#xD;&#xA;8,25.62&#xD;&#xA;9,25.83&#xD;&#xA;10,25.54&#xD;&#xA;11,25.86&#xD;&#xA;12,26.1&#xD;&#xA;13,25.94&#xD;&#xA;14,25.94&#xD;&#xA;15,25.93&#xD;&#xA;16,25.78&#xD;&#xA;17,26.12&#xD;&#xA;18,26.3&#xD;&#xA;19,26.33&#xD;&#xA;20,26.35&#xD;&#xA;21,26.13&#xD;&#xA;22,26.48&#xD;&#xA;23,26.56&#xD;&#xA;24,27.22&#xD;&#xA;25,27.24&#xD;&#xA;26,27.54&#xD;&#xA;27,25.95&#xD;&#xA;28,25.45&#xD;&#xA;29,25.33&#xD;&#xA;30,25.53&#xD;&#xA;31,25.16&#xD;&#xA;32,25.22&#xD;&#xA;33,25.51&#xD;&#xA;34,25.45&#xD;&#xA;35,25.61&#xD;&#xA;36,25.48&#xD;&#xA;37,25.59&#xD;&#xA;38,25.8&#xD;&#xA;39,25.95&#xD;&#xA;40,25.85&#xD;&#xA;41,25.08&#xD;&#xA;42,24.93&#xD;&#xA;43,25.2&#xD;&#xA;44,25.31&#xD;&#xA;45,25.03&#xD;&#xA;46,25.19&#xD;&#xA;47,24.41&#xD;&#xA;48,24.15&#xD;&#xA;49,24.5&#xD;&#xA;50,24.63&#xD;&#xA;51,24.89&#xD;&#xA;52,25.13&#xD;&#xA;53,25.18&#xD;&#xA;54,25.16&#xD;&#xA;55,25.38&#xD;&#xA;56,25.09&#xD;&#xA;57,25.37&#xD;&#xA;57,25.72&#xD;&#xA;59,25.83&#xD;&#xA;60,26.35&#xD;&#xA;61,26.37&#xD;&#xA;62,26.37&#xD;&#xA;63,26.39&#xD;&#xA;64,26.7&#xD;&#xA;65,26.53&#xD;&#xA;66,26.5&#xD;&#xA;67,26.7&#xD;&#xA;68,26.88&#xD;&#xA;69,26.61&#xD;&#xA;70,26.57&#xD;&#xA;71,26.46&#xD;&#xA;72,26.77&#xD;&#xA;73,26.99&#xD;&#xA;74,26.59&#xD;&#xA;75,26.95&#xD;&#xA;76,27.15&#xD;&#xA;77,27.02&#xD;&#xA;78,26.9&#xD;&#xA;79,27.08&#xD;&#xA;80,26.96&#xD;&#xA;81,27.01&#xD;&#xA;82,27.29&#xD;&#xA;83,27.4&#xD;&#xA;84,27.65&#xD;&#xA;85,27.91&#xD;&#xA;86,27.71&#xD;&#xA;87,28.25&#xD;&#xA;88,28.8&#xD;&#xA;89,28.48&#xD;&#xA;90,28.01&#xD;&#xA;91,28.3&#xD;&#xA;92,28.1&#xD;&#xA;93,27.81&#xD;&#xA;94,27.54&#xD;&#xA;95,27.7&#xD;&#xA;96,27.43&#xD;&#xA;97,27.57&#xD;&#xA;98,27.66&#xD;&#xA;99,28.16&#xD;&#xA;100,28.21&#xD;&#xA;101,28.24&#xD;&#xA;102,28.14&#xD;&#xA;103,27.45&#xD;&#xA;104,27.37&#xD;&#xA;105,27.52&#xD;&#xA;106,27.46&#xD;&#xA;107,27.21&#xD;&#xA;108,27.04&#xD;&#xA;109,27.15&#xD;&#xA;110,27.18&#xD;&#xA;111,27.36&#xD;&#xA;112,27.4&#xD;&#xA;113,27.04&#xD;&#xA;114,27.06&#xD;&#xA;115,26.74&#xD;&#xA;116,26.65&#xD;&#xA;117,26.61&#xD;&#xA;118,26.59&#xD;&#xA;119,26.38&#xD;&#xA;120,26.24&#xD;&#xA;121,25.98&#xD;&#xA;122,26.2&#xD;&#xA;123,25.67&#xD;&#xA;124,25.66&#xD;&#xA;125,25.84&#xD;&#xA;126,25.71&#xD;&#xA;127,25.45&#xD;&#xA;128,25.4&#xD;&#xA;129,25.73&#xD;&#xA;130,25.11&#xD;&#xA;131,25.1&#xD;&#xA;132,25.35&#xD;&#xA;133,25.15&#xD;&#xA;134,25.15&#xD;&#xA;135,25.5&#xD;&#xA;136,25.69&#xD;&#xA;137,25.98&#xD;&#xA;138,25.8&#xD;&#xA;139,26&#xD;&#xA;140,26.1&#xD;&#xA;141,26.23&#xD;&#xA;142,26.1&#xD;&#xA;143,26.07&#xD;&#xA;144,26.68&#xD;&#xA;145,26.14&#xD;&#xA;146,26.12&#xD;&#xA;147,26.74&#xD;&#xA;148,27.2&#xD;&#xA;149,26.91&#xD;&#xA;150,26.61&#xD;&#xA;151,28.91&#xD;&#xA;152,28.89&#xD;&#xA;153,29.35&#xD;&#xA;154,29.35&#xD;&#xA;155,28.93&#xD;&#xA;156,29.23&#xD;&#xA;157,29.07&#xD;&#xA;157,28.68&#xD;&#xA;159,28.78&#xD;&#xA;160,28.91&#xD;&#xA;161,28.94&#xD;&#xA;162,28.82&#xD;&#xA;163,29.14&#xD;&#xA;164,29.19&#xD;&#xA;165,29.08&#xD;&#xA;166,28.5&#xD;&#xA;167,28.52&#xD;&#xA;168,27.8&#xD;&#xA;169,28.83&#xD;&#xA;170,28.19&#xD;&#xA;171,28.24&#xD;&#xA;172,28.46&#xD;&#xA;173,29.6&#xD;&#xA;174,29.07&#xD;&#xA;175,29.96&#xD;&#xA;176,29.5&#xD;&#xA;177,28.5&#xD;&#xA;178,28.9&#xD;&#xA;179,28.36&#xD;&#xA;180,28.34&#xD;&#xA;181,27.84&#xD;&#xA;182,27.55&#xD;&#xA;183,28.37&#xD;&#xA;184,28.84&#xD;&#xA;185,28.38&#xD;&#xA;186,28.43&#xD;&#xA;187,28.3&#xD;&#xA;188,27.26&#xD;&#xA;189,26.52&#xD;&#xA;190,26.51&#xD;&#xA;191,26.42&#xD;&#xA;192,26.57&#xD;&#xA;193,26.5&#xD;&#xA;194,26.22&#xD;&#xA;195,26.24&#xD;&#xA;196,26.45&#xD;&#xA;197,26.62&#xD;&#xA;198,25.7&#xD;&#xA;199,25.54&#xD;&#xA;200,25.63&#xD;&#xA;201,25.6&#xD;&#xA;202,25.73&#xD;&#xA;203,25.61&#xD;&#xA;204,25.58&#xD;&#xA;205,25.71&#xD;&#xA;206,25.65&#xD;&#xA;207,25.66&#xD;&#xA;208,26.18&#xD;&#xA;209,26.17&#xD;&#xA;210,26.41&#xD;&#xA;211,26.23&#xD;&#xA;212,26.47&#xD;&#xA;213,26.61&#xD;&#xA;214,26.89&#xD;&#xA;215,26&#xD;&#xA;216,26.45&#xD;&#xA;217,26.38&#xD;&#xA;218,26.04&#xD;&#xA;219,26.89&#xD;&#xA;220,26.69&#xD;&#xA;221,27.52&#xD;&#xA;222,27.27&#xD;&#xA;223,27.4&#xD;&#xA;224,27.31&#xD;&#xA;225,26.91&#xD;&#xA;226,27.47&#xD;&#xA;227,27.7&#xD;&#xA;228,27.42&#xD;&#xA;229,26.5&#xD;&#xA;230,26.88&#xD;&#xA;231,26.15&#xD;&#xA;232,25.64&#xD;&#xA;233,25.63&#xD;&#xA;234,25.75&#xD;&#xA;235,25.26&#xD;&#xA;236,25.7&#xD;&#xA;237,25.78&#xD;&#xA;238,26.33&#xD;&#xA;239,26.07&#xD;&#xA;240,26.07&#xD;&#xA;241,25.96&#xD;&#xA;242,25.39&#xD;&#xA;243,24.65&#xD;&#xA;244,24.99&#xD;&#xA;245,24.88&#xD;&#xA;246,24.68&#xD;&#xA;247,23.75&#xD;&#xA;248,23.67&#xD;&#xA;249,24.09&#xD;&#xA;250,24.87&#xD;&#xA;251,24.88&#xD;&#xA;252,24.64&#xD;&#xA;253,24.61&#xD;&#xA;254,24.4&#xD;&#xA;255,24.41&#xD;&#xA;256,24.79&#xD;&#xA;257,24.22&#xD;&#xA;257,24.16&#xD;&#xA;259,24.03&#xD;&#xA;260,24.63&#xD;&#xA;261,24.76&#xD;&#xA;262,25.57&#xD;&#xA;263,25.79&#xD;&#xA;264,25.62&#xD;&#xA;265,25.99&#xD;&#xA;266,26.2&#xD;&#xA;267,26.36&#xD;&#xA;268,25.74&#xD;&#xA;269,25.99&#xD;&#xA;270,26.37&#xD;&#xA;271,25.86&#xD;&#xA;272,26.1&#xD;&#xA;273,25.72&#xD;&#xA;" Stroke="Black" StrokeThickness="0.5" Opacity="1"/>
  </TransformDecorator>
  <Ellipse CenterX="83" CenterY="31" RadiusX="2.0" RadiusY="2.0" Fill="red"/>
 </Canvas>
 <Canvas Left="170" Top="13"><Text>MSFT</Text></Canvas>
 <Canvas Left="199" Top="13"><Text Foreground="Red">29.96</Text></Canvas>
</Canvas>
</Border>

The major problem with my code, of course, is that I manually placed the text elements via pixel coordinates. I don’t know enough about XAML layout to avoid this. This is unfortunate as it would have been a beautiful syngergy between the XAML layout model and the visual use of the sparkline as a graphical word amidst the rest of the text.

But that is a lesson for another day. I suppose I’ll experiment with creating a Sparklines class where I can grab data from an XML file or some arbitrary query and lay it out like text, like so:

<Text>This is a test and here is Microsoft’s performance: </Text><Sparkline Type=”Graph” data=”msft.xml” Foreground=”Black” DotColor=”Red”/><Text>MSFT</Text><Text Foreground=”Red”><Sparkline Type=”LastValue” data=”msft.xml” Foreground=”Red”/>

 

Posted by Nick Codignotto at 10:03 AM | Comments (0) | TrackBack

November 25, 2004

First steps in XAML and SVG

As you read this, keep  in mind that I'm on my third Sierra Nevada Pale Ale. SN Pale Ale is, IMHO, one of the tastiest beers your money can buy.

I took my first steps in trying to understand how SVG and XAML can coexist. I'm not really interested in SVG, per say, but I have a nice tool for generating SVG and it's called Adobe Illustrator. Having this tool makes it very pressing for me to get SVG and XAML to play together. I could write a XAML exporter plugin for Illustrator and I might just do that. I downloaded the Illustrator CS SDK and it seems like an awesome SDK... to be continued.

Chris Anderson's XamlPad looks like a clone of the XamlPad application that's part of the Xamlon tool. They have an article on how to use their converter to convert SVG to XAML, but I want to do all of this myself so I'll kind of ignore that.

Now, the Xamlon tool is somewhat puzzling to me. Why the hell would they create a tool that WILL BE obsolete when Avalon on XP or Longhorn ships? Perhaps they see a 2-3 year market for which they think they can capitalize on? Perhaps they are building internal expertise and plan om developing a real XAML on Avalon product? Perhaps they want to be bought out by Microsoft? In any case the tool is impressive and in a vacuum seems like a no-brainer if you're currently developing apps in Visual Studio .NET 2003 and want to use XAML markup for your apps.

Ok, enough of that.

I created a simple polygon in Adobe Illustrator CS, that looks like so:

Star

I exported this as an SVG. There are a lot of options presented and I kind of chose the options that I thought would yield the cleanest SVG file. It just so happens that the options I chose were the same (or very similar) to the ones suggested on the Xamlon article (above). I won't go into that. In any case, this file was generated and attached.

If you look at the file, there is a lot of crap in there. Included in this crap is a whole thumbnail i mage which makes up for most of the file's size. Within all of this crap is the essence of the illustration, which is the following:

   <polygon fill="#8BD3E5" stroke="#0A50A1" points="125.623,186.813 75.582,145.052 12.81,162.6 37.063,102.102 0.977,47.826
    66.008,52.197 106.477,1.104 122.414,64.304 183.512,87.004 128.332,121.691 "/>

I typed this into CA's XamlPad and got some errors that were a cinch to fix. Xaml seems case sensitive and the Adobe Illustrator SVG plugin emits all-lowercase tags. Fixing these casing errors up, yielded something quite exciting:

Star_xamlpad

That's enough thinking for now.

Now playing: Spinecar - Release

Posted by Nick Codignotto at 12:20 AM | Comments (0) | TrackBack

November 21, 2004

Easy tryout for Avalon

Wow, Avalon is a cinch to get running on a clean machine. You'll need Windows XP with Service Pack 2 to start.

If you download the CTP, you can find a avalon.msi installation file. Run this on a client and you might get a message like this:

Dotnet20

Ah, well that's easy to fix and you don't even need access to the Avalon CTP. Just point your browser to the .NET Framework Beta 1 and rerun an Avalon sample.

If you forgot to install the Avalon CTP, you'll get a FileNotFound exception. Installing avalon.msi fixes this, of course. However, when you run an app like Chris Anderson's XamlPad (now available via ClickOnce), you  might get this?

If you'll remember, I use the Royale XP theme and you need to copy this file:

C:\WINDOWS\Resources\Themes\Luna\PresentationFramework.Luna.NormalColor.FxStyles

to

C:\WINDOWS\Resources\Themes\Royale\PresentationFramework.Luna.NormalColor.FxStyles

and rename the ".Luna" to .Royale". Then, you'll get the full app that looks just like it does on Chris Anderson's site:

http://www.simplegeek.com/default.aspx?date=2004-11-20T00:00:00

 

 

Posted by Nick Codignotto at 12:46 AM | Comments (0) | TrackBack

November 20, 2004

Longhorn, Avalon, WinFX

Quick note. All of my posts on anything about Longhorn, Indigo, Avalon, WinFS, WinFX, etc. will all go under the mega-umbrella Longhorn category.

Posted by Nick Codignotto at 10:43 PM | Comments (0) | TrackBack

Avalon Community Technology Preview unleashed!

The WinFX SDK CTP has been released on MSDN Subscriber Downloads. This means you can write XAML appls on Windows XP! I wonder what this means for Xamlon?  I can't wait to start playing around with Adobe Illustrator to create crisp scalable user interfaces.

18% done with my download...

I wonder when this will eventually go RTM and we can begin distributing apps.

 

Posted by Nick Codignotto at 12:16 AM | Comments (0) | TrackBack

May 27, 2004

Revelation: 3D in Avalon

Greg Schechter wrote a blog entitled, Introducing 3D in Avalon and 2D/3D Integration. He says, and I quote:


2D/3D Integration

The programming model of Avalon is fundamentally a 2D one.  Elements are rendered via painter’s algorithm, back to front.  There’s no notion of interpenetration of elements.  A challenge for 3D is figuring out how it fits into this 2D world.  The approach we arrived at is pretty straightforward - each 3D “world” or “scene” (called a Model3D) is an island onto itself.  It takes a Model3D to be paired up with a Camera before it can be incorporated into the 2D world.  The Model3D+Camera can be thought of as a 2D projection of the model from the viewpoint of the camera, and that projection is what gets incorporated into and composited with the 2D scene.  The 2D element that represents this combination is called a Viewport3D, and is just as full-fledged an element as our Image element, Text element, etc.

As other bloggers have said before. This model works for most desktop applications, but falls short for games programming where the 3D experience needs to be much more emersive.

Posted by Nick Codignotto at 08:42 AM | Comments (0) | TrackBack

May 26, 2004

Seductive Longorn: Part Deux

As a followup to my original “Seductive Longhorn” blog, I wanted to point out some new relevant information. I also explore some ideas on how Windows Forms could solve some of my “Wit h Great Power Comes Great Responsibility” concerns with Longhorn.

In my original entry, I admitted my fear that all of the sexy stuff in Longhorn will wreak havok on the user experience. With all of that power and expressiveness, perhaps every Longhorn application will look and act differently from the next.

It just so happens that I’m not the only one to be thinking of this (thank God, because if I were the world would be in trouble). Joe Beda points us to some Aero User Experience Guidelines: Sampler for PDC 2003.

The last section called “Application Archetypes” was most relevant to my rantings, but mostly useless. They present different application  types:

  • Document Editor Applications
  • Database Applications
  • E-Commerce Applications
  • Information/Reference Applications
  • Entertainment Applications (A picture of Halo for the PC)
  • and Utility Applications

All of these application types were merely screenshots of existing applications. They all seemed to be running under Longhorn, given the way controls looked, but few if any were Longhorn-specific applications. So, there was little guidance in how to contruct a form or a dialog in such a way that you can make your form or dialog look cool, but which wouldn’t require a massive investment in time to understand how to manipulate.

Perhaps Windows Forms is the answer. A Windows Form application has familiar structure. You start with a form, you slap controls on that form, and you program the form from there.

I suppose some future version of Visual Studio (Orcas?) could allow the user to write standard Windows Forms application, but suddenly present a family of properties and options enabled by the power of Avalon. For instance, when working with a Windows Form and controls, perhaps you are presented with these additional Longhorn-specific options:

  • When the form is dismissed, would you like it to explode into butterflies and fly away?
  • When a combo drops down, would you like the selection list to be fade in and remain semi-transparent?
  • Would you like me to auto-generate a algorithmic texture for your form and etch your controls on this canvas? Would you like marble, quicksilver, or stone floor?
  • When you expand your options dialog to show advanced options, would you like the the advanced options controls to be caught off guard, scream at being suddenly exposed, and quickly fall into their proper places?

You get the picture.

 

Posted by Nick Codignotto at 10:12 AM | Comments (0)

May 14, 2004

Suductive Longhorn

I just installed the WinHEC build of Longhorn. It didn’t seem any different than the PDC version I had previously. Before the install, I was aware that there were some spectacular changes available, but I didn’t know if it was part of the new WinHEC build.

Then, a colleague told me to run “sbctl.exe start” in my \Windows\i386 directory and I instantly saw what all of the gasps and awes were about.

Holy cow!

The shading effect below all Windows is neat. The fade/scale-in technique used by appearing dialogs is neat. The Alt-tab 3D task-switch stuff is also neat.

There are all sorts of new UI tricks for standard stuff like Wizards that MS is playing with. Some of it’s kind of icky, IMHO. I saw a lot of different UI styles in a lot of different Windows. I think each team must be experimenting since the experience seems a bit of a hodge-podge.

This made me think of a danger Longhorn poses to the user. I think that standardization of UI’s will start to fall away once the developer starts XAML‘ing their way to UI Nirvana. Each application will be as unique in Longhorn as each web site you visit on the web.

I don’t think I like that.

I think there is a productivity gain, an intuition, in knowing that the Tools menu has an Options item and that the File menu us used to save and load files. Obviously a menu bar is probably one UI element that will stay around in the Longhorn world, but I feel so much will change from application to application that the user experience will suffer.

Perhaps this isn’t true. Perhaps the tools in place and the UI guidelines will be clear enough that I’m worrying about nothing. I’ll just have to read more and see for myself.

Posted by Nick Codignotto at 04:38 PM | Comments (0) | TrackBack