Merge pull request #1071 from thisaripatabendi/master

Adding coffee level graph to realtime-analytics view
application-manager-new
Madhawa Perera 7 years ago committed by GitHub
commit c6086de22c

@ -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,17 +17,30 @@
}} }}
{{unit "cdmf.unit.lib.rickshaw-graph"}} {{unit "cdmf.unit.lib.rickshaw-graph"}}
<div id="div-chart" data-websocketurl="{{websocketEndpoint}}"> <div id="div-chartTemperature" data-websocketurl="{{websocketEndpointTemperature}}" 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_axisTemperature" class="custom_y_axis" style="margin-top: -20px;">Temperature</div>
<div class="legend_container"> <div class="legend_container">
<div id="smoother" title="Smoothing"></div> <div id="smoother" title="Smoothing"></div>
<div id="legend"></div> <div id="legend"></div>
</div> </div>
<div id="chart" class="custom_rickshaw_graph"></div> <div id="chartTemperature" class="custom_rickshaw_graph"></div>
<div class="custom_x_axis">Time</div> <div class="custom_x_axis">Time</div>
</div> </div>
</div> </div>
<div id="div-chartCoffeeLevel" data-websocketurl="{{websocketEndpointCoffeeLevel}}" data-sensorType="coffeelevel">
<div class="chartWrapper" id="chartWrapper">
<div id="y_axisCoffeeLevel" 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="chartCoffeeLevel" 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?" websocketEndpointTemperature = websocketEndpoint + "/secured-websocket/org.wso2.iot.devices.temperature/1.0.0?"
+ "deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type+ "&websocketToken=" + token;
websocketEndpointCoffeeLevel = 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,
"websocketEndpointTemperature": websocketEndpointTemperature,
"websocketEndpointCoffeeLevel": websocketEndpointCoffeeLevel
};
} }

@ -16,23 +16,39 @@
* under the License. * under the License.
*/ */
var ws; var wsConnectionTemperature;
var graph; var wsConnectionCoffeeLevel;
var chartData = []; var graphForSensorTypeTemperature;
var graphForSensorTypeCoffeeLevel;
var chartDataSensorTypeTemperature = [];
var chartDataSensorTypeCoffeeLevel = [];
var palette = new Rickshaw.Color.Palette({scheme: "classic9"}); var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
$(window).load(function () { $(window).load(function () {
drawGraph(wsConnectionTemperature, "#div-chartTemperature", "y_axisTemperature", "chartTemperature", chartDataSensorTypeTemperature
, graphForSensorTypeTemperature);
drawGraph(wsConnectionCoffeeLevel, "#div-chartCoffeeLevel", "y_axisCoffeeLevel", "chartCoffeeLevel", chartDataSensorTypeCoffeeLevel
, graphForSensorTypeCoffeeLevel);
});
window.onbeforeunload = function() {
disconnect(wsConnectionTemperature);
disconnect(wsConnectionCoffeeLevel);
};
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({
x: tNow - (30 - i) * 15, x: tNow - (30 - i) * 15,
y: parseFloat(0) y: parseFloat(0)
}); });
} }
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,51 +74,49 @@ $(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,
y: parseFloat(dataPoint[5]) y: parseFloat(dataPoint[5])
}); });
chartData.shift(); chartData.shift();
graph.update(); graph.update();
}; };
} }
} }
function disconnect() { function disconnect(wsConnection) {
if (ws != null) { if (wsConnection != null) {
ws.close(); wsConnection.close();
ws = null; wsConnection = null;
} }
} }

Loading…
Cancel
Save