Widget / Configure TinyG

This widget helps configure the TinyG

by ymilord

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-configtinyg" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="btn-toolbar pull-right" role="toolbar">
                    <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 dropdown-menu-right" role="menu"></ul>
                        </div>
                    </div>
                </div>	<span class="modal-title" data-toggle="popover">Configure TinyG v0.5</span>  <span style="font-size:9px;" class="fb-build"></span>

            </div>
            <div class="modal-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#configtinyg-Motors" role="tab" data-toggle="tab">Motors</a>

                    </li>
                    <li><a href="#configtinyg-Axis" role="tab" data-toggle="tab">Axis</a>

                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="configtinyg-Motors">
                        <div class="panel-body">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a href="#configtinyg-Motors-1" role="tab" data-toggle="tab">Motor 1</a>

                                </li>
                                <li><a href="#configtinyg-Motors-2" role="tab" data-toggle="tab">Motor 2</a>

                                </li>
 ...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
#com-chilipeppr-widget-configtinyg .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-configtinyg .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
}
#com-chilipeppr-widget-configtinyg .panel-body {
    padding:3px;
}
.com-chilipeppr-widget-configtinyg-stat div.input-label {
    line-height:13px;
    padding-top:6px;
}
.com-chilipeppr-widget-configtinyg-stat .input-val {
    padding:0;
    padding-left: 10px;
    height:28px;
    margin-bottom:2px;
}
.com-chilipeppr-widget-configtinyg-stat .col {
    padding:0 10px 0 0;
}
.com-chilipeppr-widget-configtinyg-stat .col:last-child {
    padding:0;
}
.com-chilipeppr-widget-configtinyg-stat .progress {
    margin-bottom:0;
}
.com-chilipeppr-widget-configtinyg-stat .stat-row {
    padding-top:2px;
}
#com-chilipeppr-widget-configtinyg .com-chilipeppr-widget-configtinyg-stat div.col.lblpad {
    padding-left:10px;
}
.com-chilipeppr-widget-configtinyg-stat .stat-unit {
    font-size:9px;
    /* display:none; */
}
.com-chilipeppr-widget-configtinyg-stat div.col.well {
    margin-bottom:0px;
    padding-left:5px;
}
.com-chilipeppr-widget-configtinyg-stat .stat-sm {
    font-size:10px;
}
#com-chilipeppr-widget-configtinyg .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-configtinyg-status {
    //overflow: auto;
    //max-height:30px;
    background:none;
    background-color:#f5f5f5;
    border:none;
}
#com-chilipeppr-widget-configtinyg .col-xs-3 {
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-configtinyg .progress-bar span {
    color: black;
    padding-left:4px;
}
#com-chilipeppr-widget-configtinyg .stat-val {
    padding-left:4px;
}

JavaScript

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

    // Serial Port Selector
    // http://jsfiddle.net/chilipeppr/4RgrS/
    // NEW VERSION for SPJS v1.7 http://jsfiddle.net/chilipeppr/vetj5fvx/
    chilipeppr.load("com-chilipeppr-serialport-spselector",
        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-widget-serialport"],

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg", 115200);
            setTimeout(function () {
                ls.init()
            }, 2000);
        });
    });

    ls.okToClose = false;

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-configtinyg", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-configtinyg",
        url: "http://jsfiddle.net/khauser/vc1vd3n5/show/light/",
        fiddleurl: "http://jsfiddle.net/ymilord/74nsj1d6/",
        name: "Widget / Configure TinyG",
        desc: "This widget helps configure the TinyG",
        publish: {},
        subscribe: {},
        foreignPublish: {
            "/com-chilipeppr-widget-serialport/send": "We send to the serial port certain commands like the initial configuration commands for the TinyG to be in the correct mode and to get initial statuses like planner buffers and XYZ coords. We also send the Emergency Stop and Resume of ! and ~",
                "/com-chilipeppr-elem-flashmsg/flashmsg": "To flash messages"
        },
        foreignSubscribe: {
            "/com-chilipeppr-widget-serialport/recvline": "When we get a dataline from serialport, process it and fire off generic CNC controller signals to the /com-chilipeppr-interface-cnccontroller channel."
        },
        isInitted: false, // keep track of our one-time init
        okToClose: true, //...