Having successfully completed the first three parts of this great blog post series about Raspberry Pi and the SAP HANA Cloud Platform, and while waiting for the next ones to be published 😉 , I just take the time and enjoy to play around with the result obtained so far, making my hands “dirty” with some basic SAPUI5.


At the moment, the Raspberry Pi is reading the sensors data (CPU -sensor0- plus external one -sensor1-) and sending them to my app on the HANA Cloud.

JSON data is coming out quite flawlessly:


/wp-content/uploads/2015/01/img2_619846.png


My intention was then to try consuming this data……

As a very first step, I wanted to clear the temperature offset for the external sensor, originally set to -24°C in order to simulate a freezy environment, by modifying the Temperature.java file, and recompiling it (Raspberry Pi side)


/wp-content/uploads/2015/01/img1_619844.png



Next was to use the SAP HANA Cloud Platform cockpit and Git to create a HTML5 application, with a SAPUI5 shell, a table and a line chart.

Cloning it to a local repository (Eclipse), the final structure (MVC paradigm) looks like the following:


/wp-content/uploads/2015/01/img3_619845.png



This is the code for the index.html



<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
              
        <script id='sap-ui-bootstrap" type="text/javascript'
              src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'             
              data-sap-ui-theme="sap_bluecrystal"
              data-sap-ui-libs='sap.ui.commons, sap.ui.ux3, sap.viz, sap.ui.table'>
        </script>
        <script>
                sap.ui.localResources("readings");
                var view = sap.ui.view({viewName:"readings.measure",
                    type:sap.ui.core.mvc.ViewType.JS});
                view.placeAt("content");           
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

This is the controller:


sap.ui.controller("readings.measure", {
    onInit : function(oEvent) {
        this.model = new sap.ui.model.json.JSONModel("/measurements/iotscenario");
        this.getView().setModel(this.model);
   
    }
});

while this is the view:


sap.ui.jsview("readings.measure", {
    getControllerName : function() {
        return "readings.measure";
    },
    createContent : function(oController) {
        // Shell
        var oShell = new sap.ui.ux3.Shell("shell", {
            appTitle : "Temp values",
            showPane : false,
            showSearchTool : false,
            showFeederTool : false,
            showLogoutButton : false,
            designType : sap.ui.ux3.ShellDesignType.Crystal
        });
        // Layout
        var oLayout = new sap.ui.commons.layout.MatrixLayout("layout", {
            width : "100%",
            widths : [ "100%" ]
        });
        // Temperature Values Table
        var oTable = new sap.ui.table.Table("table", {
            width : "100%",
            visibleRowCount : 4,
            visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
            noData : new sap.ui.commons.TextView({
                text : "No temp data available."
            }),
            columns : [ {
                label : "ID",
                template : "id",
                sortProperty : "id"
            }, {
                label : "Unit",
                template : "unit",
                sortProperty : "unit"
            }, {
                label : "Stored at",
                template : "storedAt",
                sortProperty : "storedAt"
            }, {
                label : "Value",
                template : "value",
                sortProperty : "value"
            }, {
                label : "Sensor ID",
                template : "sensorId",
                sortProperty : "sensorId"
            } ],
            rows : {
                path : "/sensor1/measurements",
                sorter : new sap.ui.model.Sorter("id")
            }
        });
           
        oLayout.createRow(new sap.ui.commons.layout.MatrixLayoutCell().addContent(oTable));
        // Chart
        var oChartData = new sap.viz.ui5.data.FlattenedDataset({
            dimensions : [ {
                axis : 1, // must be one for the x-axis
                name : 'Stored at',
                value : "{storedAt}"
            } ],
            measures : [ {
                name : 'Temp values',
                value : '{value}'
            } ],
            data : {
                path : "/sensor1/measurements"
            }
        });
        var oChart = new sap.viz.ui5.Line("chart", {
            width : "100%",
            dataset : oChartData
        });
        oLayout.createRow(new sap.ui.commons.layout.MatrixLayoutCell().addContent(oChart));
   
        oShell.addContent(oLayout);
        return oShell;
    }
});

The result is quite straightforward:

/wp-content/uploads/2015/01/img4_619865.png

Link:  https://iotscenario-p1940266477trial.dispatcher.hanatrial.ondemand.com/    (HANA cloud trial account needed).

Thank you for reading.


To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply