Gimhan-minion
/
device-mgt-plugins
forked from community/device-mgt-plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding new Android sense real-time analytic view

Browse Source
revert-dabc3590
lasantha 8 years ago
parent bb975d26f6
commit 1e7664f206
4 changed files with 241 additions and 93 deletions
Show Stats Download Patch File Download Diff File

39
components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.realtime.analytics-view/analytics-view.hbs
Unescape View File

@ -17,17 +17,44 @@
}}
{{unit "cdmf.unit.lib.rickshaw-graph"}}
<div id="chartWrapper">
</div>
{{#zone "topCss"}}
{{css "css/custom.css"}}
{{/zone}}
<div id="stat-section" class="light-mode" data-websocketurl="{{websocketEndpoint}}">
<a class="padding-left"
href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}">
{{#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> View Device Analytics
</span>
</a>
<!-- /statistics -->
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{#zone "bottomJs"}}
{{js "js/moment.min.js"}}
{{js "js/socket.io.min.js"}}

10
components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.realtime.analytics-view/analytics-view.js
Unescape View File

@ -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};
}

70
components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.realtime.analytics-view/public/css/custom.css
Unescape View File

@ -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;
}

179
components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.realtime.analytics-view/public/js/device-stats.js
Unescape View File

@ -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);
var websocketUrl = $("#div-chart").data("websocketurl");
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 = $("#stat-section").data("websocketurl");
connect(websocketUrl)
});
$(window).unload(function () {
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,14 +132,20 @@ 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)
@ -150,6 +155,8 @@ function threeDlineGraph(type, xChartData, yChartData, zChartData) {
graph: graph
});
graph.render();
return graph;
}
@ -162,11 +169,14 @@ function lineGraph(type, chartData) {
});
}
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: [{
@ -176,8 +186,6 @@ function lineGraph(type, chartData) {
}]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
@ -189,7 +197,7 @@ 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({
@ -206,6 +214,8 @@ function lineGraph(type, chartData) {
}
});
graph.render();
return graph;
}
@ -221,58 +231,59 @@ function connect(target) {
if (ws) {
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_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_yData, time, dataPoint[magnetic_yId]);
dataUpdate(magnetic_zData, time, dataPoint[magnetic_zId]);
magnetic.update();
graphMap["magnetic"].update();
break;
case "gyroscope":
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_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_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");
}
});

Write Preview
Loading…
Cancel
Save