Let’s build an app where you can monitor the home energy consumption with the help from SAP Hana Cloud Platform (HCP) and Cordova SAPUI5. You will perform an OCR on the electricity & gas meter in monthly basis and submit the reading to SAP HCP.
The design should be simple and easy to use, where you can perform an OCR or manually input the meter reading. Also, you will see the result and compare the usage from the bar chart.
What you need to prepare
- JPA Persistence on SAP Hana Cloud Platform to store the meter reading
- OCR library to read the mechanical electricity & gas meter reading
- SAPUI5 Cordova app.
JPA Persistence
The persistence layers consist of a JPA class with the following properties:
- private Long id;
- private String electricity;
- private String gas;
- private String month;
package fd.power.persistence;
import java.io.Serializable;
import javax.persistence.*;
/**
* Entity implementation class for Entity: power
*
*/
@Entity
public class Power implements Serializable {
private static final long serialVersionUID = 1L;
public Power() {
super();
}
@Id
@GeneratedValue
private Long id;
private String electricity;
private String gas;
private String month;
// Id
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
// Electricity
public String getElectricity() {
return electricity;
}
public void setElectricity(String electricity) {
this.electricity = electricity;
}
// Gas
public String getGas() {
return gas;
}
public void setGas(String gas) {
this.gas = gas;
}
// Month
public String getMonth() {
return month;
}
public void setMonth(String month) {
this.month = month;
}
}
I am following this blog: http://scn.sap.com/docs/DOC-63231 to build and compile the code and upload the .war file to SAP HCP. You can view the app from this url: https://powerwebappp057134trial.hanatrial.ondemand.com/PowerWebApp/
OCR Library
We will use the OCR library from Anyline.io to scan the electricity & gas meter reading.
scanElectricMeter: function() {
cordova.exec(function(result){
if(result.meterType=="Electric Meter") {
electricity = result.reading;
sap.ui.getCore().byId("oElectricity").setValue(electricity);
}
}, this.onError, "AnylineSDK", "scanElectricMeter", this.energyConfig);
},
scanGasMeter: function() {
cordova.exec(function(result){
if(result.meterType=="Gas Meter") {
gas = result.reading;
sap.ui.getCore().byId("oGas").setValue(gas);
}
}, this.onError, "AnylineSDK", "scanGasMeter", this.energyConfig);
},
SAPUI5 Cordova with POST and GET Operations
For submit meter reading function, it will perform POST with JSON data: {Id:"0", Month:month, Electricity:electricity, Gas:gas}
submitMeterReading: function(electricity, gas) {
if (electricity=="" || gas=="") {
sap.ui.commons.MessageBox.alert("Please enter the Electricity & Gas meter reading");
} else if((parseInt(electricity) <= 0) || (parseInt(gas) <= 0)) {
sap.ui.commons.MessageBox.alert("Please enter a valid value");
} else {
electricity = electricity.replace(/\b0+/g, "");
electricity = electricity.toString();
gas = gas.replace(/\b0+/g, "");
gas = gas.toString();
var sUrl = "https://powerwebappp057134trial.hanatrial.ondemand.com:443/PowerWebApp/PowerOData.svc/Powers";
var sUrl_ = "?$format=json";
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var d = new Date();
var month = monthNames[d.getMonth()];
var year = d.getFullYear();
var month = month + " " + year;
var errorf = 0;
$.ajax({
type: 'GET',
async: true,
cache: false,
url: sUrl + sUrl_,
success: function (data) {
for (z=0; z<data.d.results.length; z++){
if(data.d.results[z].Month == month) {
errorf = 1;
}
}
if(errorf == 0) {
var formData = {Id:"0", Month:month, Electricity:electricity, Gas:gas};
var aData = jQuery.ajax({
type : "POST",
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type","application/json");
},
url : sUrl,
data: JSON.stringify(formData),
dataType: "json",
async: false,
success : function(data,textStatus, jqXHR) {
sap.ui.commons.MessageBox.alert("Meter reading has been submitted successfully");
},
error : function(data,textStatus, jqXHR) {
sap.ui.commons.MessageBox.alert("Error. Meter reading cannot be submitted");
}
});
} else {
sap.ui.commons.MessageBox.alert("You have already submitted the meter reading for " + month);
}
},
error: function(jqXHR, textStatus, errorThrown) {
sap.ui.commons.MessageBox.alert("Error: " + textStatus);
},
});
}
},
And GET operation to refresh/generate the bar-chart:
RefreshData: function() {
var sUrl = "https://powerwebappp057134trial.hanatrial.ondemand.com/PowerWebApp/PowerOData.svc/Powers?$format=json";
oModel = new sap.ui.model.json.JSONModel();
oModel.setSizeLimit(1000);
var electricity = [];
var gas = [];
var lastMonthE = [];
var lastMonthG = [];
var diffE;
var diffG;
var Data = [];
$.ajax({
type: 'GET',
async: true,
cache: false,
url: sUrl,
success: function (data) {
for (z=0; z<data.d.results.length; z++){
diffE = parseInt(data.d.results[z].Electricity) - parseInt(lastMonthE[z-1]);
diffG = parseInt(data.d.results[z].Gas) - parseInt(lastMonthG[z-1]);
electricity[z]= diffE;
gas[z]= diffG;
if(z>0) {
Data.push({id: data.d.results[z].Id, month: data.d.results[z].Month, electricity: diffE, gas: diffG});
}
lastMonthE[z] = data.d.results[z].Electricity;
lastMonthG[z] = data.d.results[z].Gas;
}
oModel.setData({
modelData1 : Data
});
oModel.refresh();
},
error: function(jqXHR, textStatus, errorThrown) {
},
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{axis : 1,name : 'Month',value : "{month}"}
],
measures : [
{name : 'Electricity',value : '{electricity}'},
{name : 'Gas',value : '{gas}'}
],
data : {path : "/modelData1"}
});
var legendPosition = new sap.viz.ui5.types.Legend({layout: {
position: "bottom"
}});
var oBarChart = new sap.viz.ui5.Column({
width : "100%",
height : "600px",
title : {
visible : true,
text : '{i18n>appChart}'
},
dataset : oDataset,
legendGroup: legendPosition
});
oBarChart.setModel(oModel);
return oBarChart;
}
You may refer to my previous blog here to create the Cordova project and use the library: SAPUI5 Cordova Electricity Meter Reading
Source code
Thanks for reading my blog. Any comments are welcome!
- SAP Managed Tags:
