Skip to Content
Author's profile photo Rui Nogueira

RaspberryPi on SAP HCP – IoT blog series part 5: Add additional virtual sensors to your dashboard

Table of Contents

In the fourth blog post of this blog post series around Raspberry Pi and the SAP HANA Cloud Platform we’ve build a dashboard to show us the incoming sensor data in a nice SAPUI5 dashboard.

But what happens if you want to demo your app somewhere and you didn’t have the Raspberry Pi with you? Or, what if you’d like to have another source of sensors to send data to your account like a mobile device or a smart phone?

That’s what we’ll be looking into in this blog by using the API we’ve created in the second blog post and simulate the sensors with some randomly generated temperature values.


Modify the index.html file

To make this work smoothly we’ll add a new tile to our initial app in the index.html file which will create a QR-code that others can scan and which actually sends the user to the new simulator.html app that we’ll add in the next step. But first thing first. Let’s first modify our index.html file with the content that I’ve attached to this blog post below.

Task Screenshot

1. Start Eclipse and open your project you’ve worked on in part 4 of this blog post series

Screen Shot 2015-02-11 at 16.43.17.png
2. Now open the index.html file in your Eclipse Screen Shot 2015-02-11 at 16.44.31.png
3. Delete the content inside the file and substitute it with the content from the index.html file I’ve attached to this blog post. Be aware that you need to unzip the index.html file first. Screen Shot 2015-02-11 at 16.46.02.png
4. Save the updated index.html file

Add the new simulator app and push the changes

Task Screenshot
1. Create a file called simulator.html. To do that right-click on the project fishdashboard and click on New and on File. After that provide the file name simulator.html and click on Finish.

Screen Shot 2015-02-11 at 16.47.27.png

Screen Shot 2015-02-11 at 16.48.06.png

2. Now you can copy and paste the code from the simulator.html file I’ve attached to this blog post to the newly created simulator.html file in your Eclipse project. Be aware that you need to unzip the simulator.html file first. Screen Shot 2015-02-11 at 16.49.52.png
3. Save the simulator.html file
4. Right-click on your Eclipse project fishdashboard and select Team and Commit. Screen Shot 2015-02-11 at 16.50.38.png

5. Provide a short commit message, select all files and click on Commit and Push.

Don’t forget to tick on the status column of the newly added simulator.html file!! Otherwise the file will not be pushed!! Both files should have the blue check box activated.

Screen Shot 2015-02-11 at 16.52.31.png
6. As a result you should get a message as response with a done message at the end. In case you get something different, something went wrong. Press OK to finish the commit and push. Screen Shot 2015-02-11 at 16.55.52.png

Create a new version

What you need to do next is to go back to your HTML5 app in the cockpit. At the very right of your commit you’ll find an icon in the column Create Version. Click on that icon, provide a name like 1.1 and click on Add.

Screen Shot 2015-02-11 at 16.58.27.png

Start the new dashboard

The last thing you need to do now is to switch to the tab Version Management and click on the symbol in the Activate column for the version you’ve created in the previous step. A popup will show-up and after confirming with clicking on Yes that you want to start the application you can access the app by clicking on the link under Application URL.

Screen Shot 2015-02-11 at 16.59.45.png

Use the simulator

The last thing we need to do now is to check our new simulator. You can either simply add simulator.html to the URL of the app.

Screen Shot 2015-02-11 at 17.00.51.png

Or – in case you have a QR code scanner on your mobile device – simply scan the QR code from the page that opens up, when you tap on the tile named Simulate sensors now.

Screen Shot 2015-02-11 at 17.01.48.png

Screen Shot 2015-02-11 at 17.02.28.png

When the simulator opens up you get similar tiles like for your regular app.

But when you tap now on one of the tiles, you’ll be able to created a randomly generated temperature value that is sent to your Java app from part 2 of this blog post series and that app persists the values on your HANA instance.

That’s it.

In the next blog post we’ll get back again to the Raspberry Pi and do some modifications there to make it more interesting for us 🙂

See you then!



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo P. Lans
      P. Lans

      Again a very good step by step tutorial.

      I like the QR-addition.

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thanks Peter!

      Author's profile photo Former Member
      Former Member

      Thanks for a good guide

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Happy to hear you've liked it. Motivates me to create the next blog posts.

      Stay tuned!