Introduction

This article would demo you a simulation of Sliding Window Protocol with different parameters to see how the protocol works. It's a visual representation of the Sliding Window Protocol.

Requirements to build the application

We need to have the followings to proceed:

• Visual Studio 2010
• Expression Blend 4

Create WPF Application

Fire up Visual Studio 2010, create a WPF Application and select the version as .Net Framework 4, give the solution a name such as SWPSWPF.

Brief Description about Sliding Window Protocol

Sliding Window Protocol is a feature of Data Transmission Protocol. This protocol is used where reliable in-order of packets is required. That means we would have a set of packets that are going to be sent, and these packets would transmit to the Receiver.

The sending method is based on 3 parameters such as Window Size, RTT and Loss Percentage.

Window Size is a set of packets that is going to be sent per transmission. For example if Window size is 4, 4 packets are going to be sent.

RTT is acronym of Round Trip Time; this is basically a time which verifies all the packets of the particular window size are delivered.

Loss Percentage is a percentage value, which would decide what is the maximum data loss can be done per transmission.

Although I have given a brief introduction, for details you can refer the terms in Wiki.

Design of the Application

Let's do some design, which I love to do. First of all we need a set up packets, for this application I have taken 19 packets as sample. We would have set of Sender packets and a set of Receiver Packets.

Open the solution in Expression Blend 4. Add a canvas to the Window, as we are going to use some animations which we will see later; canvas is one of the best panels to begin with for animation.

Let's design a packet.

A packet would consists of a packet number and a number that would identify the packet position in a Window Size.

The xaml for a packet goes like this:

Now that we have designed a packet, let's add set of 19 sender packets and set of 19 receiver packets.

Let's add a Window frame to both sender and receiver, which would stay in the beginning of the packets. The window frame would increase based on the size provided. Also it would move to next set of packets on completion of current one.

Now, while transmitting we need to display a packet is being transferred. So let's have another set of 19 packets which would remain hidden in the application till the data is being transferred. A quick note here, making the Visibility Hidden mandatory for these set of data packets for the sake of animation.

Let's do some C# code here.

First of all we need to add a helper method for animation.

Add a class to the application, name it as StoryboardHelper.cs.

In this class add a public enum name it as StoryboardType. Add two enum values such as NULL & DoubleAnimation.

Inherit Storyboard class and INotifyPropertyChanged interface.

We will add 3 event handlers such as OnAnimationCompleted, OnPacketLoss, and OnLossTime.

We would have some properties too that would help us getting and setting values in helper class.

We would subscribe to the Storyboard's Completed event, and a DispatcherTimer's tick events in the base constructor.

Here is the complete code of the StoryboardHelper. So what would you get using this helper class? You would get the events when it starts, stops and also a timer object.

Now go to MainWindow.xaml.cs inherit the INotifyPropertyChanged interface.

Before writing some code into MainWindow.xaml.cs, we need to add some more controls to our application. These controls would set parameters to the simulation, as we have discussed earlier.

As you see from the above image, we have added a WindowSize Text input, RTT, LossPercentage & MessageType as selective inputs. We have added a new parameter Message Type, whoch would have two types such as Selective and Cumulative. This is a way of sending the messages when received or lost.

Also we have added 3 buttons, which self-describe. That means to handle the animation at any point of time.

As we are in designing again in Blend let's add a Datagrid that would display the messages, or any information that is happening during the animation.

Let's do some initial loading and event subscriptions for the application in the constructor.

The basic idea of the PropertyChanged event handler is to handle the width of the Window frame to resize based on the input provided.

As we discussed above to display messages, let's create a class which would have two properties, string Message & string Time. And of course we need an ObservableCollection.

As soon as all parameters are set and Start button is clicked, we would transmit data packets; that means we would start the animation based on the parameters.

In InitializeAnimation method, we are adding a storyboard helper class object to the collection for both Data Transmission and Acknowledgement.

Then we start the storyboard animation. As soon as a storyboard animation completed event fired. We log the message and change the Background of the packet at sender and receiver end.

If there is a loss percentage parameter include (if it's not 0), then we have a method VerifyAndMoveSlider() which actually verifies which storyboards are completed and increases the count. If the count does match with the Window size then only the slider window animation starts to move the window frame both at Sender and Receiver side.

All the Packet and Acknowledgement storyboards are identified with the packet number with their type, for example if packet number is 5 then Storyboards would be Packet_5 and Ack_5. Which helps to identify a storyboard in the collection. Whenever there is a packet loss, the particular storyboard is removed.

The change in background of the packets are done using the LinearGradientBrush static resource defined in the Window.

Let's run the application and see how the animation with respect to the protocol works.

As you see in the above image, the packets are being transferred are in Red gradient, on successful receive the receiver gets the packet and it's green. An acknowledgement packet is blue. After a successful acknowledgement receive at the sender's end the packet changes to green.

In the above image: if there are some losses in packets then sender has to resend it.

Conclusion

This demo successfully visualizes the Sliding Window Protocol. Find all code in the sample application. Hope this article helps you for a start in building such type of protocol visualization.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 12 articles on DotNetSlackers. View other articles or the complete profile here.