Thursday, 11 June 2015

Robotics control using Windows Presentation Foundation(WPF) app

Robotics control using Windows Presentation Foundation(WPF) app

This post will guide you throughout the process of robot or embedded system control using a wpf app. Robotics is mainly of two types but sometimes a hybrid model becomes a necessity. Robotics control can be done using a controller but then again, the cost factor comes to play. You won't feel like spending hundreds of bucks for your control of different robots. It's always beneficial when you have a software model for this purpose. Firstly I would like to mention that I am a beginner in this field and this may be not UP TO THE MARK for some but what I believe is that every expert starts with himself/herself as a beginner. 

In this post, the software that I have used to develop the wpf app is Microsoft Visual Studio 2013. Well, my guess is that some lower version  will also be supported.

The basic technique used here is serial port communication using the  SerialPort class details are here. This class helps us to communicate over serial port to other devices. Firstly open visual studio and create the basic layout. This layout will include seven buttons. Front, back, left, right and stop for navigation and connect and disconnect button for activating and deactivating communication. The UI will also include a TextBox control for entering the comport number. Not much coding is required for this part as I assume you have a fair knowledge on C#, xaml. If not, you may refer to msdn for button controls and TextBox controls. The screenshot of the UI is shown below. Please ignore the watermark

Fig 1: Screen shot for the controller

The vertical and the horizontal rectangles are only for show and nothing else. Before going into the code, lets see that how will this work. The buttons that is front, back, left, right and stop correspond to a certain event. When a button is clicked, a click event occurs. Corresponding to that click event, we send a character serially  by using serial port communication. And that character responds to a certain action in your bot.

Fig 2: Flow diagram for the sequential events 

Now our task is to configure each of the buttons to a click event. That click event will send a character serially.

Now in visual studio, once you create the UI, each component in the UI in MainPage.xaml have a property. If you don't find the properties window, press ctrl+w+p. You can edit the different properties using the property windows. Also, you can change, add or remove proerties by the xaml code.

You must remember to maintain a naming convention for the buttons. Else it will be a real confusion as which buttons event is corresponding to which button. In this article, I would list the names used for each button. The name can be changed in the properties window.

Front: front
Back: back
Right: right
Left: left
Stop: stop
Connect: connect
Disconnect: disconnect
Combox for entering the comport number named as: combox

The MainPage.xaml contains a xaml code which will automatically be generated once you drag the components from the toolbox. I won't go into the details. You can have a overview of "How to build your first wpf app" over here.

A screenshot for the MainPage.xaml is shown below.

Now for each button you need to activate the click event. For that double click on the button on the designer in MainPage.xaml. After you double click, you will automatically navigate to MainPage.xaml.cs. In this page we will do the main code. Please remember to activate the click event for each and every buttons.

After browsing to MainPage.xaml.cs, include this line

using System.IO.Ports;

After this you have to create an object for the SerialPort class. This can be done by this statement.

SerialPort sp1 = new SerialPort();

Now the code that was generated after double clicking on the buttons are the methods where you will include your code to send characters serially. But before that you need to connect to your device. Now recall the connect button's click event. Go for that first. The code is shown below.

private void connect_Click(object sender, RoutedEventArgs e)
                String portName = combox.Text;
                sp1.PortName = portName;
                sp1.BaudRate = 9600;
                s1.Text = "Connected";
            catch (Exception)

                MessageBox.Show("Please give a valid port number or check your connection");

Speaking of the above code, we store the text in the combox(The text box where we entered the comport number in MainPage.xaml). Now sp1.PortName=portName is used to assign the port number for your device. sp1 is the object we created before and PortName is the member variable of that class. We assigned the portName that is the comport number (eg: COM13). We have included in a try catch block for the reason that if any connection error occurs. This helps to re enter the comport number if the first case was an error. sp1.Open is for opening the port. You might have notice that s1 .Text doing. Well, it's simply a text block to show the text. You will understand it when you view the source whose download link is mentioned at the end of the article.

Now in this article, I won't show the entire code for MainPage.xaml.cs but only a particular method as an example we will take the front method. The rest can be accessed from the download link,

The code for the front method is shown below.

private void front_Click(object sender, RoutedEventArgs e)
            status.Text = "Forward";


In the above code, the most important part is sp1.Write("1"); Here we are sending the character "1". You can also send a string of characters. 

This same process has to be repeated for other click events. Remember that the basic technique is same. What differs is the way you manipulate your controls. A course on wpf app design might be the best choice for you to experiment with different controls. Try this link here.

Now, once you finish all this, you need to disconnect your device. This will be done by the disconnect button' click event method as shown below.

private void disconnect_Click(object sender, RoutedEventArgs e)
                s1.Text = "Disconnected";
            catch (Exception)

                MessageBox.Show("First Connect and then disconnect");

After continuation of the above mentioned process, you will be able to control your device by this controller. What you need is the will for experimentation. Now on the hardware side, you will access this character and correspond to the action. Not only robotics control but you can use it for embedded application as well. I won't discuss the hardware side code here as it varies from device to device. This controller was tested with AVR series, Arduino, 8051 series and the results were positive. In my upcoming post, I will do the same but by using a Windows phone device. As a prelude, you can download my Windows phone controller here named Mark 1 Pilot. The link for the project for you to download is an onedrive link uploaded in the public folder. Click here to download. If there is any problem with the download, then please comment your email address, I will forward the project to you. This article haven't stressed on the intricate details but I guess after going through this and the links, you will be able to develop a controller of your own.