From 7290b39664f87dd8a3bf81589749f65694ea61f8 Mon Sep 17 00:00:00 2001 From: Jooncheol Park Date: Wed, 15 Apr 2015 19:42:24 +0900 Subject: Initial commit for AM Monitor --- Graph.qml | 264 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 Graph.qml (limited to 'Graph.qml') diff --git a/Graph.qml b/Graph.qml new file mode 100644 index 0000000..e6434da --- /dev/null +++ b/Graph.qml @@ -0,0 +1,264 @@ +import QtQuick 2.0 +import com.windriver.ammonitor 1.0 +import "code.js" as Code + +Rectangle { + + property string title : "No name" + property string description : "No description" + property string backgroundColor : "#F0F0F0" + property string backgroundLineColor : "#aaaaaa" + property real backgroundLineWidth : 0.1 + property int refreshInterval : 500 + property string graphName : "" + property int defaultValue : 0 + property int maxDataLength : 100 + property int maxValue : 100 + property int graphLineWidth : 1 + + Component.onCompleted: { + Code.addGraphDataset(graphName,refreshInterval); + refreshTimer.start(); + } + + function updateData(name, id, value) { + Code.updateGraphNode(graphName, name, id, maxDataLength, value); + } + + function removeData(name, id) { + Code.removeGraphNode(graphName, name, id); + } + + function startTimer() { + refreshTimer.start(); + } + + function stopTimer() { + refreshTimer.stop(); + } + + + Text { + text: title + font.pixelSize: parent.height / 20 + anchors.bottom: background.top + anchors.left: background.left + } + + Text { + text: maxValue + font.pixelSize: parent.height / 30 + anchors.right: background.left + anchors.rightMargin: 5 + y: parent.height * 0.25 + } + Text { + text: maxValue / 2 + font.pixelSize: parent.height / 30 + anchors.right: background.left + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: 5 + y: parent.height * 0.5 + } + Text { + id: volume0 + text: "0" + font.pixelSize: parent.height / 30 + anchors.right: background.left + anchors.rightMargin: 5 + y: parent.height * 0.70 + } + + Text { + text: "Volume" + font.pixelSize: parent.height / 30 + anchors.right: background.left + anchors.rightMargin: 2 + anchors.top: volume0.bottom + } + + Canvas { + id: background + width: parent.width + height: parent.height + anchors.fill: parent + anchors.margins: parent.width / 10 + antialiasing: true + + function drawBackground() { + // Get Drawing Context + var context = getContext('2d'); + context.clearRect(0, 0, width, height); + var bgColor = parent.backgroundColor; + var bgLineColor = parent.backgroundLineColor; + var bgLineWidth = parent.backgroundLineWidth; + + // Fill background color + context.save(); + /* + context.beginPath(); + context.fillStyle = bgColor; + context.fillRect(0,0,width, height); + context.closePath(); + context.fill(); + */ + + // 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(); + } + + // 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); + context.lineTo(width, verticalWidth * 8); + context.closePath(); + context.stroke(); + + context.restore(); + + } + + function drawGraphNode() { + var context = getContext('2d'); + var graphWidth = width-2; + var graphHeight = height * (0.6); + var nodeList = Code.takeGraphDataset(graphName); + var lineColor = "black"; + var dataDrawingWidth = graphWidth / maxDataLength; + + if (nodeList.length == 0) { + return; + } + + context.lineWidth = graphLineWidth; + + for (var i = 0; i < nodeList.length; i++) { + var node = nodeList[i]; + var startX = width-1; + var startY = height-1; + var endX = 0; + var endY = 0; + + context.beginPath(); + lineColor = node.color; + context.strokeStyle = lineColor; + if (node.removed) + startX = dataDrawingWidth * node.data.length; + + for (var j = node.data.length-1; j > 0; j--) { + var value = node.data[j]; + var adjustY = 0; + if (j == node.data.length-1) { + startY = getYPosition(value, graphHeight, adjustY); + } + + for (var k = 0; k < nodeList.length; k++) { + if (k != i && nodeList[k].data.length >= j && nodeList[k].data[j] == value) { + adjustY = i * graphLineWidth * 2 + 1; + break; + } + } + + endX = startX - dataDrawingWidth; + endY = getYPosition(value, graphHeight, adjustY); + + if ((value < 0 && node.data[j-1] > 0) || + (value < 0 && j == 0) || + (j!= nodeList.length -1 &&value < 0 && node.data[j+1] > 0)) { + + context.moveTo(startX, startY); + context.fillStyle = node.color; + context.arc(startX, startY, dataDrawingWidth, 0, Math.PI * 2, true); + context.fill(); + } else { + context.moveTo(startX, startY); + context.lineTo(endX, endY); + } + + context.stroke(); + startX = endX; + startY = endY; + } + context.closePath(); + + } + } + + function getYPosition(value, graphHeight, adjustY) { + var pos = 0; + if (value < 0) + value = value * -1; + + pos = graphHeight - (graphHeight * (value / maxValue)); + + if (pos < 0) + pos = graphHeight; + + pos = pos + ((height - graphHeight) / 2); + pos = pos + adjustY; + + return pos + } + + onPaint:{ + drawBackground(); + drawGraphNode(); + } + } + + Canvas { + id: node + width: parent.width + height: parent.height + anchors.fill: parent + } + + Timer { + id: refreshTimer + interval: parent.refreshInterval + repeat: true + onTriggered: { + Code.refreshGraphNode(graphName); + background.requestPaint(); + } + } + + Text { + text: "("+description+")" + font.pixelSize: parent.height / 30 + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: parent.height/14 + } +} + -- cgit v1.2.1