binary.html

   1 <html>
   2     <head>
   3         <title>Binary logic</title>
   4         <link rel="stylesheet" href="style/pixelless.css" />
   5         <script type="text/javascript" src="script/canvas.js" ></script>
   6         <style type="text/css">
   7                 canvas
   8                 {
   9                         -moz-box-shadow: 0 .2em .6em black;
  10                         -moz-border-radius: .2em;
  11                 }
  12         </style>
  13     </head>
  14     <body>
  15         <div id="container">
  16             <div class="content header">
  17                 <h1>Binari logic</h1>
  18             </div>
  19             <div class="content">
  20                     <canvas width="800px" height="500px">Canvas support required</canvas>
  21             </div>
  22             <div id="empty_footer"></div>
  23         </div>
  24         <div id="footer">
  25             &copy; 2009 Vynogradov
  26         </div>
  27
  28         <script type="text/javascript">
  29
  30                 var tag = document.getElementsByTagName('canvas')[0];
  31                 var ctx = tag.getContext('2d');
  32                 ctx.translate(.5,.5);
  33                 ctx.strokeStyle = 'silver';
  34
  35                 var w = 20, h = 34;
  36                 var objects = [new Gate(20, 20), new Gate(20, 60)];
  37                 var mouse = null;
  38
  39
  40                 tag.addEventListener('mousedown', mouseDown, false);
  41                 tag.addEventListener('mouseup', mouseUp, false);
  42                 tag.addEventListener('mousemove', mouseMove, false);
  43
  44                 var down = false;
  45                 var dragging=  null;
  46                 var offset = new Point(0,0);
  47
  48 function mouseMove(e)
  49 {
  50         if(down && dragging !== null)
  51         {
  52                 var point = mouseToCanvas(e);
  53                 dragging.x = point.x - offset.x;
  54                 dragging.y = point.y - offset.y;
  55         }
  56 }
  57
  58 function mouseDown(e)
  59 {
  60         down = true;
  61         var point = mouseToCanvas(e);
  62         dragging = findUnder(point);
  63         if(dragging!==null)
  64                 offset = new Point(point.x - dragging.x, point.y - dragging.y);
  65 }
  66
  67 function mouseUp()
  68 {
  69         dragging = null;
  70         down = false;
  71         offset = new Point(0,0);
  72 }
  73
  74 function Point(x, y)
  75 {
  76         this.x = x;
  77         this.y = y;
  78 }
  79
  80 function findUnder(p)
  81 {
  82         var under = objects.filter(function(o){return o.x < p.x && o.y < p.y && o.x + w > p.x && o.y + h > p.y});
  83         return under.length > 0 ? under[0] : null;
  84 }
  85
  86
  87 function mouseToCanvas(e)
  88     {
  89         var x = 0,y = 0;
  90
  91         if (!e)
  92         {
  93             e = window.event;
  94             x = e.offsetX;
  95             y = e.offsetY;
  96         }
  97         else // we assume DOM modeled javascript
  98         {
  99             var elt = e.target ;
 100             var left = 0;
 101             var top = 0 ;
 102
 103             while (elt.offsetParent)
 104             {
 105                 left += elt.offsetLeft;
 106                 top += elt.offsetTop;
 107                 elt = elt.offsetParent;
 108             }
 109
 110             x = e.pageX - left;
 111             y = e.pageY - top;
 112         }
 113
 114         return new Point(x, y);
 115     }
 116
 117 function Gate(x, y)
 118 {
 119         this.x = x;
 120         this.y = y;
 121 }
 122
 123                 renderGate = function(gate)
 124 {
 125         // TODO: Render distinctive shape for each type of gate.
 126         return ctx
 127                 .strokeRect(gate.x, gate.y, w, h)
 128                 .beginPath()
 129                 .moveTo(gate.x + w, gate.y + h/2)
 130                 .lineTo(gate.x + w * 1.3, gate.y + h/2)
 131                 .stroke()
 132                 .beginPath()
 133                 .moveTo(gate.x, gate.y + h / 5)
 134                 .lineTo(gate.x - w/3, gate.y + h / 5)
 135                 .stroke()
 136                 .beginPath()
 137                 .moveTo(gate.x, gate.y + 4 * h / 5)
 138                 .lineTo(gate.x - w/3, gate.y + 4 * h / 5)
 139                 .stroke()
 140 }
 141
 142 window.setInterval(
 143                 function(){
 144                 if(mouse !== null)
 145                         document.getElementsByTagName('h1')[0].innerHTML = mouse.x + ', ' + mouse.y;
 146                 ctx.clearRect(0,0,800, 500);
 147                 objects.forEach(renderGate)
 148                 }, 50);
 149
 150         </script>
 151     </body>
 152 </html>