3D Gcode Viewer

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.

by Riley Porter

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="com-chilipeppr-widget-3dviewer" class="panel panel-default" style="float:left;">
  
  
  
  
    <div id="com-chilipeppr-widget-3dviewer-body" class="panel-body">
        <!-- WebGL rendering area -->
        <div id="com-chilipeppr-widget-3dviewer-renderArea" tabindex="1">
            <div class="data-details hidden">Drag and Drop Gcode Here...</div>
        </div>
        <div class="com-chilipeppr-widget-3dviewer-inspect panel hidden" style="top:40px;left:20px">
                
            <table class="table table-bordered table-striped table-condensed">
                <tbody>
                    <tr>
                        <th colspan="2" class="info-title">
                            <button type="button" class="close" style="width:100%;text-align:right;">&times;</button>
                        </th>
                    </tr>
                    <tr class="row-signal" xstyle="vertical-align:middle;">
                        <td xstyle="vertical-align:middle;">Line</td>
                        <td xstyle="vertical-align:middle;">
                            <span class="inspect-line" xstyle="vertical-align:middle;float:left;"></span>
                            <button class="btn btn-default btn-xs pull-right inspect-btn-goto">Go To</button>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Gcode</td>
                        <td class="inspect-gcode"></td>
                    </tr>
                    <!-- <tr class="">
                        <td class="">Start</td>
                        <td class="inspect-start"></td>
                    </tr> -->
                    <tr class="">
                        <td class="">End Pos</td>
                        <td class="inspect-end"></td>
                   ...

CSS

#com-chilipeppr-widget-3dviewer .panel-heading {
    z-index:1;
    position:relative;
}
.com-chilipeppr-widget-3dviewer-simulator-title {
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    float:left;
    position: relative;
    border: 1px solid #ccc;
    display: inline-block;
    border-right-width: 0;
}

#com-chilipeppr-widget-3dviewer-body {
    /* height: 350px; */
    padding:0;
    margin:0;
    position: relative;
    border:0px solid red;
    background-color: blue;
}
#com-chilipeppr-widget-3dviewer-renderArea {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #000000;
    /* z-index:0; */
}
button.com-chilipeppr-widget-3d-menu-samplerun, button.com-chilipeppr-widget-3d-menu-samplerunstop {
    /* color: blue; */
}
#com-chilipeppr-widget-3dviewer .disabled .glyphicon {
    color: #dddddd;
}
#com-chilipeppr-widget-3dviewer #warningArea {
    position: absolute;
    top:0;
    left:0;
    padding: 10px;
    font-size: 9px;
    color: white;
}
#com-chilipeppr-widget-3dviewer-infoArea {
    position: absolute;
    bottom:0;
    left:0;
    padding: 10px;
    font-size: 9px;
    color: #333333;
    /* background-color: black; */
}
#com-chilipeppr-widget-3dviewer-infoArea .info {
    position: absolute;
    bottom:0;
    left:0;
    color: blue;
    background-color:red;
}
#com-chilipeppr-widget-3dviewer-renderArea .data-details {
    position: absolute;
    bottom:0;
    left:10;
    /* background-color: transparent; */
    color: #333333;
    padding: 10px;
    font-size: 9px;
}
.com-chilipeppr-widget-3dviewer-inspect {
    padding-bottom:0;
    margin-bottom:0;
    font-size:10px;
    position:absolute;
    min-width:250px;
    max-width:100%;
    /* width:100%; */
    z-index: 9;
    box-shadow: 0 0 20px #888888;
}
.com-chilipeppr-widget-3dviewer-panzoom-indicator {
    font-size:10px;
    padding-top: 7px;
}

JavaScript

requirejs.config({
    paths: {
        Three: 'http://threejs.org/build/three.min',
        ThreeDetector: 'http://threejs.org/examples/js/Detector',
        ThreeStats: 'http://threejs.org/examples/js/libs/stats.min',
        ThreeTrackballControls: '//threejs.org/examples/js/controls/TrackballControls',
        ThreeOrbitControls: '//threejs.org/examples/js/controls/OrbitControls',
        ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker',
        //ThreeHelvetiker: 'https://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface',
        ThreeTypeface: 'https://superi.googlecode.com/svn-history/r1953/trunk/MBrand/MBrand/Scripts/typeface-0.15',
        //ThreeTween: 'https://raw.githubusercontent.com/sole/tween.js/master/build/tween.min',
        ThreeTween: 'http://www.chilipeppr.com/js/three/tween.min',
        //ThreeSparks: 'https://raw.githubusercontent.com/zz85/sparks.js/master/Sparks',
        //ThreeParticle: 'https://raw.githubusercontent.com/squarefeet/ShaderParticleEngine/master/build/ShaderParticles.min'
        ThreeBufferGeometryUtils: 'http://chilipeppr.com/js/three/BufferGeometryUtils'
    },
    shim: {
        ThreeTrackballControls: ['Three'],
        ThreeTween: ['Three'],
        ThreeSparks: ['Three'],
        ThreeParticle: ['Three'],
        ThreeBufferGeometryUtils: ['Three']
    }
});

cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
    console.log("Running 3dviewer");
    threed.init({doMyOwnDragDrop: true});
    
    // test resize signal
    setTimeout(function() {
            chilipeppr.publish('/' + threed.id + '/resize', "" );
    }, 3000);
    
    var testGotoline = function() {
        // send sample gcodeline commands as if the gcode sender widget were sending them
        setTimeout(function() {
            chilipeppr.publish('/com-chilipeppr-widget-3dviewer/gotoline', {line: 3, gcode: "G21 G90 G64 G40"} );
        }, 3000);
        setTimeout(function() {
       ...