Hier ist der html-Code:
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" />
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<script type="text/javascript">
function doHttp(type, url, data, successHandler, errorHandler) {
if (errorHandler === undefined) {
errorHandler = function(jqXHR, textStatus, errorThrown) {
// empty implementation
}
}
if (data !== undefined) {
data = JSON.stringify(data);
}
jQuery
.ajax({
type : type,
dataType : "json",
contentType : "application/json",
data : data,
url : url,
error : function(jqXHR, textStatus, errorThrown) {
var sMessage = "".concat(jqXHR.status, " ",
jqXHR.statusText, " ", jqXHR.responseText);
sap.m.MessageToast.show(sMessage);
errorHandler.apply(this, [ jqXHR, textStatus,
errorThrown ]);
},
success : function(oData, textStatus, jqXHR) {
if (oData === null || oData === undefined) {
sap.m.MessageToast
.show("WARNING. Received a null or undefined response object.");
return;
}
successHandler
.apply(this, [ oData, textStatus, jqXHR ]);
}
});
}
function doGet(url, successHandler, errorHandler) {
doHttp("GET", url, undefined, successHandler, errorHandler);
}
function doPost(url, data, successHandler, errorHandler) {
doHttp("POST", url, data, successHandler, errorHandler);
}
function getDataForSelect(url, namespace) {
var successHandler = function(oData, textStatus, jqXHR) {
oData.unshift({
name : "Please Select",
device_type : "please_select"
});
sap.ui.getCore().getModel(namespace).setData(oData);
};
doGet(url, successHandler);
}
function getMessageTypes(namespace, key) {
sap.ui.getCore().getModel(namespace).setData([]);
var oModelData = sap.ui.getCore().getModel(key).getData();
var sDeviceTypeId = oModelData.deviceTypeId;
if (sDeviceTypeId === null || sDeviceTypeId.trim() === ""
|| sDeviceTypeId === "please_select") {
return;
}
var sUrl = "data/messagetypes/".concat(sDeviceTypeId);
getDataForSelect(sUrl, namespace);
}
function getDevices() {
getDataForSelect("data/devices", "registeredDevices");
}
function getConsumptionMessageTypes() {
getMessageTypes("registeredConsumptionMessageTypes", "consumptionModel");
}
function getPushMessageTypes() {
getMessageTypes("registeredPushMessageTypes", "pushModel");
}
function getData() {
var oConsumptionModelData = sap.ui.getCore().getModel(
"consumptionModel").getData();
var sDeviceId = oConsumptionModelData.deviceId;
var sDeviceTypeId = oConsumptionModelData.deviceTypeId;
var sMessageTypeId = oConsumptionModelData.messageTypeId;
if (sDeviceId === null || sDeviceTypeId === null
|| sMessageTypeId === null || sDeviceId.trim() === ""
|| sDeviceTypeId.trim() === "" || sMessageTypeId.trim() === "") {
return;
}
var sUrl = "data/table/".concat(sDeviceId, "/", sDeviceTypeId, "/",
sMessageTypeId);
var successHandler = function(oData, textStatus, jqXHR) {
oData = oData.slice(0, 500);
oData = oData.reverse();
sap.ui.getCore().getModel("sensor").setData(oData);
};
doGet(sUrl, successHandler);
}
function pushData(oData) {
var oPushModelData = sap.ui.getCore().getModel("pushModel").getData();
var sDeviceId = oPushModelData.deviceId;
var sMessageTypeId = oPushModelData.messageTypeId;
if (sDeviceId === null || sMessageTypeId === null
|| sDeviceId.trim() === "" || sMessageTypeId.trim() === "") {
return;
}
oData.messageType = sMessageTypeId;
var sUrl = "data/push/".concat(sDeviceId);
var successHandler = function(oData, textStatus, jqXHR) {
sap.m.MessageToast.show(oData.msg);
};
doPost(sUrl, oData, successHandler);
}
function sendMessage(sMessage) {
var oData = {
"method" : "http",
"sender" : "My IoT application",
"messageType" : "",
"messages" : [ {
"opcode" : "display",
"operand" : sMessage
} ]
};
pushData(oData);
}
function switchLED(bState) {
var operand = bState == true ? "1" : "0";
var oData = {
"method" : "http",
"sender" : "My IoT application",
"messageType" : "",
"messages" : [ {
"opcode" : "led",
"operand" : operand
} ]
};
pushData(oData);
}
function createList() {
return new sap.m.List({
inset : true,
items : [ new sap.m.InputListItem({
label : "Switch LED State",
content : new sap.m.Switch("iotswitch", {
change : function(oEvent) {
var bState = oEvent.getParameter("state");
switchLED(bState);
}
})
}), new sap.m.InputListItem({
label : "Send message",
content : new sap.m.FlexBox({
direction : sap.m.FlexDirection.Row,
displayInline : true,
items : [ new sap.m.Input("iotinput", {
valueState : sap.ui.core.ValueState.Success,
width : "500px"
}), new sap.m.Button({
text : "Send",
type : sap.m.ButtonType.Accept,
press : function(oEvent) {
var oInput = sap.ui.getCore().byId("iotinput");
var sValue = oInput.getValue();
sendMessage(sValue);
}
}) ]
})
}) ]
});
}
function calculateChartHeight() {
var pageHeaderHeight = 48;
var consumptionPanelHeight = 48;
var pushPanelHeight = 48;
var listHeight = 193;
var margins = 33;
var staticHeight = pageHeaderHeight + consumptionPanelHeight
+ pushPanelHeight + listHeight + margins;
var windowHeight = $(window).height();
return (windowHeight - staticHeight) + "px";
}
function createDimensionFeed() {
return new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid" : "axisLabels",
"type" : "Dimension",
"values" : [ "Timestamp" ]
});
}
function createMeasureFeed() {
return new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid" : "primaryValues",
"type" : "Measure",
"values" : [ "Value" ]
});
}
function createDataSet() {
return new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
name : "Timestamp",
value : {
path : "sensor>C_TIMESTAMP",
formatter : function(oValue) {
//can be a string primitive in JSON, but we need a number
if ((typeof oValue) === "string") {
oValue = parseInt(oValue);
}
//ensure that UNIX timestamps are converted to milliseconds
var oDate = new Date(oValue * 1000);
return oDate.toLocaleString();
}
}
} ],
measures : [ {
name : "Value",
value : "{sensor>C_VALUE}"
} ],
data : {
path : "sensor>/"
}
});
}
function createVizFrame() {
var sHeight = calculateChartHeight();
var oVizFrame = new sap.viz.ui5.controls.VizFrame({
width : "100%",
height : sHeight,
vizType : "line",
vizProperties : {
plotArea : {
dataLabel : {
visible : false
}
},
legend : {
visible : false
},
title : {
visible : false
},
categoryAxis : {
title : {
visible : false
}
}
},
xAxis : {
title : {
visible : false
}
},
yAxis : new sap.viz.ui5.types.Axis({
scale : new sap.viz.ui5.types.Axis_scale({
fixedRange : true,
minValue : 0,
maxValue : 100
})
}),
dataset : createDataSet()
});
oVizFrame.addFeed(createDimensionFeed());
oVizFrame.addFeed(createMeasureFeed());
$(window).resize(function() {
var sHeight = calculateChartHeight();
oVizFrame.setHeight(sHeight);
});
return oVizFrame;
}
function cleanConsumptionPanel() {
sap.ui.getCore().getModel("sensor").setData([]);
}
function cleanPushPanel() {
sap.ui.getCore().byId("iotinput").setValue("");
sap.ui.getCore().byId("iotswitch").setState(false);
}
function createDevicesSelect(changeHandler) {
var oItem = new sap.ui.core.Item({
key : "{registeredDevices>id}",
text : "{registeredDevices>name}"
});
oItem.addCustomData(new sap.ui.core.CustomData({
key : "deviceTypeId",
value : "{registeredDevices>device_type}"
}));
var oSelect = new sap.m.Select({
width : "150px",
enabled : {
path : "registeredDevices>/",
formatter : function(oValue) {
if (oValue === null || oValue === undefined
|| oValue.length === 0) {
return false;
}
return true;
}
},
change : changeHandler
});
oSelect.bindItems("registeredDevices>/", oItem);
return oSelect;
}
function createConsumptionPanel() {
var oLabel = new sap.m.Label({
text : "Data received from the device"
});
var oSelectDevices = createDevicesSelect(function(oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
var sDeviceId = oSelectedItem.getKey();
var sDeviceTypeId = oSelectedItem.getCustomData()[0].getValue();
var oData = sap.ui.getCore().getModel("consumptionModel").getData();
oData.deviceId = sDeviceId;
oData.deviceTypeId = sDeviceTypeId;
getConsumptionMessageTypes();
cleanConsumptionPanel();
});
var oItem = new sap.ui.core.Item({
key : "{registeredConsumptionMessageTypes>id}",
text : "{registeredConsumptionMessageTypes>name}"
});
var oSelectMessageTypes = new sap.m.Select({
width : "150px",
enabled : {
path : "registeredConsumptionMessageTypes>/",
formatter : function(oValue) {
if (oValue === null || oValue === undefined
|| oValue.length === 0) {
return false;
}
return true;
}
},
change : function(oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
var sMessageTypeId = oSelectedItem.getKey();
var oData = sap.ui.getCore().getModel("consumptionModel")
.getData();
oData.messageTypeId = sMessageTypeId;
cleanConsumptionPanel();
}
});
var oFilter = new sap.ui.model.Filter({
path : "device_type",
test : function(sValue) {
if (sValue != null) {
sValue = sValue.toUpperCase();
}
if ("PLEASE_SELECT" == sValue) {
return true;
}
var oData = sap.ui.getCore().getModel("consumptionModel")
.getData();
var sDeviceTypeId = oData.deviceTypeId;
if (sDeviceTypeId != null) {
sDeviceTypeId = sDeviceTypeId.toUpperCase();
}
return (sValue === sDeviceTypeId);
}
});
oSelectMessageTypes.bindAggregation("items", {
path : "registeredConsumptionMessageTypes>/",
template : oItem,
filters : [ oFilter ]
});
var oToolbar = new sap.m.Toolbar({
content : [ oLabel, new sap.m.ToolbarSpacer(), oSelectDevices,
oSelectMessageTypes ]
});
return new sap.m.Panel({
headerToolbar : oToolbar,
content : [ createVizFrame() ]
});
}
function createPushPanel() {
var oLabel = new sap.m.Label({
text : "Data to be sent to the device"
});
var oSelectDevices = createDevicesSelect(function(oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
var sDeviceId = oSelectedItem.getKey();
var sDeviceTypeId = oSelectedItem.getCustomData()[0].getValue();
var oData = sap.ui.getCore().getModel("pushModel").getData();
oData.deviceId = sDeviceId;
oData.deviceTypeId = sDeviceTypeId;
getPushMessageTypes();
cleanPushPanel();
});
var oItem = new sap.ui.core.Item({
key : "{registeredPushMessageTypes>id}",
text : "{registeredPushMessageTypes>name}"
});
var oSelectMessageTypes = new sap.m.Select({
width : "150px",
enabled : {
path : "registeredPushMessageTypes>/",
formatter : function(oValue) {
if (oValue === null || oValue === undefined
|| oValue.length === 0) {
return false;
}
return true;
}
},
change : function(oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
var sMessageTypeId = oSelectedItem.getKey();
var oData = sap.ui.getCore().getModel("pushModel").getData();
oData.messageTypeId = sMessageTypeId;
cleanPushPanel();
}
});
var oFilter = new sap.ui.model.Filter({
path : "device_type",
test : function(sValue) {
if (sValue != null) {
sValue = sValue.toUpperCase();
}
if ("PLEASE_SELECT" == sValue) {
return true;
}
var oData = sap.ui.getCore().getModel("pushModel").getData();
var sDeviceTypeId = oData.deviceTypeId;
if (sDeviceTypeId != null) {
sDeviceTypeId = sDeviceTypeId.toUpperCase();
}
return (sValue === sDeviceTypeId);
}
});
oSelectMessageTypes.bindAggregation("items", {
path : "registeredPushMessageTypes>/",
template : oItem,
filters : [ oFilter ]
});
var oToolbar = new sap.m.Toolbar({
content : [ oLabel, new sap.m.ToolbarSpacer(), oSelectDevices,
oSelectMessageTypes ]
});
return new sap.m.Panel({
headerToolbar : oToolbar,
content : [ createList() ]
});
}
function initModels() {
var oDevicesModel = new sap.ui.model.json.JSONModel();
oDevicesModel.setData([]);
sap.ui.getCore().setModel(oDevicesModel, "registeredDevices");
var oConsumptionMessageTypesModel = new sap.ui.model.json.JSONModel();
oConsumptionMessageTypesModel.setData([]);
sap.ui.getCore().setModel(oConsumptionMessageTypesModel,
"registeredConsumptionMessageTypes");
var oPushMessageTypesModel = new sap.ui.model.json.JSONModel();
oPushMessageTypesModel.setData([]);
sap.ui.getCore().setModel(oPushMessageTypesModel,
"registeredPushMessageTypes");
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(), "sensor");
var oConsumptionModel = new sap.ui.model.json.JSONModel();
oConsumptionModel.setData({
"deviceId" : null,
"deviceTypeId" : null,
"messageTypeId" : null
});
sap.ui.getCore().setModel(oConsumptionModel, "consumptionModel");
var oPushModel = new sap.ui.model.json.JSONModel();
oPushModel.setData({
"deviceId" : null,
"deviceTypeId" : null,
"messageTypeId" : null
});
sap.ui.getCore().setModel(oPushModel, "pushModel");
}
function load(url, callback) {
var script = document.createElement("script");
script.setAttribute("id", "sap-ui-bootstrap");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
script.setAttribute("data-sap-ui-theme", "sap_bluecrystal");
script.setAttribute("data-sap-ui-libs", "sap.m,sap.viz");
script.setAttribute("data-sap-ui-language", "en");
if (script.readyState) { // IE
script.onreadystatechange = function() {
if (script.readyState == "loaded"
|| script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { // other browsers
script.onload = function() {
callback();
};
}
document.getElementsByTagName("head")[0].appendChild(script);
}
function init() {
sap.ui.getCore().attachInit(function() {
initModels();
new sap.m.Shell({
app : new sap.m.Page({
title : title,
content : [ createConsumptionPanel(), createPushPanel() ]
})
}).placeAt("content");
$(document).ready(function() {
document.title = title;
});
// request for DB data immediately and every 2 seconds
getData();
setInterval(function() {
getData();
}, 2000);
// request for registered devices immediately and every 5 seconds
getDevices();
setInterval(function() {
getDevices();
}, 5000);
});
}
var title = "Internet of Things Services - Starter Kit";
load("https://sapui5.hana.ondemand.com/resources/sap-ui-core.js", init);
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Alles anzeigen