- Refactoring Graph for AudioManagerMonitor

1) Redesign Graph object with method and property.
2) Remove unnecessary code.
3) Adjust offset of line color for AudioManagerGraph.
4) Draw Tranisent line of PulseAudioGraph according to play's status

Signed-off-by: vincent.jeong <vincent.jeong@windriver.com>
Signed-off-by: Jooncheol Park <jooncheol.park@windriver.com>

1 files changed, 276 insertions, 154 deletions

diff --git a/code.js b/code.js
index 911c77c..38d9e1c 100644
--- a/code.js
+++ b/code.js
@@ -5,12 +5,11 @@ var amConnections = [];
 var paSinkInputs = [];
 var paSinks = [];
 var paClients = [];
-var colorListByName = [["MEDIA","red"], ["NAVI","green"],["skype","blue"],["TextToSpeach","orange"], ["reverse","cyan"]];
 
 function saveAMConnection(connection) {
     var exist = false;
 
-    
+
     for (var i = 0; i < amConnections.length; i++) {
         var info = amConnections[i];
 
@@ -173,204 +172,327 @@ function takePASinkInput(index) {
     return null;
 }
 
-var graphDataset = [];
-var colorList = ["red", "orange", "green", "blue", "black", "cyan"];
-var colorListLength = colorList.length;
-
-function Graph() {
-    var name = "";
-    var dataset;
-    var nextColorIndex = 0;
+var GraphType = {
+    CONTINUOUS_LINE: 1,
+    TRANSIENT_LINE: 2,
+};
+
+var GraphLineColor = {
+    colorList : ["red", "orange", "green", "blue", "black", "cyan"],
+    colorListByRole : [["MEDIA","red"],
+                       ["NAVI","green"],
+                       ["skype","blue"],
+                       ["TextToSpeach","orange"],
+                       ["reverse","cyan"]]
 }
 
-function Node() {
-    var nodeName = "";
-    var color ="";
-    var data;
-    var id = -1;
-    var removed = false;
-}
+var Graph = function(type) {
+    var graph = this;
+
+    this.type = type;
+
+    this.colorList = GraphLineColor.colorList;
+    this.colorListByRole = GraphLineColor.colorListByRole;
+
+    this.nodeList = new Array();
+    this.nextColorIndex = 0;
+
+    this.width = 0;
+    this.height = 0;
+    this.backgroundColor = 0;
+    this.maxValue = 0;
+    this.maxDataLength = 0;
+    this.lineWidth = 0;
+    this.backgroundLineColor = 0;
+    this.backgroundLineWidth = 0;
+
+    this.loadGraphInfo = function(info) {
+        this.width = info.width;
+        this.height = info.height;
+        this.maxValue = info.maxValue;
+        this.lineWidth = info.lineWidth;
+        this.maxDataLength = info.maxDataLength;
+        this.backgroundColor = info.backgroundColor;
+        this.backgroundLineColor = info.backgroundLineColor;
+        this.backgroundLineWidth = info.backgroundLineWidth;
+    }
 
-function addGraphDataset(name) {
-    var newGraphDataset = new Graph();
+    this.drawBackground = function(context) {
+        var width = this.width;
+        var height = this.height;
+        var bgColor = this.backgroundColor;
+        var bgLineColor = this.backgroundLineColor;
+        var bgLineWidth = this.backgroundLineWidth;
+
+        // Fill background color
+        context.save();
+
+        // Draw Guide Line
+        context.translate(0.8,0.8);
+        var horizontalWidth = width / 10;
+        var verticalWidth = height / 10;
+
+        for(var i = 0; i < 10; i++) {
+            if (i == 0)
+                continue
+                // Draw Horizontal Line
+            context.beginPath();
+            context.lineWidth = bgLineWidth;
+            context.strokeStyle = bgLineColor;
+            context.moveTo(0, verticalWidth * i);
+            context.lineTo(width-1, verticalWidth * i);
+            context.closePath();
+            context.stroke();
+
+            // Draw Vertical Line
+            context.moveTo(horizontalWidth * i, 0);
+            context.lineTo(horizontalWidth * i, height);
+
+             // Stroke!!
+             context.stroke();
+        }
 
-    newGraphDataset.name = name;
-    newGraphDataset.dataset = new Array();
-    newGraphDataset.nextColorIndex = 0;
+        // Draw Right, Bottom border line
+        context.translate(-0.8, -0.8);
+        var w = width -1;
+        var h = height -1;
+        context.beginPath();
+        context.strokeStyle = "black";
+        context.lineWidth = 1;
+        context.moveTo(0,0);
+        context.lineTo(0, height);
+        context.moveTo(0, (verticalWidth * 8) + 7);
+        context.lineTo(width, (verticalWidth * 8) + 7);
+        context.closePath();
+        context.stroke();
+        context.restore();
+    }
 
-    graphDataset[graphDataset.length] = newGraphDataset;
-}
+    this.drawGraphNode = function(context) {
+        var graphWidth = this.width - 2;
+        var graphHeight = this.height * (0.6);
+        var graphLineWidth = this.lineWidth;
+        var nodeList = this.nodeList;
+        var lineColor = "black";
+        var dataDrawingWidth = graphWidth / this.maxDataLength;
 
-function removeGraphDataset(name) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == name) {
-            graphDataset.splice(i,1);
-            break;
+        if (nodeList.length == 0)
+            return;
+
+        context.lineWidth = graphLineWidth;
+
+        for (var i = 0; i < nodeList.length; i++) {
+            var node = nodeList[i];
+            var startX = graph.width-1;
+            var startY = graph.height-1;
+            var endX = 0;
+            var endY = 0;
+
+            context.beginPath();
+            lineColor = node.color;
+            context.strokeStyle = lineColor;
+            if (node.removed)
+                startX = dataDrawingWidth * node.data.length;
+
+            var offsetY = getOffsetY(node);
+            for (var j = node.data.length-1; j > 0; j--) {
+                var value = node.data[j];
+
+                if (j == node.data.length-1)
+                    startY = getYPosition(value, graphHeight, offsetY);
+
+                endX = startX - dataDrawingWidth;
+                endY = getYPosition(value, graphHeight, offsetY);
+
+                if (value < 0) {
+                    startX = endX;
+                    startY = endY;
+                    continue;
+                }
+
+                context.moveTo(startX, startY);
+                context.lineTo(endX, endY);
+                context.stroke();
+
+                startX = endX;
+                startY = endY;
+            }
+
+            context.closePath();
         }
     }
-}
 
-function addGraphNode(graphName, nodeName, id, maxDatalength, defaultValue) {
-    var newNode = new Node();
-    newNode.data = new Array(maxDatalength);
+    this.checkGraphNodeInList = function(nodeName, id) {
+        for (var index = 0; index < graph.nodeList.length; index++) {
+            var node = graph.nodeList[index];
+            if (node.nodeName == nodeName && node.id == id) {
+                console.log("Found GraphNode, nodeName = " + nodeName +
+                    " id = " + id);
+                return index;
+            }
+        }
 
-    for (var i = 0; i < maxDatalength; i++)
-        newNode.data[i] = defaultValue;
+        return -1;
+    }
 
-    newNode.nodeName = nodeName;
-    newNode.id = id;
+    this.updateGraphNode = function(index, value) {
+        var node = this.nodeList[index];
+        var lastLength = node.data.length;
+        node.data[lastLength-1] = value;
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        var graphdata = graphDataset[i];
-        if (graphdata.name == graphName) {
-            newNode.color = getGraphNodeColor(graphName, nodeName);
-            graphDataset[i].dataset[graphdata.dataset.length] = newNode;
-            return;
-        }
+        console.log("Try to update Volume(" + value + ")" + " for " + node.nodeName);
     }
 
-}
+    this.addGraphNode = function(nodeName, id, maxDatalength, value) {
+        var newNode = new Node(nodeName, id, value, maxDatalength);
 
-function getGraphNodeColor(graphName, nodeName) {
-    console.log(colorList);
-    for (var i = 0; i < colorListByName.length; i++) {
-        if (nodeName == colorListByName[i][0]) {
-            console.log("RETURN FIXED COLOR : " + nodeName + " / " + colorListByName[i][1]);
+        newNode.data = new Array(
+                        (this.type == GraphType.TRANSIENT_LINE) ?
+                        1 : maxDatalength);
 
-            return colorListByName[i][1];
-        }
+        for (var i = 0; i < newNode.data.length; i++)
+            newNode.data[i] = value;
+
+        newNode.color = getGraphListColor(nodeName);
+        this.nodeList.push(newNode);
     }
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            var index = graphDataset[i].nextColorIndex;
-            console.log("NEXT INDEX : " + index);
+    this.removeGraphNode = function(index) {
+        this.nodeList[index].removed = true;
 
-            if (index == colorListLength) {
-                graphDataset[i].nextColorIndex = 0;
-                return colorList[0];
-            }
-            graphDataset[i].nextColorIndex++;
+        if (this.type == GraphType.TRANSIENT_LINE)
+            insertPaddingDataInGraphNode(this.nodeList[index]);
+    }
+
+    this.getGraphNodeColor = function(nodeName) {
+        var nodeColor = null;
 
-            console.log("RETURN DEFAULT VALUE : " + colorList[index]);
-            return colorList[index];
+        for (var i = 0; i < this.nodeList.length; i++) {
+            if (this.nodeList[i].nodeName == nodeName)
+                    nodeColor = this.nodeList[i].color;
         }
+
+        return nodeColor;
     }
 
-    console.log("RETURN DEFAULT VALUE : " + colorList[0]);
-    return colorList[0];
-}
+    this.refreshGraphNode = function() {
+        for (var i = 0; i < this.nodeList.length; i++) {
+            var node = this.nodeList[i];
+            var lastIndex = node.data.length - 1;
+            var lastValue = node.data[lastIndex];
 
-function updateGraphNode(graphName, nodeName, id, maxDatalength, value) {
-
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName && graphDataset[i].dataset !== "undefined") {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                console.log("UPDATE GRAPH NODE : " + graphDataset[i].name + " //// " + graphName + " //// " + nodeName + graphDataset[i].dataset[j].nodeName);
-                if (graphDataset[i].dataset[j].nodeName == nodeName) {
-                    var nodeData = graphDataset[i].dataset[j];
-                    var isRebirth = false;
-
-                    // Node Rebirth
-                    if (nodeData.id != id) {
-                        console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
-                        console.log("REBIRTH NODE : " + nodeName);
-                        console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
-                        var startIndexToFillMinus = graphDataset[i].dataset[j].data.length-1;
-                        var filledData = graphDataset[i].dataset[j].data[startIndexToFillMinus -1] * -1;
-                        for (var k = startIndexToFillMinus; k < maxDatalength-1; k++)
-                            graphDataset[i].dataset[j].data[k] = filledData;
-                        graphDataset[i].dataset[j].removed = false;
-                        graphDataset[i].dataset[j].id = id;
-                        isRebirth = true;
+            if (node.data.length == 0) {
+                eraseGraphNode(node.nodeName, node.id);
+                return;
+            }
+
+            switch (this.type) {
+                case GraphType.CONTINUOUS_LINE:
+                {
+                    node.data.shift();
+                    node.data.push(lastValue);
+                    break;
+                }
+
+                case GraphType.TRANSIENT_LINE:
+                {
+                    if (node.removed) {
+                        node.data.shift();
+                        break;
                     }
 
-                    if (isRebirth || (!nodeData.removed && nodeData.id == id))
-                        graphDataset[i].dataset[j].data[graphDataset[i].dataset[j].data.length] = value;
+                    if (node.data.length > this.maxDataLength) {
+                        console.log("Info: OverFlow data buffer. Try to delete front element");
+                        node.data.shift();
+                    }
 
-                    if (nodeData.data.length > maxDatalength)
-                        graphDataset[i].dataset[j].data.splice(0,nodeData.data.length - maxDatalength);
-                    return;
+                    node.data.push(lastValue);
+
+                    break;
                 }
+
+                default:
+                    console.log("Error: Invalid GraphType in refreshGraphNode");
             }
         }
     }
 
-    addGraphNode(graphName, nodeName, id, maxDatalength, value);
-}
-
-function takeGraphDataset(graphName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        var dataset = graphDataset[i];
-        if (dataset.name == graphName)
-            return dataset.dataset;
+    function insertPaddingDataInGraphNode(node) {
+        var currentLength = node.data.length;
+        var remainingLength = graph.maxDataLength - currentLength;
+        for (var i = 0 ; i < remainingLength ; i++)
+            node.data.unshift(-1);
     }
-    return 0;
-}
 
-function getGraphNodeData(graphName, nodeName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        var dataset = graphDataset[i];
+    function eraseGraphNode(nodeName, id) {
+        var index = graph.checkGraphNodeInList(nodeName, id);
+
+        if (index < 0) return;
 
-	if (dataset.name == graphName) {
-	    for (var j = 0; j < dataset.dataset.length; j++) {
-	        if (dataset.dataset[j].nodeName == nodeName)
-		    return dataset.dataset[j];
-	    }
-	}
+        if (graph.nodeList[index].removed) {
+            console.log("Erase it " + nodeName + " / " + id );
+            graph.nodeList.splice(index, 1);
+        }
     }
-}
 
-function removeGraphNode(graphName, name, id) {
+    function getGraphListColor(nodeName) {
+        var index;
 
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                if (graphDataset[i].dataset[j].nodeName == name &&
-                        graphDataset[i].dataset[j].id == id) {
-                    console.log("REMOVE CHECK : " + graphName + " / " + name + " / " + id  );
-                    graphDataset[i].dataset[j].removed = true;
-                    return;
-                }
+        for (index = 0; index < graph.colorListByRole.length; index++) {
+            if (nodeName == graph.colorListByRole[index][0]) {
+                console.log("RETURN FIXED COLOR : " +
+                    nodeName + " / " + graph.colorListByRole[index][1]);
+                return graph.colorListByRole[index][1];
             }
         }
+
+        index = graph.nextColorIndex;
+
+        if (index == graph.colorList.length) {
+            console.log("OverFlow color list for node");
+            graph.nextColorIndex = 0;
+            return graph.colorList[0];
+        }
+
+        graph.nextColorIndex++;
+
+        console.log("RETURN DEFAULT VALUE : " + graph.colorList[index]);
+        return graph.colorList[index];
     }
-}
 
-function eraseGraphNode(graphName, name, id) {
-
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                if (graphDataset[i].dataset[j].nodeName == name &&
-                        graphDataset[i].dataset[j].id == id &&
-                        graphDataset[i].dataset[j].removed) {
-                    console.log("ERASE IT " + name + " / " + id );
-                    graphDataset[i].dataset.splice(j,1);
-                    return;
-                }
-            }
+    function getOffsetY(node) {
+        for (var i=0 ; i < graph.colorList.length; i++) {
+            if (node.color == graph.colorList[i])
+                 return i * graph.lineWidth * 2 + 1;
         }
+
+        console.log("Error: Cannot get offset for  " + node);
+
+        return -1;
     }
-}
-function refreshGraphNode(graphName) {
-    for (var i = 0; i < graphDataset.length; i++) {
-        if (graphDataset[i].name == graphName) {
-            for (var j = 0; j < graphDataset[i].dataset.length; j++) {
-                var lastIndex = graphDataset[i].dataset[j].data.length-1;
-                var lastValue = graphDataset[i].dataset[j].data[lastIndex];
-                if (lastIndex < 0) {
-                    eraseGraphNode(graphName, graphDataset[i].dataset[j].nodeName, graphDataset[i].dataset[j].id);
-                    return;
-                }
 
-                graphDataset[i].dataset[j].data.splice(0,1);
+    function getYPosition(value, graphHeight, offsetY) {
+        var pos = 0;
 
-                if (!graphDataset[i].dataset[j].removed)
-                    graphDataset[i].dataset[j].data[lastIndex] = lastValue;
-            }
-        }
+        if (value < 0)
+            value = value * -1;
+
+        pos = graphHeight - (graphHeight * (value / graph.maxValue));
+
+        if (pos < 0)
+            pos = graphHeight;
+
+        pos = pos + ((graph.height - graphHeight) / 2);
+        pos = pos + offsetY;
+
+        return pos
     }
 }
 
-
+var Node = function(nodeName, id, value, maxDatalength) {
+    this.nodeName = nodeName;
+    this.id = id;
+    this.removed = false;
+    this.nextColorIndex = 0;
+    this.data = null;
+}