Customer Support in Silverlight

Imagine the following

  • You have built the world's best Silverlight twitter client, but every now and then your app crashes
    OR
  • You deployed your great Line Of Business Silverlight application, but you have no idea if people like it or not
    OR
  • Every now and then you get a phone call from your customer: "I cant see the details"

So what do you do?

Instead of having endless support calls, email conversations, tracing in log files, lookups in log-databases etc… use the below Feedback Control

image

 

With this Feedback control you will get:

  1. A screenshot of what the user is looking currently at
  2. All system information like
    1. OS version
    2. Last reboot
    3. Silverlight version
    4. Your application version
    5. …. and heaps more…

 

Demo of the control embedded in my awesome Silverlight demo app

 

Demo of my Silverlight demo LOB here (new window) 

 

How does it work?

1. Create a screenshot of the current Silverlight app with a WriteableBitmap

feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);

2. Collect system information in Silverlight with classes like

  • Environment
  • HtmlPage.Document
  • HtmlPage.BrowserInformation
  • Application.Current.Host
            // Collect system info
            StringBuilder sbStringBuilder = new StringBuilder();

            sbStringBuilder.AppendLine("OSVersion: " + Environment.OSVersion);
            sbStringBuilder.AppendLine("System start: " + Environment.TickCount.ConvertToNiceTime());
            sbStringBuilder.AppendLine("CLR Version: " + Environment.Version);

3. Upload the screen to your server by converting the WriteableBitmap to a PNG

                ImageTools.Image image = ImageTools.ImageExtensions.ToImage(_screenShot);

                using (MemoryStream writestream = new MemoryStream())
                {

                    PngEncoder encoder = new PngEncoder();
                    encoder.Encode(image, writestream);

                    byte[] bytes = writestream.ToArray();

                    MemoryStream readStream = new MemoryStream(bytes);

                    UploadFile(readStream);
                }

The conversion to PNG is done via this nice ImageTools library from codeplex (PNGEncoder can be found there)

 

The file upload is done via a nice and easy HTTPHandler on the server side that receives PNG's and saves them to a specific folder
More info here in Tim Heuer's video about Uploading files in Silverlight with source code

    public class FileUploadReceiver : IHttpHandler
    {
         private const string UploadFolder = @"C:\temp\Upload";


        public void ProcessRequest(HttpContext context)
        {
            using (FileStream fs = File.Create(FileTools.GetUniqueFilename(UploadFolder, ".png")))
            {
                FileTools.SaveFile(context.Request.InputStream, fs);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

 

All done!

What I didn't want

  • Hard to setup
  • Hard to maintain and fragile over time
    • 1 upload folder has to be writeable
    • Hint: Make the File upload (URL) global in your company (feedback.mycompany.com) and you don't have to worry about having the file upload handler in the same project
  • No heavy CPU lifting on the client NOR server
  • Hard to use user interface
  • Bad user experience because of copying and pasting screens or sysinfo from different places

 

How to use it in your own solution?

  1. Download from github
    1. Feedback control
      http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application/FeedbackControl/
    2. File upload handlers
      http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application.Web/UploadHandlers/
  2. Copy the Feedback control to your Silverlight app
  3. Fix the Upload URLs

    string _baseUrl = "http://{0}/Silverlight-Feedback/UploadHandlers/";
  4. Download ImageTools library from codeplex and add 3 references to your Silverlight app
    1. ImageTools
    2. ImageTools.IO.Png
    3. ImageTools.Utils
  5. Insert the following code on your "Feedback" button or "About" button

    // Show window and we are done
    FeedbackWindow feedback = new FeedbackWindow();
    feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);
    feedback.Show();

Done with Silverlight
In your web app

  1. Copy the Upload handlers to your Web app
  2. Fix the Upload folder in the web.config "FeedBackUploadFolder"

All done - Have fun!

 disk_green
Whole demo solution can be found here
http://github.com/peitor/silverlight-feedback

And the current version as per 2010-06-06 here
Single zip file 600KB
some were worried to install git ;-)

 

PS

#1
image1%5B1%5D[1]
Make sure to have a note about Privacy!

 

#2
Add the upload folder test to your vsValidate page and check if the folder is writeable from your web app domain user

image
Figure: Make sure to verify that your upload folders is writeable on your zsValidate page. Do you have a zsValidate page to make sure your website is healthy?

 

#3
Imagine the following scenario

  1. During a customer support phone call, you told your user to reboot his machine
  2. The user reboots his machine
  3. He sends you his feedback with sys info
  4. You look at the provided system information and see

Name: Jimmy the client
Contact: jimmy@gfader.com
Comment: This is a great app! But crashes on me.

SysInfo:
UserName: Jimmy Muster
Roles: Administrator
LOB Silverlight version: 1.0.0.0
----

OSVersion: Microsoft Windows NT 6.1.7600.0
System start: 6 h. 33 min. 6 sec.   <-----  YOU SAID YOU DID A REBOOT
CLR Version: 4.0.50524.0
Host.Source: http://localhost/Silverlight-Feedback/ClientBin/Silverlight-LOB-Demo-Application.xap
Host: localhost
Host.Port: 80
BrowserInformation.Name: Netscape
BrowserInformation.BrowserVersion: 5.0
BrowserInformation.Platform: Win32
BrowserInformation.ProductName: Firefox
BrowserInformation.ProductVersion: 3.6.3
BrowserInformation.UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0
BrowserInformation.CookiesEnabled: True
Windowless: False
MaxFrameRate: 60
AverageProcessLoad: 0
AverageProcessorLoad: 0
GpuCollection.Count: 2
ID:1031, 7.15.11.7644, 4318
ID:1031, 7.15.11.7644, 4318

13 comments:

LEster CAlderon said...

nice application but i need to send a email with the image embedded,

Peter Gfader said...

There is no out-of-box way to send emails in Silverlight (no API).

Except: link to "mailto:peter@gfader.com?Subject=X"....
But that is not very nice.


I would definetely upload the content to the server and then send the email from the server. Easy!

Anonymous said...

Hi,
this is great work!
I'm asking if it's possible to capture the screenshot of the entire user desktop instead only the application area.
I guess the line to be modified is
feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);
but I've not idea on how to modify it.
Regards

Peter Gfader said...

Hi Anonymous

Unfortunately this is not possible to do without a native API call. That native API is outside the Silverlight plugin which is not possible without some hacks and tweaks.

If you really want to go that route see the link below. I would not recommend that.

Quick explanation
http://forums.silverlight.net/forums/p/163378/368591.aspx#368591

How to use native CLR API
http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/442/Silverlight-4-Hack-Use-Native-Desktop-CLR-Without-COM-Registration.aspx

Peter Gfader said...

Here is the recording from ruiespinho
http://www.youtube.com/watch?v=Mp6pgL2bDDk

Anonymous said...

Hey Peter, great job!

One thing though, I went to the following URLS to get the sources of the Feedback and HTTP Handlers:

http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application/FeedbackControl/

http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application.Web/UploadHandlers/

But I get the same VS project as the one you posted at this URL:
http://shrinkster.com/1e10

Please advice, thank you

Manny

Peter Gfader said...

Hi Manny

Yes the sources are the same.
The short URL was just a link to a zip file, for easier download.

Kiquenet said...

it's great, thansks,

http://shrinkster.com/1e10 fails to me, not found

rams said...

great control. What's the licensing model?

Anonymous said...

Just grab the source and use it.
I guess the licensing model is: use it at your own risk ;-)

Anonymous said...

You can download the zipped source from here

https://github.com/peitor/silverlight-feedback/zipball/master

Admirador said...

It's great. Any updates for WPF application too ?

Peter Gfader said...

Hi Admirador
It should be "easy" to adapt the Silverlight code to work in WPF and Winforms.
The other way around was hard ;-)

Peter

Post a Comment

Latest Posts

Popular Posts