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 |  |
| 2. Now open the index.html file in your Eclipse |  |
| 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. |  |
| 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. |
|
| 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. |  |
| 3. Save the simulator.html file | |
| 4. Right-click on your Eclipse project fishdashboard and select Team and Commit. |  |
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. |  |
| 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. |  |
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.
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.
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.
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.
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!
Best,
Rui