Widget / Grbl

This widget shows the Grblplanner buffer so other widgets can limit their flow of sending commands and other specific TinyG features.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-widget-tinyg" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default btn-danger tinyg-feedhold" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Feedhold" data-content="Stop movement immediately. Maintains positional accuracy. Sends ! command to TinyG which jumps past the planner buffer so you get immediate stop. Movement can be resumed with ~ command. If you want to jog you should flush queue with %."><span class="glyphicon glyphicon-stop"></span></button>
                <button type="button" class="btn btn-xs btn-default tinyg-cyclestart"  data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Cycle Start" data-content="Resume movement from stopping point"><span class="">~</span></button>
                <button type="button" class="btn btn-xs btn-default tinyg-queueflush"  data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Queue Flush" data-content="Empty planner buffer. Used for jogging and other cycles"><span class="">%</span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
            </div>
            <div class="btn-group">
                <div class="dropdown">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
.com-chilipeppr-interface-cnccontroller-stat .col {
    padding:0 10px 0 0;
}
.com-chilipeppr-interface-cnccontroller-stat .col:last-child {
    padding:0;
}
.com-chilipeppr-interface-cnccontroller-stat .progress {
    margin-bottom:0;
}
.com-chilipeppr-interface-cnccontroller-stat .stat-row {
    padding-top:2px;
}
.com-chilipeppr-interface-cnccontroller-stat div.col.lblpad {
    padding-left:10px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-unit {
    font-size:9px;
    display:none;
}
.com-chilipeppr-interface-cnccontroller-stat  div.col.well {
    margin-bottom:0px;
    padding-left:5px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-sm {
    font-size:10px;
}

JavaScript

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

    // create a typical test of planner buffer
    // you never want planner buffer with more than 12 items queued, 4 are reserved for pulling
    // from serial buffer, so you want qr to be no less than 12
    var buf = [27, 26, 25, 18, 14, 15, 16, 18, 17, 16, 12, 11, 10, 14, 17, 16, 15, 10, 22, 28];
    var delay = 1000;
    var delayPlus = 500;
    chilipeppr.currentCtr = -1;
    /*
    for (var ctr = 0; ctr < buf.length; ctr++) {
        
        setTimeout(function () {
            chilipeppr.currentCtr++;
            //console.log("chilipeppr.currentCtr:", chilipeppr.currentCtr);
            var cmd = '{"qr":' + buf[chilipeppr.currentCtr] + '}';
            chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", {dataline: cmd});
            //chilipeppr.currentCtr = chilipeppr.currentCtr + 1;
        }, delay);
        delay = delay + delayPlus;
    }    
    */
    
    // manual test of coordinates and how we publish them to the generic interface
    var testRecvline = function() {
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", 
                               {dataline:'{"sr":{"vel":0.02,"mpox":10.474,"dist":1,"stat":1}}'});
        }, 1000);
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", 
                               {dataline:'{"sr":{"vel":0.02,"mpox":0.574,"mpoy":32.424,"mpoz":-3.424,"dist":1,"stat":2}}'});
        }, 2000);
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", 
                               {dataline: '{"sr":{"vel":0.02,"mpox":940.5744,"mpoz":1.12,"dist":1,"stat":5}}'});
        }, 3000);
    
        setTimeout(function () {
       ...