Hello IoT World

Introduction

This application displays a text box and a button on a page displayed by the Internet of Things (IoT) board. There is a default text in the in text box that changes to an alternate text when the user clicks the button for the first time. It represents the proverbial “Hello World” example specific for the IoT board.

Key Steps

The key steps in the development of the application are:

  • Create a new project
  • Add a reference to the Windows IoT extension SDK
  • Add content to the Main Page
  • Build and test the app in a development environment
  • Deploy the app to the IoT board
  • Set the app to launch after IoT boots (optional)

Create a new project

  • Launch Visual Studio 2015 which you have installed previously in accordance with requirements for the development of IoT applications.
  • Create a new project by clicking File on the menu bar and cascading through New to Project: [Cntrl+Shift+N]
  • In the New Project dialog box on the left pane, drill down as follows:

Installed → Visual C# → Windows → Universal

  • In the middle pane, select Blank App (Universal Windows)
  • Enter values for the following fields in the bottom pane:
  1. Name
  2. Location
  3. Solution name

In the figure below, the illustrated app name is HelloWorld.

Hello IoT World - New Project

While Visual Studio will display the following progress bar while creating the initial set of files for the project. When the operation is complete, the Integrated Development Environment (IDE) will display a set of standard panes:

  • Solution Explorer
  • Properties
  • Output
  • Toolbox
  • Main window (for the display of the initial C# code)

Hello IoT World - project create progress bar

Add a reference to Windows IoT extension SDK

The app requires a reference to the IoT libraries. Expand the References folder in the Solution Explorer which is normally docked on the right side of the IDE.

  • Click the Solution ‘HelloWord’ and drill-down to References

Hello IoT World - Solution Explorer initial

  • Right-click Reference and click Add Reference in the context menu
  • In the left pane of the Reference Manager dialog box, drill-down Universal Windows IoT Extensions
  • In the middle pane, scroll down to check Windows IoT Extensions for the UWP as shown below

Hello IoT World - Add Reference

  • Click the OK button to dismiss the dialog box. The reference will now display under the References leaf in Solution Explorer as shown below. The namespaces for the IoT libraries can now be entered in the code for the app.

Hello IoT World - Solution Explorer with Reference

Add content to MainPage

The next step is add the following two user interface controls to the main (and only) page of the app:

  • Text box

Hello IoT World - Textbox control

  • Button

Hello IoT World - Button control

Hello IoT World - Solution Explorer MainPage selection

While there are several ways to add the two user interface controls to the main page of the app, the most expedient way for this HelloWorld app is to update the main body of the XAML code. Open the file, MainPage.xaml, by right clicking the filename in Solution Explorer under the HellowWorld project and clicking Open in the context menu. You may be prompted to permit elevated permissions which you should do without reservation for the current exercise. The main pane of the IDE will display two sections – the top for the rendered display of the page (i.e. Design) and the bottom for the equivalent code (i.e. XAML).

XAML markup

Although the following equivalent operations for the placement of the user interface can be performed in the Design pane, the following instructions apply to the XAML code. There is only one element in the body of the XAML code – Grid element as shown below.

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   </Grid>

User interface controls

Insert the following code snippet between inside the Grid element block. While only two elements, TextBox and Button, are necessary for the exercise, the StackPanel control assists in simplifying the layout considerations for the user interface. The StackPanel control will be your friend when you start developing more advanced layouts.

       <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
           <TextBox x:Name="txtHello" Text="Hello IoT!" Margin="10" IsReadOnly="True"/>
           <Button x:Name="btnClick" Content="Click Me!" Margin="10" HorizontalAlignment="Center"/>
</StackPanel>
Your ensuing code for the page should be similar to that shown below.
   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
           <TextBox x:Name="txtHello" Text="Hello IoT!" Margin="10" IsReadOnly="True"/>
           <Button x:Name="btnClick" Content="Click Me!" Margin="10" HorizontalAlignment="Center"/>
       </StackPanel>
   </Grid>

Event code

With the user interface elements now placed on the main page, the next step is to code the processing that will occur when the user clicks the Button when the program is running. The simplest way to generate the skeletal code for this event is to double-click the Button element in the Design section of the MainPage.xaml file that is currently in the middle pane of the IDE. Another way to accomplish the same effect is to add the event attribute, Click, to the corresponding XAML element as shown below with the property “btnClick_Click” as shown below:

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
           <TextBox x:Name="txtHello" Text="Hello IoT!" Margin="10" IsReadOnly="True"/>
           <Button x:Name="btnClick" Content="Click Me!" Margin="10" HorizontalAlignment="Center" Click="btnClick_Click"/>
       </StackPanel>
</Grid>

After the Click event attribute is added to the Button element in the XAML file,
a new method is placed in the corresponding C# file, MainPage.xaml.cs,
as shown below:

private void btnClick_Click(object sender, RoutedEventArgs e)
{
}

Open the code file, MainPage.xaml.cs, to insert the statement to assign a text to be displayed in the TextBox when the Button is clicked. An example illustrating the update to the Text property of the TextBox control is shown below:

private void btnClick_Click(object sender, RoutedEventArgs e) {
   this.txtHello.Text = "Hello, Windows IoT Core!";
}

Test the app locally

The app should be run in the development environment before deployment to the device. This process will reduce the potential for basic or inadvertent errors. The steps to test the app locally:

  • Build the app
  • Run the app

Build the app

To build the app, drill-down from the menu bar as follows: Build Build Solution as shown below: [Ctrl+SHIFT+B]

Hello IoT World - Build

Review the Output pane, as shown below, for the results of the build operation:

Hello IoT World - Build Output

In the example above, the build was successful. You can then proceed to run the app locally.

Run the app

The best process is to run the app:

  • Locally and then
  • Deploy to remote device

Run locally

To run the app, drill-down from the menu bar as follows: Debug ® Start Debugging as shown below: [F5]
Hello IoT World - Start Debugging locally
Accept the request for elevated privileges should the corresponding dialog box be displayed. Subsequently after the app has loaded, the following MainPage will display:

Hello IoT World - Main page initial local

Note that the default message in the Textbox control is “Hello, World!” Click the Button beneath the Textbox control. The TextBox message will be updated as shown below with the message “Hello, Windows IoT Core!”

Hello IoT World - Main page post-click local

This concludes the test. You dismiss the app by clicking the X button on the top right corner of the main page of the app.

Deploy the app to the IoT device

Deployment of the app to the IoT device requires the current configuration options to be changed.

  • Change the processor to ARM as shown below.

Hello IoT World - Remote device selection

The execution on Remote Machine will be selected by default:

Hello IoT World - Remote device selection confirmation

Configure the deployment options

Drill-down to the property page of the app from the menu bar: Debug → HelloWorld Properties as shown below:

Hello IoT World - Remote device properties

In the Start options group of the resulting Debug tab, enter or select the values for the following fields:

Target device will be set to Remote Machine. Do not change this selection.

Authentication Mode should be set to Universal if you are using Windows IoT Core build 10586 or later. This is a change from earlier versions of Windows IoT Core.

Remote machine may be entered clicking the Find button and then using the Remote Connections dialog box to establish either the IP address or the hostname.

Leave the other values to their default entries as shown below:

Hello IoT World - Remote device debug start options

Proceed to the deployment of the app on the remote machine by clicking the Remote Machine control as shown below:

Hello IoT World - Remote device run

The Output pane will scroll a few informational messages. The app will deploy on the remote machine and assuming that you have a suitable display monitor connected to the device you will see the Main Page displayed with the two user interface controls displayed in the center of the display monitor. If you have a pointing device connected to the remote machine, you can click the button on the display and witness the message in the text box change appropriately.

Conclude your test of the app on the remote machine by:

  • Either dismiss the app using the X button on the top right hand corner of the Main Page
  • Or stopping the app in Visual Studio using the Stop icon as shown below:

The app will terminate with the following message in the Output pane:

Hello IoT World - Remote device run exit output pane

Conclusion

The main purpose of this exercise, as in the classic HelloWorld exercise, is to ensure that your IoT device can run Windows 10 IoT Core natively without any teething issues.

Reference:

 

 

 

Advertisements

About charnumber

Still learning...
This entry was posted in IoT and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s