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_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_publisher" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
</artifact>
</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"}}
<div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
<div id="div-chart" data-websocketurl="{{websocketEndpoint1}}" data-sensorType="temperature">
<div class="chartWrapper" id="chartWrapper">
<div id="y_axis" class="custom_y_axis" style="margin-top: -20px;">Temperature</div>
<div class="legend_container">
@ -28,6 +28,19 @@
<div class="custom_x_axis">Time</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"
href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}">
<span class="fw-stack">

@ -35,10 +35,16 @@ function onRequest(context) {
if (tokenPair) {
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;
var websocketToken= {'name':'websocket-token','value': token, 'path':'/', "maxAge":18000};
response.addCookie(websocketToken);
}
return {"device": device, "websocketEndpoint": websocketEndpoint};
return {
"device": device,
"websocketEndpoint1": websocketEndpoint1,
"websocketEndpoint2": websocketEndpoint2
};
}

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

Loading…
Cancel
Save