Added a new graph example

2 files changed, 150 insertions, 0 deletions

diff --git a/examples/graph/Slider.qml b/examples/graph/Slider.qml
new file mode 100644
index 0000000..8500e49
--- /dev/null
+++ b/examples/graph/Slider.qml
@@ -0,0 +1,49 @@
+import Qt 4.7
+
+Rectangle {
+    id: slider;
+    width: 100; height: 15;
+    property int value: Math.round(handle.x*100/(slider.width-handle.width))
+    property color nodecolor: "black"
+    color: "#aaaaaa"
+    border.color: "#777777"
+    border.width: 1
+    radius: 2
+    opacity:0.7
+
+    MouseArea {
+        id:baseMouse
+        hoverEnabled: true
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        smooth:true
+        id: handle; width: 20; height: 16
+        x:Math.random()*40
+        color: nodecolor
+        border.color: "#333333"
+        border.width: 0
+        MouseArea {
+            id: handleMouse
+            hoverEnabled: true
+            anchors.fill: parent
+            drag.target: parent; drag.axis: "XAxis"
+            drag.minimumX: 0; drag.maximumX: slider.width - handle.width
+        }
+    }
+
+    transitions: [
+        Transition {
+            PropertyAnimation { properties: "opacity"; duration: 120}
+        }
+    ]
+
+    states: [
+        State {
+            name: "hover"
+            when: handleMouse.containsMouse || baseMouse.containsMouse
+                PropertyChanges { target: slider; opacity:1}
+        }
+    ]
+}
diff --git a/examples/graph/graph.qml b/examples/graph/graph.qml
new file mode 100644
index 0000000..8abdea8
--- /dev/null
+++ b/examples/graph/graph.qml
@@ -0,0 +1,101 @@
+import "../../Canvas"
+import Qt 4.7
+
+Canvas {
+    id: clock
+    width:600
+    height:400
+    property int count:6
+
+    Column {
+        id:sliders
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.margins: 10
+        spacing:16
+
+        Slider { nodecolor: "#88aaaa" ; onValueChanged:{updateCanvas()}}
+        Slider { nodecolor: "#aa8888" ; onValueChanged:{updateCanvas()}}
+        Slider { nodecolor: "#4488aa" ; onValueChanged:{updateCanvas()}}
+        Slider { nodecolor: "#444499" ; onValueChanged:{updateCanvas()}}
+        Slider { nodecolor: "#aa4444" ; onValueChanged:{updateCanvas()}}
+        Slider { nodecolor: "#559966" ; onValueChanged:{updateCanvas()}}
+    }
+
+    onPaint: {
+        var graphPadding = 20;
+        var cHeight = height;
+        var cWidth = width;
+
+        var grad = ctx.createLinearGradient(0, 0, 0, height);
+        grad.addColorStop(0,   '#fff'); // red
+        grad.addColorStop(0.5, '#eee'); // yellow
+        ctx.fillStyle = grad;
+
+        ctx.fillRect(0, 0, width, height);
+        ctx.strokeStyle = "rgb(150,150,150)";
+        ctx.lineWidth = 2;
+	// Draw Axis
+	ctx.beginPath();
+	ctx.moveTo(graphPadding, graphPadding);
+	ctx.lineTo(graphPadding,cHeight - graphPadding);
+	ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
+	ctx.stroke();
+	ctx.closePath();
+
+	// Display a point for each slider, spaced equally
+        var availableSpace = cWidth - (graphPadding * count);
+        var horizSpace = availableSpace / count;
+        var vertSpace = cHeight - (graphPadding * count);
+
+	// Create an array of y points
+	var points = new Array();
+        for(var i = 0;i < count;i++){
+            // Get Ypos
+            var yPercent  =  (sliders.children[i].value - 100) * -1;
+            var yPos = (vertSpace * (yPercent / 100) + (graphPadding * 2));
+            points.push(yPos);
+	}
+
+	// Draw Lines
+	var xPos = graphPadding * 2;
+	ctx.beginPath();
+        for(i = 0;i < count;i++){
+            if(i == 0)
+                ctx.moveTo(xPos, points[i]);
+            else
+                ctx.lineTo(xPos, points[i]);
+            xPos += horizSpace;
+	}
+	ctx.stroke();
+	ctx.closePath();
+
+        // Draw Dots
+        var xPos = graphPadding * 2;
+        for(i = 0;i < count;i++){
+            drawCircle(ctx, xPos, points[i], count, sliders.children[i].nodecolor);
+            xPos += horizSpace;
+        }
+
+        ctx.strokeStyle = "rgb(110,110,110)";
+
+	// Draw Axis
+	ctx.beginPath();
+	ctx.moveTo(graphPadding, graphPadding);
+        ctx.lineTo(graphPadding,cHeight - graphPadding);
+        ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
+	ctx.stroke();
+	ctx.closePath();
+    }
+
+    function drawCircle(ctx, x, y, radius, colour){
+        ctx.save();
+        ctx.fillStyle = colour;
+        ctx.beginPath();
+        ctx.arc(x-1, y-1, radius,0,Math.PI*2,true); // Outer circle
+        ctx.fill();
+        ctx.restore();
+    }
+}
+
+