Updated some examples

3 files changed, 167 insertions, 112 deletions

diff --git a/examples/clock/clock.qml b/examples/clock/clock.qml
index a671d9c..27b7293 100644
--- a/examples/clock/clock.qml
+++ b/examples/clock/clock.qml
@@ -1,123 +1,109 @@
 import "../../Canvas"
 import Qt 4.7
 
-Rectangle {
-
-    width: 300; height: 200
-
-    Image {
-        id: bg
-        visible:false
-        source: "backdrop.png"
+Canvas {
+    id: clock
+    width:150
+    height:150
+    
+    Timer {
+        interval: 1000; running: true; repeat: true
+        onTriggered: clock.updateCanvas()
     }
 
-    Canvas {
-        id: clock
-        width:200
-        height:200
-
-        Timer {
-            interval: 1000; running: true; repeat: true
-            onTriggered: clock.updateCanvas()
+    onPaint : {
+        var now = new Date();
+        ctx.save();
+        ctx.drawLine
+        ctx.clearRect(0,0,150,150);
+        ctx.translate(75,75);
+        ctx.scale(0.4,0.4);
+        ctx.rotate(-Math.PI/2);
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "white";
+        ctx.lineWidth = 8;
+        ctx.lineCap = "round";
+
+        // Hour marks
+        ctx.save();
+        ctx.beginPath();
+        for (var i=0;i<12;i++){
+            ctx.rotate(Math.PI/6);
+            ctx.moveTo(100,0);
+            ctx.lineTo(120,0);
         }
-
-        onPaint : {
-
-            var now = new Date();
-            ctx.save();
-            ctx.drawLine
-            ctx.clearRect(0,0,150,150);
-            ctx.translate(75,75);
-            ctx.scale(0.4,0.4);
-            ctx.rotate(-Math.PI/2);
-            ctx.strokeStyle = "black";
-            ctx.fillStyle = "white";
-            ctx.lineWidth = 8;
-            ctx.lineCap = "round";
-            var bg = ctx.createImage("backdrop.png");
-            ctx.drawImage(bg, 0, 0, 100, 100);
-
-            // Hour marks
-            ctx.save();
-            ctx.beginPath();
-            for (var i=0;i<12;i++){
-                ctx.rotate(Math.PI/6);
-                ctx.moveTo(100,0);
+        ctx.stroke();
+        ctx.restore();
+
+        // Minute marks
+        ctx.save();
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        for (i=0;i<60;i++){
+            if (i%5!=0) { // 5 minutes
+                ctx.moveTo(117,0);
                 ctx.lineTo(120,0);
             }
-            ctx.stroke();
-            ctx.restore();
-
-            // Minute marks
-            ctx.save();
-            ctx.lineWidth = 5;
-            ctx.beginPath();
-            for (i=0;i<60;i++){
-                if (i%5!=0) { // 5 minutes
-                    ctx.moveTo(117,0);
-                    ctx.lineTo(120,0);
-                }
-                ctx.rotate(Math.PI/30);
-            }
-            ctx.stroke();
-            ctx.restore();
-
-            var sec = now.getSeconds();
-            var min = now.getMinutes();
-            var hr  = now.getHours();
-            hr = hr>=12 ? hr-12 : hr;
-
-            ctx.fillStyle = "black";
-
-            // write Hours
-            ctx.save();
-            ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-            ctx.lineWidth = 14;
-            ctx.beginPath();
-            ctx.moveTo(-20,0);
-            ctx.lineTo(80,0);
-            ctx.stroke();
-            ctx.restore();
-
-            // write Minutes
-            ctx.save();
-            ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-            ctx.lineWidth = 10;
-            ctx.beginPath();
-            ctx.moveTo(-28,0);
-            ctx.lineTo(112,0);
-            ctx.stroke();
-            ctx.restore();
-
-            // Write seconds
-            ctx.save();
-            ctx.rotate(sec * Math.PI/30);
-            ctx.strokeStyle = "#D40000";
-            ctx.fillStyle = "#D40000";
-            ctx.lineWidth = 6;
-            ctx.beginPath();
-            ctx.moveTo(-30,0);
-            ctx.lineTo(83,0);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(0,0,10,0,Math.PI*2,true);
-            ctx.fill();
-            ctx.beginPath();
-            ctx.arc(95,0,10,0,Math.PI*2,true);
-            ctx.stroke();
-            ctx.fillStyle = "#555";
-            ctx.arc(0,0,3,0,Math.PI*2,true);
-            ctx.fill();
-            ctx.restore();
-
-            ctx.beginPath();
-            ctx.lineWidth = 14;
-            ctx.strokeStyle = '#325FA2';
-            ctx.arc(0,0,142,0,Math.PI*2,true);
-            ctx.stroke();
-
-            ctx.restore();        }
+            ctx.rotate(Math.PI/30);
+        }
+        ctx.stroke();
+        ctx.restore();
+
+        var sec = now.getSeconds();
+        var min = now.getMinutes();
+        var hr  = now.getHours();
+        hr = hr>=12 ? hr-12 : hr;
+
+        ctx.fillStyle = "black";
+
+        // write Hours
+        ctx.save();
+        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+        ctx.lineWidth = 14;
+        ctx.beginPath();
+        ctx.moveTo(-20,0);
+        ctx.lineTo(80,0);
+        ctx.stroke();
+        ctx.restore();
+
+        // write Minutes
+        ctx.save();
+        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+        ctx.lineWidth = 10;
+        ctx.beginPath();
+        ctx.moveTo(-28,0);
+        ctx.lineTo(112,0);
+        ctx.stroke();
+        ctx.restore();
+
+        // Write seconds
+        ctx.save();
+        ctx.rotate(sec * Math.PI/30);
+        ctx.strokeStyle = "#D40000";
+        ctx.fillStyle = "#D40000";
+        ctx.lineWidth = 6;
+        ctx.beginPath();
+        ctx.moveTo(-30,0);
+        ctx.lineTo(83,0);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(0,0,10,0,Math.PI*2,true);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(95,0,10,0,Math.PI*2,true);
+        ctx.stroke();
+        ctx.fillStyle = "#555";
+        ctx.arc(0,0,3,0,Math.PI*2,true);
+        ctx.fill();
+        ctx.restore();
+
+        ctx.beginPath();
+        ctx.lineWidth = 14;
+        ctx.strokeStyle = '#325FA2';
+        ctx.arc(0,0,142,0,Math.PI*2,true);
+        ctx.stroke();
+        ctx.restore();        
     }
-
 }
 
+
diff --git a/examples/simple/Spiro.qml b/examples/simple/Spiro.qml
new file mode 100644
index 0000000..04e7aff
--- /dev/null
+++ b/examples/simple/Spiro.qml
@@ -0,0 +1,47 @@
+import "../../Canvas"
+import Qt 4.7
+
+// Spirograph
+
+Canvas {
+    width:200
+    height:200
+
+    property color color: "#ffee00"
+
+    MouseArea {
+        id:mousearea
+        hoverEnabled:true
+        anchors.fill: parent
+        onPositionChanged: { updateCanvas(); }
+    }
+
+    onPaint: {
+       ctx.strokeStyle = color;
+       ctx.translate((width/2), (height/2));
+       ctx.rotate(mousearea.mouseY/width)
+       drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2);
+       ctx.globalAlpha = 0.5;
+       drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2 +10);
+    }
+
+    function drawSpirograph(ctx,R,r,O){
+        var x1 = R-O;
+        var y1 = 0;
+        var i  = 1;
+        ctx.beginPath();
+        ctx.moveTo(x1,y1);
+        do {
+            if (i>20000) break;
+            var fuzz = (i)*Math.PI/72;
+            var x2 = (R+r)*Math.cos(fuzz) - (r+O)*Math.cos(((R+r)/r)*(fuzz))
+            var y2 = (R+r)*Math.sin(fuzz) - (r+O)*Math.sin(((R+r)/r)*(fuzz))
+            ctx.lineTo(x2,y2);
+            x1 = x2;
+            y1 = y2;
+            i++;
+      } while (x2 != R-O && y2 != 0 );
+        ctx.stroke();
+    }
+}
+
diff --git a/examples/simple/simple.qml b/examples/simple/simple.qml
new file mode 100644
index 0000000..4f4982e
--- /dev/null
+++ b/examples/simple/simple.qml
@@ -0,0 +1,22 @@
+import Qt 4.7
+import "../../Canvas"
+
+Grid {
+    columns:2
+    spacing:0
+    
+    Spiro {
+        color: "#eeaa44"
+    }
+    Spiro {
+        color: "#ee22ee"
+    }
+    Spiro {
+        color:"#dd2277"
+    }
+    Spiro {
+        color:"#cccc77"
+    }
+}
+
+