Windows 10 IoT Online Meter

This project is a little demonstration of how you can build a small circuit to monitor your internet connection with Raspberry Pi 2 and Windows 10 IoT Core.

Following I will show you how to setup your Raspberry Pi 2 with Windows 10 IoT Core, build the circuit of the online meter, write a Universal Windows Platform (UWP) and deploy it to your Raspberry Pi.

Requirements

Since we are going to write some code this instruction will not cover all parts of creating a .NET application from scratch so you should be familiar with the following topics:

• Microsoft .NET Framework and Microsoft Visual Studio
• Programming with the C# Language
• Basic knowledge how to write WPF applications
• MVVM Pattern
• Using Nuget packages

Step 1: Parts

First of all, we need some materials to create the project. The following list contains all materials plus some optional parts to help with the circuit.

• 2x 1k Resistor
• 1x LED red
• 1x LED green
• 5x Jump wires
• 1x Raspberry Pi 2
• 1x Breadboard

Optional parts:

• 40 Pin Ribbon cable [1]
• T-Cobbler for Raspberry Pi 2 [2] (comes with ribbon cable)

[1] https://www.adafruit.com/products/862

[2] https://www.adafruit.com/products/1989

Step 2: Prepare Your Raspberry Pi

As the title says we are going to use Windows 10 IoT Core to run the application. So we need to flash our Raspberry Pi with the OS.

The easiest way to do this is to download the NOOBS [3] installer and select Windows 10 IoT core from the available OS list. The link shows you exactly how to prepare your SD Card for NOOBS and how to install it on your SD Card. During the installation the setup will ask us which version (RTM or Insider Preview) we would like to install. We are using the RTM version for this project.

Insider Preview

The Insider Preview is a project from Microsoft where, registered users gain access to prereleases. This releases are mostly stable but do have some kinks or bugs in it.

Another way to flash your SD Card is to use the Windows 10 IoT Core Dashboard [4] from Microsoft. Again the link contains a full manual how to setup your Pi and run it for the first time. You can either go through the whole steps, which also include the installation of Visual Studio which we are going to use later on to write our code. If you already own a Visual Studio version just stop after Step 3. I do recommend you to change the default password of your Pi at the end of the instructions.

Little Bug:
When you change your password via the Dashboard and access the web interface of your Pi for the first time it will prompt you with a message to change your password. Just ignore that one and continue.

[3] https://www.raspberrypi.org/help/noobs-setup/

[4] https://developer.microsoft.com/en-us/windows/iot/win10/GetStarted/rpi2/sdcard/stable/GetStartedStep1.htm

Step 3: Build the Circuit

Now that our Pi is all setup it’s time to plug some wires. Again here is the list of parts we will need for the circuit.

• 2x 1k Resistor
• 1x LED red
• 1x LED green
• 5x Jump wires
• 1x Raspberry Pi 2
• 1x Breadboard

Optional parts:

• 40 Pin Ribbon cable
• T-Cobbler for Raspberry Pi 2 (comes with ribbon cable)

We need to connect the 1st (3.3V) pin of the Raspberry Pi to the + row of our breadboard. Next connect one of the two resistor with the + row by just using a jump wire, and connect the anode (the longer leg) of the red led with the resistor. It doesn’t matter which way you put the resistor in. With the next wire we connect the cathode (shorter leg) with the 31st (GPIO 6) pin. Now we do the same for the green led, get power from the + row, add the second resistor and connect it to the anode of the led. For Gpio we now use the 33th (GPIO 13) pin to connect the cathode.

When you are using the optional T-Cobbler you don’t need to count the pins, they are all described on the cobbler.

Step 4: Write Some Code

As said in introduction, we are going to develop an UWP application. These applications are able to run on any device which supports .NET Framework. So the application can run on your PC, Phone and Raspberry Pi. The code we are going to write can be run on a Windows 10 machine, for development purpose and on Raspberry Pi to use the GPIO. Both applications will support the UI implemented in the application.

We need a version of Visual Studio 2015 for developing. If you already have installed a version before or during the “Prepare your Raspberry Pi” step you can dive right in, otherwise please either go back to “Prepare your Raspberry Pi” or follow this link [5] to download and install the Community Edition of Visual Studio.

The full code is available at Github [6]

First go ahead and create a new Solution with a UWP Application. To do so click on File-> New Project… In the following dialog select the Windows->Universal->Blank App (Universal Windows) template. Visual studio will now generate your solution and setup the project.

We will need some external libs which will help us implementing our code. Right click on the Project and select “Manage Nuget Packages…” in the following dialog enter “MVVM light Toolkit” in the search bar and install the libs package as shown in the screen shot.

Next we will need the libs to communicate with the GPIO Pins of our Raspberry Pi. Microsoft has already provided us with a library which will help us do this. Right click on the Reference entry in the project and click on “Add Reference…”. Check the box in front of the “Windows IoT Extensions for the UWP” entry and click ok. Now all libs are referenced.

You will find comments in the code which describe better what the code is doing.

[5] http://go.microsoft.com/fwlink/?LinkID=534599

[6] https://github.com/VDSoft/OnlineMeter

Step 5: Create the Structure

To keep the code clean add the following folders to your project:

• ViewModel
• Model
• Dal

To prevent compiler errors please add the following classes

• Dal
  
  • GpioHandler
  • InternetMonitor
• ViewModel
  
  • ViewModelLocator
  • MeterViewModel
• Model
  
  • ConnectionResult

Step 6: Implement the ViewModelLocator

Now we are going to wire up the MVVM Pattern. Add the following code into the ViewModleLocator.cs file.

These code setups the ViewModelLocator so we can use it to bind our views against a ViewModel.

Step 7: Implement MeterViewModel

In the MeterViewModel add the code from the file.

Just now we created a ViewModel for the Main view of the application.

Step 8: Extend App.xaml

Now open the App.xaml file located at the root of the project and add the following line within the opening Application tag

xmlns:viewModel="using:VDsoft.OnlineMeter.Uwp.ViewModel"

Please not
here that the path would look slightly different, since you are not using the same Namespaces as I did. The Code Completion will help you find your ViewModel Namespace.

Add the following lines within the Application tag

<Application.Resources>
<viewModel:ViewModelLocator x:Key="Locator"/>
</Application.Rescources>

In the App.xaml.cs file add this line at the end of the “OnLaunched” method

DispatcherHelper.Initialize();

Step 9: Design the View

Since this is just a sample application we are not going to spend too much time on the view and just make it functional.

We are going to bind the view to our previous implemented ViewModel in the MainPage.xaml.

DataContext="{Binding Source={StaticResource ResourceKey=Locator}, Path=Meter}"

Now you should see the two rings which will emulate our LEDs in the UI.

Step 10: Implement the Model

To transport the result of the checks we are going to use a simple model which we could send through our application. Insert the code into the ConnectionResult.cs

With this object we are able to transport more information if needed. For now, it will just carry a bool value indicating whether the system is online or not.

Step 11: Implement the Monitor

The InternetMonitor class is the part of the application which will periodically check the status of our connection. Just add the code to the InternetMonitor.cs file.

When the “StartConnectionCheck” method is called it will periodically check the connections status by just requesting the content of a web site.

Step 12: Implement GPIO Handling

Now the most interesting part of the application, how to make our leds glow up. In the GpioHandler class add the code.

Important part about the GpioHandler are the members. We use Integers to identify the id of the pins we want to access with our application. This is done by just using the name of the pin as an id. So the pin with the number 31 is accessed by id 6 because his name is GPIO 6 same goes for the pin 33 which name is GPIO 13. By setting the value of this pin to low or high, equal to a binary 0 or 1 and at the end write it to the pin itself with the SetDriveMode method.

For now, all code parts are implemented. Time to fire it up.

Step 13: Fire It All Up

During the development we can any time just start the application by hitting F5, depending on progress we should see the UI come up and show if we are connected to the internet or not. The real fun is to deploy it to our Raspberry Pi. To do so we need to connect our Raspberry Pi to Visual Studio. Right click on the project and select “Properties”. In the Windows select the entry “Debug”. Make sure the “Solution Platform” is set to “ARM”. In the region “Start options” click on the “Find…” button and select your running Raspberry Pi from the list of found computers. Now again right click on our project and select “Deploy…” which will trigger the deployment of the application. We also could now just hit “Remote Machine” on the menu bar and start debugging the application directly on our Raspberry Pi. After the deployment was successful start the application through the web interface we used before. When everything is working we could see the UI on the display (this is if any is connected) and our LEDs should react to the status of our internet connection.