fontaine 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d703f331a7703b5b79e7a0f297fb61f1dd01901c
+  data.tar.gz: c07f87f06bd72a41592634dcc33d5d8420eabd71
+SHA512:
+  metadata.gz: fa08b41eb0c8bd02dc377b0e6dbf73ac11b47c33d94a3a18efda2d354a5f741578af91582e6f23b893a9961963303c90ed5fbde24c21d14544719a17cd62864f
+  data.tar.gz: 9f99d633d7a9d6b4d95502e580e4f511e6cc927cf4d825e8c8b7e674bbec25ea15984b658c9848cf152cc1979e37942cb786d00e50f862bd6cc4fd0a40cd260a

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in fontaine.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 TODO: Write your name
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,199 @@
+# Fontaine
+
+A bridge between Ruby and HTML5 canvas **for Sinatra** using Websocket. Basically, this allows you to make <canvas> based
+apps in Ruby. 
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'fontaine'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install fontaine
+
+## Usage
+
+Just put this in your pipe:
+
+	require 'sinatra/base'
+	require 'fontaine/canvas' #the meat of everything canvas-related
+	require 'fontaine/bootstrap' 
+	require 'sinatra-websocket'
+	require 'haml' #not strictly necessary, but recommended
+	
+	class Sample < Sinatra::Base
+	  register Sinatra::Fontaine::Bootstrap::Assets
+	  set :server, 'thin'
+	  set :sockets, []
+	  
+	  get '/' do
+	    
+	    @canvas = Fontaine::Canvas.new("TEST_CANVAS", 500, 500, "Your browser does not support the canvas tag", 
+	      :style => "border:1px solid #000000;") do |canvas|
+	        
+	        canvas.on_click do |x, y, button| #when there's a click, do this:
+	          canvas.rect(x.to_i-25, y.to_i-25, 50, 50)
+	          
+	          if button.eql? '0' #left click will give you a solid red rectangle
+	            canvas.fill_style("#FF0000")
+	            canvas.fill
+	          else #right click will give you the outline of a blue rectangle
+	            canvas.stroke_style("blue")
+	            canvas.stroke
+	          end
+	          
+	        end
+	    end
+	    
+	    if request.websocket?
+	      @canvas.listen(request, settings)
+	    else
+	      haml :index
+	     
+	    end
+	  end
+	  
+	end
+
+## views/index.haml	
+
+	%script{:src => "/javascripts/jquery-1.9.1.js", :type => "text/javascript"}
+	= bootstrap_fontaine
+	= @canvas.display
+	
+## sample_config.ru
+
+	require './sample'
+	run Sample
+	
+and smoke it! (After you've put jquery-1.9.1.js into /public/javascripts/)
+
+    rackup sample_config.ru
+
+Ok, that's pretty complicated. Let me give you some further explanations. We'll start with  
+making a new Canvas:
+
+    Fontaine::Canvas.new("TEST_CANVAS", 500, 500, "Your browser does not support the canvas tag", 
+      :style => "border:1px solid #000000;")
+      
+This is pretty simple. The first parameter is simply the id of the canvas you will be displaying. The second
+and third parameters are the width and height of the canvas. The fourth is the alt text if the user's browser 
+doesn't support <canvas>. Finally, the fifth parameter is a hash of any other html options you 
+wish to add to the canvas. In this case, I'm giving it a border.
+
+Next, while initializing, you can give it a block of code to execute when the user takes actions related to the canvas.
+(Note, you can do this at any point once the canvas is initialized by passing a block to any of the action methods). 
+The block will be whatever code you want to run in response to those actions. In addition, each action is yielded 
+a few parameters from the javascript event call. For more information on specific actions available and their parameters, see 
+the **Action Methods** section.
+
+That's only half the story, though. You've got to be able to draw on the canvas! You can use any of the methods from 
+[here](http://www.w3schools.com/tags/ref_canvas.asp) and they will work pretty much how you'd expect, with a couple 
+exceptions (see **Exceptions and Issues**). Most of the time, you simply can directly use a 'rubyfied' version of the same
+method. For example, instead of calling @canvas.fillRect(), you call @canvas.fill_rect. The other major exception is that rather
+than setting canvas attributes with '=', you'll simply use a method of the same name (canvas.fill_style("#FF0000"), 
+not canvas.fill_style = "#FF0000")
+
+Alright, so you've got your action methods set up and you know how to draw on the canvas, you just have to get it going. In the
+sinatra file this is pretty simple. When you get a request, listen! Pass in the request and the sinatra settings.
+
+    if request.websocket?
+      @canvas.listen(request, settings)
+    end
+       
+The view is almost as easy:
+
+    %script{:src => "/javascripts/jquery-1.9.1.js", :type => "text/javascript"}
+    = bootstrap_fontaine
+    = @canvas.display
+    
+Bam! You need jquery. I've tested on 1.9.1, but not any other versions. bootstrap_fontaine gives you access to the fontaine javascript
+file. @canvas.display will display the canvas.
+    
+## Action Methods
+
+**NOTE: All coordinates are in relation to the canvas, not to the document** 0, 0 is the top-left corner of the canvas, for example.
+
+**on_click** Yields x, y, and button
+
+**on_mousedown** Yields x, y, and button
+
+**on_mouseup** Yields x, y, and button
+
+**on_mouseover** Yields x and y
+
+**on_mouseout** Yields x and y
+
+**on_mousemove** Yields x and y
+
+**on_keydown** Yields key_code
+
+(Note, this is not the ascii value of the key pressed. See javascript documentation on the difference between keyCode and   
+the value)
+
+**on_keyup** Yields key_code
+
+**on_keypress**  Yields which
+(This *is* the ascii value of the key pressed)
+
+## Drawing methods
+
+You can use any of the methods from 
+[here](http://www.w3schools.com/tags/ref_canvas.asp) and they will work pretty much how you'd expect, with a couple 
+exceptions (see **Exceptions and Issues**). Most of the time, you simply can directly use a 'rubyfied' version of the same
+method. For example, instead of calling @canvas.fillRect(), you call @canvas.fill_rect. The other major exception is that rather
+than setting canvas attributes with '=', you'll simply use a method of the same name (canvas.fill_style("#FF0000"), 
+not canvas.fill_style = "#FF0000")
+
+## Exceptions and Issues
+
+Any "Drawing" method that returns an attribute doesn't "really" give you the attribute. It returns the value of the attribute from the 
+last time you changed it from the ruby Canvas object. In other words, if I call 
+
+    @canvas.fill_style("blue")
+
+on the ruby side, then later call
+
+    canvas.fillStyle = "#FF0000"
+    
+in the javascript, when I call
+
+    @canvas.fill_style
+    
+in ruby, it'll still return "blue". 
+
+Basically, this is because websocket is impatient. It doesn't have a protocol for waiting for the javascript to return information before
+executing the next line of code. So, I faked it and track everything on the fontaine canvas object. 
+
+If you stick to just using the fontaine canvas methods, this mostly doesn't have an impact, **except** that the get_image_data method isn't
+implemented, and doesn't work right now. Don't even try.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+##Future Features/Goals
+
+**Soon**
+
+ * Implement on_keystroke methods for each key. For example, on_keystroke_a.   
+
+**Later**
+
+ * Figure a more elegant way to bootstrap the javascript, avoiding rackup and extending canvas
+ * Add a scheduler or some other way to "wait" for get methods from the javascript
+
+**In the distant future, when apes rule the Earth**
+
+ * Implement this in Ruby on Rails
+ * Implement audio and video tags 

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/fontaine.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'fontaine/version'
+require 'fontaine/canvas'
+
+Gem::Specification.new do |spec|
+  spec.name          = "fontaine"
+  spec.version       = Fontaine::VERSION
+  spec.authors       = ["J. Paul Wetstein"]
+  spec.email         = ["Jeep.Wetstein@gmail.com"]
+  spec.description   = %q{A bridge between Ruby and HTML5 canvas using Websocket}
+  spec.summary       = %q{A bridge between Ruby and HTML5 canvas using Websocket}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+  
+  spec.add_dependency 'sinatra-websocket', '~>0.2.0'
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  
+end

data/lib/fontaine.rb

@@ -0,0 +1,4 @@
+require "fontaine/version"
+module Fontaine
+  
+end

data/lib/fontaine/assets/fontaine.js

@@ -0,0 +1,452 @@
+$(document).ready(function()
+  {
+    var ws = new WebSocket('ws://' + window.location.host + window.location.pathname);
+    
+	var canvas;
+	var ctx;
+	var canvasPosition;
+	var current_mouse;
+	var objectsHash = {};
+    	
+    ws.onmessage = function(msg)
+    {    	
+    	msg_array = msg.data.split(" ");
+    	command = msg_array[0];
+    	msg_array.shift();
+    	params = msg_array;
+    	
+    	
+    	
+    	switch(command)
+    	{
+    		
+    		case "register":
+	    		canvas = $(params[0]);
+	    		ctx=canvas[0].getContext('2d');
+	    		canvasPosition = 
+				{
+				    x: canvas.offset().left,
+				    y: canvas.offset().top
+				};
+	    		
+	    		canvas.on('mousedown', function(e)
+			    {
+			      current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("mousedown x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);
+			    });
+			    
+			    canvas.on('mouseup', function(e)
+			    {
+			      current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("mouseup x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);
+			    });
+			    
+			    canvas.on('click', function(e)
+				{
+				  e.preventDefault();
+				  current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("click x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);
+				});
+				
+				canvas.on('mousemove', function(e)
+				{
+				  current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("mousemove x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);	
+				});
+				
+				canvas.on('mouseover', function(e)
+				{
+				  current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("mouseover x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);	
+				});
+				
+				canvas.on('mouseout', function(e)
+				{
+				  current_mouse = 
+				  {
+				      x: e.pageX - canvasPosition.x,
+				      y: e.pageY - canvasPosition.y
+				  }
+			      ws.send("mouseout x "+current_mouse.x+" y "+current_mouse.y + " button "+ e.button);	
+				});
+				
+				// canvas.on('touchstart', function(e)
+				// {
+			      // e.preventDefault();
+				  // var touchList = e.changedTouches;
+				  // var current_touch;
+				  // for(var i = 0; i < touchList.length; i++)
+				  // {
+				    // current_touch = 
+				    // {
+				    	// x: touchList[i].screenX - canvasPosition.x, 
+				    	// y: touchList[i].screenY - canvasPosition.y, 
+				    	// id: touchList[i].identifier
+			    	// };
+			    	// ws.send("touchstart x "+current_touch.x+" y "+current_touch.y + " id " + current_touch.id);
+				  // }	
+				// });
+// 				
+				// canvas.on('touchmove', function(e)
+				// {
+				  // var touchList = e.changedTouches;
+				  // var current_touch;
+				  // for(var i = 0; i < touchList.length; i++)
+				  // {
+				    // current_touch = 
+				    // {
+				    	// x: touchList[i].screenX - canvasPosition.x, 
+				    	// y: touchList[i].screenY - canvasPosition.y, 
+				    	// id: touchList[i].identifier
+			    	// };
+			    	// ws.send("touchmove x "+current_touch.x+" y "+current_touch.y + " id " + current_touch.id);
+				  // }
+				// });
+// 				
+				// canvas.on('touchend', function(e)
+				// {
+				  // var touchList = e.changedTouches;
+				  // var current_touch;
+				  // for(var i = 0; i < touchList.length; i++)
+				  // {
+				    // current_touch = 
+				    // {
+				    	// x: touchList[i].screenX - canvasPosition.x, 
+				    	// y: touchList[i].screenY - canvasPosition.y, 
+				    	// id: touchList[i].identifier
+			    	// };
+			    	// ws.send("touchend x "+current_touch.x+" y "+current_touch.y + " id " + current_touch.id);
+				  // }
+				// });
+
+			    document.onkeydown = function(e) 
+			    {
+					ws.send("keydown key_code "+e.keyCode); //+ " which " + e.which + " char_code " + e.charCode);				  
+				}
+				
+				document.onkeypress = function(e) 
+				{
+					ws.send("keypress which "+e.which); //+ " which " + e.which + " char_code " + e.charCode);				  
+				}
+				
+			    document.onkeyup = function(e) 
+			    {
+					ws.send("keyup key_code "+e.keyCode); //+ " which " + e.which + " char_code " + e.charCode);				  
+				}
+				
+			    break;
+			case "fillStyle":
+				if(params.length==1)
+				{
+					ctx.fillStyle = params[0];
+				}
+				ws.send("response " + ctx.fillStyle);
+				break;
+			case 'fillStyleObject':
+				ctx.fillStyle = objectsHash[params[0]];
+				ws.send("response " + ctx.fillStyle);
+				break;		    
+			case "strokeStyle":
+				if(params.length>0)
+				{
+					ctx.strokeStyle = params[0];
+				}
+				ws.send("response " + ctx.strokeStyle);
+				break;
+			case 'strokeStyleObject':
+				ctx.strokeStyle = objectsHash[params[0]];
+				ws.send("response " + ctx.strokeStyle);
+				break;		
+			case "shadowColor":
+				if(params[0] != "")
+				{
+					ctx.shadowColor = params[0];
+				}
+				//alert("sc " + ctx.shadowColor);
+				ws.send("response " + ctx.shadowColor);	
+				break;
+			case "shadowBlur":
+				if(params.length>0)
+				{
+					ctx.shadowBlur = params[0];
+				}
+				ws.send("response " + ctx.shadowBlur);	
+				break;
+			case "shadowOffsetX":
+				if(params.length>0)
+				{
+					ctx.shadowOffsetX = params[0];
+				}
+				ws.send("response " + ctx.shadowOffsetX);	
+				break;
+			case "shadowOffsetY":
+				if(params.length>0)
+				{
+					ctx.shadowOffsetY = params[0];
+				}
+				ws.send("response " + ctx.shadowOffsetY);	
+				break;
+			
+			case "createLinearGradient":
+				objectsHash[params[4]] = 
+					ctx.createLinearGradient(params[0], params[1], params[2], params[3]);
+				break;	
+			case "createPattern":
+				objectsHash[params[2]] = ctx.createPattern(params[0], params[1]);
+				break;
+			case "createRadialGradient":
+				objectsHash[params[6]] = 
+					ctx.createRadialGradient(params[0], params[1], params[2], params[3], params[4], params[5]);
+				break;
+			case "addColorStop":
+				objectsHash[params[2].addColorStop(params[0], params[1])];
+				break;	
+			case "lineCap":
+				if(params.length>0)
+				{
+					ctx.lineCap = params[0]
+				}
+				ws.send("response " + ctx.lineCap);	
+				break;	
+			case "lineJoin":
+				if(params.length>0)
+				{
+					ctx.lineJoin = params[0]
+				}
+				ws.send("response " + ctx.lineJoin);	
+				break;	
+			case "lineWidth":
+				if(params.length>0)
+				{
+					ctx.lineWidth = params[0]
+				}
+				ws.send("response " + ctx.lineWidth);	
+				break;	
+			case "miterLimit":
+				if(params.length>0)
+				{
+					ctx.miterLimit = params[0]
+				}
+				ws.send("response " + ctx.miterLimit);	
+				break;
+			case "rect":
+				ctx.rect(params[0], params[1], params[2], params[3]);
+				break;							    
+		    case "strokeRect":
+				ctx.strokeRect(params[0], params[1], params[2], params[3]);
+				break;
+			case "fillRect":
+				ctx.fillRect(params[0], params[1], params[2], params[3]);
+				break;	
+			case "clearRect":
+				ctx.clearRect(params[0], params[1], params[2], params[3]);
+				break;		
+			case "fill":
+				ctx.fill();
+				break;
+			case "stroke":
+				ctx.stroke();
+				break;
+			case "beginPath":
+				ctx.beginPath();
+				break;
+			case "moveTo":
+				ctx.moveTo(params[0], params[1]);
+				break;
+			case "closePath":
+				ctx.closePath();
+				break;
+			case "lineTo":
+				ctx.lineTo(params[0], params[1]);
+				break;	
+			case "clip":
+				ctx.clip();
+				break;
+			case "quadraticCurveTo":
+				ctx.quadraticCurveTo(params[0], params[1], params[2], params[3]);
+				break;
+			case "bezierCurveTo":
+				ctx.bezierCurveTo(params[0], params[1], params[2], params[3], params[4], params[5]);
+				break;
+			case "arc":
+				ctx.arc(params[0], params[1], params[2], params[3], params[4], params[5]);
+				break;
+			case "arcTo":
+				ctx.arcTo(params[0], params[1], params[2], params[3], params[4]);
+				break;
+			case "isPointInPath":
+				ctx.isPointInPath(params[0], params[1]);
+				break;
+			case "scale":
+				ctx.scale(params[0], params[1]);
+				break;
+			case "rotate":
+				ctx.rotate(params[0]);
+				break;
+			case "translate":
+				ctx.translate(params[0], params[1]);
+				break;
+			case "transform":
+				ctx.transform(params[0], params[1], params[2], params[3], params[4], params[5]);
+				break;
+			case "setTransform":
+				ctx.setTransform(params[0], params[1], params[2], params[3], params[4], params[5]);
+				break;
+			case "font":
+				if(params.length!=0)
+				{
+					ctx.font = params.join(" ");
+				}
+				ws.send("response " + ctx.font);
+				break;
+			case "textAlign":
+				if(params.length!=0)
+				{
+					ctx.textAlign = params[0];
+				}
+				ws.send("response " + ctx.textAlign);	
+				break;	
+			case "textBaseline":
+				if(params.length!=0)
+				{
+					ctx.textBaseline = params[0];
+				}
+				ws.send("response " + ctx.textBaseline);	
+				break;	
+			case "fillText":
+				if(params.length==3)
+				{
+				  ctx.fillText(params[0], params[1], params[2]);
+				}
+				else
+				{
+				   ctx.fillText(params[0], params[1], params[2], params[3]);	
+				}
+				break;
+			case "strokeText":
+				if(params.length==3)
+				{
+				  ctx.strokeText(params[0], params[1], params[2]);
+				}
+				else
+				{
+				  ctx.strokeText(params[0], params[1], params[2], params[3]);	
+				}
+				break;
+			case "measureText":
+				ws.send("response " + ctx.measureText(params[0]).width);
+				break;
+			case "drawImage":
+				var img=document.getElementById(params[0]);
+				if(params.length == 3)
+				{
+				  ctx.drawImage(img, params[1], params[2]);
+				}
+				else if(params.length == 5)
+				{
+				  ctx.drawImage(img, params[1], params[2], params[3], params[4]);
+				} 	
+				else
+				{
+				  ctx.drawImage(img, params[1], params[2], params[3], params[4], params[5], params[6]);	
+				}
+				break;
+			case "imageDataWidth":
+				var img=objectsHash[params[0]];
+				ws.send("response " + img.width);
+				break;
+			case "imageDataHeight":
+				var img=objectsHash[params[0]];
+				ws.send("response " + img.height);
+				break;	
+			case "imageDataData":
+				var img=objectsHash[params[0]];
+				ws.send("response " + img.data);
+				break;
+			case "createImageData":
+				var img;
+				if(params.length == 3)
+				{
+					img = ctx.createImageData(params[0], params[1]);
+				}
+				else if(params.length == 2)
+				{
+					
+					img = ctx.createImageData(objectsHash[params[0]]);
+				}
+				objectsHash[params[params.length-1]] = img;
+				break;
+			case "getImageData":
+				var img;
+				img = ctx.getImageData(params[0], params[1], params[2], params[3])
+				objectsHash[params[4]] = img;
+				break;
+			case "putImageData":
+				var img	= objectsHash[params[0]];
+				if(params.length == 3)
+				{
+					ctx.putImageData(img, params[1], params[2]);
+				}
+				else if(params.length == 5)
+				{
+					ctx.putImageData(img, params[1], params[2], params[3], params[4]);
+				}
+				else if(params.length == 7)
+				{
+					ctx.putImageData(img, params[1], params[2], params[3], params[4], params[5], params[6]);
+				}
+				break;
+			case "globalAlpha":
+				if(params.length!=0)
+				{
+					ctx.globalAlpha = params[0];
+				}
+				ws.send("response " + ctx.globalAlpha);	
+				break;
+			case "globalCompositeOperation":
+				if(params.length!=0)
+				{
+					ctx.globalCompositeOperation = params[0];
+				}
+				ws.send("response " + ctx.globalCompositeOperation);	
+				break;
+			case "save":
+				ctx.save();
+				break;
+			case "restore":
+				ctx.restore();					
+				break;
+			case "toDataUrl":
+				ws.send("response " + ctx.toDataURL());
+				break;		  
+			default:
+				ws.send("Unimplemented command");
+				break;
+			   
+    	}
+    }
+    
+    
+    
+    
+  });

data/lib/fontaine/bootstrap.rb

@@ -0,0 +1,48 @@
+module Sinatra
+  module Fontaine
+    module Bootstrap
+
+      module Assets
+
+        ASSETS = {
+          :js => [
+            'fontaine.js'
+          ],
+        }
+        
+        def self.generate_bootstrap_asset_routes(app)
+          ASSETS.each do |kind, files|
+            files.each do |file|
+              name = file
+              
+              app.get "/#{kind.to_s}/#{name}", :provides => kind do
+                File.read(File.join(File.dirname(__FILE__), 'assets', name))
+              end
+            end
+          end
+        end
+    
+        def self.registered(app)
+          generate_bootstrap_asset_routes(app)
+          app.helpers AssetsHelper
+        end
+        
+      end
+      
+      module AssetsHelper
+        
+        def bootstrap_fontaine
+          bootstrap_js
+        end
+        
+        def bootstrap_js
+          output = ''
+          Assets::ASSETS[:js].each do |file, _|
+            output += '<script type="text/javascript" src="%s"></script>' % url('/js/%s' % file)
+          end
+          output
+        end
+      end
+    end
+  end
+end

data/lib/fontaine/canvas.rb

@@ -0,0 +1,243 @@
+module Fontaine
+class Canvas
+  attr_accessor :id
+  attr_accessor :width
+  attr_accessor :height
+  attr_accessor :alt
+  attr_accessor :html_options
+  attr_accessor :settings
+  attr_accessor :ws
+  attr_accessor :last_response
+  attr_accessor :attributes
+  
+  
+  def initialize(id, width, height, alt = "", html_options = {})
+    @id = id
+    @width = width
+    @height = height
+    @alt = alt
+    @html_options = html_options
+    @attributes = {
+      #set the initial styles
+      :fill_style => "#000000", 
+      :stroke_style => '#000000',
+      :shadow_color => '#000000',
+      :shadow_blur => 0,
+      :shadow_offset_x => 0,
+      :shadow_offset_y => 0,
+      :line_cap => 'butt',
+      :line_join => 'miter',
+      :line_width => '1',
+      :miter_limit => '10',
+      :font => '10px sans-serif',
+      :text_align => 'start',
+      :text_baseline => 'alphabetic',
+      :global_alpha => 1.0,
+      :global_composite_operation => 'source-over'
+      
+      }
+    yield self if block_given?    
+  end
+  
+  def listen(request, settings)  
+    @settings = settings 
+    request.websocket do |ws|
+      ws.onopen do
+        @ws = ws
+        @ws.send("register ##{id}")
+        @settings.sockets << ws
+      end
+      ws.onmessage do |msg|
+        #puts("recieved message: #{msg}")
+        #EM.next_tick { process_message(msg)}
+        process_message(msg)
+      end
+      ws.onclose do
+        @settings.sockets.delete(ws)
+      end
+    end
+  end
+  
+  def process_message(s_message)
+    a_message = s_message.split(' ')
+    command = a_message[0] #the first part of the message is the command
+    params = a_message[1..(a_message.length-1)] #get the rest of the message
+    params = Hash[*params] if command != "response"#convert the array to a hash if applicable
+    respond_to(command, params)
+  end
+  
+  def respond_to(s_command, params = {})
+    case s_command
+    when "mousedown"
+      trigger_on_mousedown(params["x"], params["y"], params["button"])
+    when "mouseup"
+      trigger_on_mouseup(params["x"], params["y"], params["button"])
+    when "mouseover"
+      trigger_on_mouseover(params["x"], params["y"]) 
+    when "mouseout"
+      trigger_on_mouseout(params["x"], params["y"]) 
+    when "mousemove"
+      trigger_on_mousemove(params["x"], params["y"])
+      
+   ##Very glitchy right now. Need to fix this some time
+
+    # when "touchstart"
+      # trigger_on_touchstart(params["x"], params["y"], params["id"])  
+    # when "touchmove"
+      # trigger_on_touchstart(params["x"], params["y"], params["id"])
+    # when "touchend"
+      # trigger_on_touchstart(params["x"], params["y"], params["id"])               
+    when "keyup"
+      trigger_on_keyup(params["key_code"])    
+    when "keydown"
+      trigger_on_keydown(params["key_code"])
+    when "keypress"
+      trigger_on_keypress(params["which"])
+    when "click"
+      trigger_on_click(params["x"], params["y"], params["button"])      
+    when "response"
+      @last_response =  params.flatten[0].to_s
+      trigger_on_response(@last_response)
+    else
+      puts "unimplemented method #{s_command}"
+    end
+  end
+  
+  def display    
+    options = ""
+    @html_options.each_pair do  |key, value| 
+      options << "#{key}=\"#{value}\" "
+    end
+    return "<canvas id=\"#{@id}\" width=\"#{@width}\" height=\"#{@height}\" #{options}>#{@alt}</canvas>"
+  end
+
+  def fill_style(style="")
+     @attributes[:fill_style] = style if style != ""
+    if style.is_a? String
+      send_msg "fillStyle #{style}"
+    else
+      send_msg "fillStyleObject #{style.id}"
+    end
+    
+    # return @last_response
+    return @attributes[:fill_style]
+    
+  end
+  
+  def stroke_style(style="")
+    @attributes[:stroke_style] = style if style != ""
+    if style.is_a? String
+      send_msg "strokeStyle #{style}"
+    else
+      send_msg "strokeStyleObject #{style.id}"
+    end
+    # return @last_response
+    return @attributes[:stroke_style]
+  end
+  
+  def create_linear_gradient(x0, y0, x1, y1, id)
+    send_msg("createLinearGradient #{x0} #{y0} #{x1} #{y1} #{id}")
+    return Gradient.new(id, self)
+  end
+  
+  def create_pattern(image, pattern)
+    send_msg("createPattern #{image.id} #{pattern}")
+    return Pattern.new(id)
+  end
+  
+  def create_radial_gradient(x0, y0, r0, x1, y1, r1, id)
+    send_msg("createRadialGradient #{x0} #{y0} #{r0} #{x1} #{y1} #{r1} #{id}")
+    return Gradient.new(id, self)
+  end
+  
+  def create_image_data(id, *args)
+    return image_data.new(id, self, args)
+  end
+  
+  # def get_image_data(id, x, y, width, height)
+    # send_msg("getImageData #{x} #{y} #{width} #{height} #{id}")
+    # return image_data.new(id, self)
+  # end
+  
+  def put_image_data(image, x, y, dirty_x="", dirty_y="", dirty_width="", dirty_height="")
+    send_msg("putImageData #{image.id} #{x} #{y} #{dirty_x} #{dirty_y} #{dirty_width} #{dirty_height}")
+  end
+  
+  def send_msg(msg)
+    #puts "Sending message: #{msg}"
+    #EM.next_tick {@ws.send(msg)} if defined? @ws
+    @ws.send(msg) if defined? @ws
+  end
+  
+  def method_missing(method_sym, *arguments, &block)
+    if canvas_array.include? method_sym.to_s.sub(/trigger_on_/, "")
+      variable_name = method_sym.to_s.sub(/trigger_/, "@")
+      instance_variable_get(variable_name).call(arguments) if instance_variable_defined?(variable_name)
+    elsif canvas_array.include? method_sym.to_s.sub(/on_/, "")
+      instance_variable_set("@#{method_sym}", block)
+    elsif draw_method_array.include? method_sym.to_s
+      send_msg "#{ruby_to_js_command(method_sym)} #{arguments.join(" ")}"
+    elsif return_method_array.include? method_sym.to_s
+      send_msg "#{ruby_to_js_command(method_sym)} #{arguments.join(" ")}"
+      @attributes[method_sym] = arguments[0] if (!arguments[0].nil? && !@attributes[method_sym].nil?)
+      return @attributes[method_sym]
+    else
+      super(method_sym, *arguments, &block)
+    end
+  end
+  
+  def canvas_array
+    return["response", "mousedown", "mouseup", "keyup", "keydown", "keypress", "click", "mouseover", 
+      "mouseout", "mousemove", "touchstart", "touchmove", "touchend"]
+  end
+  
+  def return_method_array
+    return[
+       #Colors, Styles, and Shadows
+      "shadow_color", "shadow_blur", "shadow_offset_x", "shadow_offset_y",
+      #Line Styles
+      "line_cap", "line_join", "line_width", "miter_limit",
+      #Paths
+      "isPointInPath",
+      #Text
+      "font", "text_align", "text_baseline",
+      #Composting
+      "global_alpha", "global_composite_operation",
+      #Other
+      "to_data_url"
+     ]
+  end
+  
+  def draw_method_array
+    return [
+      #Rectangles
+      "rect", "fill_rect", "stroke_rect", "clear_rect", 
+      #Paths
+      "fill", "stroke", "begin_path", "move_to", "close_path", "line_to", "clip", 
+      "quadratic_curve_to", "bezier_curve_to", "arc", "arc_to",
+      #Transformations
+      "scale", "rotate", "translate", "transform", "set_transform",
+      #Text
+      "fill_text", "stroke_text", "measure_text",
+      #Image Drawing
+      "draw_image",
+      #Other
+      "save", "restore"
+      ]
+  end
+  
+  def ruby_to_js_command(method_sym)
+    js_command = method_sym.to_s
+    js_commands = js_command.split('_')
+    if js_commands.size > 1
+      js_commands[1..js_commands.size].each do |command|
+        command.capitalize!
+      end
+    end
+    js_commands.join
+  end
+  
+  
+  
+end
+end

data/lib/fontaine/gradient.rb

@@ -0,0 +1,15 @@
+module Fontaine
+class Gradient
+  attr_accessor :id
+  attr_accessor :canvas
+  def initialize(id, canvas)
+    @id = id
+    @canvas = canvas #is this ok? test
+  end
+  
+  def add_color_stop(stop, color)
+    @canvas.send_msg("addColorStop #{stop} #{color} #{@id}")
+  end
+  
+end
+end

data/lib/fontaine/image_data.rb

@@ -0,0 +1,36 @@
+module Fontaine
+class ImageData
+  attr_accessor :id
+  attr_accessor :canvas
+  
+  def initialize(id, canvas, *args)
+    @id = id
+    @canvas = canvas #is this ok? test
+    if(args.size == 2)
+    
+      @canvas.send_msg("createImageData #{args[0]} #{args[1]} #{id}")
+    
+    elsif(args.size == 1)
+      @canvas.send_msg("createImageData #{args[0]} #{id}")
+    end
+    
+  end
+
+  def data(pixel, value="")
+    @canvas.send_msg("imageDataData #{id} #{pixel} #{value}")
+    return @canvas.last_response
+  end
+  
+  def width
+    @canvas.send_msg("imageDataWidth #{id}")
+    return @canvas.last_response
+  end
+  
+  def width
+    @canvas.send_msg("imageDataheight #{id}")
+    return @canvas.last_response
+  end
+  
+  
+end
+end

data/lib/fontaine/pattern.rb

@@ -0,0 +1,9 @@
+module Fontaine
+class Pattern
+  attr_accessor :id
+  def initialize(id)
+    @id = id
+  end
+  
+end
+end

data/lib/fontaine/version.rb

@@ -0,0 +1,3 @@
+module Fontaine
+  VERSION = "0.1.0"
+end

metadata

@@ -0,0 +1,100 @@
+--- !ruby/object:Gem::Specification
+name: fontaine
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- J. Paul Wetstein
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-08-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sinatra-websocket
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A bridge between Ruby and HTML5 canvas using Websocket
+email:
+- Jeep.Wetstein@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- fontaine.gemspec
+- lib/fontaine.rb
+- lib/fontaine/assets/fontaine.js
+- lib/fontaine/bootstrap.rb
+- lib/fontaine/canvas.rb
+- lib/fontaine/gradient.rb
+- lib/fontaine/image_data.rb
+- lib/fontaine/pattern.rb
+- lib/fontaine/version.rb
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: A bridge between Ruby and HTML5 canvas using Websocket
+test_files: []