HomePi - A Windows 10 & Raspberry Pi 2 IoT app - Part 1

Posted by: Shoban Kumar , on 1/17/2016, in Category Windows Store Apps
Views: 22717
Abstract: Using Windows 10 IoT app and Raspberry Pi 2 to display weather information for Bus routes.

I use public transport to commute to office every day and use the official transport mobile app to check my bus timings. Instead of checking the app every day, I came up with an idea of using a Raspberry Pi and a free monitor to display a countdown for my next bus.

home-pi-1

This article is published from the DNC Magazine for .NET Developers and Architects. Download this magazine from here [Zip PDF] or Subscribe to this magazine for FREE and download all previous and current editions

When Windows 10 IoT was released, I decided to make the following changes to this project

1. Move the project to Raspberry Pi 2

2. Develop a new Windows 10 Universal Windows Project (UWP) and add a couple of additional features like Weather, Music Player, Power Controls, Email Notifications etc.

3. Replace the monitor with a LCD display to cut down power

Note: If you are new to Windows Universal Windows Project, please check out my series over here Build a Windows 10 Universal App – First Look

In this series of articles, we will see how I converted the above setup into a better version with a Windows 10 IoT app. We will call it Home Pi. This part of the article will display the weather information. We will add more features as we progress through this series.

Here is how the new setup looks like:

home-pi-windows10

Hardware & Requirements

Following is the list of parts required for our project

1. Raspberry Pi 2 Running Windows 10 IoT

2. 3.2" TFT LCD Module 320*240 Touch Screen Display for Raspberry Pi This LCD display is powered by ILI9341 display controller and TSC2046 touch controller. Currently there is no official support for LCD displays in Windows 10 IoT so we will be writing custom display driver and touch processor for our project so any LCD board which is powered by above controllers will work with our code. Here is another model https://www.conrad.at/de/raspberry-pi-display-modul-schwarz-rb-tft32-v2-raspberry-pi-a-b-b-raspberry-pi-1380381.html

I highly recommend reading the following articles before starting the project to know more about how the Touch and display controllers are implemented.

1. Building a Touch-enabled Interface for Windows IoT

2. Raspberry Pi 2, 480*320 TFT LCD Displays Windows 10, SPI

Windows 10 IoT Project

Open Visual Studio 2015 Community Edition. Start by creating a new Universal Windows Project by doing File -> New -> Project -> Blank App (Universal Windows) under Visual C# templates.

Right Click the newly created Project in Solution Explorer -> Add -> Reference. Under Universal Windows Select Extensions and select Windows IoT Extension for the UWP. Click OK to add the extension to the project.

iot-extension

Right click Package.appxmanifest file and click View Code. Add the following capabilities under Capabilities tag

<uap:Capability Name="documentsLibrary" />

This will give our app enough permission to store the Touch Screen calibration data in Documents Library folder.

Register for a free developer API on http://www.worldweatheronline.com/api/. We will need the API key to fetch weather information.

 

Project Files

Please download the source code of this article to understand the important files of this project. Comments wherever needed have been added in the source code itself.

Tsc2046.cs

This file under Class folder has methods to save calibration data to Documents Library and Load Calibration data when the app starts. This way our app will receive proper touch inputs while using touch features.

LocalWeather.cs

This class file is used for processing weather information received from World Weather Online API Service. Visit http://www.worldweatheronline.com/api/docs/local-city-town-weather-api.aspx for more information about the API.

wwoConditionCodes.xml

This xml file contains the list of Weather Codes returned from World Weather Online and their corresponding Weather Description and Icons. We will use this information to load Weather Icon from local storage instead of fetching it every time.

ILI9341.cs

This file acts as the display driver and has helper methods for displaying images, moving cursor to a specific point, writing text to screen etc.

MainPage.xaml.cs

This page, when loaded, checks for calibration data file. If the data file is present, the program proceeds to display the current weather information. If calibration data is not present, one-time calibration setup is run and 5 calibration points are stored for future use. Weather is updated every 1 hour with the use of a timer.

Note: Make sure to update your API key and location information in GetWeather() method.

Init()

This method initializes the LCD Display, Touch sensor and the Weather timer to run every 1 hour. It also tries to load the calibration file from Documents folder and if not found, goes to calibration mode by calling CalibrateTouch() method. Once the calibration is done, the screen is painted with the colour White.

CalibrateTouch()

This method is used to calibrate the touch screen using 5 points. Touch points are displayed one after another after Touch input for each point is received. These values are stored in Documents Library using SaveCalData() method.

GetWeather()

GetWeather method starts by displaying an Image which will be used as a background and menu.

get-weather

In a future article we will receive Touch input and match the x and y coordinates with the x and y coordinates of the menu icons (Bus Countdown, Music Player, Weather, Power).

The text “Checking…” is displayed while the weather details are fetched using getJsonStream() method by passing the local weather url with the API key and location info. Once the weather info is available, this method paints a white rectangle to clear the status text. wwoConditionCodes.xml is used to display the appropriate weather icon based on the code. Day & Night icons are chosen based on time. Weather description is displayed based on the length of the string.

Windows 10 App Remote Deployment

Right click project and select Properties. In the resulting window, under Debug tab select Target Device as Remote Machine and select your Raspberry Pi.

remote

Press F5 to deploy and debug the project. If this is the first time you are running the project, you will see the Calibrating setup screen. Simply tap the dots displayed in the screen to calibrate the screen. Once the calibration is successful, you will see your weather information.

And that's how in the first part, we have created a Windows 10 IoT weather app with Raspberry Pi 2. In the next article, we will add a countdown for the next bus, a simpler version of our Sound Cloud Music player and some power controls. Stay tuned!

Update: The 2nd part of this article can be found at Windows 10 IoT app running on Raspberry Pi2 - Part 2

Download the entire source  code of this article (Github)

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
ShobanKumar is an ex-Microsoft MVP in SharePoint who currently works as a SharePoint Consultant. You can read more about his projects at http://shobankumar.com. You can also follow him on twitter @shobankr


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

FREE .NET MAGAZINES

Free DNC .NET Magazine

Tags

JQUERY COOKBOOK

jQuery CookBook