-
Notifications
You must be signed in to change notification settings - Fork 8
A 3d display for CAD and CAM files currently supporting GCode based on HTML5's Canvas element.
License
D1plo1d/CadCanvas
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
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
About
A 3d display for CAD and CAM files currently supporting GCode based on HTML5's Canvas element.
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published