Adding coffee level graph to realtime-analytics view

application-manager-new
thisaripatabendi 7 years ago
parent 76d8fc62a2
commit 9b26660971

@ -23,5 +23,6 @@
<dependency artifact="coffee_level_store" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/> <dependency artifact="coffee_level_store" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
<dependency artifact="coffee_level_receiver" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/> <dependency artifact="coffee_level_receiver" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
<dependency artifact="coffee_level_script" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/> <dependency artifact="coffee_level_script" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
<dependency artifact="coffee_level_publisher" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
</artifact> </artifact>
</artifacts> </artifacts>

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
~ Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
~
~ WSO2 Inc. licenses this file to you under the Apache License,
~ Version 2.0 (the "License"); you may not use this file except
~ in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<artifact name="coffee_level_publisher" version="1.0.0" type="event/publisher" serverRole="DataAnalyticsServer">
<file>coffee_level_publisher.xml</file>
</artifact>

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
~ Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
~
~ WSO2 Inc. licenses this file to you under the Apache License,
~ Version 2.0 (the "License"); you may not use this file except
~ in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<eventPublisher name="coffee_level_publisher" statistics="disable" trace="disable" xmlns="http://wso2.org/carbon/eventpublisher">
<from streamName="org.wso2.iot.devices.coffeelevel" version="1.0.0"/>
<mapping customMapping="disable" type="wso2event"/>
<to eventAdapterType="secured-websocket"/>
</eventPublisher>

@ -17,7 +17,7 @@
}} }}
{{unit "cdmf.unit.lib.rickshaw-graph"}} {{unit "cdmf.unit.lib.rickshaw-graph"}}
<div id="div-chart" data-websocketurl="{{websocketEndpoint}}"> <div id="div-chart" data-websocketurl="{{websocketEndpoint1}}" data-sensorType="temperature">
<div class="chartWrapper" id="chartWrapper"> <div class="chartWrapper" id="chartWrapper">
<div id="y_axis" class="custom_y_axis" style="margin-top: -20px;">Temperature</div> <div id="y_axis" class="custom_y_axis" style="margin-top: -20px;">Temperature</div>
<div class="legend_container"> <div class="legend_container">
@ -28,6 +28,19 @@
<div class="custom_x_axis">Time</div> <div class="custom_x_axis">Time</div>
</div> </div>
</div> </div>
<div id="div-chart2" data-websocketurl="{{websocketEndpoint2}}" data-sensorType="coffeelevel">
<div class="chartWrapper" id="chartWrapper">
<div id="y_axis2" class="custom_y_axis" style="margin-top: -20px;">Coffee Level</div>
<div class="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend2"></div>
</div>
<div id="chart2" class="custom_rickshaw_graph"></div>
<div class="custom_x_axis">Time</div>
</div>
</div>
<a class="padding-left" <a class="padding-left"
href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}"> href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}">
<span class="fw-stack"> <span class="fw-stack">

@ -35,10 +35,16 @@ function onRequest(context) {
if (tokenPair) { if (tokenPair) {
token = tokenPair.accessToken; token = tokenPair.accessToken;
} }
websocketEndpoint = websocketEndpoint + "/secured-websocket/org.wso2.iot.devices.temperature/1.0.0?" websocketEndpoint1 = websocketEndpoint + "/secured-websocket/org.wso2.iot.devices.temperature/1.0.0?"
+ "deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type+ "&websocketToken=" + token;
websocketEndpoint2 = websocketEndpoint + "/secured-websocket/org.wso2.iot.devices.coffeelevel/1.0.0?"
+ "deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type+ "&websocketToken=" + token; + "deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type+ "&websocketToken=" + token;
var websocketToken= {'name':'websocket-token','value': token, 'path':'/', "maxAge":18000}; var websocketToken= {'name':'websocket-token','value': token, 'path':'/', "maxAge":18000};
response.addCookie(websocketToken); response.addCookie(websocketToken);
} }
return {"device": device, "websocketEndpoint": websocketEndpoint}; return {
"device": device,
"websocketEndpoint1": websocketEndpoint1,
"websocketEndpoint2": websocketEndpoint2
};
} }

@ -16,12 +16,28 @@
* under the License. * under the License.
*/ */
var ws; var wsConnection1;
var graph; var wsConnection2;
var chartData = []; var graphForSensorType1;
var graphForSensorType2;
var chartDataSensorType1 = [];
var chartDataSensorType2 = [];
var palette = new Rickshaw.Color.Palette({scheme: "classic9"}); var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
$(window).load(function () { $(window).load(function () {
drawGraph(wsConnection1, "#div-chart", "y_axis", "chart", chartDataSensorType1
, graphForSensorType1);
drawGraph(wsConnection2, "#div-chart2", "y_axis2", "chart2", chartDataSensorType2
, graphForSensorType2);
});
window.onbeforeunload = function() {
disconnect(wsConnection1);
disconnect(wsConnection2);
};
function drawGraph(wsConnection, placeHolder, yAxis, chat, chartData, graph) {
var tNow = new Date().getTime() / 1000; var tNow = new Date().getTime() / 1000;
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
chartData.push({ chartData.push({
@ -31,8 +47,8 @@ $(window).load(function () {
} }
graph = new Rickshaw.Graph({ graph = new Rickshaw.Graph({
element: document.getElementById("chart"), element: document.getElementById(chat),
width: $("#div-chart").width() - 50, width: $(placeHolder).width() - 50,
height: 300, height: 300,
renderer: "line", renderer: "line",
interpolation: "linear", interpolation: "linear",
@ -41,7 +57,7 @@ $(window).load(function () {
series: [{ series: [{
'color': palette.color(), 'color': palette.color(),
'data': chartData, 'data': chartData,
'name': "Temperature" 'name': "SensorValue"
}] }]
}); });
@ -58,37 +74,35 @@ $(window).load(function () {
orientation: 'left', orientation: 'left',
height: 300, height: 300,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT, tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis') element: document.getElementById(yAxis)
}); });
new Rickshaw.Graph.HoverDetail({ new Rickshaw.Graph.HoverDetail({
graph: graph, graph: graph,
formatter: function (series, x, y) { formatter: function (series, x, y) {
var date = '<span class="date">' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>'; var date = '<span class="date">' + moment.unix(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>'; var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
return swatch + series.name + ": " + parseInt(y) + '<br>' + date; return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
} }
}); });
var websocketUrl = $("#div-chart").data("websocketurl"); var sensorType = $(placeHolder).attr("data-sensorType");
connect(websocketUrl) var websocketUrl = $(placeHolder).attr("data-websocketurl");
}); connect(wsConnection, websocketUrl, chartData, graph, sensorType);
$(window).unload(function () { }
disconnect();
});
//websocket connection //websocket connection
function connect(target) { function connect(wsConnection, target, chartData, graph, sensorType) {
if ('WebSocket' in window) { if ('WebSocket' in window) {
ws = new WebSocket(target); wsConnection = new WebSocket(target);
} else if ('MozWebSocket' in window) { } else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target); wsConnection = new MozWebSocket(target);
} else { } else {
console.log('WebSocket is not supported by this browser.'); console.log('WebSocket is not supported by this browser.');
} }
if (ws) { if (wsConnection) {
ws.onmessage = function (event) { wsConnection.onmessage = function (event) {
var dataPoint = JSON.parse(event.data); var dataPoint = JSON.parse(event.data);
chartData.push({ chartData.push({
x: parseInt(dataPoint[4]) / 1000, x: parseInt(dataPoint[4]) / 1000,
@ -100,9 +114,9 @@ function connect(target) {
} }
} }
function disconnect() { function disconnect(wsConnection) {
if (ws != null) { if (wsConnection != null) {
ws.close(); wsConnection.close();
ws = null; wsConnection = null;
} }
} }

Loading…
Cancel
Save