This blog will shows you how to create a Google Gauge custom widget in SAP Analytics Cloud (SAC) and interface with an RGB LED for interactive visualization. This is also the proof-of-concept kind of idea that you can interact your SAC app with an IoT world in a real-time!.
There are two main components as shown in the below picture. The first one is the SAP Analytics Cloud Analytics Application with custom widget. The second one is the "Receiver" that will drives the RGB LED. This app uses a service called PubNub to handle the transfer of the gauge value between the SAP Analytics Cloud custom widget and the receiver, over the internet.
Setting Up the Connectivity Between SAP Analytics Cloud Custom Widget and a Receiver.
As said, we use a service called PubNub. Go ahead to register with PubNub for a free account and get your own subscribe and publish key.
Create Google Gauge Custom Widget
We will be creating a simple Google gauge from https://developers.google.com/chart/interactive/docs/gallery/gauge.
We will create a few files as listed in below folder structure. The file pubnub.4.21.7.min.js can be downloaded from https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.min.js.
box.json
Here we define the web components for the main program (box.js) and a builder panel (box_bps.js).
The gauge has the following properties as shown below. We can set each property in a builder panel.
box.js
On the onCustomWidgetAfterUpdate(), we will be getting the list of properties (i.e,. value, title, subtitle, min and max) as defined in box.json.
If the web component instance is first time loaded, create the html div chart_div to put the gauge chart and save all variables in array Ar to be used later. And finally load the PubNub and Google chart JavaScript and draw the gauge.
If the web component instance has already been loaded, get the property values and draw the gauge.
on drawChart() function, if the first time loads, we define the PubNub connectivity parameters, Google Gauge options and chart initialization. We can also put the PubNub connectivity parameters and Google Gauge options in the Builder panel. But for this case, we just hard code it for simplicity.
Otherwise, we just send the gauge value to the PubNub channel and update the gauge.
box_bps.js
We define the Google gauge properties (i.e,. title, sub title, gauge minimum and maximum value) in HTML table.
And we add an event listener to the submit button to save the property values entered by the user in the Builder panel and finally we implement getters and setters for each properties.
Finally, you need to host the app in a web server and add it to SAC.
Configure and Running a Receiver
For a receiver, we can use a platform like Raspberry Pi to drive the RGB LED. But for this case, I am using BBC micro:bit as I don't have yet the Raspberry Pi. I will not go through how to create the receiver as it is not related to SAP. But if you are really interested to know more, let me know.
One thing that you need to take care is to update the publish and subscribe key in led.html as shown below. You can also see that I put a logic to drive and change the LED color based on the value received from PubNub.
Once you have updated, upload the firmware microbit-samples-combined.hex onto micro:bit and connect an RGB LED to micro:bit as shown in the below diagram.
Now setup a web server on your computer to host the LED.html and enable the Bluetooth (or in this case is web Bluetooth). Toggle Connect button and select the micro:bit and you are ready to go.
Thank you for reading my blog and I hope you like it and have a great idea how to interface your SAC app to an IoT world!
Reference
There are two main components as shown in the below picture. The first one is the SAP Analytics Cloud Analytics Application with custom widget. The second one is the "Receiver" that will drives the RGB LED. This app uses a service called PubNub to handle the transfer of the gauge value between the SAP Analytics Cloud custom widget and the receiver, over the internet.
Setting Up the Connectivity Between SAP Analytics Cloud Custom Widget and a Receiver.
As said, we use a service called PubNub. Go ahead to register with PubNub for a free account and get your own subscribe and publish key.
Create Google Gauge Custom Widget
We will be creating a simple Google gauge from https://developers.google.com/chart/interactive/docs/gallery/gauge.
We will create a few files as listed in below folder structure. The file pubnub.4.21.7.min.js can be downloaded from https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.min.js.
box.json
Here we define the web components for the main program (box.js) and a builder panel (box_bps.js).
The gauge has the following properties as shown below. We can set each property in a builder panel.
box.js
On the onCustomWidgetAfterUpdate(), we will be getting the list of properties (i.e,. value, title, subtitle, min and max) as defined in box.json.
If the web component instance is first time loaded, create the html div chart_div to put the gauge chart and save all variables in array Ar to be used later. And finally load the PubNub and Google chart JavaScript and draw the gauge.
If the web component instance has already been loaded, get the property values and draw the gauge.
on drawChart() function, if the first time loads, we define the PubNub connectivity parameters, Google Gauge options and chart initialization. We can also put the PubNub connectivity parameters and Google Gauge options in the Builder panel. But for this case, we just hard code it for simplicity.
Otherwise, we just send the gauge value to the PubNub channel and update the gauge.
box_bps.js
We define the Google gauge properties (i.e,. title, sub title, gauge minimum and maximum value) in HTML table.
And we add an event listener to the submit button to save the property values entered by the user in the Builder panel and finally we implement getters and setters for each properties.
Finally, you need to host the app in a web server and add it to SAC.
Configure and Running a Receiver
For a receiver, we can use a platform like Raspberry Pi to drive the RGB LED. But for this case, I am using BBC micro:bit as I don't have yet the Raspberry Pi. I will not go through how to create the receiver as it is not related to SAP. But if you are really interested to know more, let me know.
One thing that you need to take care is to update the publish and subscribe key in led.html as shown below. You can also see that I put a logic to drive and change the LED color based on the value received from PubNub.
Once you have updated, upload the firmware microbit-samples-combined.hex onto micro:bit and connect an RGB LED to micro:bit as shown in the below diagram.
Now setup a web server on your computer to host the LED.html and enable the Bluetooth (or in this case is web Bluetooth). Toggle Connect button and select the micro:bit and you are ready to go.
Thank you for reading my blog and I hope you like it and have a great idea how to interface your SAC app to an IoT world!
Reference
- SAP Managed Tags:
