This blog is part of a series which is related to a end-to-end IoT scenario. This is the full scenario used for the mini CodeJam that was organised at the SAP Inside Track 2016 Belgium #sitBRU.
Basic IoT scenario using HCP and Particles and UI5 - the explanation |
Part 4 - the UserInterface
Welcome to part 4. In this blog we create the User interface for our IoT scenario.
The User Inferface
To visualize our sensors values and control our scenario we need an userinterface.
We will create a simple SAPUI5 app. This showcases how we can easily integrate an SAPUI5 app with HANA Cloud Platform IoT Services.
An example of what it could look like.
We use the webIDE as our tool to create the frontend application in SAPUI5.
Login to your HANA Cloud platform trial environmenthttps://account.hanatrial.ondemand.com
Locate the service ‘webide’. And enable this, if not done yet.
Open up the webIDE, make sure it starts, and leave it open in your browser.
(Note: webIDE works perfectly in the chrome browser, please be sure to use that one)
Go back to your HANA Cloud platform cockpit and go to ‘destinations’.
In this list of destinations which can be used we need to create a new destination so our webide can actually access the OData IoT api.
Locate the import button in the destinations window and use the button ‘import destination’. Select the file iotmms which is attached to this blog, and import it.
Adjust the destination before saving. Fill in the spots in the url and user where it states <your s-user>. Update the password field with your s-users password. So it will become for example as in the screenshots below. Leave all other values as-is. Leave the authentication value set to ‘basic authentication”. And save. Note: It can take up to 5 minutes for the destination to be active. In the meantime you can carry on with the steps in this blog.
Go back your window where you have the webIDE open. We will import an application. Select the root level.
Open the file menu and use ‘import file’. Select file ->import from file system. And select the file ‘IoTEnvironmentControl.zip’ attached to this blog. And import it into
the ‘/’ folder. When importing is finished, you have a simple webide project like this.
Now we have to make some slight updates in the application to make it run. You can try running it via index.html and ‘run’. It will fail now.
We have to tell the application as well it is allowed to consume iotMMS services. Open up the ‘neo-app.json’ file by browsing to that file in the webide and open it.
Add the following section in here almost at the end. So it will look like this. Be very accurate in spelling and quotes.
Note: the extra text to add, is also located in a text file attached to this blog, name of that file is “neoapp json addendum.txt”, you can also copy from there.
We have to adapt the url’s to make the application run for your particle setup and IoT tables. Locate the file ‘EnvironmentControl.controller.js’.
Open it up, and scroll to the function ‘sendPushCallToLed’. See screenshot at the right. Replace ‘<fill in the full url to push a
value to the LED>” with the url you used earlier to post data to your LED.
We also have to adapt the controller to read from the correct IoT table name. Locate the file ‘EnvironmentControl.controller.js’ again.
Open it up, and scroll to the function ‘readAndBindData’. See the screenshot below.
Replace <fill in your iot table name> with the tablename you saw earlier in the iot dashboard. The table where you saw the values of light, temperature and humidity getting
loaded.
Note: the table name could be a very long id as in the screenshot example (this is true if you recently upgraded to the newest iot service).
If you are using the older version, perfectly fine, but then your tablename might be a slightly shorter name not containing the ‘.’
We also want to send text to a matrix display. Which we configured earlier. Another function is created to do this. Adapt the url in the controller code with url for your matrix display.
Congratulations you’ve done all the changes. Now let’s test!
Testing the app
Run the application by select the index.html and click green ‘run’ button. It will open in a preview in your chrome browser. You should see something similar as in the screenshot below.
Before hitting any button. Check if you see temperature values/ humidity value and light value displayed?
If so, congratulations you successfully showed your iot sensor data in an SAPUI5 application
Test your LED on and off function via the buttons at the bottom. You should with a second see you’re LED on the particle board go on or off.
If so, congratulations you successfully pushed a value from an SAPUI5 application to your particle!
Test the automated function. Fill in numeric value into the ‘light threshold’ input field. Click the button ‘automated light on’. It will now constantly refresh with standard delay of 10 seconds.
And will verify if the light value is above the tresshold set, if so, it will automatically turn on the light (LED). If it becomes lower again it will turn off.
If so, congratulations you’ve made your first IoT automated scenario running in an SAPUI5 app!
Testing the matrix display. The display should show a looping text, indicating the temperature, humidity and light values. Indicating the same values as in your UI5 app.
Congratulations you successfully completed the whole IoT scenario setup!
