Widget / Gcode v3

This widget shows your Gcode in a table. Hilites commands. Responds to file load events via pubsub. Will send serial events on play/pause/stop.

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-gcodeviewer" class="panel panel-default com-chilipeppr-widget-gcode ">
    <div class="panel-heading">
        <div class="" style="padding-bottom:10px;"><span class="panel-title">Gcode</span></div>
        <div class="btn-toolbar" role="toolbar" style="position:absolute;right:0px;top:0px;padding:10px 15px;">
            <div class="btn-group plannerpause" data-toggle="popover" data-content="This indicator shows that we're being asked to pause our sending of commands to the CNC controller so we don't overfill the buffer.">
                <span disabled="true" class="plannerpauseindicator glyphicon glyphicon glyphicon-time btn btn-sm"></span>
            </div>
            <div class="btn-group" style="margin-left:0px;">
                <button type="button" id="com-chilipeppr-widget-gcode-play" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-play"></span>
    
                </button>
                <button type="button" id="com-chilipeppr-widget-gcode-pause" disabled class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pause"></span>
    
                </button>
                <button type="button" id="com-chilipeppr-widget-gcode-stop" disabled class="btn btn-default btn-xs"><span class="glyphicon glyphicon-stop"></span>
    
                </button>
                <button type="button" id="com-chilipeppr-widget-gcode-stepback" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-step-backward"></span>
    
                </button>
                <button type="button" id="com-chilipeppr-widget-gcode-stepfwd" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-step-forward"></span></button>
                <button type="button" id="com-chilipeppr-widget-gcode-jumptoline" class="btn btn-default btn-xs"><span...

CSS

#com-chilipeppr-widget-gcodeviewer {
}

.gcode-sent {
    color: #E6D8BB; /* #faebcc; */
    background-color: #fcf8e3;
}
.gcode-queued {
    color: #BED0D9; /* #faebcc; */
    background-color: #d9edf7;
}
.gcode-written {
    color: #BBCCAD; /* #d6e9c6; */
    background-color: #dff0d8;
}
.gcode-completed {
    color: #000000;
}
.gcode-error{
    color: #000000;
    background-color: pink;
}
.gcode-executed {
    color: #000000;
    background-color: silver;
}
#com-chilipeppr-widget-gcodeviewer-popover-steps {
    font-size:10px;
    /* min-width:300px; */
}
#com-chilipeppr-widget-gcodeviewer-popover-steps tr {
    vertical-align: top;
}

.com-chilipeppr-widget-gcodeviewer-coords-wrapper {
    position:relative;
    /* z-index:998; */
}
#com-chilipeppr-ws-gcode-wrapper #com-chilipeppr-widget-gcode-body.gcode-short-mode {
    height:80px;
}
.com-chilipeppr-widget-gcodeviewer-coords {
    position: absolute;
    /* left: 0; */
    background: white;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    border-radius:4px;
    z-index:999;
}
.com-chilipeppr-widget-gcodeviewer-coords span {
    display: inline-block;
    padding:0 6px;
}
.com-chilipeppr-widget-gcodeviewer-coords .coords-lbl {
    width:45px;
    background:#d5d5d5;
    padding:0 3px;
}
.com-chilipeppr-widget-gcodeviewer-coords .coords-axis {
    width:15px;
    background:#f5f5f5;
    padding:0 3px;
}

.com-chilipeppr-widget-gcodeviewer-coords-start {
    border-radius:4px;
    border:1px solid #adadad;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.com-chilipeppr-widget-gcodeviewer-coords-end {
    border-radius:4px;
    border:1px solid #adadad;
    border-top-width:0;
    border-top-left-radius:0;
    border-top-right-radius:0;
}

#com-chilipeppr-widget-gcodeviewer .btn-group {
    padding-left:0;
}
#com-chilipeppr-widget-gcodeviewer .panel-heading {
    /* overflow-x: hidden; */
}
#com-chilipeppr-widget-gcode-body {
    padding:0;
    margin:0;
    height: 200px;
    overflow:...

JavaScript

// Load additional files via Chilipeppr's require.js
requirejs.config({
    paths: {
        //jqueryui: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/minified/jquery.ui.core.min',
        //jqueryuiResizeable: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/minified/jquery.ui.resizable.min',
        jqueryui: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.core',
        jqueryuiWidget: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.widget',
        jqueryuiMouse: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.mouse',
        jqueryuiResizeable: '//chilipeppr.com/js/jquery-ui-1.10.4/ui/jquery.ui.resizable',
        waypoints: '//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min',
        //jqueryWaypointsInfinite: '//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints-infinite.min'
    },
    shim: {
        //jqueryWaypointsInfinite: ['waypoints']
        //jqueryui: ['jquery'],
        jqueryuiWidget: ['jqueryui'],
        jqueryuiMouse: ['jqueryuiWidget'],
        jqueryuiResizeable: ['jqueryui', 'jqueryuiMouse']
    }
});

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-gcode"], function (gcode) {
    console.log("test running of " + gcode.id);

    //console.log(gcode);
    /*
     gcode.gcodeLoad(function() {
     console.log("done loading gcode data...");
     //console.log(gcode.gcodeData);
     });
     */

    /*
     cprequire(["inline:com-chilipeppr-elem-gcodedata"], function (gcd) {
     console.log("inside the cprequire which i think is getting called too fast.");
     console.log(gcd.gcode);
     //console.log(gcode);
     //console.log(gcode.gcode());
     });
     */

    // add flash msg
    chilipeppr.load(
        "http://fiddle.jshell.net/chilipeppr/90698kax/show/light",
        function() {
            cprequire(
                ['inline:com-chilipeppr-elem-flashmsg'],
                function(flash) {
                    flash.init();
                   ...