The amazing 3D viewer that is the centerpiece of ChiliPeppr. It knows how to parse Gcode to show it as a 3D representation. Has a simulator built in for the tool path. Also has numerous pubsub signals defined to enable 3rd party tools to inject 3D objects into the viewer.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
#3 Compare This branch is 47 commits ahead, 9 commits behind chilipeppr:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
auto-generated-widget.html
runme.js
screenshot.png
widget.css
widget.html
widget.js

README.md

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.

alt text

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/recv3dObjectWhen 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/recvUnitsWhen 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/unitsChangedThis 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/sceneReloadedThis 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/gotolineThis 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/resizeYou 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/sceneaddYou 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/sceneremoveYou can also remove objects from the 3D scene. This is the opposite of /sceneadd
/com-chilipeppr-widget-3dviewer/sceneclearThis 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/drawextentsThis asks the 3D viewer to draw the extents of what it is showing.
/com-chilipeppr-widget-3dviewer/viewextentsThis 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/setunitsPass in a string of "mm" or "inch" to set the units for the 3D Viewer.
/com-chilipeppr-widget-3dviewer/wakeanimateThe 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/request3dObjectYou 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/requestUnitsSend 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/axesIf 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/ondroppedWhen 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
idstring"com-chilipeppr-widget-3dviewer"
namestring"Widget / 3D GCode Viewer"
descstring"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."
urlstring"http://raw.githubusercontent.com/dchote/widget-3dviewer/master/auto-generated-widget.html"
fiddleurlstring"http://ide.c9.io/undefined/undefined"
githuburlstring"http://github.com/dchote/widget-3dviewer"
testurlstring"http://undefined-undefined.c9users.io/widget.html"
publishobjectPlease see docs above.
subscribeobjectPlease see docs above.
foreignSubscribeobjectPlease see docs above.
foreignPublishobjectPlease see docs above.
initOptionsobject
onSignalSceneReloadedFailAttemptsnumber
domElementobject
sceneobject
objectobject
cameraobject
controlsobject
toolheadobject
decorateobject
shadowplaneobject
gridobject
axesobject
elementobject
parsedLinesobject
lineObjectsobject
sceneCenterobject
sceneBoundariesobject
isUnitsMmboolean
animationLatencyTimerobject
animationLatencyDelaynumber
animationLatencyDelayDefaultnumber
inspectLatencyTimerobject
inspectLatencyDelaynumber
jogLatencyTimerobject
jogLatencyDelaynumber
moveAnimateboolean
gotoAnimateboolean
tweenAnimateboolean
inspectAnimateboolean
fpsCalculationTimerobject
renderFrameCountnumber
tweenobject
tweenHighlightobject
tweenIndexobject
tweenSpeednumber
tweenPausedboolean
tweenIsPlayingboolean
zheighttestnumber
textFontboolean
isInspectSelectboolean
inspectArrowGrpobject
inspectCurPosobject
inspectLastObjobject
inspectLastDecorateGroupobject
inspectDlgElobject
isJogBtnAttachedboolean
isJogSelectboolean
arrowHelperobject
jogPlaneobject
isJogRaycasterboolean
jogArrowobject
jogArrowCylobject
jogArrowLineobject
jogArrowShadowobject
jogCurPosobject
colorBackgroundnumber
colorG0number
colorG1number
colorG2number
colorArcnumber
colorActivenumber
colorCompletednumber
colorGhostednumber
lineWidthnumber
disableAnimationboolean
disableAAboolean
showShadowboolean
gridSizenumber
isLookAtToolHeadModeboolean
initfunctionfunction (initOptions)
setupScenePubSubfunctionfunction ()
onSignalSceneReloadedfunctionfunction ()
initInspectfunctionfunction ()
setupInspectfunctionfunction (evt)
unsetupInspectfunctionfunction ()
toggleInspectfunctionfunction (evt)
inspectKeyDownfunctionfunction (evt)
inspectKeyUpfunctionfunction (evt)
inspectMouseClickfunctionfunction (evt)
onInspectGotofunctionfunction (evt)
createInspectArrowfunctionfunction ()
inspectMouseMovefunctionfunction (evt)
createGlowfunctionfunction (threeObj)
createGlowCubeCapsfunctionfunction (threeObj)
initJogfunctionfunction ()
setupJogfunctionfunction (evt)
unsetupJogfunctionfunction ()
toggleJogfunctionfunction (evt)
jogKeyDownfunctionfunction (evt)
jogKeyUpfunctionfunction (evt)
unsetupJogRaycasterfunctionfunction ()
setupJogRaycasterfunctionfunction ()
jogMouseClickfunctionfunction (evt)
jogMouseMovefunctionfunction (evt)
setupCogMenufunctionfunction ()
setCogMenuStatefunctionfunction ()
onToggleAAClickfunctionfunction (evt, param)
onToggleShadowClickfunctionfunction (evt, param)
onToggleAnimationClickfunctionfunction (evt, param)
setupGridSizeMenufunctionfunction ()
onGridSizeClickfunctionfunction (evt, param)
setUnitsfunctionfunction (units)
requestUnitsfunctionfunction ()
onUnitsChangedfunctionfunction ()
request3dObjectfunctionfunction ()
sceneAddfunctionfunction (obj)
sceneRemovefunctionfunction (obj)
sceneClearfunctionfunction ()
btnSetupfunctionfunction ()
forkSetupfunctionfunction ()
onPubSubFileLoadedfunctionfunction (txt)
errorfunctionfunction (msg)
loadFilefunctionfunction (path, callback /* function(contents) */ )
setDetailsfunctionfunction (txt)
speedUpfunctionfunction ()
openGCodeFromPathfunctionfunction (path)
openGCodeFromTextfunctionfunction (gcode)
lookAtCenterfunctionfunction ()
lookAtToolHeadfunctionfunction ()
toCameraCoordsfunctionfunction (position)
scaleInViewfunctionfunction ()
viewExtentsfunctionfunction ()
stopSampleRunfunctionfunction (evt)
pauseSampleRunfunctionfunction ()
gotoXyzfunctionfunction (data)
gotoLinefunctionfunction (data)
playNextTweenfunctionfunction (isGotoLine)
playSampleRunfunctionfunction (evt)
downloadFontfunctionfunction ()
makeTextfunctionfunction (vals)
decorateExtentsfunctionfunction ()
convertMinsToPrettyDurationfunctionfunction (mins)
makeSpritefunctionfunction (scene, rendererType, vals)
getInchesFromMmfunctionfunction (mm)
getUnitValfunctionfunction (val)
drawAxesToolAndExtentsfunctionfunction ()
drawToolheadfunctionfunction ()
gridTurnOfffunctionfunction ()
gridTurnOnfunctionfunction ()
drawGridfunctionfunction ()
drawExtentsLabelsfunctionfunction ()
drawAxesfunctionfunction ()
createScenefunctionfunction (element)
resizefunctionfunction ()
wakeAnimatefunctionfunction ()
animatefunctionfunction ()
GCodeParserfunctionfunction (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.
createObjectFromGCodefunctionfunction (gcode, indxMax)
convertLineGeometryToBufferGeometryfunctionfunction (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?