Isolated Storage in Silverlight 2.0

Firstly, the default limit is 100 KB, but you can increase the quota. The quota increases to predefined levels: 100 KB, 1 MB, 5 MB, 10 MB or unlimited. E.g. when request to increase the isolated storage to 9 MB, it actually increases to 10 MB. The increase quota action must be user-initiated, e.g. a button click event, then a Yes/No dialog box will pop up to ask the user whether to allow the quota increase.

Dim store As IsolatedStorageFile
store = IsolatedStorageFile.GetUserStoreForApplication
dim result as Boolean = store.TryIncreaseQuotaTo(10 * 1024 * 1024) '2MB
If result = False Then DoSomeThing()
store.Dispose()

For the same Silverlight application, the same isolated storage is accessible from different web browsers, which is good. Regarding on how to save and retrieve data from isolated storage, it is exactly the same as Winforms.

Save data:
Dim store As IsolatedStorageFile
store = IsolatedStorageFile.GetUserStoreForApplication
Dim fs As New IsolatedStorageFileStream(fileName, IO.FileMode.Create, store)
Dim sw As New IO.StreamWriter(fs)
sw.Write(stringContent)
sw.Close()
fs.Dispose()
store.Dispose()

Read data:
Dim store As IsolatedStorageFile
store = IsolatedStorageFile.GetUserStoreForApplication
Dim fs As New IsolatedStorageFileStream(fileName, IO.FileMode.OpenOrCreate, store)
Dim sr As New IO.StreamReader(fs)
Dim s As String = sr.ReadToEnd
sr.Close()
fs.Dispose()
store.Dispose()


Open file dialog in Silverlight 2.0

To open a file from client side, we need to use a Systems.Windows.Controls.OpenFileDialog object. I found the OpenFileDialog class in SL 2.0 quite interesting. Compare to WinForms counterpart, it has fewer properties and some property names are renamed too but still quite straightforward.

The surprising part is the return type of SelectedFile property. Instead of return the file path of string type, it returns System.Windows.Controls.FileDialogFileInfo object.

FileDialogFileInfo has a Name property, but it returns the file name only, not the full path of the file. I guess there is no way to retrieve the full path.

To read the content of the selected file, I need to use either:
FileDialogFileInfo.OpenText() which returns a System.IO.StreamReader object to read text,
or,
FileDialogFileInfo.OpenRead() which returns System.IO.Stream to read non-text content.

Example (select an image file and display the image on the button):

Dim dlg As New OpenFileDialog
If dlg.ShowDialog() <> DialogResult.OK Then Return
Dim img As New Image
Dim bitmap As New BitmapImage
bitmap.SetSource(dlg.SelectedFile.OpenRead)
img.Source = bitmap
aButton.Content = img


More Silverlight 2.0 games

For Silverlight enthusiasts,

Tunnel Trouble




Zero Gravity

Silverlight DeepZoom Part 2

I have rewritten the code sample released on Expression Blend and Design blog last week into VB version with the following changes:

1.
When the MultiScaleImage (MSI) is loaded, it displays the images as you put them in DeepZoom Composer. I overwrite this default behaviour by handling MotionFinished event of MSI to call ArrangeIntoGrid() method. An interesting fact, if I handle the MSI's Loaded event, nothing will display on screen.

2.
In ArrangeIntoGrid(), I change the assignment of number of columns and rows of MSI into this:
Dim columns As Integer = Math.Sqrt(totalImages + 1)
Dim rows As Integer = totalImages / columns
where totalImages is total number of MultiScaleSubImage of MSI.
This is to ensure no matter how many images I put into my DeepZoom application, the application will always tries to arrange images into square tiles and fill the width of the screen when loaded for the first time.

3.
I add control to Zoom() method so that users cannot zoom in / out too deep until the view port is gone. I saw an example of using ViewportWidth property to control the zooming, but it is not perfect. So I calculate the current zoom factor to control the zooming. This method is better but still not perfect.

So here is my source code and video demo.



Outstanding issues:

• How to perform hit testing to identify selected image?
• How to retrieve meta properties of selected image?
• How to prevent users from dragging the viewport out of the boundary?
• A better way of filtering besides using Opacity = 0
• Arrange the images of different sizes 'properly' into grid
  

Silverlight Charting Component

I just found a Silverlight charting component suite called Visifire. It is open source and is licensed under GPL. From the demo video below, it really get me excited, it supports most of the common chart types we need - bar, line, area, pie, stacked bar, and combination of chart types in one chart.



I haven't play it in Visual Studio, but by the look of the online Chart Designer at Visifire website, I guess most of the features are already exposed through properties, so it should be quite easy to use.

DeepZoom: Does DeepZoom Composer compress your images?

I read a complaint from a reader about the lost of image quality in DeepZoom last night, which puzzled me as I never encountered this problem before. So, I decided to fire up DeepZoom Composer to test it.

So here is the original picture submitted by my reader....


And this is the result achieved by the reader...


And it is very obvious that both images are different. Judging from the file size, I guess the second image is cropped from the screenshoot.

From my understanding, DeepZoom composer converts images into JPG format then resizes and slices the images. There should be no compression going on.

So, I took the original image, DeepZoom it then copy the output to my Silverlight project. And the result is shown in the screenshot below....



The original image is on the left hand side. In the middle, you can see my testing DeepZoom application running in Firefox. On the right had side is the DeepZoom-ed image from the reader.

In my testing project, the output image from DeepZoom Composer looks exactly the same as displayed in MultiScaleImage control of Silverlight, so I leave it out from the screenshot capture. Also, I tested it on IE7, and the result is still the same as in Firefox.

If we compare carefully, the image shown in Firefox has darker colours. Beyond this, I can't spot any obvious difference in quality. I guess the darker colour is caused by conversion from PNG format to JPG format (I have tested it with other JPG images as the source images, and the output looks exactly the same as the source images).

In conclusion, DeepZoom Composer does not change your images although some differences may be caused by conversion into JPG format.

So, now the interesting question is - how the reader got that kind of output?? I am puzzled....is it caused by IE6 or other browsers? Or some properties are changed for the MultiScaleImage control??

By the way, you can download my test project from here. The DeepZoom project is a VB project. The mouse and keyboard support codings are not written by me but taken from MSDN Code Gallery.

Silverlight DeepZoom demo

DeepZoom (previously called Sea Dragon) is a Microsoft Research technology which is going out from the research lab soon. DeepZoom, as the name implies, allows you to zoom into the very details of images. How much you can zoom in depends on your image resolution.

The video clip below is the DeepZoom application that I setup with mouse and keyboard supports. The application contains about 30 images, but you can only see 22 on the main screen. The remaining images are hidden inside Confucius eye. The images are 2 to 8mb each. The total output of the application is more than 200mb. That is why I upload the 50mb video clip but not the >200mb DeepZoom application to the web.

Zooming and scrolling of DeepZoom are actually VERY smooth, but the screen recording software degrades the quality. Also, I didn't edit any part of the recording, somehow the length of the video just match the music length coincidentally.



DeepZoom application is very easy to setup, the most time consuming step is to arrange the image in DeepZoom Composer.

Some limitations of DeepZoom:
- When you zoom in or out too deep, the images just gone. And you need to refresh it to start again. I am unaware of any technique to prevent users from doing this.

- How deep you can zoom is limited by the capability of DeepZoom Composer. I tried to put image inside another image to generate 30 zoom levels. And the DeepZoom Composer crashed. In my second attempt, I tried to generate 10 zoom levels, DeepZoom Composer didn't crash at first but failed to export the correct output. When I closed down the composer then re-opened the project, DeepZoom Composer failed to open it. So, the video shown above is my third attempt (and also NOT my best attempt).

Since the technology is still in beta, I hope the limitations are solved by the final release.

In addition, I am curious to know how the Hard Rock DeepZoom example detects the on focused image and display relevant side note to the image. Hmmmm...without this feature, DeepZoom isn't that useful at all...

Adobe AIR vs Microsoft Silverlight: A developer's perspective

Adobe AIR is competing with Microsoft Silverlight in RIA domain. Adobe AIR is released a few days ago, so it is one step ahead than Silverlight 2.0.

Basically, from developer perspective, both technologies offer different paradigms. AIR is helping web developers to make desktop applications using ActionScript etc. While Silverlight is better for desktop app developers to move towards RIAs using XAML + code behind approach - the .Net 3.0 way. Web designers and developers will probably prefer AIR because of familiar development environment.

In addition, Adobe AIR SDK is available for Windows and Mac platforms. Silverlight has poor support for development on Mac - I am not aware of any decent Silverlight IDE tool is available for Mac OS yet. Putting aside the lack of OS support issue, I found that Expression Blend is quite easy to use - so designers shouldn't be worry when designing for Silverlight apps.

As for dekstop-application support, Silverlight is lacking this capability. Since Silverlight is a subset of WPF, it shouldn't be too hard to build a full blown desktop application using WPF built upon the same codebase with Silverlight (provided WPF and Silverlight 2.0 use the same XAML syntax). The only disadvantage is the .Net 3.0 deployment issue for Windows XP. Also, WPF is not a cross platform technology.

As for AIR, besides drag-and -drop, and minimize to system tray, there is not much native OS support. I have tried the AOL Music desktop application, when putting the window into dock mode, it is not docked like Windows Sidebar but placed at the desktop edge as collapsed window. I think the current OS support is enough for most of the situations.

In term of UI design, desktop applications usually are designed based on some standards, e.g. the Office 2007 ribbon UI. For web designers to design desktop applications, it is likely that they will get too creative until we have to change our behaviour in order to use the oddly designed and seriously compromised UI. Desktop AIR application, built using AJAX+HTML, may just be a web-application without web-browser window border.

For LOB applications, Silverlight gives better advantages. It is already confirmed that Silverlight 2.0 has built in data grid control. Third party component vendors are developing more Silverlight controls as well. ADO .Net team is also coming up with ADO.net Data Services (a.k.a Astoria) technology. As a subset of .Net framework, it is easier to inter-operate with WCF and WF services. So, I believe Silverlight will have more tools and resources for us to build web-based LOB applications.

Deployment isn't a big issue since both technologies are easy to deploy (approx 10mb download + a couple of seconds to install). If Siverlight 2.0 is built into Windows 7 by default, then it is even easier for Silverlight developers in the future. Another concern is the application update. .Net Framework has ClickOnce deployment technology to simplify application updating for desktop applications. I am not sure how easy it is to let the installed AIR applications auto-update themselves.

When putting Silverlight and AIR side-by-side, it is obvious Silverlight has something to catch up. Depending on the purpose of the applications, I tend to believe Silverlight will surpass Adobe AIR as the best RIA development platform in long term.