singleMove Metronome2

testing the transform

by Joe LeMonnier

HTML

<input type="button" value="play" id="play" />
<div id="canvas"></div>

JavaScript

var paper = Raphael("canvas",500,500);

var metronome = function() {    
    
    var len =  200, 
        angle = 20,
        width = 150,
        x =  0,
        y = 0,
        tempo = 100;
 
    var arm = paper.path("M" + (x + width) + "," + y + "v" + len).attr({
        'stroke-width': 5,
        stroke: "#999"
    });
        
    var weight = paper.path("M150,200h40v40 h-40 v-40")
        .attr({
            'stroke-width': 2,
            fill: '#666'
        });
    var box=paper.path("M100,100 h20 v20 h-20 v-20")
    weight.position = (len - 18) / 2;
    weight.transform("T0,-" + weight.position);
        
    var label1 = paper.text(x + width, y + len + 15, tempo);
    var label2 = paper.text(x + width, y + len + 35, weight.position);
    var label3 = paper.text(x + width, y + len + 55, drag_position);
    var label4 = paper.text(x + width, y + len + 65, weight.transform());
    var drag_position; 

    weight.drag(
        function(x, y) {
            drag_position = Math.min(len - 18, Math.max(0, this.position - y));
            label1.attr("text", tempo);
            label2.attr("text", weight.position);
            label3.attr("text", drag_position);
            label4.attr("text", this.transform());

           this.transform('T0,-' + drag_position);            
        },
        function() {
            this.attr("fill", "lightblue");
        },
        function() {
            this.position = drag_position;
            this.attr("fill", "pink");
        }
    );    
    return {
        play: function() {
            var weightAnim = {transform:"R120"};
            var boxAnim = {transform:"r1320"}; 
			weight.animate(Raphael.animation(weightAnim, 2000)); 
      box.animate(Raphael.animation(boxAnim, 2000)); 
// box.transform("T100,0");
        }        
    };    
}   
    var m = metronome();
    document.getElementById("play").onclick = function() {
        m.play();    
    }