bunny example, moved things around

2012-04-03 15:11:26 +01:00 · 2012-04-03 15:11:26 +01:00 · 9919f2524f
parent 9e3b255f60
commit 9919f2524f
4 changed files with 124 additions and 0 deletions
--- a/deps/rabbitmq_web_stomp_examples/priv/bunny.html
+++ b/deps/rabbitmq_web_stomp_examples/priv/bunny.html
@ -0,0 +1,124 @@
+<!doctype html>
+<html><head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="http://cdn.sockjs.org/sockjs-0.2.min.js"></script>
+    <script src="stomp.js"></script>
+
+    <style>
+      #cnvs {
+          border: none;
+          -moz-border-radius: 4px;
+          cursor: url(pencil.cur),crosshair;
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+      }
+      #cnvs:active {
+          cursor: url(pencil.cur),crosshair;
+      }
+      body {
+          overflow: hidden;
+          margin: 0;
+          padding: 0;
+      }
+    </style>
+</head><body lang="en">
+    <canvas id="cnvs"></canvas>
+<script>
+var send; var draw;
+send = draw = function(){};
+
+var lines = [];
+
+var canvas = document.getElementById('cnvs');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 230, 160);
+  };
+  img.src = 'bunny.jpg';
+
+  draw = function(p) {
+    ctx.beginPath();
+    ctx.moveTo(p.x1, p.y1);
+    ctx.lineTo(p.x2, p.y2);
+    ctx.stroke();
+  };
+
+  var do_resize = function() {
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    ctx.font = "bold 40px sans-serif";
+    ctx.fillText("Draw bunny wings!", 230, 100);
+
+    ctx.drawImage(img, 230, 160);
+
+    ctx.font = "normal 16px sans-serif";
+    ctx.fillText("For even more fun open a second browser!", 250, 660);
+
+    $.map(lines, function (p) {
+      draw(p);
+    });
+  };
+
+  $(window).resize(do_resize);
+  do_resize();
+
+
+  var pos = $('#cnvs').position();
+  var prev = null;
+  $('#cnvs').mousedown(function() {
+      $('#cnvs').bind('mousemove', function(e) {
+          var curr = {x:e.pageX-pos.left, y:e.pageY-pos.top};
+          if (!prev) {
+              prev = curr;
+              return;
+          }
+          if (Math.sqrt(Math.pow(prev.x - curr.x, 2) +
+                        Math.pow(prev.y - curr.y, 2)) > 6) {
+               var p = {x1:prev.x, y1:prev.y, x2:curr.x, y2:curr.y}
+               lines.push(p);
+               draw(p);
+               send(JSON.stringify(p));
+               prev = curr;
+          }
+      });
+  });
+  $('html').mouseup(function() {
+      prev = null;
+      $('#cnvs').unbind('mousemove');
+  });
+}
+
+
+// Stomp.js boilerplate
+WebSocketStompMock = SockJS;
+
+var client = Stomp.client('http://' + window.location.hostname + ':55674/stomp');
+
+client.debug = function() {
+  if (window.console && console.log && console.log.apply) {
+    console.log.apply(console, arguments);
+  }
+};
+
+send = function(data) {
+  client.send('/topic/bunny', {}, data);
+};
+
+client.connect('guest', 'guest', function(x) {
+  id = client.subscribe('/topic/bunny', function(d) {
+    var p = JSON.parse(d.body);
+    draw(p, true);
+  });
+});
+
+
+
+</script>
+</body></html>
--- a/deps/rabbitmq_web_stomp_examples/priv/bunny.jpg
+++ b/deps/rabbitmq_web_stomp_examples/priv/bunny.jpg
--- a/deps/rabbitmq_web_stomp_examples/priv/index.html
+++ b/deps/rabbitmq_web_stomp_examples/priv/index.html
--- a/deps/rabbitmq_web_stomp_examples/priv/pencil.cur
+++ b/deps/rabbitmq_web_stomp_examples/priv/pencil.cur