Skip to Content
Author's profile photo Former Member

Visualizing iPhone Sensor Data with SAPUI5

Screenshot 2016-05-26 12.47.28.png

The goal of this blog post is to share a SAPUI5 dashboard that I have built in the HANA Cloud Platform (HCP) using the SAP Web IDE to extend the SensorPhone application from another blog post. Within a few minutes, you will be able to visualize the sensor data that is streaming from your iPhone to HCP. Please check out Pat Colucci’s SensorPhone blog post here.

 

Before we get started, here is what you will need:

  • The iOS SensorPhone app – version 1.3.2
  • iotmms, configured to the instructions outlined in the SensorPhone tutorial
  • HCP account
  • The DashboardInCloud.zip and iotmms file, located here.

 

Step 1: Save the iotmms Table Name

If you have followed the SensorPhone tutorial, you should be able to view the sensor data in the HCP iotmms. To open the iotmms, select Java Applications in the HCP side panel. The iotmms should already be deployed. Select iotmms to open the iotmms overview page.

Screenshot 2016-05-26 15.30.16.png

The Application URL should now be displayed. Select the URL to launch the iotmms application. Note: The service must be started in order for this step to work.

Screenshot 2016-05-26 15.30.30.png

Select the Display stored messages tile.

Screenshot 2016-05-26 15.30.54.png

A list of the existing table names are displayed. One of the tables should contain your sensor data. The table was automatically generated from your first HTTP Post in the SensorPhone tutorial. Select the table that contains the iPhone sensor data.

Screenshot 2016-05-26 15.31.05.png

Copy the table name. Note: Only copy the text that begins with T_IOT_. You do not need the part that begins with NEO_.

Screenshot 2016-05-26 15.31.30.png

You can also find the table name by selecting OData API, located at the top right of the table. By clicking the URL, you will open a new tab and find the table name in the first <id></id> tag, shown below. Save this table name because it will be necessary to access the data in the dashboard application.

Screenshot 2016-05-26 15.32.19.png

Step 2: Create IoT Destination

Creating a destination will allow you to access the data within the Message Management Service (mms) in HCP.

 

Select Destinations in the HCP side panel, then select either New Destination or Import Destination.

Screenshot 2016-05-26 12.24.31.png

You can manually enter all of the table data or use the iotmms file to import the destination settings. Please do not change the name of this destination.  Update the URL ( https://iotmms<userID>trial.hanatrial.ondemand.com/) to include your I-number or P-number. Entering the HCP username/password under Authentication will allow you to access the destination from the dashboard without having to constantly reenter your username/password.

Screenshot 2016-05-26 12.29.10.png

Hit Save and then Check Connection. If everything was entered correctly, you should receive a popup message that indicates a successful connection.

Screenshot 2016-05-26 12.29.38.png

Step 3: Import the Dashboard to SAP Web IDE

To open SAP Web IDE, please select the Services option on the HCP side panel. Scroll down to the SAP Web IDE tile. Enable this service if you have not done so already. Select the SAP Web IDE tile and then select the Open SAP Web IDE link.

Screenshot 2016-05-26 12.30.17.png

Screenshot 2016-05-26 12.30.29.png

Within SAP Web IDE, select the Workspace folder and right click to view the available options. Select Import > From File System. Navigate to the DashboardInCloud.zip file. You can download the zip file here.

Screenshot 2016-05-26 12.31.13.png

After the file has been imported to the SAP Web IDE, select the index.html file and then select the Run icon.

Screenshot 2016-05-26 12.32.14.png

A new tab should open with the settings page. Enter the table name from Step 1 and then select the desired refresh rate. If you are not streaming any data from the SensorPhone application, leave the refresh rate as Just Once. If you are streaming data from the SensorPhone application, select the matching refresh rate and the chart will update automatically. Selecting the Start button will pull the data from the mms, using the destination, and will display the top 30 values in a table.

Screenshot 2016-05-26 12.32.49.png

The example table below only has 3 rows of data. Select the View Chart option in the top left of the screen to visualize the sensor data.

Screenshot 2016-05-26 12.41.27.png

Currently, the chart is only showing the accelerometer data from the iPhone, but this can be easily changed to include other values.

Screenshot 2016-05-26 12.41.40.png

If you are streaming data from the SensorPhone app or manually publishing the data from the iotmms, select a refresh rate other than Just Once and the chart will update automatically.

Screenshot 2016-05-26 12.47.28.png

 

Final Thoughts

The HANA Cloud Platform provides users with a complete set of tools and services to develop virtually any IoT project. In the SensorPhone tutorial, you were able to easily create device types and messages to collect sensor data in HCP. Using the same platform, you are now able to visualize the data from your devices. The project can be easily extended to integrate with core ERP modules, such as SAP Plant Maintenance. For example, rules could be setup to trigger events within the PM module to create a Work Order or Notification.

 

 

 

Anthony McLeod

LinkedIn

Assigned Tags

      38 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Patrick Colucci
      Patrick Colucci

      Great post, Anthony! This is perfect for anyone looking for a dashboard with their SensorPhone app.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you, Pat!

      Author's profile photo Glenn Sawyer
      Glenn Sawyer

      Very cool app.  We should take a moment to recognize Pat Colucci small contribution.  The magic all happens RIGHT HERE on the Analytics side.

      Thanks Anthony.  Please keep them coming

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, Glenn!

      Author's profile photo Former Member
      Former Member

      Very good.

      Thanks a lot. 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, Nilton!

      Author's profile photo Henrik Bruentrup
      Henrik Bruentrup

      Great tutorial. Unfortuntely I am getting an HTTP 404 - Error when trying to call my table.

      "Failed to load resource: the server responded with a status of 404 (Not Found)"

      I imported the destination as suggested and the connection test is successful.

      I do use different message types, as for example "accX" instead of your "AccelerometerX". However, I do not think this is the issue?

      Any suggestions?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Henrik,

      Thank you for checking out the tutorial. The issue may be due to the name change in the message. To fix this, you can edit the {C_ACCELEROMETERX} in the "Main.view.js" file in the "view" folder. You will also have to change the Y and Z values.

      For the table:

      The original code:

      var oCellX = new sap.m.Text({

        text: "{C_ACCELEROMETERX}"

        });

      The new code:

      var oCellX = new sap.m.Text({

        text: "{C_ACCX}"

        });

      For the chart:

      The original code:

      measures: [

                      {

                      name: "AccelerometerX",

                          value: "{C_ACCELEROMETERX}"

                      },

      The new code:

      measures: [

                      {

                      name: "AccelerometerX",

                          value: "{C_ACCX}"

                      },


      Note: Do not change the "name" in the chart measure since it is used elsewhere.


      Please let me know if this helps.

      -Anthony

      Author's profile photo Henrik Bruentrup
      Henrik Bruentrup

      Hi Anthony,

      unfortunately it did not.

      Following along the tutorial, this time using your message types, I receive the following error (which is the same error as when using my own message types):

      IOT_Error.jpg

      Any idea?

      IOT_Table.jpg

      Best regards,

      Henrik

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Henrik,

      I am looking into the issue . Some people are experiencing similar problems. I am currently working on an updated version of the dashboard that may fix some of these problems.

      Regards,

      Anthony

      Author's profile photo Jean-Philippe Pain
      Jean-Philippe Pain

      Great post and tutorial Anthony. Unfortunately, I am stuck as it doesn't display anything from my IoT table. No error message either. Destination is working well.

      All previous steps are done and working correctly also (collecting data from App,...).

      Since I don't have any error messages,it is quite annoying for investigation.

      In fact, I can put whatever I want in the table name, it doesn't do anything or say anything.

      Would you have any suggestions where should I look ?

      EDIT : only error I see is :

      1:10:32 PM (git) Cannot add Git ignore Cannot read property 'getContent' of null

      1:10:32 PM (git) .gitignore was not updated

      but not sure it is relevant.

      Thanks

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Jean-Philippe,

      Firstly, thanks for checking out the blog/tutorial.

      Have you updated the application recently? I know the SensorPhone application was updated a few months ago to change the message fields. If you are experiencing the issue with the most up to date app version, feel free to send me a screenshot of the table in the IoT service. I can use this as a starting point to debug the issue.

      Kind regards,

      Anthony

      anthony.mcleod@sap.com

      Author's profile photo Jean-Philippe Pain
      Jean-Philippe Pain

      Hi Anthony,

      Thank you for your answer.

      FYI - I have downloaded the application last week so I think I have the last ´version.

      Table :

      /wp-content/uploads/2016/06/table_969292.jpg

      table code :

      /wp-content/uploads/2016/06/2016_06_07_09_40_36_969326.jpg

      In Web IDE, whatever I am setting in table field, it doesn't work.

      /wp-content/uploads/2016/06/2016_06_07_09_45_13fdfd_969327.jpg

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Jean-Philippe,


      Can you also send a screenshot of the destination configuration? Just an FYI, the table will not display any data if you select "view table" without first hitting "Start".


      Regards,

      Anthony

      Author's profile photo Jean-Philippe Pain
      Jean-Philippe Pain

      Hi Anthony,

      I know I need to push the start button. But like I said previously, it is like the application is not fetching a thing.

      That is my destination. And it is working when I am testing it.

      /wp-content/uploads/2016/06/2016_06_08_09_22_17_970133.jpg

      Only error I see in this message but I don t know if it is relevant n SAP web IDE after launching index.html

      :

      9:25:49 AM (git) Cannot add Git ignore Cannot read property 'getContent' of null

      9:25:49 AM (git) .gitignore was not updated

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Jean-Philippe,


      I am still looking into this issue. I don't know if the git message is related. I have tested it on other accounts and could not replicate the error message. I hope to create a newer version of the dashboard in the near future.


      -Anthony

      Author's profile photo Jean-Philippe Pain
      Jean-Philippe Pain

      Hi Anthony,

      I think it comes from this GIT error as I cannot get content from the table. I will try to debug it.

      Thanks anyway for your help and good work on this application and tutorial !

      Author's profile photo Jean-Philippe Pain
      Jean-Philippe Pain

      It seems that I have an error in Main.Controller.js on an harcoded URL. Now why only me ? That I don t know.

      /wp-content/uploads/2016/06/2016_06_10_07_56_34_972093.jpg

      Author's profile photo Former Member
      Former Member

      Hi Jean,

      I am also experiencing the same problem. Did you got any solution?

      Thanks

      Author's profile photo Witalij Rudnicki
      Witalij Rudnicki

      I know it does not help much, but I just done all these steps in my account and in my case it works 🙂

      /wp-content/uploads/2016/06/iotviz_971714.png

      Author's profile photo Witalij Rudnicki
      Witalij Rudnicki

      Using the app to visualize elevation profile of my yesterday's ride from Wrocław to Warsaw:

      wrowawAltitude.PNG

      Thanks!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Brandon,

      Thanks for checking out the blog. The table is currently setup to show 3 accelerometer values and audio. The chart does not have the audio value setup. You can easily add it to the chart by editing the Main.view.js file.

      You can add the following object to the end of the measures array:

      {

           name: "Audio",

           value: "{C_AUDIO}"

      }

      It will go after the AccelerometerZ object (please add a comma before adding the audio object) so the measures array will then look like:

      Measures array.jpg

      You will also have to add "Audio" to the values array in the feedValueAxis variable. Here is what it should look like after the change:

      Measure feedaxis.jpg

      Hope this helps and please let me know if you have any other questions.

      Regards,

      Anthony

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Brandon,

      Glad to hear you were able to get the audio to work!

      Not exactly sure why the table or chart is not displaying the other three accelerometer values. Does the table in the IoT service display data for the accelerometers? I would also just check that the column names match my screenshot below. These fields are from Pat Colucci's blog post are automatically converted to uppercase and begin with "C_". The chart and table are hard coded to work with these field names. I am working on a version that will bring in the column names for a future blog post

      IoTMMSTable.jpg

      Regards,

      Anthony

      Author's profile photo David Lincourt
      David Lincourt

      Thanks for this great blog. It was part of the inspiration for a simple app that displays the Heat Stress Index. I blogged about it here: It's hot out here!

      Author's profile photo Matthias Heiler
      Matthias Heiler

      just a little comment.

      In my case the data where sent from my iPhone to the HCP but not displayed in the dashboard.

      The reason we found out in debugging mode (network) was an error 202. The reason was that I have copied the table name T_IOT.... with a trailing blank.

      So the application is very sensitive on that. So don't have a trailing blank in the table name.

      Author's profile photo Former Member
      Former Member

      Thank you Anthony. Was excited to see something working perfect the first time.

      Great blog. Please keep it coming.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Chinnaiah!

      Author's profile photo Andreas Marte
      Andreas Marte

      thanks !

      my scenario is a bit different with a ublox sensor, connected over bluetooth to iphone and HCP. Data connection to HCP works.
      i want to add some other values with the column name from the HCP table in the file Main.view.js, equal to your column config, but the file only shows your created column
      Do i need to change some parts of the program ?

      Author's profile photo Andreas Marte
      Andreas Marte

      works now, refreshing browser cache helps ...

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Andreas,

      Glad you were able to get it to work. If you deploy your application on HCP and update it afterwards, you may have to clear your cache as you have indicated. I have found that this issue occurs only for deployed applications.

      You can change the column names in the Main.view.js file. You will have to update both the table and the chart control separately. For the chart, you would have to change the oDataset measures and the values in the feedValueAxis object.

      Regards,
      Anthony

      Author's profile photo Aaron Long
      Aaron Long

      Hi Anthony,
      I got http 500 error。
      then some fields of the table got displayed.  then show no data.
      the iotmms application's http access log show no 500 entry.

      what could be the problem?

      thanks & Best Regards,
      Aaron

      ===============================================================
      sap-ui-core.js:126 GET https://webidetesting7965700-i029837trial.dispatcher.hanatrial.ondemand.com…/T_IOT_849FFC44A70098761213?$orderby=G_CREATED%20desc&$top=30&$format=json 500 (Internal Server Error)
      ========================================
      the iotmms application's http access log show no 500 entry.
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:27:17 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:27:17 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 149 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:28:16 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:28:16 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 38 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:29:13 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:29:13 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 25 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:30:11 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:30:12 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 154 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:31:09 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:31:09 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 52 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:32:07 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:32:07 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 40 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:33:05 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.19 (155.56.219.16) - - [10/Nov/2016:08:33:06 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 153 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:34:03 +0000] GET /com.sap.iotservices.mms HTTP/1.1 302 - 0 iotmmsi029837trial.hanatrial.ondemand.com:443
      10.117.18.18 (155.56.219.16) - - [10/Nov/2016:08:34:03 +0000] GET /com.sap.iotservices.mms/ HTTP/1.1 200 3330 35 iotmmsi029837trial.hanatrial.ondemand.com:443

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Aaron,

      I am not sure exactly what is causing that issue but we can test the connection to the table to ensure that the data is being delivered to the application. If you go to the IoT MMS and select the Displayed stored messages tile you will see a list of tables. One of the tables will include all of your data from the sensor phone application. If you select the table, you will see a "OData API" button in the top right of the screen. The link will have the following format:

      https://iotmms<I/P number>trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/<SCHEMA & TABLE NAME>

      Please copy everything after "...hanatrial.ondemand.com", which will leave you with "/com.sap..."

      In the WEBIDE, run your application and make the following changes to the URL:

      1. Delete everything after "...hanatrial.ondemand.com/".

      2. Add the name of your destination, which would be "iotmms" if you used the same destination name as indicated in this blog.

      3. Then paste the part of the URL that you copied from the IoT MMS.

      The page should display all of the data that is in your table. If you cannot see the data from your table, I would recommend deleting and recreating your destination.

      Regards,
      Anthony

      Author's profile photo Alfredo Lagunar
      Alfredo Lagunar

      Hi Anthony,
      Great blog!! When I try to download the DashboardInCloud.zip from the url I have a message with the content has expired.

      Can you renew?

      Regards,

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Alfredo,

      Thanks for letting me know. I have updated the share folder details and you should be able to access the contents.

      Regards,
      Anthony

      Author's profile photo Alfredo Lagunar
      Alfredo Lagunar

      Hi Anthony,
      Now it is working.  Thanks for sharing.

      Regards,

      Alfredo

      Author's profile photo Former Member
      Former Member

      Thank's & Respect Sir

      Author's profile photo Former Member
      Former Member

      Really great Job. Unfortunately, the access to the folder with the DashboardInCloud.zip and iotmms file is expired. Can reactivate it? I would love to rebuild your usecase.

       

      Best regards

      Dennis

      Author's profile photo Danie Smit
      Danie Smit

      Just to say thank you.  I've just completed this tutorial and everything is still working!!