Permalink
Browse files

adding drum pad demo

  • Loading branch information...
1 parent 944ad1e commit ae7a1dc3da44768646a7c73d4becea01ae201768 Dan Newcome committed Dec 5, 2011
Showing with 63 additions and 0 deletions.
  1. +63 −0 samples/drumpads.html
View
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+<head>
+ <style>
+body { background: #ccc url(background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAmUlEQVQYV12Q2wrEIAxEVaSI+P/f6JMPIkWk1OUEpmwrSEicW/S11n0ch1trOWqM0V3X9erP83S+tbZ55HwBmlF9733DSCmZ2n3fD4HZnNPlnJ3/WisCMXAIIVg1RQ2wQBFlXAADRNUUSykWnosNRB052DJqxAaMokjMX1vLTl+Eqr7OMpKLHP+ZBNDmlpEGMI9jjMdSSxHhB0QBnc28Jnb5AAAAAElFTkSuQmCC);
+}
+ </style>
+ <script src="../donatello.js" type="text/javascript"></script>
+ <script src="../rect.js" type="text/javascript"></script>
+ <script>
+ function mousedown( el ) {
+ console.log( 'clicked donatello object' );
+ el.attr( { 'backgroundImage': '-o-radial-gradient(50% 50%, 70% 70%, rgba(255, 255, 255, 1), rgba(0, 0, 75, 1) )' } );
+ }
+ function mouseup( el ) {
+ el.attr( { 'backgroundImage': '-o-radial-gradient(50% 50%, 70% 70%, rgb(75, 75, 200), rgb(0, 0, 75) )' } );
+ }
+
+ function main() {
+ var padsize = 80;
+ var padspacing = 10;
+
+ var outer = Donatello.paper( 'paper-div', 20, 20, 8*(padsize+padspacing)+10, 2*(padsize+padspacing)+10 );
+ var paper = outer.rect( 0, 0, 8*(padsize+padspacing)+10, 2*(padsize+padspacing)+10, { 'r': 4, 'backgroundColor': 'grey' } );
+
+ for( var i=0; i < 8; i ++ ) {
+ for( var j=0; j < 2; j ++ ) {
+ var pad = paper.rect( i*(padsize+padspacing)+10, j*(padsize+padspacing)+10, padsize, padsize,
+ {
+ 'stroke-width': 0,
+ 'backgroundImage': '-o-radial-gradient(50% 50%, 70% 70%, rgb(75, 75, 200), rgb(0, 0, 75) )',
+ 'stroke-style': 'none',
+ 'r': 4
+ });
+ pad.node().addEventListener(
+ 'mousedown',
+ (function( pad ) {
+ return function() {
+ mousedown( pad );
+ };
+ })(pad) );
+ pad.node().addEventListener(
+ 'mouseup',
+ (function( pad ) {
+ return function() {
+ mouseup( pad );
+ };
+ })(pad) );
+ }
+ }
+ }
+ </script>
+ <style>
+ #paper-div {
+ }
+ </style>
+
+</head>
+<body onload='main();'>
+ <div id="paper-div">
+ </div>
+</body>
+</html>

0 comments on commit ae7a1dc

Please sign in to comment.