ConnectTheDots will help you get tiny devices connected to Microsoft Azure, and to implement great IoT solutions taking advantage of Microsoft Azure advanced analytic services such as Azure Stream Analytics and Azure Machine Learning.

This lab is stand-alone, but is used at Microsoft to accompany a presentation about Azure, Windows 10 IoT Core, and our IoT services. If you wish to follow this on your own, you are encouraged to do so. If not, consider attending a Microsoft-led IoT lab in your area.

In this lab you will use a Raspberry Pi 2 device with Windows 10 Iot Core and a FEZ HAT sensor hat. Using a Windows 10 Universal Application, the sensors get the raw data and format it into a JSON string. That string is then shuttled off to the Azure Event Hub, where it gathers the data and is then displayed in a chart using Power BI. The JSON string is sent to the Event Hub in one of two ways: packaged into an AMQP message or in a REST packet. If you use AMQP, which is the recommended approach, you will need to have the AMQP port open on your firewall/router. You will also create a simple console application that reads messages live from the Event Hub.

This lab includes the following tasks:

1. Setup
   1. Software
   2. Devices
   3. Azure Account
2. Creating a Universal App
   1. Read FEZ HAT sensors
   2. Send telemetry data to Azure Event Hub
3. Consuming the Event Hub data
   1. Creating a console application to read the Azure Event Hub
   2. Using Power BI
   3. Consuming the Event Hub data from a Website
4. Summary

• Windows 10 (build 10240) or better

• Visual Studio 2015 or above – Community Edition is sufficient.

  NOTE: If you choose to install a different edition of VS 2015, make sure to do a Custom install and select the checkbox Universal Windows App Development Tools -> Tools and Windows SDK.

  You can validate your Visual Studio installation by selecting Help > About Microsoft Visual Studio. The required version of Visual Studio is 14.0.23107.0 D14Rel. The required version of Visual Studio Tools for Universal Windows Apps is 14.0.23121.00 D14OOB.

• Windows IoT Core Project Templates. You can download them from here. Alternatively, the templates can be found by searching for Windows IoT Core Project Templates in the Visual Studio Gallery or directly from Visual Studio in the Extension and Updates dialog (Tools > Extensions and Updates > Online).

• Make sure you’ve enabled developer mode in Windows 10 by following these instructions.

• Raspberry Pi 2 Model B with power supply
• GHI FEZ HAT
• Your PC running Windows 10, RTM build or later
• An Ethernet port on the PC, or an auto-crossover USB->Ethernet adapter like the Belkin F4U047.
• Standard Ethernet cable
• A good 16GB or 32GB Class 10 SD card. We recommend Samsung or Sandisk. Other cards will usually work, but tend to die more quickly.

To setup your devices perform the following steps:

1. Plug the GHI FEZ HAT into the Raspberry Pi 2.

   

   The FEZ hat connected to the Raspberry Pi 2 device

2. Get a Windows 10 IoT Core SD Card or download the Windows 10 IoT Core image as per the instructions on https://ms-iot.github.io/content/en-US/win10/SetupRPI.htm, be sure to follow the steps to mount the image, and run the installer on your development PC. If you already have the OS image on a card, you still need to follow this step to get the IoT Core Watcher and Visual Studio templates on to your PC.

3. Once you have the image on the card, insert the micro SD card in the Raspberry Pi device. (SD card will already be imaged in the Data Culture Labs)

4. Connect the Raspberry Pi to a power supply [optionally a keyboard, mouse and monitor] and use the Ethernet cable to connect your device and your development PC. You can do it by plugging in one end of the spare Ethernet cable to the extra Ethernet port on your PC, and the other end of the cable to the Ethernet port on your IoT Core device. (Do this using an on-board port or an auto-crossover USB->Ethernet interface.)

5. Wait for the OS to boot.

6. Run the Windows 10 IoT Core Watcher utility (installed in step 2) in your development PC and copy your Raspberry Pi IP address by right-clicking on the detected device and selecting Copy IP Address. (Download tool from here: http://go.microsoft.com/fwlink/?LinkId=619755)

   

7. Launch an administrator PowerShell console on your local PC. The easiest way to do this is to type powershell in the Search the web and Windows textbox near the Windows Start Menu. Windows will find PowerShell on your machine. Right-click the Windows PowerShell entry and select Run as administrator. The PS console will show.

   

8. You may need to start the WinRM service on your desktop to enable remote connections. From the PS console type the following command:

   net start WinRM

9. From the PS console, type the following command, substituting '<IP Address>' with the IP value copied in prev:

   Set-Item WSMan:\localhost\Client\TrustedHosts -Value <machine-name or IP Address>

10. Type Y and press Enter to confirm the change.

11. Now you can start a session with you Windows IoT Core device. From you administrator PS console, type:

    Enter-PSSession -ComputerName <IP Address> -Credential localhost\Administrator

12. In the credential dialog enter the following default password: p@ssw0rd.

    Note: The connection process is not immediate and can take up to 30 seconds.

    If you successfully connected to the device, you should see the IP address of your device before the prompt.

    

####Renaming your Device ####

1. To change the computer name, use the setcomputername utility. In PowerShell, type the following command.

   setcomputername <new-name>

2. Reboot the device for the change to take effect. You can use the shutdown command as follows:

   shutdown /r /t 0

3. Finally, connect to the Raspberry Pi to the same network as your Windows 10 development PC.

You can also rename the device by using the web server, but certain functions are available only through PowerShell. Now that you understand how to connect through PowerShell, we'll use the web server to set up WiFi.

####Using WiFi on your Device #### We will not provide compatible Wi-Fi dongles in the Data Culture Technical IoT Track labs, however feel free to refer back to these resources when out of the lab enviroment

1. To configure your device, run the Windows 10 IoT Core Watcher utility in your development PC and open the web-based management application by right-clicking the detected device and selecting Web Browser Here.

   

2. To use WiFi, you will need to provide Windows 10 IoT core with the WiFi network credentials.

   1. Enter Administrator for the username, and supply your password (p@ssw0rd by default).
   2. Click Networking in the left-hand pane.
   3. Under Available networks, select network you would like to connect to and supply the connection credentials. Click Connect to initiate the connection.

   

   Note: You can find more info in Using WiFi on your Windows 10 IoT Core device.

1. Enter the Azure portal, by browsing to http://manage.windowsazure.com

2. Create a new Event Hub. To do this, click NEW, then click APP SERVICES, then click SERVICE BUS, then EVENT HUB, and finally click CUSTOM CREATE.

    Creating a new Event Hub

3. In the Add a new Event Hub screen, enter an EVENT HUB NAME e.g. Windows10IoT, select a REGION such as West US, and enter a NAMESPACE NAME.

   

   New Event Hub Settings

   Note: If you already have a service bus namespace on your suscription, you can select that one in this step.

4. Copy into Notepad the EventHub Name and Event Hub Namespace Name as yout will use these values later. Click the next arrow to continue.

5. In the Configure Event Hub screen, type 4 in the Partition Count field; and in the Message Retention textbox, type 1. Click the checkmark to continue.

   

   Configuring Event Hub

6. Now, you will create a Shared Access Policy. To do this, after the service is activated, click on the newly created namespace. Then click the Event Hubs tab, and click the recently created service bus.

7. Click the Configure tab. In the shared access policies section, enter a name for the new policy, such as manage, in the permissions column, select manage.

   

   Creating a Shared Access Policy

####Creating a Stream Analitycs Job####

To create a Stream Analytics Job, perform the following steps.

1. In the Azure Management Portal, click NEW, then click DATA SERVICES, then STREAM ANALYTICS, and finally QUICK CREATE.

2. Enter the Job Name, select a Region, such as Central US; and the enter a NEW STORAGE ACCOUNT NAME if this is the first storage account in the region used for Stream Analitycs; if not you have to select the one already used for that matter.

3. Click CREATE A STREAM ANALITYCS JOB.

   

   Creating a Stream Analytics Job

4. After the Stream Analytics is created, in the left pane click STORAGE, then click the account you used in the previous step, and click MANAGE ACCESS KEYS. Write down the STORAGE ACCOUNT NAME and the PRIMARY ACCESS KEY as you will use those value later.

   

   Managing Access Keys

1. Download the zipped repository, extract the files in your file system or navigate to GHI folder within this GitHub repo. Then locate the GHIElectronics.UAP.sln solution file (You must have Visual Studio installed in order to open the solution).

2. After opening the solution you will see several projects. The Developers's Guide comes with examples of many of the shields provided by the company. Right-click the one named GHIElectronics.UAP.Examples.FEZHAT, and select Set as Startup Project.

   

   Setting the FEZ hat example as the default project

   Note: Now you will inspect the sample code to see how it works. Bear in mind that this example is intended to show all the available features of the shield, while in this lab you will use just a couple of them (temperature and light sensors).

3. Open the MainPage.xaml.cs file and locate the Setup method.

   private async void Setup()
   {
   	this.hat = await GIS.FEZHAT.CreateAsync();
   
   	this.hat.S1.SetLimits(500, 2400, 0, 180);
   	this.hat.S2.SetLimits(500, 2400, 0, 180);
   
   	this.timer = new DispatcherTimer();
   	this.timer.Interval = TimeSpan.FromMilliseconds(100);
   	this.timer.Tick += this.OnTick;
   	this.timer.Start();
   }

   In the first line, the program creates an instance of the FEZ HAT driver and stores it in a local variable. The driver is used for interacting with the shield. Then, after setting the limits for the servos (not used in this lab), a new DispatchTimer is created. A timer is often used in projects of this kind to poll the state of the sensors and perform operations. In this case the OnTick method is called every 100 miliseconds. You can see this method below.

   private void OnTick(object sender, object e)
   {
   	double x, y, z;
   
   	this.hat.GetAcceleration(out x, out y, out z);
   
   	this.LightTextBox.Text = this.hat.GetLightLevel().ToString("P2", CultureInfo.InvariantCulture);
   	this.TempTextBox.Text = this.hat.GetTemperature().ToString("N2", CultureInfo.InvariantCulture);
   	this.AccelTextBox.Text = $"({x:N2}, {y:N2}, {z:N2})";
   	this.Button18TextBox.Text = this.hat.IsDIO18Pressed().ToString();
   	this.Button22TextBox.Text = this.hat.IsDIO22Pressed().ToString();
   	this.AnalogTextBox.Text = this.hat.ReadAnalog(GIS.FEZHAT.AnalogPin.Ain1).ToString("N2", CultureInfo.InvariantCulture);
   
   	...
   }

   This sample shows how to use the FEZ HAT driver to get data from the sensors. The data is then shown in the UI. (To see how the UI is designed check the MainPage.xaml file)

4. To deploy the application to the Raspberry Pi, the device has to be on the same network as the development computer. To run the program, select Remote device in the Debug Target dropdown list:

   

   Deploying the application to a Remote Machine

5. If the remote machine has not been selected before, the Select Remote Connection screen is displayed:

   

   Setting up the Remote Connection

6. If the device is not auto-detected, the Raspberry IP or name can be entered in the Address field. Otherwise, click the desired device. Change the Authentication Mode to None:

   

   Setting the Authentication Mode

7. If you want to change the registered remote device it can be done in the project Properties page. Right-click the project name (GHIElectronics.UAP.Examples.FEZHAT) and select Properties. In the project Properties' page, select the Debug tab and enter the new device name or IP in the Remote Machine field.

   

   Changing the Remote Connection Settings

   Note: Clicking the Find button will display the Remote Connection screen.

8. If the program is successfully deployed to the device, the current value of the different sensors will be displayed on the screen. The shield leds will also be turned on and off alternately. If you don't have a screen connected to the Raspberry, you can add the following code to the OnTick method in order to show the value of the sensors in the Visual Studio Output Console. (Insert the code after reading the sensors).

   // Add diagnostics information
   System.Diagnostics.Debug.WriteLine("Light: {0}, Temp: {1}, Accel: {2}, Button18: {3}, Button22: {4}",
       this.LightTextBox.Text,
       this.TempTextBox.Text,
       this.AccelTextBox.Text,
       this.Button18TextBox.Text,
       this.Button22TextBox.Text);

Now that you know how to read the FEZ HAT sensors, you will send that information to an Azure Event Hub. To do that, you will use an existing ConnectTheDots example which shows how to connect a Windows 10 IoT core device to Azure and send sensor information.

1. Clone this repository and extract the files to a folder in your file system. Open the solution located in the DataCultureIoT\Code\WindowsIoTCorePi2FezHat\Begin folder.

2. Before running the application, you must set the Azure Event Hub connection information. In order to allow the application to send data to the Event Hub, the following information must be provided:

   • Name: Is the name given to the Event Hub. In the Azure Management Portal go to the Service Bus service and select the Namespace under which the Event Hub was created. Then click the Event Hubs tab and you will see the name of the Event Hub.

     

   • Service Bus Namespace: Is the name of the Service Bus namespace at which your Event Hub belongs.

   • Shared Access Policy: Is the policy created to grant access to the Event Hub. It can be obtained from the Event Hub Configuration tab of the Azure Management Portal. From the previous step, click Event Hub and then click the Configuration tab.

     

   The following information is required:

   • Shared Access Key Name: The Policy Name
   • Shared Access Key: The Policy Primary Key

   To set the Event Hub connection information go to the MainPage method of the MainPage.xaml.cs file and replace the following lines with the information gathered in the previous step:

   ctdHelper = new ConnectTheDotsHelper(serviceBusNamespace: "windows10iot-ns",
   	eventHubName: "windows10iot",
   	keyName: "manage",
   	key: "YOUR_KEY",

   Note: Write down the Shared Access Key Name and Shared Access Key values, as you will use them again later.

3. Before the app can be deployed you need to change the solution target platform, since the Raspberry Pi is based on the ARM architecture. To do that select ARM in the Solution Platform dropdown:

   

   Setting the Solution Platform

   As you can see in the sample code, the app uses a button in the UI to simulate a real sensor. Every time the user presses the button the value of the sensor is incremented and that info is then sent to Azure.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
       ConnectTheDotsSensor sensor = ctdHelper.sensors.Find(item => item.measurename == "Temperature");
       sensor.value = counter++;
       ctdHelper.SendSensorData(sensor);
   }

4. For those devices lacking a monitor or display, the button will be replaced by a Timer so the same function can be performed without needing to click any button. If this is your case, perform the following steps.

   1. Replace the Button_Click method for this one:

      private void Timer_Tick(object sender, object e)
      {
          ConnectTheDotsSensor sensor = ctdHelper.sensors.Find(item => item.measurename == "Temperature");
          sensor.value = counter++;
          ctdHelper.SendSensorData(sensor);
      }

   2. Then, replace the call to the Button_Click method in the MainPage method for the following piece of code:

      //Button_Click(null, null);
      var timer = new DispatcherTimer();
      timer.Interval = TimeSpan.FromMilliseconds(500);
      timer.Tick += Timer_Tick;
      timer.Start();

      Which will make the Timer tick twice in a second.

   3. Lastly, remove the button from the UI:

      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      	<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
      		<TextBox x:Name="HelloMessage" Text="ConnectTheDots on IoT" Margin="10" IsReadOnly="True"/>
      		<!--<Button x:Name="ClickMe" Content="Click Me!"  Margin="10" HorizontalAlignment="Center" Click="Button_Click"/>-->
      	</StackPanel>
      </Grid>

5. Before adding real sensor information you can run this code to see how the device connects to your Azure Event Hub and sends information. Run the application.

   

   Debugging in the Output Window

6. After the app has been successfully deployed, it can start sending messages to the Event Hub. If the device is connected to a display and a mouse, click the Click Me button several times.

   Although the information sent cannot be seen in the Azure Management Portal (you will see how to read that information in the following sections), you could check the Event Hub dashboard monitor to see how many messages has been processed.

   

   Event Hub dashboard

   Note: The information in the Azure Portal Dashboard is not refreshed instantly and could take a couple of minutes.

7. If you followed the flow for devices without a screen attached, you will need to delete the timer created in that flow before continuing, because another timer will be created in the following steps so it will no longer needed. Remove the Timer_Tick method you created before and delete the following lines from the MainPage constructor

   var timer = new DispatcherTimer();
   timer.Interval = TimeSpan.FromMilliseconds(500);
   timer.Tick += Timer_Tick;
   timer.Start();

8. Now that the device is connected to the Azure Event Hub, add some real sensor information. First, you need to add a reference the FEZ HAT drivers. To do so, instead of manually adding the projects included in the GHI Developer's Guide, you will install the NuGet package that they provide. To do this, open the Package Manager Console (Tools/NuGet Package Manager/Package Manager Console) and execute the following command:

   PM> Install-Package GHIElectronics.UWP.Shields.FEZHAT

   

   Installing the FEZ hat Nuget package

9. Add a reference to the FEZ HAT library namespace in the MainPage.xaml.cs file:

   using GHIElectronics.UWP.Shields;

10. Declare the variables that will hold the reference to the following objects:

• hat: Of the type Shields.FEZHAT, will contain the hat driver object that you will use to communicate with the FEZ hat through the Raspberry.

• timer: of the type DispatchTimer, that will be used to poll the hat sensors at regular basis. For every tick of the timer the value of the sensors will be get and sent to Azure.

  FEZHAT hat;
  DispatcherTimer timer;

11. You will add the following method to initialize the objects used to handle the communication with the hat. The Timer_Tick method will be defined next, and will be executed every 500 ms according to the value hardcoded in the Interval property.

    private async void SetupHat()
    {
        this.hat = await FEZHAT.CreateAsync();
    
        this.timer = new DispatcherTimer();
        
        this.timer.Interval = TimeSpan.FromMilliseconds(500);
        this.timer.Tick += this.Timer_Tick;
    
        this.timer.Start();
    }

12. The following method will be executed every time the timer ticks, and will poll the value of the hat's temperature sensor, send it to the Azure Event Hub and show the value obtained.

    private void Timer_Tick(object sender, object e)
    {
        // Temperature Sensor
        var tSensor = ctdHelper.sensors.Find(item => item.measurename == "Temperature");
        tSensor.value = this.hat.GetTemperature();
        this.ctdHelper.SendSensorData(tSensor);
    
        this.HelloMessage.Text = "Temperature: " + tSensor.value.ToString("N2");
    
        System.Diagnostics.Debug.WriteLine("Temperature: {0} °C", tSensor.value);
    }

    The first statement gets the ConnectTheDots sensor from the sensor collection already in place in the project (the temperature sensor was already included in the sample solution). Next, the temperature is polled out from the hat's temperature sensor using the driver object you initialized in the previous step. Then, the value obtained is sent to Azure using the ConnectTheDots's helper object ctdHelper which is included in the sample solution.

    The last two lines are used to show the current value of the temperature sensor to the screen and the debug console respectively.

    Note: To show the value of the sensor in the screen the app is using the Welcome message textbox. In the following steps the UI will be improved.

13. Before running the application add the call to the SetupHat method in the MainPage constructor:

    public MainPage()
    {
        this.InitializeComponent();
    
        ...
        
        // Initialize FEZ HAT shield
        SetupHat();
        
    }

14. Now you are ready to run the application. Connect the Raspberry Pi with the FEZ HAT and run the application. After the app is deployed you will start to see in the output console (also in the screen) the value polled from the sensor. The information sent to Azure is also shown in the console.

    

    Output Window

    You can also check that the messages were successfully received by going to the Azure Management console's Event Hub Dashboard

    

    Event Hub Dashboard

15. Now you will add the information from another sensor. To incorporate the data from the Light sensor you will need to add a new ConnectTheDots sensor:

    // Hard coding guid for sensors. Not an issue for this particular application which is meant for testing and demos
    List<ConnectTheDotsSensor> sensors = new List<ConnectTheDotsSensor> {
    	new ConnectTheDotsSensor("2298a348-e2f9-4438-ab23-82a3930662ab", "Light", "L"),
    	new ConnectTheDotsSensor("d93ffbab-7dff-440d-a9f0-5aa091630201", "Temperature", "C"),
    };

    You can also change the unit of measure used by the Temperature sensor from Farenheit (F) to Celsius (C) since the FEZ HAT measueres temperature in Celsius.

16. Next, add the following code to the Timer_Tick method to poll the data from the temperature sensor and send it to Azure.

    // Light Sensor
    ConnectTheDotsSensor lSensor = ctdHelper.sensors.Find(item => item.measurename == "Light");
    lSensor.value = this.hat.GetLightLevel();
    
    this.ctdHelper.SendSensorData(lSensor);
    
    this.HelloMessage.Text = String.Format("Temperature: {0} °C, Light {1}", tSensor.value.ToString("N2"), lSensor.value.ToString("P2", System.Globalization.CultureInfo.InvariantCulture));
    
    System.Diagnostics.Debug.WriteLine("Temperature: {0} °C, Light {1}", tSensor.value.ToString("N2"), lSensor.value.ToString("P2", System.Globalization.CultureInfo.InvariantCulture));

    Note: If you want to poll the Light sensor data at a different rate, you will need to create another DispatchTimer and set it to different interval.

    After running the app you will see the following output in the debug console. In this case two messages are sent to Azure in every timer tick:

    

    Output Window after Adding the Light Sensor

17. (Optional) If you have a screen connected to the Raspberry Pi device, you can improve the existing UI to show the sensor information in the screen. To do that, replace the content of the MainPage.xaml file code for this one:

    <Page
    	x:Class="ConnectTheDotsIoT.MainPage"
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="using:ConnectTheDotsIoT"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d">
    	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    		<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
    			<StackPanel Width="100">
    				<TextBlock Text="Light: " FontSize="26.667" Margin="10" />
    				<TextBlock Text="Temp: " FontSize="26.667" Margin="10" />
    			</StackPanel>
    			<StackPanel>
    				<StackPanel Margin="10">
    				    <TextBlock Name="LightTextBox" FontSize="26.667" />
    				    <ProgressBar Name="LightProgress" Value="0" Minimum="0" Maximum="1" Width="150"></ProgressBar>
    				</StackPanel>
    				<TextBlock Name="TempTextBox" FontSize="26.667" Margin="10" />
    			</StackPanel>
    		</StackPanel>
    	</Grid>
    </Page>

    The preceding view code incorporates a new textbox for every sensor and also a progress bar to graphically show the value of the Light sensor.

18. Lastly, you will update the Timer_Tick method to adapt it to the new UI structure. Replace the method with the following code:

    private void Timer_Tick(object sender, object e)
    {
        // Light Sensor
        ConnectTheDotsSensor lSensor = ctdHelper.sensors.Find(item => item.measurename == "Light");
        lSensor.value = this.hat.GetLightLevel();
        
        this.ctdHelper.SendSensorData(lSensor);
        this.LightTextBox.Text = lSensor.value.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);
        this.LightProgress.Value = lSensor.value;
    
        // Temperature Sensor
        var tSensor = ctdHelper.sensors.Find(item => item.measurename == "Temperature");
        tSensor.value = this.hat.GetTemperature();
        this.ctdHelper.SendSensorData(tSensor);
    
        this.TempTextBox.Text = tSensor.value.ToString("N2", System.Globalization.CultureInfo.InvariantCulture);
    
        System.Diagnostics.Debug.WriteLine("Temperature: {0} °C, Light {1}", tSensor.value.ToString("N2", System.Globalization.CultureInfo.InvariantCulture), lSensor.value.ToString("P2", System.Globalization.CultureInfo.InvariantCulture));
    }

    

    Universal app UI

1. Go to the Power BI website and follow the sign-up process.

   Note: At the moment this lab was written, only users with corporate email accounts are allowed to sign up. Free consumer email accounts (like Outlook, Hotmail, Gmail, Yahoo, etc.) can't be used.

2. You will be asked to enter your email address. Then a confirmation email will be sent. After following the confirmation link, a form to enter your personal information will be displayed. Complete the form and click Start.

   The preparation of your account will take several minutes, and when it's ready you will see an screen similar to the following:

   

   Power BI welcome screen

Now that your account is set, you are ready to set up the data source that will feed the Power BI dashboard.

After some minutes of the job running you will see that the dataset that you configured as an output for the Job, is now displayed in the Power BI workspace Datasets section.

![Power BI new datasource](Images/power-bi-new-datasource.png?raw=true)

_Power BI: New Datasource_

> **Note:** The Power BI dataset will only be created if the job is running and if it is receiving data from the Event Hub input, so check that the Universal App is running and sending data to Azure to ensure that the dataset be created. To check if the Stream Analytics job is receiving and processing data you can check the Azure management Stream Analytics monitor.

1. Locate the WebSite folder in this GitHub repo and download.

2. Find the Assets folder and copy the Web.config file to inside the ConnectTheDotsWebSite folder of the Website.

   

   Copying the Web.config to the WebSite solution

3. Open the Web Site project (ConnectTheDotsWebSite.sln) in Visual Studio.

4. Edit the Web.config file and add the corresponding values for the following keys:

   • Microsoft.ServiceBus.EventHubDevices: Name of the event hub.
   • Microsoft.ServiceBus.ConnectionString: Namespace endpoint connection string.
   • Microsoft.ServiceBus.ConnectionStringDevices: Event hub endpoint connection string.
   • Microsoft.Storage.ConnectionString: Storage account endpoint, in this case use the storage account name and storage account primary key to complete the endpoint.

5. Deploy the website to an Azure Web Site. To do this, perform the following steps.

   1. In Visual Studio, right-click on the project name and select Publish.

   2. Select Microsoft Azure Web Apps.

      

      Selecting Publish target

   3. Click New and use the following configuration.

      • Web App name: Pick something unique.
      • App Service plan: Select an App Service plan in the same region used for Stream Analytics or create a new one using that region.
      • Region: Pick same region as you used for Stream Analytics.
      • Database server: No database.

   4. Click Create. After some time the website will be created in Azure.

      

      Creating a new Web App on Microsoft Azure

   5. Click Publish.

      Note: You might need to install WebDeploy extension if you are having an error stating that the Web deployment task failed. You can find WebDeploy here.

6. After you deployed the site, it is required that you enable Websockets. To do this, perform the following steps:

   1. Browse to https://manage.windowsazure.com and select your Azure Web Site.

   2. Click the Configure tab.

   3. Then set WebSockets to On and click Save.

      

      Enabling Web Sockets in your website

7. Browse to your recently deployed Web Application. You will see something like in the following screenshot. There will be 2 real-time graphics representing the values read from the temperature and light sensors. Take into account that the Universal app must be running and sending information to the Event Hub in order to see the graphics.

   

   Web Site Consuming the Event Hub data

   Note: At the bottom of the page you should see “Connected.”. If you see “ERROR undefined” you likely didn’t enable WebSockets for the Azure Web Site.