Webapp erweitern

Sarliefer · 23. Oktober 2015

Hallo liebe Community,

ich bin absoluter html-Neuling und möchte gerne bisschen was ausprobieren. Und zwar gibt es eine Beispiel-Webapp die folgendermaßen ausschaut:
[Blockierte Grafik: http://fs5.directupload.net/images/151023/jl7mbsip.jpg]

Man kann mit der App Dateien empfangen wie z.B. diverse Messwerte. Allerdings beschränkt sich die Anzahl der zu empfangenen Werte auf lediglich eine Quelle. Daher auch nur ein Diagramm. Ich würde gerne mehrere Werte empfangen können und diese auch jeweils auf einem Diagramm wie oben dargestellt visualisieren. Die Diagramme würde ich zudem gerne untereinander anzeigen wollen (außer es gibt eine elegantere Lösung?).
Weiß jemand zufällig aus dem Stand was man dafür tun muss. Falls nötig kann ich gerne den Code dazu posten.

Ich würde mich sehr über eure Hilfe freuen. Vielen Dank schonmal!

Basi · 24. Oktober 2015

Zitat von Sarliefer

Falls nötig kann ich gerne den Code dazu posten.

Ist nötig.

Sarliefer · 24. Oktober 2015

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

Webapp erweitern

Jetzt mitmachen!

Teilen