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 :wink: , 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:
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)
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:
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:
Link: https://iotscenario-p1940266477trial.dispatcher.hanatrial.ondemand.com/ (HANA cloud trial account needed).
Thank you for reading.
- SAP Managed Tags:
1 Comment
