initial commit.

hydna · Jan 25, 2011 · fd38e33 · fd38e33
commit fd38e33
Show file tree

Hide file tree

Showing 6 changed files with 1,179 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hydna Paint</title>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
+  <script src="http://static.hydna.net/js/hydna.js"></script>
+  <script src="./script/deps/excanvas.js"></script>
+  <script src="./script/deps/json.js"></script>
+  <script src="./script/app.js"></script>
+  <link rel="stylesheet" href="./style/master.css" type="text/css" media="screen"/>
+</head>
+<body>
+  <header>
+    <h1>Hydna Paint</h1>
+    <ul class="picker" id="color">
+      <li class="active" id="color-red"><span>#B33924</span></li>
+      <li id="color-green"><span>#24B339</span></li>
+      <li id="color-blue"><span>#3924B3</span></li>
+    </ul>
+    <ul class="picker" id="stroke">
+      <li class="active" id="stroke-thin"><span>Thin</span></li>
+      <li id="stroke-medium"><span>Medium</span></li>
+      <li id="stroke-thick"><span>Thick</span></li>
+    </ul>
+  </header>
+  <section>
+    <canvas></canvas>
+  </section>
+</body>
diff --git a/script/app.js b/script/app.js
@@ -0,0 +1,75 @@
+var paint = {
+    canvas: null,
+    context: null,
+    stream: null,
+    drawing: false,
+    sizes: {
+        thin: 2,
+        medium: 4,
+        thick: 8
+    },
+    init: function(canvas, stream) {
+        paint.canvas = canvas;
+        paint.stream = stream;
+        paint.context = canvas.getContext('2d');
+        canvas.onmousedown = paint.mousedown;
+        canvas.onmouseup = paint.mouseup;
+        canvas.onmousemove = paint.mousemove;
+        canvas.onselectstart = function() {
+            // prevent cursor from changing.
+            return false;
+        };
+        window.onresize =  function() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        };
+        window.onresize();
+    },
+    mousedown: function(event) {
+        paint.drawing = true;
+    },
+    mouseup: function(event) {
+        paint.drawing = false;
+    },
+    mousemove: function(event) {
+        if (paint.drawing) {
+            paint.stream.send(JSON.stringify({
+                x: event.offsetX,
+                y: event.offsetY,
+                w: paint.sizes[$('#stroke li.active').text().toLowerCase()],
+                c: $('#color li.active').text()
+            }));
+        }
+    },
+    draw: function(x, y, width, color) {
+        paint.context.fillStyle = color;  
+        paint.context.beginPath();
+        paint.context.arc(x, y, width, 0, Math.PI * 2, true); 
+        paint.context.fill();
+    }
+};
+
+$(document).ready(function() {
+    var canvas = document.querySelector('canvas');
+
+    // open a stream to hydna in read/write mode
+    var stream = new HydnaStream('flash.hydna.net:7010', 'rw', null, {
+        transport: 'ws',
+    });
+
+    // draw figure when data is received over stream
+    stream.onmessage = function(data) {
+        var graph = JSON.parse(data);
+        paint.draw(graph.x, graph.y, graph.w, graph.c);
+    };
+
+    // initiate paint when stream is ready.
+    stream.onopen = function() {
+        paint.init(canvas, stream);
+    };
+
+    $('.picker li').click(function(event) {
+        $(this).siblings().removeClass('active');
+        $(this).addClass('active');
+    });
+});