Embedding the GCode viewer

[Joe Walnes]

Based on how I've seen you guys using the GCode viewer, I'd like to make a change to it. Currently it's really a standalone web-application (including file management, UI controls, etc).

But really, it's more useful embedded in other applications. I'd like to refactor the codebase to support this. Ideally the code on gcode.joewalnes.com, will then just become a demo showing how to use the embedded widget.

Things that the embeddable library should do:

* Provide an API for sending pushing GCode into it.

* Render the model.

* Provide API for zooming, panning, rotating, etc.

* Expose a model of all the GCode paths. Applications can inspect this and manipulate certain paths (e.g. show/hide, change the color, etc).

* Provide a default set of controls to allow the user to zoom/pan/rotate using mouse/keyboard. However these can be disabled if you want to control it through another mechanism.

* Optionally, expose the entire three.js scene, to support manipulation such as adding other objects to the scene, changing textures, etc.

Things that are not in the library, and should be left to the specific web-app:

* Loading/saving of GCode files.

* UI buttons.

* Help, follow me on twitter, etc.

* Size of the control (e.g. full screen, fixed size, etc).

Thoughts? Yay? Nay? Would this provide enough hooks for what you need, without having to fork the internal code? 

cheers

-Joe

[Jeremy Herrman]

I couldn't agree more on moving this to an embedded widget.  That seems to be exactly what Zach wants with BotQueue.com and what I'd like to do in an upcoming project.  

In my fork, the GCode model has a list of codes, and when the model is passed to the renderer, a view model is created that ties the code to its corresponding vertices in the geometry (by way of storing vertex offset and length). We could definitely use this to expose a way to change individual GCode color.  Unfortunately opacity is a bit tougher because it's a property of a material rather than a vertex.  Materials can only be applied to things like THREE.Line which correspond to a geometry, and having thousands of different geometry causes a huge slowdown in my experience, even if you share the materials. This is why the animation looks the way it does - in order to keep the number of geometry objects down it just renders the "complete" geometry solid and the "incomplete" geometry translucent. At one point threejs allowed vertex coloring with alpha, but mrdoob removed it because of some issues (see https://github.com/mrdoob/three.js/issues/297).

I think the split between in library vs specific to web-app looks good, as long as there are full examples so people can get up and running quickly.

- Jeremy

[Zach 'Hoeken' Smith]

The way I handle embedding it is easy, but ugly to some.  Basically its just an iframe and the gcode viewer div expands to fill it 100%

----

Zach Smith

Blog: www.hoektronics.com

Work: www.haxlr8r.com

Twitter: @hoeken  Skype: chilldude22

QQ: 1489598623  China: +86-186-8209-7069

--