Building a Windows Phone Controlled Arduino Robot – Part 2

[youtube_sc url=”https://www.youtube.com/watch?v=a1xKtCEN5iQ”]

In the first part we built the robot and loaded a sample sketch to make sure all our connections and motors are working. In this part we will add another module to connect via Bluetooth and build a Windows app to communicate to the robot. This is what we will accomplish as a bare bones communication app.
The first thing we want to do is start up Visual Studio 2013 and create a new project. If you do not have Visual Studio or are developing on a Mac, no worries, we have you covered. Check out this setup guide to get your development environment ready to go.

step-1
I chose Visual C#, Store App, Universal App, Blank App. First off, C# is what I am comfortable with. Secondly I may put this in the store but most definitely need it on my phone. Third, as a universal app I have the ability to quickly make an app for the Phone as well as large screen devices that run Windows 8. And Blank app because I am starting from scratch.

I am going to “right-click” on my phone project and make that the default project for now.

Portable Class Library

I have created a Bluetooth connection manager class into a Portable Class Library for ease of use on different projects. It was originally created by Michael Osthege, but I have since adopted and adapted it to work with a few of my projects.

GitHub (coming soon)

Zip Download

Add the PCL to your project.

Shared Code

Since we are building a Universal App, there are some things we need in the shared project while there are others that we do not need in there. If we think about what we can “reuse”, that will go in Shared App. While “app” specific items will stay in their respective solutions.

Lets add a Common folder in the WindowsRobotApp.Shared project. Then lets create a class file called SuspensionManager.cs. This class file will captures global session state to simplify process lifetime management for an application. Note that session state will be automatically cleared under a variety of conditions and should only be used to store information that would be convenient to carry across sessions, but that should be discarded when an application crashes or is upgraded.

GitHub (coming soon)

Code here

Lets know add a Views folder since we are going to try and reuse the views for both a Phone and a Windows 8 device. We will come back to the Views folder in a bit.

Windows Phone Project

I am not going to spend any time on the Windows 8.1 project for this tutorial, lets jump into the phone project. For the Windows Phone project we need to add a reference to the ArduinoBluetoothLibrary.

MainPage.xml – this is our entry point into our app. We will be using a Frame control to navigate to our views. Add the following into the xaml of the MainPage.

Lets jump to the MainPage.xaml.cs to add some code to handle some events.

The first would be a static variable to handle the current frame we are on. Then the second would be handling the hardware back button when a user clicks it.

We now need to handle the OnNaviagetedTo method but we now need a Suspension Manager to help. Remember that SuspensionManager.cs class that we added to the Shared project? That is what we will use here. First we need to add a reference to the namespace. Then we can update our OnNavigatedTo method with the following code:

As you may tell, we are getting an error on the StartView. That is because we do not have one created yet. Lets do that now. In the Windows Phone Project created a folder called Views and then create a XAML file called StartView.xaml in it.

Now go back to the MainPage.xaml and add a reference to the namespace Views.

Views

Lets go into our StartView.xaml and lets add a nice splash screen and button.

Basically we are using a grid to structure our splash screen and adding a button right in the middle. The grid has a background image. You will have to create an Assets folder and add the phone-background.png image into it. Also, I want to change the orientation of the Phone. I would like it in a horizontal or landscape mode. In order to do that, go into the Package.appmanifest and choose landscape as supported rotation. Then on the device properties in when StartView is selected, choose orientation landspace.

step-2

If we looked back at the XAML we copied in to the StartView, specifically the button, we will see an Click event called Start_Click. We need to code that up. Lets go into StartView.xaml.cs.

Our click method is going to navigate us to our “control panel” view (not created yet). So lets get things ready. First lets add our method:

We should be getting an error at the ControlsView line, which is fine. We just need to create the ControlsView. This will be located in our Shared App project since the controls will be “shared” with Windows 8 and Windows Phone.

Styles

Before we jump into our ControlsView, lets setup some more common components and some styles.

Create a Styles folder in the Windows Phone app and then create a Styles.xaml file from a Resource Dictionary and add the following lines into it:

This is basically setting some simple styles on buttons and grids. In order for the App to know about these styles we need to let our Shared App.Xaml know about this. When we start building our Windows 8 app we can have different size buttons with a different Styles.xaml.

Lets open App.xaml in our Shared App project and add the following line:

Now when the app loads up, it will look in the Styles directory to get any resources.

Remember our Portable Class Library? Well, in there was some methods in there that we need to reference and use within our project. Lets go back in our App.xaml and add references to them.

First in our namespace declaration and keys for our Bluetooth resources we need to add the following:

 

If you get an error, it is most likely it is because your project has not been compiled yet. Otherwise check spelling and references.

Now lets go back to our ControlView.xaml and add the following:

There is a lot going on here. Lets take it line by line.

First off, we are putting all of the controls in a Grid. It is a 3 row grid. The first row will house a progress bar of our connection. You can see there is a StateConverter and a parameter called BluetoothInProgress. These are all inside the PCL that we are referencing.

The next row will contain our buttons. We have a Connect button which will make the connection to our bluetooth device. Start button to get going, cancel to quit and disconnect to disconnect.

Those 2 rows and controls should be pretty standard functionality when you are building these type of bluetooth connected apps. The next row contains our controls to manipulate our robot.
We have our standard forward, backwards, left right and stop controls. These can be buttons or images or anything you wish but for this example we are using buttons.
The direction controls are all using the click event to call a method.

Before we dive into the ControlsView.xaml.cs we need to go back into our Shared project App.xaml.cs and add a few items.

We need to add references to our PCL and our common namespace

Then within our class we need to add a static reference to our connection manager

Then in the OnLaunched method we have a //TODO for our suspended application. We have our SuspensionManager to help us out. We can add the following link after the //TODO

Remember, that is an asynchronous method and it will bark if our calling method does not have async declared.

And last but not least our OnSuspending method needs to be able to save our application state. So lets call our SaveAsync method

 Almost Done!

 

Now we can finish up our ControlsView. Open ControlsView.xaml.cs and add some references to namespaces.

 

We will be using popups to show which device to connect to. The others are our standard methods that we will be using.

First lets create our methods for our Bluetooth delegates.

Then lets reference them in the constructor

So, if we look at the exception, it is basically showing a popup with the error. You can handle this a bit better if you like.
The message recieved is just writing it out. Right now we should not be getting anything back but if you hook up sensors you would add logic here.

In our xaml we have our button all with click events. Lets handle the events to make the connections to the Bluetooth device first.

Cancel and disconnect are easy. We are closing the connection.

Our Start button does not do anything (YET) but we need it to compile.

The connect method is the big one. It makes the connection out to phone to see what devices are paired and then makes the connection to that device.

 

We need a helper method for this for the dropdown menu

The last methods are our “controls”. These are the forward, backward, left, right and stop.

Basically we determine what the parameter is and send that message to the device.

The BluetoothManager takes the command and sends it on its way to arduino.

Finally, lets clean up any connection we have if we NavigateFrom this view

 The Moment of Truth

One more little task we need to do. We need to give the app permission to access device features. Lets do that by opening Package.appmanifest and click on the Capabilities tab and choose Proximity. Close out of that file and then right click on it and choose View Code. Under the device capability tag add the following:

phone-background

Build away! Hopefully it compiles and you can deploy it to your Windows Device.

The next step of the process is to load a new sketch (UPDATED) onto the arduino to accept messages. Here is an updated sketch. Load it on the arduino and try and connect your device to it and watch it run!
[youtube_sc url=”https://www.youtube.com/watch?v=ckJH3LWMqTQ”]

Next up are sensors and connecting to the cloud!

Skeleton App (Full Source) UPDATED

 

 

 

Leave a Comment

(4 Comments)

  • Arif

    Sir, How To Change Design ControlView.xaml (Windows 8 apps) to (windows Phone apps) ?

    • Joshua Drew

      You should see a little dropdown that says the name of your Project like Project.Windows – click that and choose Proejct.WindowsPhone

  • Smith

    Hello sir,
    i add a Slider for Speed the robot , but a problem now , the bluetooth cant send byte command e.g (0 – 255) ,, in your project only send String command, e.g “F”, “S”, “B” .
    i hope you can help me 🙂 , thanks

    Regards.

  • Your email address will not be published. Required fields are marked *