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.

Wednesday, 8 October 2014

Developing windows phone 8.x apps - Jumpstart

Hello everyone out there. This post is how to develop windows phone 8.x apps be it for Windows phone 8.0 or 8.1 the overall process is more or less similar. The post is divided into parts and it will clearly explain about all the steps that are required. In case of any problem encountered at any steps, mail me by clicking here.

Let's talk about some pre-requisites before getting into the developing part. To talk about the pre-requisites, you don't need to have a hi-fi programming knowledge. All you need is Microsoft Visual Studio 2012 or later and some interest of learning something new with a good knowledge of logical reasoning. Microsoft visual studio can be downloaded from msdn network by Microsoft. Note that you need to have a developer account for publishing your developed apps. For that the best way is to go via dreamspark. A bing or a google search might help you all.
For errors or problems faced or encountered during the installation of Visual studio, always feel free to comment here or drop a mail here.

Once you have downloaded Microsoft Visual Studio, open it by clicking on it.
Figure 1: Start screen of Microsoft Visual Studio 2013
  Once opened, under start menu, click on New Project.

Figure 2: Start page of  Visual Studio. Enter the name of your app here.

Once you click on New Project, a new dialog box will open. After opening, Expand: Visual c#--Store apps-- Windows phone apps. Then browse down to Blank app(Windows phone silverlight). Give a name of your app. Well for starters I used a simple hello world application. Now click on ok. 

UI part (xaml code)
Now, after you have clicked on ok, the page will open and the tab MainPage.xaml will open. Here in this page we will design the UI for our app. Now as far as this post is concerned, we will make a simple hello world application. The app will consist of a single page and will be made by incorporating a textbox, a textblock and a button. Each of these controls are available under the toolbox tab of your Visual Studio.
Figure 3: MainPage.xaml In this page, you have to add the UI elements.
In Figure 3, notice that some code is already present. The code is in xaml and it's the base code for your UI. On the extreme left side, notice that a Toolbox tab exists. Click on it to add the UI components. The UI components will include
1: A textBlock
2: A textBox
3: A button
Each of the components will have their own properties under the properties tab located on the bottom right corner of the screen as shown in figure 3. Add those components and edit them accordingly. Also notice that two TextBlocks already exists. According to Windows Phone design guidelines, the upper textblock will consists of the name of your app (in upper case) and the lower one will consists of the name of the page (in lower case). Edit them accordingly from xaml code. After editing and adding the components, you will get the screen somewhat similar to the figure 4.
Figure 4: Layout after the adding of components.
Now let's change the default texts and write them here in accordance to our wish.

Figure 5: Final layout.
Well we are not yet doe with the UI, The button acts as an event. When an user will click on the button, the text in the textbox will be displayed in the textblock. In order to achieve that, we need to create an event handler. To create an event handler, double click on Go and you will automatically be navigated to MainPage.xaml.cs page. In this page you will write the c# code for your app. Another task that you have to do in MainPage.xaml page is to assign names to the components. You can assign names by seleting the component and browsing to the properties tab.


Once you double click on Go you will automatically be navigated to MainPage.xaml.cs

Figure 6: MainPage.xaml.cs
Now under the method void Button_Click(object sender, RoutedEventArgs e), we will add the following code to make our app work.

String msg = ip.Text;
op.Text = msg;

A simple two line code is all what you need to run this app. In the above code, we are storing the text available in the textBox in a temporary string type variable named msg. Then we are storing/Displaying that string in the TextBlock. My naming for the textbox is ip and for the the textblock is op.
ip and op are objects and text is the property. The text property of the object is accessed by '.' (dot) operator.

Now your app is ready for testing

Once you developed an app, you need to test it. When you will be installing visual studio, an emulator is also installed. The emulator is a virtual device that runs on hyperv environment. Now in case of my PC, it doesn't supports hyperv. So I have deployed my apps on a Nokia Lumia 520. For selecting your method of deployment, see figure 7's highlighted area. You can access the emulator from the drop down menu that appears after clicking on the arrow on it. To deploy your app, press F5 and then the app will run. As already mentioned, I don't have hyperv so the scrrenshot of the working app is shown in figure 8.
Figure 7: Deploying Windows phone apps
For deploying your app in the device, your phone must be developer unlocked. 

Figure 8.1: Status before clicking on Go
Figure 8.2: Status after clicking on Go

Now as you have seen that in figure 8.1, the textblock shows the previous message. In Figure 8.2, the textblock shows the message written in the textbox. 

Developing Windows phone apps is not a herculean task. You must have an idea and some skills to jumpstart your developing. Now for publishing your apps, you need to have a developer account in Windows store. If you are a student, then dreamspark will help you alot. This post was only for begineers. Channel9 and MSDN provides sufficient tutorials for developing Windows phone apps.