Skip navigation

Raspberry Pi Projects

4 Posts authored by: oneleggedredcow Top Member

In this post, we are going to create a very simple program. The program will ask you for your name, and then it will introduce you with the phrase: Hi, my name is _____. Through doing this we will be exposed to some of the basic concepts that we will want to use in any project that we might do in the future. We'll see how to take input from the user. How to respond to various user actions like when they click on a button. Finally, we'll see how to write out information to the screen to let the user know what is going on. These fundamental building blocks will be key elements of any project that we try to do in the future.

 

Starting With a Button

Let's start off with just a single button and see how that works. To do this, create a page that looks like this:

Now this snippet of code assumes that you called your project MyNameIs when you created it. If you called your project something else, then you'll need to change that part to whatever you called your project. If you don't, you'll get a compiler error like this:

 

'MainPage' does not contain a definition for 'InitializeComponent' and no extension method 'InitializeComponent' accepting a first argument of type 'MainPage' could be found (are you missing a using directive or an assembly reference?)

 

These compile errors are really trying to tell you that your MainPage.xaml and MainPage.xaml.cs files don't align. In the .xaml file, the first line:

Specifies the full path to the class. By full path, I mean the namespace that the class is in and the name of the class. You can think of it as the namespace is the folder and the class name is the file name. Same kind of idea. So, that's how it is specified in the MainPage.xaml file, and then if we look in the MainPage.xaml.cs file, we see something like this:

Here you can see the namespace is more clearly called out (MyNameIs). Then, within the namespace's curly braces, you can see the name of the class called out (MainPage). So, to get rid of the error, you need to make those two match.

 

Going back to the XAML, we can see that we have set two attributes on the button. The first is the content. This is going to be the text that is displayed within the button. Now, the content doesn't have to be text. You can set it to a picture or many other things, but for now, text is all that we need. The second is the click attribute. This is the name of the method that is going to be called when the user clicks the button.

 

So, let's go ahead and add that method into the MainPage.xaml.cs file:

After you add the method, click on the location where the red dot is in the image below:

BreakPoint.png

When you click there, it should add a red dot on the screen. This is a breakpoint. This means that when the program hits this location, it will stop and give you a chance to debug and see what is going on. This is an extremely handy debugging tool that will save you lots of time in the future. So, go ahead and run the program and click the button. When you do this, Visual Studio should come to the foreground and you will see a small yellow arrow within the red circle. This tells you that when you clicked the button, the Submit method was called and that the program is now stopped there waiting for you to debug:

Debug.png

At this point, we really don't have anything to debug. All we were interested in knowing was that when we clicked the button, the Submit method was called. Since we hit our breakpoint, we know that happened. Now, we can either hit the green triangle that looks like a play button to continue execution of the program, or hit the red square that looks like a stop button to kill the program.

 

One of the most beneficial skills that you can learn is how to effectively debug programs. Fortunately, Visual Studio has a lot of powerful tools to help you debug programs better. Breakpoints are one of the key techniques for figuring out what is really going on.

 

User Input

Now that we know, the button is working properly, let's add some more stuff around the button:

Now, if we look in the middle of the code, we can still see the same button that we had as before. If we go one level up in the XAML, we see a StackPanel with an orientation of Horizontal. A StackPanel is a way to layout information in the UI. You can think of a StackPanel as a stack of magazines sitting on the floor. However, if the orientation is set to Horizontal, then the stack of magazines in on their side, like they are sitting on a bookshelf. Since this StackPanel is Horizontal, that means that we will have a TextBlock on the left, followed by a TextBox in the center, and a Button on the right.

 

TextBlocks are a way to display text to the user. You can think of them as a way to output text to the user. So, in this TextBlock, we display the phrase “Name:” to the user. Then next to this TextBlock, we have a TextBox. TextBoxes are used to get input from the user. So, TextBlock = output, TextBox = input. This will look like your standard text entry field. Then on the right of that we have a Submit button.

 

That Horizontal StackPanel is embedded within another StackPanel. This is a standard StackPanel where things are stacked on top of one another. So this means that the “Name:” TextBlock, the entry TextBox, and the Submit Button will all be on top of the TextBox that has a Name of OutputText. Don't worry if the description sounds a little complicated at first. Once you see the UI in action it might click better. If not, there are many posts dedicated to explaining the StackPanel, like this one:

 

http://www.wpf-tutorial.com/panels/stackpanel/

 

The last TextBlock was different than the first one. In the first one, we set the text to a given value “Name:”, however in the second one, we gave the TextBlock a name of OutputText. This is because the first TextBlock will always display the text “Name:”. That's all we ever want it to do. It will never change. It's goal is just to describe what the user should be typing into the text field. However, we want to programmatically update the second TextBlock to introduce the person whose name was typed in.

 

Finally, let's add some logic to the Submit method:

Here we simply set the Text property on the OutputText TextBlock to be a phrase that we create. The phrase that we create is “Hi, my name is _____” where we fill in the blank with the Text that they user typed into the MyName TextBox.

 

You can also remove the breakpoint by clicking on the red circle. We no longer need it, since we know that the Submit method is being called when we click the button.

 

Now when you run the program and type in a name and hit submit, you should see something like this:

name.png

Conclusion

It might not be the prettiest program in the world, but it sure was effective. We were able to get input from the user and then display it back. We were able to place a button in the UI that kicked off this process, and got a feel for how to react to user interactions. Additionally, we learned a little bit about setting a breakpoint and doing some debugging.

 

GitHub

The full source code for this tutorial is also on GitHub:

 

https://github.com/oneleggedredcow/RPi2-Tutorial

Background

In this tutorial series, we are going to learn C# using the Raspberry Pi 2 and WinIoT. The goal will be to learn about the C# language by building projects with it. So, think about it as learning through building. As we progress through the tutorial, the projects will grow in complexity and we'll start to create some pretty amazing things.

 

Why C#?

C# is a very popular language, and for good reason. It allows for complex programs to be simply and clearly stated. This allows you, as the developer, to spend more time concentrating on the problem that you wish to solve and less time writing/reading code.

 

Why Raspberry Pi 2?

The Raspberry Pi 2 is a low cost, powerful board. The low cost makes it very approachable for hobbyists and the power that it has makes applicable to a wide range of projects.

 

Why WinIoT?

Windows is the operating system that most people are familiar with because they use it every day. This familiarity lowers the barrier to entry and allows for new developers to get up and running quickly.

 

Setup

Getting the initial set up figured out can be the most difficult and frustrating part of getting started with a new board. Fortunately, getting set up with WinIoT on the RPi2 is pretty easy. There is a great tutorial of how to get started here:

 

http://ms-iot.github.io/content/en-US/win10/SetupPCRPI.htm

 

Once you have set up your PC and your Rpi2, you can follow the example to blink an LED. Another option would be to write a classic Hello, World application:

 

Getting Started with Visual Studio

Visual Studio is a very, very powerful program. Unfortunately, with all of that power, sometimes it can become overwhelming. Don't despair though, after the initial shock wears off, it is really pretty easy to use.

 

When you first open Visual Studio, it will present you with a start page in the center of the screen. In the top left, there will be an option to create a “New Project...” Clicking on that will bring up the New Project window. In this window, you want to select the “Blank App (Universal Windows)” option. Then give it a name and click OK. Now if the “Blank App (Universal Windows)” option is not present, you can find it under Templates -> Visual C# -> Windows -> Universal, or by using the search box to search for “universal c#”.

 

Now, once you are in Visual Studio, let's take a quick tour:

VS-Tour.png

The first thing to point out is the Solution Explorer on the right hand side. That shows you the directory structure of the project that you are currently working on. Creating a new project automatically populates some basic information for you with common things that every project needs. You can go ahead and click around in there and see what there is to see. Don't worry if it is a little bit too much at this point. Most of the stuff in there is going to be the same for every project that we do, so we can safely ignore it and just use the defaults.

 

Double clicking on any file in the Solution Explorer will bring it up in the main view. (In the above screen shot, I have MainPage.xaml up in the main view.) There are two files to take a closer look at: MainPage.xaml and MainPage.xaml.cs. To get to MainPage.xaml.cs, just click the triangle on the left of MainPage.xaml in the Solution Explorer to expand/collapse the child elements. MainPage.xaml.cs is a child of MainPage.xaml.

 

When the MainPage.xaml is displayed, by default the screen will be split into a design view and a XAML view. The XAML view shows the source code, which looks a lot like XML. The design view will give you an idea of what it will look like when it is displayed on the screen.

 

XAML is the language that is used to describe what the UI will look like. It's a concise way to tell the computer what goes where, and how it should look. Everything that can be done in XAML can also be done in C#, but it is not nearly as neat and clean. The same XAML code will take many more lines of code in C#. XAML also helps separate how the information is displayed from the business logic. This turns out to be extremely helpful in reusing the same code for various different applications.

 

The MainPage.xaml.cs file has C# code in it. This should look a lot more familiar to you if you have seen other programming languages. C# is where all of the logic of the program will be written.

 

Next up on the tour is the Output window, which is located at the bottom. This window has a bunch of tabs at the bottom of the window. These tabs hold a lot of important information. For example, any compilation errors and warnings will be displayed in the “Error List”.

 

The last thing to discuss in the whirlwind tour is the tool bar at the top. Now, there is definitely a lot going on there, so let's just hit the high points. The most important one is the green triangle that looks like the play symbol. This starts up the application. (If you are into keyboard shortcuts, the keyboard shortcut is F5.) This will kick off the compilation process and upon successful compilation, it will start up the application in debug mode.


Now once the application starts up, the tool bars and windows will switch around. At first this can be a bit weird, but over time you will start to enjoy it because you have very different needs when you are writing and debugging code. This changing of the view really helps get the tools that you need at your fingertips for the job at hand.

 

When the application is running, a pause sign and a stop sign will appear on the tool bar. The stop sign will kill the application and get you back into writing code mode. The pause sign will stop the application and show you where in the code it currently is. This can be extremely helpful if something is running much longer than you expect it to and you want to get an idea of what is going on.

 

Ok, so that's the whirlwind tour. There is a lot more going on in there, but that should be enough to get going.

 

Hello, World

Now, to create our first application, take and place the code below between the <Grid ...> and </Grid> tags.

This piece of code displays the words “Hello, World!” in the middle of the screen.

 

To run the application, just click on the green play icon, and it should pop up a window with the words “Hello, World!” on it:

HelloWorld.png

Nice! Now, to run it on the Raspberry Pi 2, click on the drop down next to the play button that says “x86” and switch that to “ARM”. That drop down specifies the processor type. Your PC has an x86 processor in it, whereas the RPi2 has an ARM processor in it. The good news is that other than this drop down, all of the differences are abstracted away from us as the user! So, we can go on programming without worrying about the underlying processor type. Next, click on the expansion triangle to the right of the play icon (just past the word “Device”), and click on the “Remote Machine” option. This will bring up a “Remote Connections” window. In there will be a section title “Auto Detected” and within that section should be your RPi2 (mine is called “minwinpc”). Click on that and then hit “Select”. Now when you hit play, the program will be running on the RPi2!

 

GitHub

The full source code for this tutorial is also on GitHub:

 

https://github.com/oneleggedredcow/RPi2-Tutorial

A technical preview for Windows 10 is available and can be used to run custom Windows Universal Applications on a Raspberry Pi! If you are anything like me (and I know I am), this is a very exciting time. So, here I'll step through how to get a “Hello, World” Windows Universal App up and running on the Raspberry Pi 2.

 

Prerequisites:

 

Installing Windows 10 on the Raspberry Pi:

 

First we need to install Windows 10 on the Raspberry Pi. Fortunately, there is already a detailed set of instructions here:

 

https://ms-iot.github.io/content/win10/SetupRPI.htm

 

Once that is installed and you fire up the Raspberry Pi 2, you should see an image like this:

DefaultApp.png

Admittedly, this isn't the most exciting thing in the world. However, it is about to get a lot more exciting when we run our own Windows Universal Application on it.

 

Creating a Windows Universal Application:

 

Fire up Visual Studio 2015 and create a New Project. On the New Project screen, choose “Blank App (Windows Universal)”.

NewProject.png

(If it prompts you about source control, you can just hit Cancel.)

 

Then, once the new project opens, double click on the MainPage.xaml file in the Solution Explorer:

SolutionExplorer.png

That will open up the MainPage.xaml file for editing. By default, the file will open with the design view on top and the XAML view on the bottom:

InitPage.png

In the XAML view, put the following code within the <Grid> element:

Once it is done, it should look like this:

HelloPage.png

(You might need to scroll down a bit in the design view in order to see the “Hello, World!” text.)

 

Awesome, once you have that, it is time to deploy it to the Raspberry Pi 2. First, to do this, set the architecture drop down to “ARM”. (It says “x86” by default.) To the right of that will be a green play button with the words “Local Machine” and a small arrow pointing downwards. Click that arrow and set it to “Remote Machine”:

Remote.png

That will pop up a menu asking you where you would like to debug the application. In my case, the IP Address of my Raspberry Pi 2 is 192.168.1.8. Enter that and be sure to select an Authentication Mode of None:

RemoteConnections.png

Even though there is a Raspberry Pi 2 running on your network, Visual Studio 2015 might not be able to find it.  (Mine at least could not detect it.)  Don't despair, it does exist.

 

If you need help finding the IP Address of the Raspberry Pi 2, there are a couple of ways to figure that out.  The easiest is the screen that comes up on the Raspberry Pi 2 contains the IP Address.  Another way is to use the Windows IoT Core Watcher that comes within the Windows_IoT_Core_RPI2_BUILD.zip file that you downloaded while installing Windows 10 on your Raspberry Pi 2.

 

Once that is all configured, you can click on the green play button and watch your application get deployed and run on the Raspberry Pi 2!

In this blog post, we are going to create a hangman game powered by the Google App EngineHangman is a game where you are trying determine a secret word by guessing letters that might be in the word.

 

Hangman Cloud Backend

The first thing to do is to create a cloud service that returns back a random word that we can use as our secret word.  To do this, we first need a list of possible words to choose from.  Fortunately, there is such a list of all 109582 words in the English language.

 

After downloading that list, we can write a quick little python cloud application that chooses a random word and returns it to the caller:

This code segment is very much based on the Google App Engine Hello World example.  The code is actually very similar, but instead of returning “Hello World”, we return a random word to be used as the secret word in a game of hangman.

 

The biggest difference is the first section where we read in the text file (wordsEn.txt), and filter out any word that does not have at least four letters in it.  We filter out short words because they are not very fun to play a game of hangman with. After we have the word list, it is just a matter of picking a random index into the array and returning that word.

 

Running the application locally and publishing it to the cloud are both covered very well in the Hello World tutorial, so I won’t go into much detail here.  It requires another file to describe the application:

And then you can use the Google App Engine Launcher to run the application locally or publish (deploy) it to the cloud.

 

I published mine to http://hangman-riot.appspot.com/, so if you navigate there, you should see a random word in your browser:

hangman-riot.png

 

Hangman Client Application

Fortunately, there’s already a great implementation of hangman in python from InventWithPython.com. So, we’ll use that as a starting point and add in some logic to use the cloud as the source of the secret word.  The code can be downloaded from: http://inventwithpython.com/hangman.py

 

I suggest running this a few times before you modify it just to get a feel of how it works.

 

Now, there are two places that we need to modify.  First, we need to remove the list of built in words that the application comes with, and replace the getRandomWord function with an implementation that grabs the word from our hangman cloud backend:

word-diff.png

And then we need to add in a reference to the library that we are using the fetch the random word:

import-diff.png

That’s it!  The final version of the code can be found here.

 

For a detailed description of how the code works, check out the InventWithPython website.

 

Right now the code is set up to hit the google app engine instance that I created.  If you want to hit a locally running application, just change the URL to be:

 

http://localhost:8080

 

Running Hangman on the Raspberry Pi

The hangman client python program requires python 3 in order to run.  So, if you don’t already have that installed, install it with this command:

 

sudo apt-get install python3

 

Once that completes you can run the hangman program:

 

python3.2 hangman.py

 

That should do it. Good luck, the words can be pretty tricky!

Filter Blog

By date: By tag: