mirror of
https://repository.entgra.net/community/device-mgt-plugins.git
synced 2025-09-16 23:42:15 +00:00
Adding new Android sense real-time analytic view
This commit is contained in:
lasantha
parent
bb975d26f6
commit
1e7664f206
@ -17,17 +17,44 @@
|
||||
}}
|
||||
{{unit "cdmf.unit.lib.rickshaw-graph"}}
|
||||
|
||||
<div id="chartWrapper">
|
||||
{{#zone "topCss"}}
|
||||
{{css "css/custom.css"}}
|
||||
{{/zone}}
|
||||
|
||||
<div id="stat-section" class="light-mode" data-websocketurl="{{websocketEndpoint}}">
|
||||
|
||||
{{#each graphData}}
|
||||
<div id="chart-{{@key}}" class="row">
|
||||
{{#each this}}
|
||||
<div class="col-md-6 graph">
|
||||
<div class="sensor_graph">
|
||||
<i class="fw fw-expand pull-right fw-background fw-inverse default-view"></i>
|
||||
<h3>{{this}}</h3>
|
||||
<div id="div-chart-{{this}}">
|
||||
<div class="chartWrapper" id="chartWrapper-{{this}}">
|
||||
<div id="y-axis-{{this}}" class="custom_y_axis">{{this}}</div>
|
||||
<div class="legend_container">
|
||||
<div id="legend-{{this}}"></div>
|
||||
</div>
|
||||
<div id="chart-{{this}}" class="custom_rickshaw_graph"></div>
|
||||
<div class="custom_x_axis">Time</div>
|
||||
</div>
|
||||
<a class="details-view-toggle-button" data-toggle="tooltip" title="Stored Data"
|
||||
href="{{@app.context}}/device/{{../../device.type}}/analytics?deviceId={{../../device.deviceIdentifier}}&deviceName={{../../device.name}}&graphType={{@key}}&sensor={{this}}">
|
||||
<span class="fw-stack">
|
||||
<i class="fw fw-circle-outline fw-stack-2x "></i>
|
||||
<i class="fw fw-statistics fw-stack-1x "></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
|
||||
<a class="padding-left"
|
||||
href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}">
|
||||
<span class="fw-stack">
|
||||
<i class="fw fw-circle-outline fw-stack-2x"></i>
|
||||
<i class="fw fw-statistics fw-stack-1x"></i>
|
||||
</span> View Device Analytics
|
||||
</a>
|
||||
<!-- /statistics -->
|
||||
{{#zone "bottomJs"}}
|
||||
{{js "js/moment.min.js"}}
|
||||
{{js "js/socket.io.min.js"}}
|
||||
|
||||
@ -20,6 +20,12 @@ function onRequest(context) {
|
||||
var log = new Log("stats.js");
|
||||
var carbonServer = require("carbon").server;
|
||||
var device = context.unit.params.device;
|
||||
// graph configuration
|
||||
var graphData = {
|
||||
Sensors:["accelerometer","magnetic", "gravity", "pressure", "proximity", "gyroscope"],
|
||||
Realtime_Data:['battery','light','rotation']
|
||||
|
||||
};
|
||||
var devicemgtProps = require("/app/modules/conf-reader/main.js")["conf"];
|
||||
var constants = require("/app/modules/constants.js");
|
||||
var websocketEndpoint = devicemgtProps["wssURL"].replace("https", "wss");
|
||||
@ -36,7 +42,7 @@ function onRequest(context) {
|
||||
token = tokenPair.accessToken;
|
||||
}
|
||||
websocketEndpoint = websocketEndpoint + "/secured-websocket/org.wso2.iot.android.sense/1.0.0?" +
|
||||
+ "deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type + "&websocketToken=" + token;
|
||||
"deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type + "&websocketToken=" + token;
|
||||
}
|
||||
return {"device": device, "websocketEndpoint": websocketEndpoint};
|
||||
return {"device": device, "websocketEndpoint": websocketEndpoint, "graphData":graphData};
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
/*
|
||||
* Copyright (c) 2017, 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.
|
||||
*/
|
||||
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-gutters > .col,
|
||||
.no-gutters > [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.details-view-toggle-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.custom_x_axis {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.rickshaw_legend {
|
||||
color: #000000;
|
||||
background: #FFFFFF;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.sensor_graph{
|
||||
border:0.5px solid #cecece;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sensor_graph > h3 {
|
||||
text-transform: capitalize;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.chartWrapper {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
transition: all 400ms ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.max{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max_hide{
|
||||
display: none;
|
||||
}
|
||||
@ -19,88 +19,84 @@
|
||||
var ws;
|
||||
var typeId = 3;
|
||||
var batteryId = 5;
|
||||
var gps_latId = 6;
|
||||
var gps_longId = 7;
|
||||
var accelerometer_xId = 8;
|
||||
var accelerometer_yId = 9;
|
||||
var accelerometer_zId = 10;
|
||||
var magnetic_xId = 11;
|
||||
var magnetic_yId = 12;
|
||||
var magnetic_zId = 13;
|
||||
var gyroscope_xId = 14;
|
||||
var gyroscope_yId = 15;
|
||||
var gyroscope_zId = 16;
|
||||
var lightId = 17;
|
||||
var pressureId = 18;
|
||||
var proximityId = 19;
|
||||
var gravity_xId = 20;
|
||||
var gravity_yId = 21;
|
||||
var gravity_zId = 22;
|
||||
var rotation_xId = 23;
|
||||
var rotation_yId = 24;
|
||||
var rotation_zId = 25;
|
||||
var wordId = 26;
|
||||
var word_sessionIdId = 27;
|
||||
var word_statusId = 28;
|
||||
|
||||
var battery;
|
||||
var accelerometer_xId = 11;
|
||||
var accelerometer_yId = 12;
|
||||
var accelerometer_zId = 13;
|
||||
|
||||
var magnetic_xId = 16;
|
||||
var magnetic_yId = 17;
|
||||
var magnetic_zId = 18;
|
||||
|
||||
var gyroscope_xId = 19;
|
||||
var gyroscope_yId = 20;
|
||||
var gyroscope_zId = 21;
|
||||
|
||||
var lightId = 22;
|
||||
|
||||
var pressureId = 23;
|
||||
|
||||
var proximityId = 24;
|
||||
|
||||
var gravity_xId = 25;
|
||||
var gravity_yId = 26;
|
||||
var gravity_zId = 27;
|
||||
|
||||
var rotation_xId = 28;
|
||||
var rotation_yId = 29;
|
||||
var rotation_zId = 30;
|
||||
|
||||
var batteryData = [];
|
||||
|
||||
var light;
|
||||
var lightData = [];
|
||||
|
||||
var pressure;
|
||||
var pressureData = [];
|
||||
|
||||
var proximity;
|
||||
var proximityData = [];
|
||||
|
||||
var accelerometer;
|
||||
var accelerometer_xData = [];
|
||||
var accelerometer_yData = [];
|
||||
var accelerometer_zData = [];
|
||||
|
||||
var magnetic;
|
||||
var magnetic_xData = [];
|
||||
var magnetic_yData = [];
|
||||
var magnetic_zData = [];
|
||||
|
||||
var gyroscope;
|
||||
var gyroscope_xData = [];
|
||||
var gyroscope_yData = [];
|
||||
var gyroscope_zData = [];
|
||||
|
||||
var gravity;
|
||||
var gravity_xData = [];
|
||||
var gravity_yData = [];
|
||||
var gravity_zData = [];
|
||||
|
||||
var rotation;
|
||||
var rotation_xData = [];
|
||||
var rotation_yData = [];
|
||||
var rotation_zData = [];
|
||||
|
||||
var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
|
||||
var graphMap = {};
|
||||
|
||||
var palette = new Rickshaw.Color.Palette({scheme: "munin"});
|
||||
|
||||
$(window).load(function () {
|
||||
|
||||
battery = lineGraph("battery", batteryData);
|
||||
light = lineGraph("light", lightData);
|
||||
pressure = lineGraph("pressure", pressureData);
|
||||
proximity = lineGraph("proximity", proximityData);
|
||||
accelerometer = threeDlineGraph("accelerometer", accelerometer_xData, accelerometer_yData, accelerometer_zData);
|
||||
magnetic = threeDlineGraph("magnetic", magnetic_xData, magnetic_yData, magnetic_zData);
|
||||
gyroscope = threeDlineGraph("gyroscope", gyroscope_xData, gyroscope_yData, gyroscope_zData);
|
||||
gravity = threeDlineGraph("gravity", gravity_xData, gravity_yData, gravity_zData);
|
||||
rotation = threeDlineGraph("rotation", rotation_xData, rotation_yData, rotation_zData);
|
||||
graphMap["battery"]=lineGraph("battery", batteryData);
|
||||
graphMap["light"]=lineGraph("light", lightData);
|
||||
graphMap["pressure"]=lineGraph("pressure", pressureData);
|
||||
graphMap["proximity"]=lineGraph("proximity", proximityData);
|
||||
graphMap["accelerometer"]=threeDlineGraph("accelerometer", accelerometer_xData, accelerometer_yData, accelerometer_zData);
|
||||
graphMap["magnetic"]=threeDlineGraph("magnetic", magnetic_xData, magnetic_yData, magnetic_zData);
|
||||
graphMap["gyroscope"]=threeDlineGraph("gyroscope", gyroscope_xData, gyroscope_yData, gyroscope_zData);
|
||||
graphMap["gravity"]=threeDlineGraph("gravity", gravity_xData, gravity_yData, gravity_zData);
|
||||
graphMap["rotation"]=threeDlineGraph("rotation", rotation_xData, rotation_yData, rotation_zData);
|
||||
|
||||
var websocketUrl = $("#div-chart").data("websocketurl");
|
||||
var websocketUrl = $("#stat-section").data("websocketurl");
|
||||
connect(websocketUrl)
|
||||
});
|
||||
|
||||
$(window).unload(function () {
|
||||
disconnect();
|
||||
});
|
||||
window.onbeforeunload = function() {
|
||||
disconnect();
|
||||
};
|
||||
|
||||
function threeDlineGraph(type, xChartData, yChartData, zChartData) {
|
||||
var tNow = new Date().getTime() / 1000;
|
||||
@ -119,11 +115,14 @@ function threeDlineGraph(type, xChartData, yChartData, zChartData) {
|
||||
});
|
||||
}
|
||||
|
||||
var $elem = $("#chart-" + type);
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
element: document.getElementById("chart-" + type),
|
||||
width: $("#div-chart").width() - 50,
|
||||
element: $elem[0],
|
||||
width: $elem.width() - 100,
|
||||
height: 300,
|
||||
renderer: "line",
|
||||
interpolation: "linear",
|
||||
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
||||
xScale: d3.time.scale(),
|
||||
series: [
|
||||
@ -133,24 +132,32 @@ function threeDlineGraph(type, xChartData, yChartData, zChartData) {
|
||||
]
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
var xAxis = new Rickshaw.Graph.Axis.Time({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
xAxis.render();
|
||||
|
||||
new Rickshaw.Graph.Axis.Y({
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
height: 300,
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById("y-axis-"+type)
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Legend({
|
||||
graph: graph,
|
||||
element: document.getElementById('legend-' + type)
|
||||
});
|
||||
});
|
||||
|
||||
var detail = new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
return graph;
|
||||
graph.render();
|
||||
|
||||
return graph;
|
||||
}
|
||||
|
||||
function lineGraph(type, chartData) {
|
||||
@ -162,12 +169,15 @@ function lineGraph(type, chartData) {
|
||||
});
|
||||
}
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
element: document.getElementById("chart-" + type),
|
||||
width: $("#div-chart").width() - 50,
|
||||
var $elem = $("#chart-" + type);
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
element: $elem[0],
|
||||
width: $elem.width() - 100,
|
||||
height: 300,
|
||||
renderer: "line",
|
||||
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
||||
interpolation: "linear",
|
||||
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
||||
xScale: d3.time.scale(),
|
||||
series: [{
|
||||
'color': palette.color(),
|
||||
@ -176,8 +186,6 @@ function lineGraph(type, chartData) {
|
||||
}]
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
var xAxis = new Rickshaw.Graph.Axis.Time({
|
||||
graph: graph
|
||||
});
|
||||
@ -189,13 +197,13 @@ function lineGraph(type, chartData) {
|
||||
orientation: 'left',
|
||||
height: 300,
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis')
|
||||
element: document.getElementById('y-axis-'+type)
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Legend({
|
||||
graph: graph,
|
||||
element: document.getElementById('legend-' + type)
|
||||
});
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph,
|
||||
@ -206,7 +214,9 @@ function lineGraph(type, chartData) {
|
||||
}
|
||||
});
|
||||
|
||||
return graph;
|
||||
graph.render();
|
||||
|
||||
return graph;
|
||||
}
|
||||
|
||||
//websocket connection
|
||||
@ -219,60 +229,61 @@ function connect(target) {
|
||||
console.log('WebSocket is not supported by this browser.');
|
||||
}
|
||||
if (ws) {
|
||||
ws.onmessage = function (event) {
|
||||
ws.onmessage = function (event) {
|
||||
var dataPoint = JSON.parse(event.data);
|
||||
|
||||
if (dataPoint) {
|
||||
var time = parseInt(dataPoint[4]) / 1000;
|
||||
switch (dataPoint[typeId]) {
|
||||
case "battery":
|
||||
graphUpdate(batteryData, time, dataPoint[batteryId], battery);
|
||||
graphUpdate(batteryData, time, dataPoint[batteryId], graphMap["battery"]);
|
||||
break;
|
||||
|
||||
case "light":
|
||||
graphUpdate(lightData, time, dataPoint[lightId], light);
|
||||
graphUpdate(lightData, time, dataPoint[lightId], graphMap["light"]);
|
||||
break;
|
||||
|
||||
case "pressure":
|
||||
graphUpdate(pressureData, time, dataPoint[pressureId], pressure);
|
||||
graphUpdate(pressureData, time, dataPoint[pressureId], graphMap["pressure"]);
|
||||
break;
|
||||
|
||||
case "proximity":
|
||||
graphUpdate(proximityData, time, dataPoint[proximityId], proximity);
|
||||
graphUpdate(proximityData, time, dataPoint[proximityId], graphMap["proximity"]);
|
||||
break;
|
||||
|
||||
case "accelerometer":
|
||||
dataUpdate(accelerometer_xData, time, dataPoint[accelerometer_xId]);
|
||||
dataUpdate(accelerometer_xData, time, dataPoint[accelerometer_xId]);
|
||||
dataUpdate(accelerometer_yData, time, dataPoint[accelerometer_yId]);
|
||||
dataUpdate(accelerometer_zData, time, dataPoint[accelerometer_zId]);
|
||||
accelerometer.update();
|
||||
graphMap["accelerometer"].update();
|
||||
break;
|
||||
|
||||
case "magnetic":
|
||||
dataUpdate(magnetic_xData, time, dataPoint[magnetic_xId]);
|
||||
dataUpdate(magnetic_xData, time, dataPoint[magnetic_xId]);
|
||||
dataUpdate(magnetic_yData, time, dataPoint[magnetic_yId]);
|
||||
dataUpdate(magnetic_zData, time, dataPoint[magnetic_zId]);
|
||||
magnetic.update();
|
||||
break;
|
||||
graphMap["magnetic"].update();
|
||||
break;
|
||||
|
||||
case "gyroscope":
|
||||
dataUpdate(gyroscope_xData, time, dataPoint[gyroscope_xId]);
|
||||
dataUpdate(gyroscope_xData, time, dataPoint[gyroscope_xId]);
|
||||
dataUpdate(gyroscope_yData, time, dataPoint[gyroscope_yId]);
|
||||
dataUpdate(gyroscope_zData, time, dataPoint[gyroscope_zId]);
|
||||
gyroscope.update();
|
||||
graphMap["gyroscope"].update();
|
||||
break;
|
||||
|
||||
case "rotation":
|
||||
dataUpdate(magnetic_xData, time, dataPoint[rotation_xId]);
|
||||
dataUpdate(magnetic_xData, time, dataPoint[rotation_xId]);
|
||||
dataUpdate(magnetic_yData, time, dataPoint[rotation_yId]);
|
||||
dataUpdate(magnetic_zData, time, dataPoint[rotation_zId]);
|
||||
rotation.update();
|
||||
graphMap["rotation"].update();
|
||||
break;
|
||||
|
||||
case "gravity":
|
||||
dataUpdate(gravity_xData, time, dataPoint[gravity_xId]);
|
||||
dataUpdate(gravity_xData, time, dataPoint[gravity_xId]);
|
||||
dataUpdate(gravity_yData, time, dataPoint[gravity_yId]);
|
||||
dataUpdate(gravity_zData, time, dataPoint[gravity_zId]);
|
||||
gravity.update();
|
||||
graphMap["gravity"].update();
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -297,7 +308,6 @@ function dataUpdate(chartData, xValue, yValue) {
|
||||
chartData.shift();
|
||||
}
|
||||
|
||||
|
||||
function disconnect() {
|
||||
if (ws != null) {
|
||||
ws.close();
|
||||
@ -305,6 +315,41 @@ function disconnect() {
|
||||
}
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
function maximizeGraph(graph, width,height){
|
||||
graph.configure({
|
||||
width: width*2,
|
||||
height: height*2
|
||||
|
||||
}
|
||||
});
|
||||
graph.render();
|
||||
}
|
||||
|
||||
function minimizeGraph(graph){
|
||||
graph.configure({
|
||||
width: 366,
|
||||
height: 300
|
||||
});
|
||||
graph.render();
|
||||
}
|
||||
|
||||
//maximize minimize functionality
|
||||
$(".fw-expand").click(function(e) {
|
||||
var innerGraph= graphMap[e.target.nextElementSibling.innerHTML];
|
||||
var width = $(".chartWrapper").width();
|
||||
var height = $(".chartWrapper").height();
|
||||
|
||||
if($(this).hasClass("default-view")){
|
||||
$(this).removeClass("default-view");
|
||||
maximizeGraph(innerGraph,width,height);
|
||||
$(this).parent().parent().addClass("max");
|
||||
$(this).closest(".graph").siblings().addClass("max_hide");
|
||||
$(this).closest(".graph").parent().siblings().addClass("max_hide");
|
||||
}else{
|
||||
|
||||
$(this).addClass("default-view");
|
||||
minimizeGraph(innerGraph);
|
||||
$(this).parent().parent().removeClass("max");
|
||||
$(this).closest(".graph").siblings().removeClass("max_hide");
|
||||
$(this).closest(".graph").parent().siblings().removeClass("max_hide");
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user