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.
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/chilipeppr/widget-3dviewer/master/auto-generated-widget.html |
| Edit URL | http://ide.c9.io/chilipeppr/widget-3dviewer |
| Github URL | http://github.com/chilipeppr/widget-3dviewer |
| Test URL | https://preview.c9users.io/chilipeppr/widget-3dviewer/widget.html |
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/chilipeppr/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();
}
);
}
);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. |
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. |
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) | |
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. |
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/chilipeppr/widget-3dviewer/master/auto-generated-widget.html" |
| fiddleurl | string | "http://ide.c9.io/chilipeppr/widget-3dviewer" |
| githuburl | string | "http://github.com/chilipeppr/widget-3dviewer" |
| testurl | string | "http://widget-3dviewer-chilipeppr.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. |
| scene | object | |
| object | object | |
| camera | object | |
| controls | object | |
| toolhead | object | |
| tween | object | |
| tweenHighlight | object | |
| tweenIndex | object | |
| tweenSpeed | number | |
| tweenPaused | boolean | |
| tweenIsPlaying | boolean | |
| wantAnimate | boolean | |
| initOptions | object | |
| init | function | function (initOptions) |
| setupScenePubSub | function | function () |
| onSignalSceneReloadedFailAttempts | number | |
| onSignalSceneReloaded | function | function () |
| isInspectSelect | boolean | |
| 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) |
| inspectArrowGrp | object | |
| createInspectArrow | function | function () |
| inspectCurPos | object | |
| inspectLastObj | object | |
| inspectLastDecorateGroup | object | |
| inspectDlgEl | object | |
| inspectMouseMove | function | function (evt) |
| createGlow | function | function (threeObj) |
| createGlowCubeCaps | function | function (threeObj) |
| isJogBtnAttached | boolean | |
| isJogSelect | boolean | |
| initJog | function | function () |
| setupJog | function | function (evt) |
| unsetupJog | function | function () |
| toggleJog | function | function (evt) |
| jogKeyDown | function | function (evt) |
| jogKeyUp | function | function (evt) |
| arrowHelper | object | |
| jogPlane | object | |
| isJogRaycaster | boolean | |
| jogArrow | object | |
| jogArrowCyl | object | |
| jogArrowLine | object | |
| jogArrowShadow | object | |
| unsetupJogRaycaster | function | function () |
| setupJogRaycaster | function | function () |
| jogMouseClick | function | function (evt) |
| jogCurPos | object | |
| jogMouseMove | function | function (evt) |
| showShadow | boolean | |
| setupCogMenu | function | function () |
| onToggleShadowClick | function | function (evt, param) |
| setupFpsMenu | function | function () |
| onFpsClick | function | function (evt, param) |
| gridSize | number | |
| 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 () |
| isLookAtToolHeadMode | boolean | |
| 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) |
| zheighttest | number | |
| playSampleRun | function | function (evt) |
| makeText | function | function (vals) |
| decorate | object | |
| decorateExtents | function | function () |
| convertMinsToPrettyDuration | function | function (mins) |
| makeSprite | function | function (scene, rendererType, vals) |
| element | object | |
| getInchesFromMm | function | function (mm) |
| getUnitVal | function | function (val) |
| drawAxesToolAndExtents | function | function () |
| shadowplane | object | |
| drawToolhead | function | function () |
| grid | object | |
| gridTurnOff | function | function () |
| gridTurnOn | function | function () |
| drawGrid | function | function () |
| drawExtentsLabels | function | function () |
| axes | object | |
| drawAxes | function | function () |
| colorBackground | number | |
| createScene | function | function (element) |
| resize | function | function () |
| mytimeout | object | |
| renderFrameCtr | number | |
| fpsCounterInterval | object | |
| fpsEl | object | |
| fpsCounterStart | function | function () |
| fpsCounterOnInterval | function | function () |
| fpsCounterEnd | function | function () |
| setFrameRate | function | function (rate) |
| animEnable | boolean | |
| animateDisabled | function | function () |
| animateEnabled | function | function () |
| frameRateDelayMs | number | |
| animate | function | function () |
| wakeAnimate | function | function (evt) |
| sleepAnimate | function | function () |
| cancelSleep | function | function () |
| isNoSleepMode | boolean | |
| animNoSleep | function | function () |
| animAllowSleep | 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. |
| colorG0 | number | |
| colorG1 | number | |
| colorG2 | number | |
| createObjectFromGCode | function | function (gcode, indxMax) |
| convertLineGeometryToBufferGeometry | function | function (lineGeometry, color) |
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?