Arduino Due And Mobile Service Read And Display The Data On Phone

Introduction

We continued our path in the article Arduino due and Mobile Service.We have seen that from an Arduino due you can save by Rest API values of temperature and humidity read by a sensor DHT11. In this article, let's see how to display the data in the table of the Mobile Service on a Windows Phone device.

Creating Windows Phone

Open Visual Studio 2015 from the "File", "New Project", let's select the template "Blank Application" as in the following figure and call SensorFarm.



Created the project, first add the reference package WindowsAzure.MobileServices by Nuget as in the following figure.



Now we type into the search box and click on the install button WindowsAzure.MobileSerices.



Click on "Accept" in the subsequent screens.



At the end of the installation, we have a condition as in the following screenshot:



We installed the package needed to interact with the Mobile Service created following the previous article; we go now to create the interface and the code for displaying data.

Creating the graphical interface

We now proceed with the creation of the graphical interface; we remain in MainPage.xaml file, and insert the following code.

<Page
    x:Class="SensorFarm.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SensorFarm"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ListBox Grid.Row="0" x:Name="lstValue" Background="CornflowerBlue" FontSize="20">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Row="0" Grid.Column="0" Text="Temp value"/>
                        <TextBlock Grid.Row="0" Grid.Column="2" Foreground="Yellow" Text="{Binding tempvalue }"/>
                        <TextBlock Grid.Row="0" Grid.Column="3" Text="°c"/>

                        <TextBlock Grid.Row="1" Grid.Column="0" Text="Humidity value"/>
                        <TextBlock Grid.Row="1" Grid.Column="2" Foreground="Red" Text="{Binding humidityvalue }"/>
                        <TextBlock Grid.Row="1" Grid.Column="3" Text="%"/>

                        <TextBlock Grid.Row="2" Grid.Column="0" Text="Created at"/>
                        <TextBlock Grid.Row="2" Grid.Column="2" Foreground="Green" Text="{Binding __createdAt }"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Page>

Let's analyze the code above. It defined the main grid, inside which are inserted the controls that make up the interface, you and a ListBox with inside a DataTemplate composed of another control grid with inside it a series of TextBlock, where n some of them in the Text property and Binding with the class properties tabsensor that we will see later. We will not describe what the DataBinding is, as this is beyond the context of this article. The other controls TextBlock year instead in the Text property of the static text. If all the code has been entered correctly, our interface will have this aspect.



Do not worry if you see this aspect as having defined a DataTemplate and not having to display sample data, we will see it all when the application is running. After the GUI, let us turn to the part code behind.

Creating class tabsensor

We will now create the class tabsensor necessary for the management and visualization of data, which is important, we must call it by the same name given to the table on the Mobile Service, same thing for the property, name and type of the variable must match to those on the Mobile Service, do not display the data differently than risk having an exception at runtime. We create a new class called tabsensor, putting the mouse on the name of the project, right click and select "Add", "class"; we will be led by the following screen:



A class created, insert the following C # code.

using System;

namespace SensorFarm
{
    public class tabsensor
    {
        public string id { get; set; }
        public string tempvalue { get; set; }
        public string humidityvalue { get; set; }
        public DateTime __createdAt { get; set; }
    }
}

In the above code the following four defined properties are: id, tempvalue, humidityvalue and __createdAt. The last and present is the default when you create the table on the Mobile Service, which does nothing but store when we entered the last record, the same is true for the Id property, which is nothing but the table's primary key. This class will use it when we retrieve data from the table.

Creating class ServiceData

Last class to be created, and that to interact with the MobileService to retrieve and display data from the table tabsensor, with the same procedure to create the class tabsensor, we create a class called ServiceData and insert the following code.

using System;
using System.Collections.Generic;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;

namespace SensorFarm
{
    public class ServiceData
    {
        List<tabsensor> sensor = new List<tabsensor>();

        public async void GetData(ListBox lstValue)
        {
            try
            {
                sensor = await App.client.GetTable<tabsensor>().ToListAsync();
                lstValue.ItemsSource = sensor;
            }

            catch (Exception ex)
            {
                await new MessageDialog(ex.Message).ShowAsync();
            }
        }
    }
}

By analyzing the code, you have defined a collection of type tabsensor, the class created above, the GetData method, requires an object of type Listbox. We will pass the reference created in the GUI, then the method GetTable <>, It requires a type parameter IMobileServiceTable, and now you can understand why the class tabsensor must be identical to the table on the MobileService. After we go to value the property ItemSource parameter lstValue the GetData method with the value of the variable sensor, so to display the data in the table on the ListBox past as a reference method. Here we understand the operation of databinding, were valued class properties tabsensor implicitly because we defined and enhanced the collection of sensor type tabsensor. Council to investigate this matter because it is much larger than what was stated now.

Changing the class App.xaml.cs

To access the Mobile Service created we still need something, authentication by a mobile service url and a key application that is provided at the time of the creation of the Mobile Service on Microsoft Azure. Usually we found in the section DASHBOARD "MOBILE SERVICE URL" and the application keys by a click on the button "MANAGE KEYS" that we find in the lower left of the Microsoft Azure portal. Located on the site these two things, we open the file and insert on App.xaml.cs first the following namespaces.

using Microsoft.WindowsAzure.MobileServices;

This is necessary to make use of the class MobileServiceClient, which is necessary for authentication. We now add the code as follows.

public sealed partial class App : Application
{
   public static MobileServiceClient client = new MobileServiceClient("https://sensorfarm.azure-mobile.net/", "NyWPlQgRcUWHsrGwcwhHMRxVLtnItA64");
   // Other code C # class App.xaml.cs

Test the application

We ran everything you need, and it's time to try the created F5 key, and run the application in Debug mode. If we followed instructions carefully, here is the application at runtime.



If a problem occurs, such as the absence of Wifi or data network, here's what we'll display at runtime.



Conclusion

In the third article we saw how you can display data on a Mobile Service and what are the classes needed to achieve this. I preferred to create a Windows Phone 8.1, but there are still other ways to display. In the next article, we will expand this application by entering setting values, let's display the temperature of our house on the device, we will enter what time you want to turn on the boiler house, to what temperature will likewise turn on the boiler, all seen and read by Arduino due used in the previous article.