We are back to continue the series on experiencing IoT within HCP.  Our first blog focused on getting a sensor connected to send measurement data to HCP and then visualize it in real time.  The goal was to get this up and running in just a few steps and we largely succeeded with only a few people having difficulty.  To catch up with us, you can find the first blog here:  http://scn.sap.com/community/developer-center/cloud-platform/blog/2015/10/26/the-cheapest-and-simplest-way-to-send-sensor-data-to-the-hana-cloud-platform

 

The UI in the first blog was a very simple web page with some gauges on it, so it is time to focus on improving this.  Fortunately, HCP has a very powerful SAP UI5 development environment that we can use to build HTML5 applications – Web IDE.  Normally, you will build HTML5 applications which interact to the backend through OData.  However, that is not a requirement of all applications within the Web IDE, so we are going to provide you a tile based single page application which can be modified to your heart’s content.

 

/wp-content/uploads/2016/03/blog2_902199.png

To support easy customizations, we implemented the application using a modified Chain of Responsibility design pattern.  Pluggable “handlers” are defined to perform actions on the messages as they are received.  Based on the type of sensor, the types of handlers used are very different.  The general flow of the HTML5 application is this –

 

  • A websocket connection is made from the HTML5 application to the websocket server running on the Java application running on your SAP trial account.

 

  • When a message is received, each registered handler is asked if they are interested in the message.  If so, then a render method is executed on the handler to perform the actions necessary by the handler.  These are normally the rendering of charts / gauges, etc.

 

  • After all handlers have had their chance to respond to the message, a final method “afterAllMessageHandlers()” is called to perform one-time actions on the message such as updating a message count or checking against any rules.

 

Running the Application

 

  • Ensure that you have your sensor up and running as described in part 1.

 

 

 

  • Right click on “Workspace” and choose “Import -> From File System”.  Choose the file downloaded in the step above.

 

  • After it is imported into your workspace, you can run it in test mode by selecting the index.html file and clicking on the “Run” icon.

 

  • To deploy it, right click on the project “simpleUI5dashboard” and choose “Deploy -> Deploy to SAP HANA Cloud Platform”.  Login if necessary.  If you want to utilize the Git integration, select the checkbox to “Connect to the SAP HANA Cloud Platform Git repository”.  Press Deploy.

 

Additional Goodies

 

  • On the settings page (from the gear icon on the bottom right), you can change the image used for the orientation.  This gives a nice visual of how the sensor is oriented.

 

  • Check the metric box to get the temperature values in celsius.

 

  • The rules settings icon allows you to define a Javascript condition against the data.  You can interrogate the last value or an average value of any of the measurements.  For example:
    • device.getLast(‘movement’) > 10 // Detect any real movement
    • device.getLast(‘light’) > 50 // Detect a significant amount of light
    • device.getAverage(‘movement’,5) > 70 && device.getLast(‘roty’) > -40 && device.getLast(‘roty’) < -20  // The sensor is on its head and the average of the last 5 movement measurements indicates significant movement
    • Measurements available – movement, maccelerationx, maccelerationy, maccelerationz, temperature, irTemperature, rotx, roty, rotz, magx, magy, magz, humidity, light, firmware, pressure
    • Make sure you “Active Rules Engine” or it won’t actually try to evaluate your defined condition.
    • If the rule is found to be true, then an alert box will display.  You could have it do any number of actions like sending an email or integrating with a framework like IFTTT.
  • Since this is using UI5 and tiles, you can access this page from your tablet, phone, or desktop and it will use responsive design to change how it is rendered.

From here, you can change the UI at will and see the changes.  Don’t forget to do a force refresh (ctrl-F5) when you make a change to one of the underlying Javascript files in order to see the result.

 

Stayed tuned for the next installment when we persist the data in HANA and enable some historical analytics.  If you have any questions or comments, please add them below.

To report this post you need to login first.

26 Comments

You must be Logged on to comment or reply to a post.

  1. Sascha Mueller

    Great Blog!

    But Unfortunately i got an error. And don’t know why…

    When I deploy the application from WebIDE to SAP HANA Cloud Platform, then call the Application and click on the Application URL i got the error “HTTP Status 404 – Not found”.

    Has anybody an idea, what this could be?

    (0) 
    1. Jeff Durnwald Post author

      Hi Sashcha –

      There was a problem in the neo-app.json file.  Change the welcomeFile property line to this:

        “welcomeFile”: “/index.html”,

      I corrected the problem in the project.

      Regards,

      Jeff.

      (0) 
    1. Jeff Durnwald Post author

      Hi Cornelius –

      Hi Sashcha –

      There was a problem in the neo-app.json file.  Change the welcomeFile property line to this:

        “welcomeFile”: “/index.html”,

      I corrected the problem in the project.

      Regards,

      Jeff.

      (0) 
      1. Cornelius Jaeckel

        Hi Jeff –

        thanks for updating the project. Now I was able to run the HTML5 application.

        However it seems the HTML5 application (UI5 dashboard) does not receive any sensor messages from the running java application.

        The simple JAVA application runs pretty fine but the HTML5 application does not show anything.

        Could you please be so kind and give some instructions what to do.

        Thanking you in advance

        Regards,

        Cornelius

        (0) 
        1. Sascha Mueller

          Hi Jeff,

          same behaviour with my app. I can see the tiles, but no sensor data.

          At the bottom of the page there is a sign “Connection dropped”.

          A question:

          Perhaps the problem is the definition of the connection between the HTML-App and the websocket server? Where is the connection defined? Perhaps we have to adjust it? Because i think it could not always be the same.

          Thanking you in advance

          Regards,

          Sascha

          (0) 
          1. Sascha Mueller

            Hi Jeff,

            i got some more informations. I found the coding where websocket is defined in wsManager.js . It seems right. In the console of the browser i found the following error:

            WebSocket connection to ‘wss://simplesensortags0006509056trial.hanatrial.ondemand.com/simpleSensortag/ws’ failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET

            What could be the problem?

            Regards

            Sascha

            (0) 
  2. Pavan Hampi

    Hello Expert,

    I am facing same issue, No any data from sensor is displaying on dashboard & at bottom of dashboard .Could you please help me out ? Sensor data is displaying on browser(link from Java Applications of HCP cockpit). connection_dropped.JPG

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
  3. Giulio Ancilli

    Hi Jaff,
    Unfortunately i got an error. And don’t know why…
    I use MAC and Safari and I follow the instructions but when I try to run the application I obtain a blank page

    (0) 
  4. Lance Nurick

    Hi Jeff,

    Thank you for making this blog, it is really helpful. I am really interested in part 3 and part 4 (especially part 4) but they don’t seem to be available (

    • In Part 3, we explore how to persist the data in HANA in HCP
    • In Part 4, we integrate with the IoT Services provided by HCP)

    Is there any chance you could post a high level overview for how to consume sensor data from the Sensor Tag in the HCP IoT services. I was able to do this in about 5 minutes using IBM’s Watson IoT platform but I have already spent 3 evenings this week trying to get it working on SAP HCP to no avail. any guidance you can provide (specifically on how to push data from the sensor to HCP using the MQTT protocol) would be greatly appreciated.

    (0) 
    1. Luis Lara

      Hi Lance,

      I’m trying to do the same: sending messages from a TI Sensor Tag to SAP Cloud Platform IoT Service. So far no luck, have you manage to do it? Thanks a lot. Luis Lara.

      (0) 
      1. Anton Levin

        Hello Luis, if you want to bring TI Sensor Tag sensor data to SAP Cloud Platform, this blog post [1] might be interseting for you . Regards, Anton

        [1] https://blogs.sap.com/2016/03/22/try-out-hcp-iot-services-with-ios-devices-and-sensor-tags/

        (0) 
  5. David Smith

    I agree with Lance Nurick. A guide to consume Sensor Tag in the iotmms service would be really helpful and allow us to explore the iotmms functions.
     

    (0) 
  6. Luis Lara

    Hi Jeff,

     

    I got an error message trying to upload the dashboard app to my HCP account. Do I have to change the content of the file before uploading it in HCP?

    Best Regards:

    Luis Lara.

    (0) 
    1. Sajid Amir

      Hello Luis, please only use Alert Moderator for reasons as described in our Rules of Engagement: http://www.sap.com/community/about/rules-of-engagement.html

      (0) 

Leave a Reply