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 chilipeppr

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">
    <div class="panel-heading">3D Viewer
        <div class="btn-group pull-right">

            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a class="com-chilipeppr-widget-3d-menu-samplerun" href="javascript:">Play Sample Run</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a>

                </li>
            </ul>
    </div>
        <div class="btn-group pull-right" style="padding-right:6px;">
            <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-viewextents" data-container="body" data-toggle="popover" data-placement="auto" data-content="View extents of GCode object" data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-eye-open"></span>
            </button>
            <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-samplerun" data-container="body" data-toggle="popover" data-placement="auto" data-content="Play a sample run of the GCode" data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-play"></span>
            </button>
            <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-samplerunspeed" data-container="body" data-toggle="popover" data-placement="auto" data-content="Speed up from x1 to x1000" data-trigger="hover" data-delay="800">x1</button>
            <button type="button" class="btn btn-xs btn-default...

CSS

#com-chilipeppr-widget-3dviewer-body {
    /* height: 350px; */
    padding:0;
    margin:0;
    position: relative;
    border:1px solid red;
    background-color: blue;
}
#com-chilipeppr-widget-3dviewer-renderArea {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40px;
    background-color: #000000;
}
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;
}

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: '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'
    },
    shim: {
        ThreeTrackballControls: ['Three'],
        ThreeTween: ['Three'],
        ThreeSparks: ['Three'],
        ThreeParticle: ['Three']
    }
});

cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
    console.log("Running 3dviewer");
    threed.init();
    console.log("3d viewer initted");
} /*end_test*/ );

cpdefine('inline:com-chilipeppr-widget-3dviewer', ['chilipeppr_ready', 'Three', 'ThreeDetector', 'ThreeTrackballControls', 'ThreeTween'], function () {

    return {

        id: 'com-chilipeppr-widget-3dviewer',
        url: "http://fiddle.jshell.net/jlauer/8rvxQ/show/light/",
        fiddleurl: "http://jsfiddle.net/jlauer/8rvxQ/",
        name: "Widget / 3D GCode Viewer",
        desc: "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.",
        publish: ['/ws/onconnect', '/ws/ondisconnect', '/ws/sys', '/ws/recv'],
        subscribe: ['/dragdrop'],
       ...