Damir Dobric Posts : jQuery

Azure IoT Connected Weather Station

Damir Dobric — Thu, 25 Feb 2016 22:22:13 GMT

This year on Azure on Tour in Frankfurt we organized an IoTLab for all interested attendees. We scheduled 3slots of 2 hours.
Unfortunately they all ware booked out in very short time.

We prepared for this IoT lab a weather station on Arduino as described here. If you follow provided link step by step, you will most likely be able to build your own weather station based on sparkfun electronics red board (19$) and weather shield (39$).

The station will send telemetry data from station to Azure IoT hub. I tried to do all programming by using Arduino IDE and Visual Studio code. They all are kind of cool, but I’m Visual Studio guy. So I downloaded Node.js tools for Visual Studio. Here is also an interesting video, which describes how to use tools.

Once you have install tools, you can create new weather station project from Node.js project template shown below:

This will create all required artifacts as VS does it in every project type. As next, open project.json file and paste the project content as described here.

Content of your project.json file should look like shown in the snipped bellow. Please note that you change main entry file from weather.js as described in LAB guide to app.js, because VS creates main file in app.js. Right now you can leave it as it is, but it is not correct.

{
"name": "IoT-Labs-Arduino",
"repository": {
    "type": "git",
    "url": "https://github.com/ThingLabsIo/IoTLabs/tree/master/Arduino/Weather"
},
"version": "0.1.0",
"private": true,
"description": "Sample app that connects a device to Azure using Node.js",
"main": "app.js",
"author": "Damir Dobric",
"license": "MIT",
"dependencies": {
    "azure-iot-device": "latest",
    "azure-iot-device-amqp": "latest",
    "azure-iot-device-http": "latest",
    "johnny-five": "latest",
    "j5-sparkfun-weather-shield": "latest"
}
}

After you did this step, open the “develop command prompt for vs 2015” console and execute following statement in the folder where
project.json is located:

>npm install

As result you will see something like this:

Now, we need to implement the code in app.js, which collects events and sent them Azure IoT Hub. Following snippet shows all required code:

// https://github.com/ThingLabsIo/IoTLabs/tree/master/Arduino/Weather
'use strict';
// Define the objects you will be working with
var five = require("johnny-five");
var Shield = require("j5-sparkfun-weather-shield")(five);
var device = require('azure-iot-device');

// Use factory function from AMQP-specific package
// Other options include HTTP (azure-iot-device-http) and MQTT (azure-iot-device-mqtt)
var clientFromConnectionString = require('azure-iot-device-http').clientFromConnectionString;

var location = process.env.DEVICE_LOCATION || 'Frankfurt Messe';
var connectionString = process.env.IOTHUB_CONN || YOUR CONNSTR HERE. TAKE IT FROM DeviceExplorer';

// Create an Azure IoT client that will manage the connection to your IoT Hub
// The client is created in the context of an Azure IoT device, which is why
// you use a device-specific connection string.
var client = clientFromConnectionString(connectionString);
var deviceId = device.ConnectionString.parse(connectionString).DeviceId;

// Create a Johnny-Five board instance to represent your Particle Photon
// Board is simply an abstraction of the physical hardware, whether is is a
// Photon, Arduino, Raspberry Pi or other boards.
var board = new five.Board({ port: "COM8" });

// The board.on() executes the anonymous function when the
// board reports back that it is initialized and ready.
board.on("ready", function () {
    console.log("Board connected...");

    // The SparkFun Weather Shield has two sensors on the I2C bus -
    // a humidity sensor (HTU21D) which can provide both humidity and temperature, and a
    // barometer (MPL3115A2) which can provide both barometric pressure and humidity.
    // Controllers for these are wrapped in a convenient plugin class:
    var weather = new Shield({
        variant: "ARDUINO", // or variant: "PHOTON",
        freq: 1000,         // Set the callback frequency to 1-second
        elevation: 100      // Go to http://www.WhatIsMyElevation.com to get your current elevation
    });

    // The weather.on("data", callback) function invokes the anonymous callback function
    // whenever the data from the sensor changes (no faster than every 25ms). The anonymous
    // function is scoped to the object (e.g. this == the instance of Weather class object).
    weather.on("data", function () {
        var payload = JSON.stringify({
            deviceId: deviceId,
            location: location,
            // celsius & fahrenheit are averages taken from both sensors on the shield
            celsius: this.celsius,
            fahrenheit: this.fahrenheit,
            relativeHumidity: this.relativeHumidity,
            pressure: this.pressure,
            feet: this.feet,
            meters: this.meters
        });

        // Create the message based on the payload JSON
        var message = new device.Message(payload);

        // For debugging purposes, write out the message payload to the console
        console.log("Sending message: " + message.getData());

        // Send the message to Azure IoT Hub
        client.sendEvent(message, printResultFor('send'));
    });
});

// Helper function to print results in the console
function printResultFor(op) {
    return function printResult(err, res) {
        if (err) console.log(op + ' error: ' + err.toString());
    };
}

To run the code, in already opened command prompt execute : >node app.js

If all works fine, the app will run and produce output as this one:

If your app fails with connection error and you are sure your connection is ok, then it is most likely that AMQP ports 5671 and 5672 are blocked. In that case you will have to switch to http. To do that add dependency to HTTP library instead of amqp one:

"dependencies": {
    "azure-iot-device": "latest",
    ~~"azure-iot-device-amqp": "latest",~~
    "azure-iot-device-http": "latest",
    "johnny-five": "latest",
    "j5-sparkfun-weather-shield": "latest"
}

Additionally you will have to add http package in app.js

var clientFromConnectionString = require('azure-iot-device-http').clientFromConnectionString;

EventHubs support for Azure ServiceBus JavaScript SDK

Damir Dobric — Mon, 26 Jan 2015 21:29:00 GMT

We published new version of Azure Service Bus Java Script SDK v1.2. This version provides supports for sending of events to Azure Service Bus Event Hubs.

Supported features:

Sending of messages to the queue
Reading of messages from queue
Sending of messages to Topic
Sending of events to EventHub (NEW)
Reading of messages from subscription
Abondon
PeekLock-Read/PeekDelete-Read
Complete
Creating Shared Access Token Signatures
Custom BrokeredMessage properties
CORS

Following sample shows how to send an event to Service Bus Event Hub.

           var clear = function () {
               $("#result").html("");
               $("#msgId").html("");

           }

           var ehubClient = new EventHubClient(
           {
               'name': ‘eintrachtfrankfurt’,

               // This is by spec a partition key if specified.
               'devicename': 'jssimulator',
               'namespace': "mynamespace",
               'sasKey': "Hakan:)**/bU=",
               'sasKeyName': "send_events",
               'timeOut': 10,
           });

$("#btnSend").click(function () {

               var eventBody = { "24": txtTemp.value,
                                  "area": “Frankfurt am Main”};

               var msg = new EventData(eventBody);

                   ehubClient.sendMessage(msg, function (messagingResult) {
                   $("#result").html(messagingResult.result);
                   $("#eventData").html(JSON.stringify(eventBody));
               });
           });

});
</script>

Open Source Project on GitHub.

Nuget Packages sbjssdk 1.2.0 and sbjssdk 1.2.0 samples.

Related Samples:

1. How to send messages to Service Bus from .NET Microframework (Example Gadgeteer SPIDER):
http://developers.de/blogs/damir_dobric/archive/2014/12/09/iot-and-industrie-4-0-for-sharepoint-part-i.aspx

2. How to build SharePoint and Office 365 Apps which send messages to Service Bus and consume device events in JavaScript Microservice on top of Service Bus messaging.
http://developers.de/blogs/damir_dobric/archive/2014/12/16/iot-and-industrie-4-0-for-sharepoint-part-ii.aspx

3. EventHubDashDemo provides code to visualize how Azure Event Hubs enables very large scale data ingestion from a large number of sources and very high throughput event consumption through the use of partitioned consumers.
https://github.com/juanjperez/EventHubDashDemo

1. Introduction in SBJSSDK:
http://developers.de/blogs/damir_dobric/archive/2014/08/07/welcome-azure-servicebus-javascript-sdk.aspx

2. Jumpstart SBJSSDK
http://developers.de/blogs/damir_dobric/archive/2014/08/12/jumpstart-azure-service-bus-javascript-sdk.aspx

Getting binding context on event in knockout

Damir Dobric — Thu, 06 Mar 2014 10:25:00 GMT

This post is just for documentation purposes. We have often a requirement to obtain the binding context instance of the DOM element.
This is usually the case when you for example subscribe some event. Following sample shows a keyup event as a INPUT element which is a child of some DIV element.
The parent DIV of clicked INPUT element holds the binding context.

$("input[data-iscontentchange='true']").keyup(function (e){

   var clickedParentElement = $(e.originalEvent.target).parents()[0];
   ko.contextFor(clickedParentElement).$data.IsConfigSettingDirty(true);
});

The ko.contextFor(clickedParentElement).$data holds the instance of the object which is bound to parent element.

Page Transition between with JQuery Mobile and Knockout.js

Damir Dobric — Tue, 01 Oct 2013 17:41:00 GMT

If you are fan of jQuery mobile and Knockout, you have probably noticed that page transition is a true issue. If you want to understand why,
you can try here and here and many, many other. All very nice articles, which obviously explaining some peace of technology which MUST work.

To make this clear, take a look on following code:

$("div[data-isclickable='true']").click(function (e) {

$.mobile.changePage("#activityDetailPage");

});

This peace of code will navigate to next page called ‘’activityDetailPage’ when some div tag is clicked.
If the code above is executed in the page which represents for example the list of items then activityDetailPage should represents the item details.
This is common navigation requirement.
Assuming that the detail page is bound to some object named ‘SelectedObject’ the HTML would look like:

<label for="ActivityId" class="ui-input-text">Activity ID:</label>
<input data-mini="true" name="textarea" id="ActivityId" data-bind="value: ActivityId"/>

<label for="Status" class="ui-input-text">Status:</label>
<input readonly="readonly" data-mini="true" name="textarea" id="Status" data-bind="value: Status"/>

<label for="ProcessName" class="ui-input-text">ProcessName:</label>
<input readonly="readonly" data-mini="true" name="textarea" id="ProcessName" data-bind="value: ProcessName"/>

</div>

Unfortunately when you navigate to this page, the data will not be bound to HTML elements. This is because, the knockout binding has run before the user has clicked on item (div tag).
In every normal application framework this is something which just should work. .NET, Silverlight and WPF developers are mostly frustrated, because some elementary and trivial things just do not work.
jQuery Mobile might be nice and knockout too, but both together? Hmmm? If you don’t understand why somebody might be disappointed, because such things do not work then try to image what would happen when 1+1 sometime is 2 and sometimes 3.
in this century architects expect binding to work like ‘+’ operator. It just works.

So, here is the solution:

$(document).bind('pagechange', function () {

ko.applyBindings(yourModelInstamce.SelectedItem, document.getElementById("activityDetailPage"));

});

Nuget Install-Package error

Damir Dobric — Wed, 25 Jul 2012 16:44:23 GMT

When trying to install the NuGet package you might experience following error:

PM> install-package *package name*

Install-Package : The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel.
At line:1 char:16
+ install-package <<<< AspNetWebApi
+ CategoryInfo : NotSpecified: (:) [Install-Package], WebException
+ FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

This error is caused by untrusted RapidSSL CA certificate, which is used to sign the NuGet package.

Usually is this certification root trusted. If not put it in Trusted Root Certification Authorities.

Mote that this error can often happen if the Fiddler is running in the background an Fiddler’s certificate is not trusted. In this case either just close the fiddler or trust its certificate.

Speedup your Web Application with Windows Azure Web and new “Cache Worker Role”

Damir Dobric — Sun, 17 Jun 2012 18:13:21 GMT

This article describes how to create ASP.NET MVC application as a WebRole and to speed it up by using CacheRole introduced in Windows Azure Platform release 1.7 (also called Spring Release [2012]). The way how the distributed cashe works and how it can be consumed by an application didn’t really change. Because of that I will focus only new features, because the way how they are build up and how they works has been slightly changed in this release.

Create Solution with Cache Role

To build solution I will use Visual Studio 2012 and Windows Azure SDK 1.7. If you didn’t install it already do it as described in my previous post here.
Now create the solution and add one WebRole (for example ASP.NET MVC4) and the CacheWorkerRole (I will explain it a bit latter).

The project SharePointFastDataReaderCache is of type CacheWorkerRole and it represents the virtual machine which will host dedicated instance of distributed cache. This cache will be consumed by project (WebRole) SharePointFastdata reader. Please don’t' be confused with SharePoint name. It is not my focus in this article. I just used an existing solution which does the more or less same thing with SharePoint.

The just created role is in fact WorkerRole which is place holder for Distributed Cache Service. That means: “Do not add any code to that role!!” Before you do deployment select the Worker Cache Role and go to properties (dbl-click on SharePointFastDataReaderCache ). Select enable cache and click on Dedicated Role as shown below.

If you have added Cache as role project, you should select “dedicated role”. In this case Windows Azure will during deployment process allocate Virtual Machine (or more if you have selected more than one instance) and install Distributed Cache Service on it (them). If you don’t want to have dedicated machine for cache then go to properties of you WebRole and select Co-located Role, Windows Azure will in this case install distributed cash service on the same machine where you web role is running. In this case you even don’t need Worker Cache Role as project. But you can have it. It might be that you are doing lot of caching and from architecture point of view this might also be a valid solution. I means you have Worker Cache Role as dedicated cache and you also have co-located cache at the WebRole. Physically you would by deployment allocate two different caches with number of chosen instances for each of them.

If you ever worked with Windows Server AppFabric (WSA) similar version of cache will be installed in the slightly different version of cache. In contract to WSA the new one is called simply CacheService. Remember, WSA cache service is called “AppFabricCachingService”. Following pictures shows task manager of the WinAzure machine which host cache as dedicated role.

I captured pictures by connecting to dedicated worker cache role (if Dedicated Role is used) and by connecting to WebRole (if Co-Located cache has been used).
If the WebRole don’t specify the cache processes and services shown above will not be installed on the machine.
Co-located cache-role would be configured as shown at the next picture.

In the picture above is also shown how to add additional caches to the cache instance. remember, this has not been possible by using Windows Azure Cache in version 1.6.

Note that emulator of cache is also provided. The cache is emulated by the cache service emulator. In the picture below, I captured emulator for two cache instances.

Last, but not least the cache instance provisioned here (v1.7) is different one than cache instance v1.6 known as Windows Azure AppFabric Cache, which is shown at the picture below:

Installing cache Client components

After that you have created the solution you will have to install Windows Azure Caching (currently in preview.) libraries by using NuGet. Note that value “Include Prereleases“ (see picture below) is selected in the combo. Otherwise you will find the NuGet package Windows Azure Caching (almost the same name), which is related to version 1.6. That one will not work in this scenario. Even better to say, this one will work, but you will have to use Windows Azure AppFabric cache, which is not the same as Windows Azure Cache Role, which we will focus in this article. Following picture shows what and how to install by NuGet.

After the package has been successfully installed following references are added to project.

Additionally the package inserts following section in the configuration file. This section looks slightly different that the common caching section.
The identifier specified in dataCacheClient element is the name of the role which hosts physically distributed cache. For example following configuration will setup using of dedicated cache deployed by the Worker Cache Role.

If you rather used the Co-located cache in your WebRole (no Worker Cache Role used) then only identifier has to be changed to the name of the WebRole instead of dedicated cache role as shown below:

In the MVC (WebRole) application I defined two actions PutCacheValue and GetCacheValue. Please note in picture below that output-cache has been disabled. This is very important, because output-caching (which is feature of ASP.NET) would prevent the system to work properly.

The JavaScript functions which puts value in the cache and gets it out look like:

At the end the sample application looks like:

More about Caching: https://www.windowsazure.com/en-us/develop/net/how-to-guides/cache/

Knockout out of stack space

Damir Dobric — Wed, 13 Jun 2012 12:14:15 GMT

When working with knockout and drop-down lists (combo-boxes) you might get following error.

SCRIPT28: Out of stack space
jquery-1.7.2.min.js, line 2 character 22680

This seems to be knockout framework bug or it is by design. Whatever the case is, the issue can be described as follows. Assume, you have a model like this one:

{
"MyPropertyOk": null,
"MyPropertyBad": ko.observable(“”)
}

Usually, you need to define all properties as observable. To demonstrate this issue, I have two properties. First one is not observable (MyPropertyOK) and second one is observable (MyPropertyBad).

To bind them I used two combo boxes:

<select id="comboOk" data-bind="value: MyPropertyOk">

               <option value="1">Jedan</option>
               <option value="2">Dva</option>
               <option value="3">Tri</option>
               <option value="4">Cetiri</option>
           </select>

<select id="comboBad" data-bind="value: MyPropertyBad">

<option value="1">Jedan</option>
<option value="2">Dva</option>
<option value="3">Tri</option>
<option value="4">Cetiri</option>
</select>

If you start this code, the error shown above will be thrown. The error is caused by MyPropertyBad. To make this working, you model has to look like:

{
"MyPropertyOk": null,
"MyPropertyBad": null
}

Hope this will save a bit of your time.