[Azure instance] An interesting Silverlight application: Recording and playing simple strokes

Using Silverlight technology and the Windows Azure platform, we have implemented an interesting application: Recording and playing simple strokes.
This is the first complete and practical example of streamcompute trojan in the Azure getting started series. (It is also the first in China ~ O (worker _ worker) o)

 

 Onlookers:

Http://y.cloudapp.net

 Some interesting simple strokes:

Http://y.cloudapp.net/v.aspx? D = 3153113638000 estrus of a stranger
Http://y.cloudapp.net/v.aspx? D = 2162592728297 a robot painted by a stranger
Http://y.cloudapp.net/v.aspx? D = 3882205000000 cartoon cat drawn by a beautiful friend

[Latest works list http://y.cloudapp.net/Gallery.aspx]

"Immediately try http://y.cloudapp.net/v.aspx]

 Introduction:

Stick LoveIs an online application based on Silverlight 2.0. It is simple and interesting: allows you to draw simple strokes online, save the work, and share your masterpiece with friends through a url. It is worth mentioning that: she supports playback, that is,When others appreciate your masterpiece, they can also appreciate the whole process of your work! Just as if you were standing in front of him and painting it!

 Core part:

Technical Breakdown:

In Silverlight InkPresenter's exploration of path playback, we explored the feasibility of using the Inkpresenter control of Silverlight to implement path playback, and wrote a prototype demo.

Stick LoveIt is the work completed after re-development based on the prototype introduced last time. In terms of path playback, the previous ideas are used. In addition, Azure Service Platform is introduced. Its canvas data storage, Program Hosting, background processing, Comment management, and other functions are all deployed on the Azure cloud computing Platform.

This article describesStick LoveIt involves the architecture of the Azure platform. For more information about path Playback Technology, see explore Silverlight InkPresenter to implement path playback.

1. Entity structure for storing stick stroke data
   In the article "Exploration", we come to the conclusion that two string variables are required to save the sketch drawing data: one to save the value of "point, the other is used to save the time of each "point. In actual applications, we also need to add a primary key to maintain data in the database.
   According to [Azure Services Platform Step by Step-12th], how to use the Azure Storage Table entity mentioned in "Use Table Storage in Windows Azure chat room" is implemented, we create an entity named StickDrawing. Add "Guid" to the object as the primary key. (To shorten the parameters, I did not use the real GUID) Code
   Public class StickDrawing: Microsoft. Samples. ServiceHosting. StorageClient. TableStorageEntity
   {
   Public StickDrawing ()
   {
   PartitionKey = "";
   RowKey = (DateTime. MaxValue. Ticks-DateTime. Now. Ticks). ToString ();

   }

   Public string Guid
   {
   Get {return PartitionKey ;}
   Set {PartitionKey = value ;}
   }

   // Two important parameters for playback replay
   Public string inkStringForPlayback {get; set ;}
   Public string inkStringStartTimes {get; set ;}
   }

2. Save stick stroke data
   Similarly, according to [Azure Services Platform Step by Step-12th] to implement the method mentioned in Windows Azure chat room-using Table Storage, we create an ADO-based object class for StickDrawing. the DataContext of the NET Services Client. In
   DataContext adds a public attribute of IQueryable <StickDrawing> for query, and adds the AddStickDrawing method for data storage.
   Code
   Public class StickDrawingDataServiceContext: TableStorageDataServiceContext
   {
   Public StickDrawingDataServiceContext (StorageAccountInfo accountInfo)
   : Base (accountInfo)
   {
   }

   // Defines the public attribute StickDrawings and returns the StickDrawings class entity in all data service contexts.
   Public IQueryable <StickDrawing> StickDrawings
   {
   Get
   {

   Return this. CreateQuery <StickDrawing> ("StickDrawings ");
   }

   }

   // Add an object
   Public void AddStickDrawing (StickDrawing dm)
   {

   This. AddObject ("StickDrawings", dm );
   This. SaveChanges ();
   }
   }

3. Read specific stick stroke data
   With the above data structure, we can make a query. There are two queries: one is to obtain a single object based on the primary key, and the other is to obtain the latest N objects (the latest works are displayed in Gallery ). The query method is to operate the IQueryable <StickDrawing> StickDrawings attribute in the StickDrawingDataServiceContext class. The following code retrieves an object based on the primary key. Code
   Public StickDrawing GetStickDrawing (string pKey)
   {
   StorageAccountInfo accountInfo = StorageAccountInfo. GetAccountInfoFromConfiguration ("TableStorageEndpoint ");

   TableStorage. CreateTablesFromModel (typeof (StickDrawingDataServiceContext), accountInfo );
   StickDrawingDataServiceContext context = new StickDrawingDataServiceContext (accountInfo );

   IQueryable <StickDrawing> stickDrawingQ = context. StickDrawings. Where (p => p. Guid = pKey );

   Return stickDrawingQ. FirstOrDefault ();
   }

4. Share a pencil drawing with a URL
   With step 3, the "URL sharing" feature is very easy and there are many implementation methods. Currently, my method is the most primitive: QueryString. Input the primary key in QueryString, and then read the data in Pageload of the page program or the main function of the Silverlight program. If you think QueryString affects the appearance, try URL Rewrite. This feature was first introduced in Azure SDK March and released on MIX09 (see exciting new features in MIX09-Windows Azure (March 2009 CTP) in a few days, the Trojan horse will write a blog post on the use of URL Rewrite in Azure.
5. Design Web Service for Silverlight for Data Interaction
   As we all know, Silverlight 2.0 cannot directly interact with data (for changes in Silverlight 3.0, see Microsoft.. net ria Services), and its operations on the data layer must be completed through WCF or Web Service. Here we use the Web Service method.
   For example:
   Code
   [WebMethod]
   Public StickDrawing [] GetStickDrawings (int top)
   {
   StorageAccountInfo accountInfo = StorageAccountInfo. GetAccountInfoFromConfiguration ("TableStorageEndpoint ");

   TableStorage. CreateTablesFromModel (typeof (StickDrawingDataServiceContext), accountInfo );
   StickDrawingDataServiceContext context = new StickDrawingDataServiceContext (accountInfo );

   Return context. StickDrawings. Take (top). ToArray ();
   }

6. Design of comment function
   To enhance the interaction, we need to add an independent message board under each sketch.
   How to design an object structure? It is not difficult to create a Comment entity class, the PartitionKey is consistent with the Guid primary key of StickDrawing. In this way, the PartitionKey attribute in the Comment object class acts as a role similar to the "foreign key" in traditional relational databases. There is a one-to-many relationship between StickDrawing and Comment. In this case, the Comment PartitionKey cannot be used as the primary key independently-because it is not unique. It doesn't matter. We can also use its Rowkey as the primary key. (If you do not know about PartitionKey and Rowkey, see [Azure Services Platform Step by Step-9th] Windows Azure Storage overview].)
   Comment entity class Code: Code
   Public class Comment: Microsoft. Samples. ServiceHosting. StorageClient. TableStorageEntity
   {
   Public Comment ()
   {
   PartitionKey = "000000"; // The PartitionKey must be consistent with the StickDrawing class.
   RowKey = (DateTime. MaxValue. Ticks-DateTime. Now. Ticks). ToString ();

   }
   Public string Name {get; set;} // message holder Name
   Public string Content {get; set;} // message Content
   }

   Get all comments for a pencil drawing based on different partitionkeys: Code
   StorageAccountInfo accountInfo = StorageAccountInfo. GetAccountInfoFromConfiguration ("TableStorageEndpoint ");
   TableStorage. CreateTablesFromModel (typeof (CommentDataServiceContext), accountInfo );
   CommentDataServiceContext context = new CommentDataServiceContext (accountInfo );
   List <Comment> listComments = context. Comments. Where (p => p. PartitionKey = d). ToList ();

PS: as I plan to add more features, the complete source code is not provided for the time being. I believe that after reading the above, the reader will no longer need the complete source code. O (partition _ partition) o

 

When the time comes, I will place all the source code of the Stick Love project on Codeplex. Address: http://sticklove.codeplex.com/
If you like Stick Love, I 'd like to publicize it more ~~ More Comments ~~ Thank you ~ O (partition _ partition) o