Widget / Gcode v2

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.

by Hansen

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-btnoptions" class="btn btn-default btn-xs"><span...

CSS

#com-chilipeppr-widget-gcodeviewer {
}
.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: scroll;
    overflow-x: hidden;
    position:inherit;
}
#com-chilipeppr-widget-gcode-feedrate {
    padding:0;
    padding-top:10px;
}
#com-chilipeppr-widget-gcode-tbl tr.gcode-rowhilite {
    background-color: #f5f5f5;
}
#com-chilipeppr-widget-gcode-tbl .gtools {
    position:relative;
}
#com-chilipeppr-widget-gcode-tbl tr.gcode-rowhilite:hover {
    background-color: #d5d5d5;
}
#com-chilipeppr-widget-gcode-tbl .feedrate-adjust {
    color: blue;
}
#com-chilipeppr-widget-gcode-body .popover {
    max-width: 450px;
    width: 450px;
}
.com-chilipeppr-widget-gcode .btn-group {
    padding-left:...

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();
           ...