com-chilipeppr-widget-3dviewer

Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action.

ChiliPeppr Widget / 3D GCode Viewer

All ChiliPeppr widgets/elements are defined using cpdefine() which is a method that mimics require.js. Each defined object must have a unique ID so it does not conflict with other ChiliPeppr widgets.

Item	Value
ID	com-chilipeppr-widget-3dviewer
Name	Widget / 3D GCode Viewer
Description	Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action.
chilipeppr.load() URL	http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html
Edit URL	http://ide.c9.io/undefined/undefined
Github URL	http://github.com/dchote/widget-3dviewer
Test URL	https://preview.c9users.io/undefined/undefined/widget.html

Example Code for chilipeppr.load() Statement

You can use the code below as a starting point for instantiating this widget inside a workspace or from another widget. The key is that you need to load your widget inlined into a div so the DOM can parse your HTML, CSS, and Javascript. Then you use cprequire() to find your widget's Javascript and get back the instance of it.

// Inject new div to contain widget or use an existing div with an ID
$("body").append('<' + 'div id="myDivWidget3dviewer"><' + '/div>');

chilipeppr.load(
  "#myDivWidget3dviewer",
  "http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html",
  function() {
    // Callback after widget loaded into #myDivWidget3dviewer
    // Now use require.js to get reference to instantiated widget
    cprequire(
      ["inline:com-chilipeppr-widget-3dviewer"], // the id you gave your widget
      function(myObjWidget3dviewer) {
        // Callback that is passed reference to the newly loaded widget
        console.log("Widget / 3D GCode Viewer just got loaded.", myObjWidget3dviewer);
        myObjWidget3dviewer.init();
      }
    );
  }
);

Publish

This widget/element publishes the following signals. These signals are owned by this widget/element and are published to all objects inside the ChiliPeppr environment that listen to them via the chilipeppr.subscribe(signal, callback) method. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
/com-chilipeppr-widget-3dviewer/recv3dObject	When you send a /request3dObject you will receive a signal back of /recv3dObject. This signal has a payload of the THREE.js user object being shown in the 3D viewer.
/com-chilipeppr-widget-3dviewer/recvUnits	When you send a /requestUnits you will receive back this signal with a payload of "mm" or "inch" as a string. Please also see /unitsChanged in case you want to know whenever units are changed from a file open event. You can request what units the Gcode are in from the 3D Viewer. Since the 3D Viewer parses Gcode, it can determine the units. The 3D Viewer is mostly unit agnostic, however to draw the toolhead, grid, and extents labels it does need to know the units to draw the decorations in a somewhat appropriate size.
/com-chilipeppr-widget-3dviewer/unitsChanged	This signal is published when the user loads a new file into the 3D viewer and the units change. If other widgets need to know what units are being used, you should subscribe to this signal to be notified on demand.
/com-chilipeppr-widget-3dviewer/sceneReloaded	This signal is sent when the scene has been (re)load because the user dragged / dropped. The payload indicates the global bounding box of the scene. This signal is similar to listening to /com-chilipeppr-elem-dragdrop/ondropped however, /sceneReloaded is guaranteed to fire every time the 3D viewer loads a new file into the viewer. Credit for this signal goes to Dat Chu who created it for his GrblLaser workspace.

Subscribe

This widget/element subscribes to the following signals. These signals are owned by this widget/element. Other objects inside the ChiliPeppr environment can publish to these signals via the chilipeppr.publish(signal, data) method. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
/com-chilipeppr-widget-3dviewer/gotoline	This widget subscribes to this channel so other widgets can move the toolhead and highlight the Gcode line being worked on. This would mostly be when sending Gcode from a Gcode viewer/sender widget, that widget can have the 3D view follow along. Just the line number should be sent as the 3D viewer has it's own cache of the Gcode data loaded.
/com-chilipeppr-widget-3dviewer/resize	You can ask this widget to resize itself. It will resize the rendering area to the region it is bound to (typically the window width/height).
/com-chilipeppr-widget-3dviewer/sceneadd	You can send Threejs objects to this widget and they will be added to the scene. You must send true THREE.Line() or other ThreeJS objects in that are added as scene.add() objects.
/com-chilipeppr-widget-3dviewer/sceneremove	You can also remove objects from the 3D scene. This is the opposite of /sceneadd
/com-chilipeppr-widget-3dviewer/sceneclear	This resets the 3D viewer and clears the scene. It keeps the axes, toolhead, and grid. The user object and extents is removed.
/com-chilipeppr-widget-3dviewer/drawextents	This asks the 3D viewer to draw the extents of what it is showing.
/com-chilipeppr-widget-3dviewer/viewextents	This asks the 3D viewer to place the entire 3D object set in the view window from a front facing position. It is the equivalent of the button with the "eye" icon in the toolbar.
/com-chilipeppr-widget-3dviewer/setunits	Pass in a string of "mm" or "inch" to set the units for the 3D Viewer.
/com-chilipeppr-widget-3dviewer/wakeanimate	The 3d viewer sleeps the rendering after 5 seconds. So if you are going to do any updates to the 3D scene you should wake the animation before your update. It will timeout on its own so you don't have to worry about it. /sceneadd and /sceneremove do their own waking so you don't need to ask for it on those.
/com-chilipeppr-widget-3dviewer/request3dObject	You can request the parent-most object that is showing in the 3D viewer. This is a THREE.js object that is generated by the 3D viewer. It contains all user elements shown in the scene. It does not contain the XYZ axis, toolhead, or other system elements. When you send this signal you will receive a publish back on /recv3dObject
/com-chilipeppr-widget-3dviewer/requestUnits	Send in this signal and you will be sent back a /recvUnits with a payload of "mm" or "inch" as a string. Please also see /unitsChanged in case you want to know whenever units are changed from a file open event. You can request what units the Gcode are in from the 3D Viewer. Since the 3D Viewer parses Gcode, it can determine the units. The 3D Viewer is mostly unit agnostic, however to draw the toolhead, grid, and extents labels it does need to know the units to draw the decorations in a somewhat appropriate size.

Foreign Publish

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
(No signals defined in this widget/element)

Foreign Subscribe

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
/com-chilipeppr-widget-3dviewer/com-chilipeppr-interface-cnccontroller/axes	If we see this signal come in, we move the toolhead to the xyz position in the payload of the signal.
/com-chilipeppr-widget-3dviewer/com-chilipeppr-elem-dragdrop/ondropped	When a user drags and drops a file to the main window, we want to get notified so we can load it into the 3D viewer. During development mode in JSFiddle, this widget loads it's own com-chilipeppr-elem-dragdrop so you can test development, but when this widget is loaded in a full ChiliPeppr app it uses the global com-chilipeppr-elem-dragdrop.

Methods / Properties

The table below shows, in order, the methods and properties inside the widget/element.

Method / Property	Type	Description
id	string	"com-chilipeppr-widget-3dviewer"
name	string	"Widget / 3D GCode Viewer"
desc	string	"Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action."
url	string	"http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html"
fiddleurl	string	"http://ide.c9.io/undefined/undefined"
githuburl	string	"http://github.com/dchote/widget-3dviewer"
testurl	string	"http://undefined-undefined.c9users.io/widget.html"
publish	object	Please see docs above.
subscribe	object	Please see docs above.
foreignSubscribe	object	Please see docs above.
foreignPublish	object	Please see docs above.
initOptions	object
onSignalSceneReloadedFailAttempts	number
domElement	object
scene	object
object	object
camera	object
controls	object
toolhead	object
decorate	object
shadowplane	object
grid	object
axes	object
element	object
parsedLines	object
lineObjects	object
sceneCenter	object
sceneBoundaries	object
isUnitsMm	boolean
animationLatencyTimer	object
animationLatencyDelay	number
animationLatencyDelayDefault	number
inspectLatencyTimer	object
inspectLatencyDelay	number
jogLatencyTimer	object
jogLatencyDelay	number
moveAnimate	boolean
gotoAnimate	boolean
tweenAnimate	boolean
inspectAnimate	boolean
fpsCalculationTimer	object
renderFrameCount	number
tween	object
tweenHighlight	object
tweenIndex	object
tweenSpeed	number
tweenPaused	boolean
tweenIsPlaying	boolean
zheighttest	number
textFont	boolean
isInspectSelect	boolean
inspectArrowGrp	object
inspectCurPos	object
inspectLastObj	object
inspectLastDecorateGroup	object
inspectDlgEl	object
isJogBtnAttached	boolean
isJogSelect	boolean
arrowHelper	object
jogPlane	object
isJogRaycaster	boolean
jogArrow	object
jogArrowCyl	object
jogArrowLine	object
jogArrowShadow	object
jogCurPos	object
colorBackground	number
colorG0	number
colorG1	number
colorG2	number
colorArc	number
colorActive	number
colorCompleted	number
colorGhosted	number
lineWidth	number
disableAnimation	boolean
disableAA	boolean
showShadow	boolean
gridSize	number
isLookAtToolHeadMode	boolean
init	function	function (initOptions)
setupScenePubSub	function	function ()
onSignalSceneReloaded	function	function ()
initInspect	function	function ()
setupInspect	function	function (evt)
unsetupInspect	function	function ()
toggleInspect	function	function (evt)
inspectKeyDown	function	function (evt)
inspectKeyUp	function	function (evt)
inspectMouseClick	function	function (evt)
onInspectGoto	function	function (evt)
createInspectArrow	function	function ()
inspectMouseMove	function	function (evt)
createGlow	function	function (threeObj)
createGlowCubeCaps	function	function (threeObj)
initJog	function	function ()
setupJog	function	function (evt)
unsetupJog	function	function ()
toggleJog	function	function (evt)
jogKeyDown	function	function (evt)
jogKeyUp	function	function (evt)
unsetupJogRaycaster	function	function ()
setupJogRaycaster	function	function ()
jogMouseClick	function	function (evt)
jogMouseMove	function	function (evt)
setupCogMenu	function	function ()
setCogMenuState	function	function ()
onToggleAAClick	function	function (evt, param)
onToggleShadowClick	function	function (evt, param)
onToggleAnimationClick	function	function (evt, param)
setupGridSizeMenu	function	function ()
onGridSizeClick	function	function (evt, param)
setUnits	function	function (units)
requestUnits	function	function ()
onUnitsChanged	function	function ()
request3dObject	function	function ()
sceneAdd	function	function (obj)
sceneRemove	function	function (obj)
sceneClear	function	function ()
btnSetup	function	function ()
forkSetup	function	function ()
onPubSubFileLoaded	function	function (txt)
error	function	function (msg)
loadFile	function	function (path, callback /* function(contents) */ )
setDetails	function	function (txt)
speedUp	function	function ()
openGCodeFromPath	function	function (path)
openGCodeFromText	function	function (gcode)
lookAtCenter	function	function ()
lookAtToolHead	function	function ()
toCameraCoords	function	function (position)
scaleInView	function	function ()
viewExtents	function	function ()
stopSampleRun	function	function (evt)
pauseSampleRun	function	function ()
gotoXyz	function	function (data)
gotoLine	function	function (data)
playNextTween	function	function (isGotoLine)
playSampleRun	function	function (evt)
downloadFont	function	function ()
makeText	function	function (vals)
decorateExtents	function	function ()
convertMinsToPrettyDuration	function	function (mins)
makeSprite	function	function (scene, rendererType, vals)
getInchesFromMm	function	function (mm)
getUnitVal	function	function (val)
drawAxesToolAndExtents	function	function ()
drawToolhead	function	function ()
gridTurnOff	function	function ()
gridTurnOn	function	function ()
drawGrid	function	function ()
drawExtentsLabels	function	function ()
drawAxes	function	function ()
createScene	function	function (element)
resize	function	function ()
wakeAnimate	function	function ()
animate	function	function ()
GCodeParser	function	function (handlers, modecmdhandlers) Parses a string of gcode instructions, and invokes handlers for each type of command. Special handler: 'default': Called if no other handler matches.
createObjectFromGCode	function	function (gcode, indxMax)
convertLineGeometryToBufferGeometry	function	function (lineGeometry, color)

About ChiliPeppr

ChiliPeppr is a hardware fiddle, meaning it is a website that lets you easily create a workspace to fiddle with your hardware from software. ChiliPeppr provides a Serial Port JSON Server that you run locally on your computer, or remotely on another computer, to connect to the serial port of your hardware like an Arduino or other microcontroller.

You then create a workspace at ChiliPeppr.com that connects to your hardware by starting from scratch or forking somebody else's workspace that is close to what you are after. Then you write widgets in Javascript that interact with your hardware by forking the base template widget or forking another widget that is similar to what you are trying to build.

ChiliPeppr is massively capable such that the workspaces for TinyG and Grbl CNC controllers have become full-fledged CNC machine management software used by tens of thousands.

ChiliPeppr has inspired many people in the hardware/software world to use the browser and Javascript as the foundation for interacting with hardware. The Arduino team in Italy caught wind of ChiliPeppr and now ChiliPeppr's Serial Port JSON Server is the basis for the Arduino's new web IDE. If the Arduino team is excited about building on top of ChiliPeppr, what will you build on top of it?