D1plo1d / CadCanvas

A 3d display for CAD and CAM files currently supporting GCode based on HTML5's Canvas element.

Cad Canvas - a 3d CAD/CAM Preview frame in HTML5 Canvas
=======================================================

I will be adding a readme here. But for the time being your best way to 
learn what Cad Canvas is and how it works is to head over to the example 
and take a look at it's source.

- source at:		examples/gcode_canvas.html
or
- live demo at: http://www.d1plo1d.com/cad_canvas/examples/gcode_canvas.html

Also sorry about some of the variable names.. I was learning ruby at the same 
time I was writing this and some of the ruby_variable_names may have 
bled over [ sad panda ].

A basic knowledge of JQuery is assummed by this README.

Features
==========


- EMC 2 AXIS Inspired

	- EMC2 AXIS style mouse bindings
		- scroll to zoom
		- click to drag
		- right click to rotate
			(alternatively for mac peoples + right-click haters: ctrl + click)
	- EMC2 AXIS style interactions
		- rotation is done on the object, not the camera for a more intuitive interaction
		- non-linear zoom (again for a more intuitive interaction)
	- EMC2 AXIS style ui (where red => blue)

- Configurable because you might just be crazy enough to hate on EMC 2 AXIS
	- optional build platform grid (similar to the RepRap Host Software's)
	- optional buld platform outlines
	- optional toolhead display
	- all colors are configurable (through js.. anyone want to make more css-based stuff?)
	- css configurable background color (TODO: more css-based color options)

CNC Build Canvas
==================
The most usefull aspect of cad canvas atm. This is a cad canvas specifically for 
cnc and cam preview screens.


To create a cnc build canvas for the "canvasDiv" element you can simply call:

	$("#canvasDiv").CNCBuildCanvas();


Of course realistically we usually need some non-default config options:

	var options = { platform: {grid: true} };
	$("#canvasDiv").CNCBuildCanvas(options);


And more to the point what we come here to do is actually display stuff. So 
if you first load a gcode object into the string gcode you can then load it using 
the drawGCode method (this is a temporary hack. expect ajax loads in the future):

	$("#canvasDiv").CNCBuildCanvas();
	var gcode = "some gcode string (this string would not work so well)";

	//drawing the gcode behind the scenes
	canvas.drawGCode(gcode);

	//updating the rendered display
	canvas.model.updateRender();


CNCBuildCanvas Configuration Options (including default values):

	drawDimensions: true,
	measurementUnit: "mm",
	endcapSize: 0.25,

	toolEnabledColor: "FFFFFF",
	toolDisabledColor: "999999",
	toolHistoryColor: "0033CC",
	platformColor: "0088FF",
	dimensionColor: "0088FF",

	platform: {
		grid: false,
		outline: true,

		size: [10, 10],
		ruleIncrement: [0.5, 0.5],
	},

	toolhead: {
		enabled: true
	}



Dependancies
==============

- Three.js (D1plo1d fork required for text, rotation and a couple other things)
- JQuery (1.4.2)
- JQuery MouseWheel (bindings for the mouse scroll wheel)


Want to help? Heres a breif TODO List
=======================================

- add STL rendering
	++ Tony Buser has graciously ported his stl rendering to three.js: http://github.com/tbuser/three.js/blob/master/examples/stl_viewer.html)
- add gcode/stl ajax loading
- moar css-based cad canvas styling!
- make 3d text transforms (fork D1plo1d's Three.js Fork) so cnc build canvas measurements are less fugly and annoying.

- ..and anything else that can make cad canvas more awesome! (fork it. make it awesome. i will pull it!)

Oh yeah.. and this is all super-beta and liable to change (but you already figured that out, right?)

Happy Hacking!

Rob