Arduino Control Using a WPF Application

This article will guide you through the process of robot or embedded system control using a WPF application. There are mainly two types of Robotics but sometimes a hybrid model becomes a necessity. Robotics control can be done using a controller but then again, the cost factor is also relevant. You won't feel like spending hundreds of bucks for your control of various robots. It's always beneficial when you have a software model for this purpose.

The following hardware is required:

1. An Arduino developer board (I have used an Arduino Leonardo).
2. Light Emitting Diode (LED).

The following software is required:

1. Arduino IDE
2. Visual Studio

Arduino

An Arduino is a developer board built around the Atmel AVR microcontrllers. They are used in embedded systems and robotics applications, this open-source hardware is one of the best developer boards to design your embedded systems.


Figure 1: A layout of an Arduino Leonardo developer board. Picture credit: Arduino.

Let's begin with the Arduino part first. We will be turning on and off an LED and using a WPF app. First let us see the circuit diagram. We will connect the LED to pin number 13. The LED's longer pin will be in the pin number 13 whereas the shorter in the GND pin.


Figure 2: Circuit diagram.

In the preceding figure, the resistance may or may not be used. However it's safe to use it. In that case you need 220 ohm to 1K ohm resistance.

The LED is connected to the pin 13 and GND. Our next course of action is to program the Arduino. First connect the Arduino to the USB. For drivers and the IDE, visit arduino. Now after connecting the Arduino board to your PC, go to Tools, then port to select the port where your Arduino is connected. Also select your developer board by clicking Tools and selecting Board. The following Figure 3 shows the screenshot of the IDE where you need to select.


Figure 3: Screenshot of the IDE where you need to select the port and the board.

After selecting the board and the port, we will go to the programming.

void setup()
{
    pinMode(13, OUTPUT);
    Serial.begin(9600);
}

void loop()
{
    if (Serial.available() > 0)
    {
        char c = Serial.read();
        if (c == '1')
        {
            digitalWrite(13, HIGH);
        } else if (c == '0')
        {
            digitalWrite(13, LOW);
        }
    }
}

Let me explain the code first. In the setup() function, we initialize the pins to be configured as input or output. The pinMode() command will allow us to do that.

pinMode(13,OUTPUT);

Here 13 is the pin number whereas the output is used to configure it. You can also use other pins but since we have connected the LED to pin number 13, we have used 13.

The next part is where you need to define the Baud Rate. The Baud Rate in this case will be 9600. You can use other values as well but in that case the value that you use here must match the one you use in your WPF app. Serial.Begin(9600) is used to start the Serial port communication. These are the parts under the setup function.

In void loop(), the code that needs to be executed repeatedly is inserted out there. Since we are using Serial port communication, our first course of action is to accept a value through the communication channel. In order to do that, we will first check whether the link is available with the following line of code.

if(Serial.available()>0)

Once this condition is checked, we will accept the value over the Serial port.

char c = Serial.read();

Here we store the value of the character received in a character variable c. We will use this c to switch on and off the LED. Our intent is to switch on and off a LED. The LED will be switched on when we receive 1. When we receive 0, it will be switched off. To switch an LED on and off, we need to change the state of the pin 13 on the Arduino board. When the state is HIGH, the LED is on and vice versa. The line of code used to attain this functionality is:

digitalWrite(13,HIGH); //for high
digitalWrite(13,LOW);//for low

Now the following is the finalized code for void loop:

void loop()
{
  if(Serial.available()>0)
  {
    char c = Serial.read();
    if (c == '1')
    {
      digitalWrite(13,HIGH);
    }
    else if (c == '0')
    {
      digitalWrite(13,LOW);
    }
  }
}

Now you need to compile and upload the code. Just press the right arrow-type button on the top-left corner and your sketch will first be saved and will then compile and ultimately uploaded. The following Figure 4 shows us the screenshot.


Figure 4: Screenshot of the Arduino IDE with the final sketch.

Once you upload the code, your hardware part is done. Now we will do the controlling part using the WPF app. So open Microsoft Visual Studio and open a WPF project. Figure 5 shows the screenshot of the start page of Visual Studio. Let us name the project controller_Arduino.


Figure 5: Screenshot of the start page of Microsoft Visual Studio.

Now before going to the main code, let me explain how it will work. Serial port communication in WPF will be carried out by the SerialPort class. We will send characters serially using this class. The buttons to be used in the UI will contain a TextBox for entering the com port number where the device will be connected. Once the device is connected a textBlock named StatusBox will display connected. Once the device (Arduino) is connected with the app, then the app will be able to communicate with the Arduino. This project uses serial communication by the USB that definitely is wired. For wireless, you need to have two more hardware and some changes will be done in the circuitry. Everything else will be the same. Let us now design the UI. The UI will consist of the following components. 

1. A button named "on" with the content on to switch on a LED.
   
   
2. A button named "off" with the content to switch off a LED.
   
   
3. A button named connect with the content as connect to connect the Arduino board.
   
   
4. A button named disconnect with the content as disconnect to disconnect the Arduino board.
   
   
5. A TextBox with the named com port which will be taken as an input for the com port number.
   
   
6. A TextBlock with the name status to display the current connection status.

Add the preceding components in the MainWindows.xaml page. Create a click event for each button. Alternatively you can use the code pasted.

<Window x:Class="controller_Arduino.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Controller for Arduino v1" Height="750" Width="1020">
    <Grid>
        <Button x:Name="on" Content="On" HorizontalAlignment="Left" Margin="136,164,0,0" VerticalAlignment="Top" Width="87" Height="52" Click="on_Click"/>
        <Button x:Name="Of" Content="Off" HorizontalAlignment="Left" Margin="246,164,0,0" VerticalAlignment="Top" Width="87" Height="52" Click="Of_Click"/>
        <TextBlock x:Name="status" HorizontalAlignment="Left" Margin="506,253,0,0" TextWrapping="Wrap" Text="Disconnected" VerticalAlignment="Top" Height="29" Width="94"/>
        <TextBox x:Name="comportno" HorizontalAlignment="Left" Height="23" Margin="506,164,0,0" TextWrapping="Wrap" Text="COM13" VerticalAlignment="Top" Width="120"/>
        <Button x:Name="Connect" Content="Connect" HorizontalAlignment="Left" Margin="506,199,0,0" VerticalAlignment="Top" Width="55" Height="24" Click="Connect_Click"/>
        <Button x:Name="Disconnect" Content="Disconnect" HorizontalAlignment="Left" Margin="571,199,0,0" VerticalAlignment="Top" Width="55" Height="24" Click="Disconnect_Click"/>

    </Grid>
</Window>

Now let us browse to MainWindow.xaml.cs and begin the real code. As already mentioned before, we will use the SerialPort class so we need to add this first.

using System.IO.Ports;

Now create an object of the SerialPort class.

SerialPort sp = new SerialPort();

Now navigate to the connect button's event handler method and here we will add the code required to connect our app to the Arduino. A try catch block is added to prevent crashes while connecting. The most common reason is the incorrect port number.

private void Connect_Click(object sender, RoutedEventArgs e)
{
    try
    {
        String portName = comportno.Text;
        sp.PortName = portName;
        sp.BaudRate = 9600;
        sp.Open();
        status.Text = "Connected";
    }
    catch (Exception)
    {

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

In the preceding code, we are storing the portname that's the comport number. The PortName is assigned tosp.PortName. Next the baud rate is assigned in sp.BaudRate=9600. The next step is to open the communication channel. Ultimately the status TextBlock is updated with the Connected string. Similarly for the disconnect button, we have code to disconnect the Arduino.

private void Disconnect_Click(object sender, RoutedEventArgs e)
{
    try
    {
        sp.Close();
        status.Text = "Disconnected";
    }
    catch (Exception)
    {

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

The preceding code is also included in a try catch block so as to prevent the application from crashing in case some error occurs.

Our next course of action is to code for the on and off buttons.

private void on_Click(object sender, RoutedEventArgs e)
{
    sp.Write("1");
}

private void Of_Click(object sender, RoutedEventArgs e)
{
    sp.Write("0");
}

The preceding code is quite simple. Using only sp.Writr(“1”); and sp.Write(“0”); we are able to send characters serially to the Arduino.

The entire code for MainWindow.xaml.cs is pasted below for your convenience. However it is advised to try this yourself.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO.Ports;

namespace controller_Arduino
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        SerialPort sp = new SerialPort();
        public MainWindow()
        {
            InitializeComponent();
        }

        private void on_Click(object sender, RoutedEventArgs e)
        {
            sp.Write("1");
        }

        private void Of_Click(object sender, RoutedEventArgs e)
        {
            sp.Write("0");
        }

        private void Connect_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                String portName = comportno.Text;
                sp.PortName = portName;
                sp.BaudRate = 9600;
                sp.Open();
                status.Text = "Connected";
            }
            catch (Exception)
            {

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

        private void Disconnect_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                sp.Close();
                status.Text = "Disconnected";
            }
            catch (Exception)
            {

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

Congratulations, your project is complete. You made your first Arduino Controller. It's simple but with a creative mind, you will be able to attain more complicated tasks. In my future article, I will introduce you to controlling an Arduino but with a Windows Phone using HC06. In the end, I will include a screenshot of my latest robot controller named Universal Robot Controller.


Figure 6: Your first Arduino Controller

This article showed you how to control the Arduino using a wired connection. However if you want to shift to a wireless connection, then you need to have a Serial and USB link. In my projects I used a link of 2.4 GHz frequency. In that case some changes will occur in the circuit since you need to use the Rx and Tx pins. It's not a big deal though. The WPF app part remains the same. In case of any problem, please share it in the comments section below.