Preview of DockBar and FisheyeGrid (No Avalon installation needed)

I received a couple of requests from people who want to preview the samples without installing Avalon.
Here are a couple of animated GIFs for previewing purposes:
DockBar (2.32 MB animated GIF)
FisheyeGrid (1 MB animaged GIF)
Please be patient until all the frames of the image download. You can right click and use Save as to save the image and view it inside your favorite browser once it fully downloads

Deploying an Avalon Express application online

Since I ran into this problem deploying my Fisheye sample, I thought it might be useful to share it with everyone.
When I deployed my application on my webserver, and clicked on the link to run it, the browser retrieved the file as XML listing (since the manifest is an XML file).
This was due to the fact that the server was sending an XML mime type back to the browser. One solution was to call/email my server admin and ask him to add the mime type for the .xapp file to the sever configuration.
Since my web programming experience is limited, I emailed some folks on the Avalon team, and got a hint about adding a .htacess file in the deployment folder.
So I created a .htaccess file in my deployment folder and added one line to it:
AddType application/x-ms-xapp xapp
And this works by telling the server that, for the folder where this .htaccess file exists, treat xapp files as ms-xapp.

I believe that Microsoft should seriously consider deploying .htaccess files with ClickOnce applications since it’s ridiculous to require everyone who wants to deploy a ClickOnce app to call/email their server admin to add the correct mime type. I am sure that it will happen eventually that servers will have the correct setting some day, but for now, please Keep It Simple Stupid…

More Avalon Grid Fun

Now that we have this fun Fisheye Gaussian deformation function, I thought about applying the concept in 2D, here are some snapshots:

Bubbles:

---

FisheyeCalendar (Similar to Datelens):

---

ImageGrid:

---

---

Download:
I will be posting the binaries and source code shortly!

Playing around with Avalon’s grid

I was looking lately at Avalon’s Grid layout container, when I noticed one of the coolest features anyone ever had in a layout manager: Specifying a relative size of the grid row/column with the Star (*) unit. In Avalon, if you specify a grid column width in star units instead of pixel units, this tells the grid how much this column’s share of the total available space will be. 

Since I am a fan of Fisheye visualizations, I figured that this simple idea in the grid may be a great candidate to implement Fisheye distortion: Items occupty a sapce relative to each other based on a degree of interest function (Typically the distance to the mouse cursor). Apple’s popular launch bar uses Fisheye distortion to magnify the icons as the user moves the cursor.

Given what the grid provides, how hard would it be to quickly prototype an effect similar to what OSX’s toolbar? Believe it or not, the effect can be implemented in Avalon with a simple grid and 8 lines of C# code. While the effect is very basic, and not as good as what Apple is providing, it’s a strong proof of concept of what Avalon is providing.

---

Snapshot

---

How to create Fisheye effect in Avalon: (You may do it declaratively or procedurally)

(I am assuming the reader is already familiar

• Start by creating a scene of size 500×100
• Create a grid with 9 columns and 1 row. Set its name to “DockGrid” and set its background brush to white and the opacity of the brush to Zero. This will help the mouse events to be handled from the Grid as you move the mouse over it.
• Set the width of all columns to 1*:  <ColumnDefinition Width=“*“/>
• For each grid cell, insert a png (preferably with some transparency), and set its four margins to be 0.
• Add an event handler to catch the MouseMove for the DockGrid.
• In the event handler, call the following function:

• void ChangeGridSize(UIElement e, int size){

  Point mousePos = Mouse.GetPosition(DockGrid);

  double mousePercent = mousePos.X / DockGrid.ActualWidth;

  double variance = .25; //how narrow or wide the function is

  for (int i = 0; i < DockGrid.ColumnDefinitions.Count; ++i){

  double positionPercent = (double)i / DockGrid.ColumnDefinitions.Count;

  double power = (-Math.Pow(((mousePercent - positionPercent)), 2)) / (2 * variance * variance);

  double newSize = 1 + size * Math.Pow(Math.E, power);

  DockGrid.ColumnDefinitions[i].Width = new GridLength(newSize, GridUnitType.Star);

  }

  }

• You may add another event handler for MouseLeave that restores the sizes to 1*:

• foreach (ColumnDefinition cd in DockGrid.ColumnDefinitions)

cd.Width = new GridLength(1, GridUnitType.Star);

Voila! Enjoy.

 

---

Download:

 Click here to run the Express application (Requires Internet Explorer, .Net 2.0 and Avalon Beta1 ) or here to download the source (965 KB)

Feel free to post your comments, or email me if you have any questions!

Many thanks to Peter Blois for providing the Gaussian function.