Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
jeff_durnwald
Explorer

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-simple...


 

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.


 


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.



26 Comments