Silverlight Ink SDK Sample – hosted through Silverlight Streaming


With the ‘Silverlight Streaming’ service you can now invoke a hosted Silverlight application using an IFrame – without any JavaScript! This allows you to embed Silverlight content on sites that do not allow adding JavaScript, as long as they support IFrames. For details refer to this MSDN topic.


To demonstrate this great service, I have taken the Silverlight Ink SDK Sample, uploaded it to Silverlight Streaming and then embedded it on this blog using an IFrame, like this:


<IFRAME src=”http://silverlight.services.live.com/invoke/34348/InkCanvasSample/iframe.html” frameBorder=1 width=400 scrolling=no height=300></IFRAME>


The highligthed part is the key: it specifies your Silverlight Streaming application ID and name of your app. For more information about Microsoft Silverlight Streaming, visit http://silverlight.live.com/.


Here is the sample for you to try out:


 

Comments (4)

  1. Are you using Windows Journal to jot down your thoughts on your Tablet PC? Did you ever wish to publish

  2. Kenny says:

    How can you make the person on the other computer see what you are doodling? And how do you save it to load on later?

  3. swick says:

    Hi Kenny,

    you can serialize the the StrokeCollection you get from InkPresenter.Strokes into a string that you can post back to your server. From there you can then share the ink with others, save it for later, perform handwriting recognition, create an image from the ink, etc. See some JavaScript code below that takes a StrokeCollection object and returns an XML string that represents the serialized ink.

    Thanks,

    Stefan Wick

    function saveStrokes(strokeCollection)

    {

     var inkXML = "<sc>";

     if (strokeCollection != null)

     {

       var strokeCount = strokeCollection.Count;

       for (i=0; i<strokeCount; i++)

       {

         var s = strokeCollection.GetItem(i);

         inkXML += saveStroke(s);

       }

     }

     inkXML += "</sc>";  

     return inkXML;

    }

    function saveStroke(s)

    {

       var inkXML = "<s c=’" + s.DrawingAttributes.Color

        + "’ oc=’" + s.DrawingAttributes.OutlineColor;

       inkXML += "’ w=’" + s.DrawingAttributes.Width

        + "’ h=’" + s.DrawingAttributes.Height + "’ >";

       var stylusPointCount = s.StylusPoints.Count;

       for (j=0; j<stylusPointCount; j++)

       {

           var sp = s.StylusPoints.GetItem(j);

           inkXML += "<sp x=’" + sp.X + "’ y=’" + sp.Y

            + "’ p=’" + sp.PressureFactor +  "’ />";

       }

       inkXML += "</s>";

       return inkXML;

    }

  4. Kenny says:

    How do you use this JavaScript code to exract xml file? Do you add it to index.html or to the .js folder? I cannot serialize it to a string to post it back to my windows live server!