Widget / Serial Port Console v1.7

This widget lets you see the data in/out of the serial port and send commands.

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 class="panel panel-default com-chilipeppr-widget-spconsole">
    <div class="panel-heading">
        <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 role="presentation" class="dropdown-header fork-name"></li>
                <li><a href="" class="standalone" target="_blank">View Widget Standalone</a></li>
                <li><a href="" class="fork" target="_blank">Fork Widget</a></li> -->
            </ul>
        </div>
        <div class="btn-group pull-right" style="margin-right:6px;">
            <button type="button" class="btn btn-xs btn-default spconsole-clear" data-container="body" data-toggle="popover" data-placement="auto" data-content="Clear the console window." data-trigger="hover" data-delay="500">Clear</button>
            <button type="button" class="btn btn-xs btn-default spconsole-pause " data-container="body" data-toggle="popover" data-placement="auto" data-content="Disable the serial port console from updating. This can help reduce load on your browser." data-trigger="hover" data-delay="500"><span class="glyphicon glyphicon-ban-circle"></span></button>
            <button type="button" class="hidden btn btn-xs btn-default spconsole-filter active" data-container="body" data-toggle="popover" data-placement="auto" data-content="Toggle the filter. A filter can be applied to remove lower priority information from getting logged. The filter is set by the workspace you are in." data-trigger="hover" data-delay="500"  ><span class="glyphicon glyphicon-filter"  ></span></button>
        </div>

        <span class="panel-title">Serial Port Console <span...

CSS

/*html,body {
    height:100%;
    overflow:hidden;
}*/
.cmd-checkmark {
    font-size:9px;
}
.cmd-send {
    color: #999999;
}
.cmd-queued {
    color: yellow;
}
.cmd-write {
    color: green;
}
span.cmd-complete {
    color: black;
}

.com-chilipeppr-widget-spconsole-console-log pre {
    margin:0;
    padding:0;
    background: none;
    border: none;
}
.com-chilipeppr-widget-spconsole .out {
    color: blue;
    /* margin-left:-5px; */
}
.panel.com-chilipeppr-widget-spconsole {
    /* height:100%; */
    /* min-height:250px; */
    /* position:relative; */
    margin:0;
    padding:0;
    /* height:60px; */
}
.com-chilipeppr-widget-spconsole .com-chilipeppr-widget-spconsole-body {
    padding:0;
    overflow: auto;
    overflow-x: hidden;
    width:100%;
    /* height:100%; */
    /* top:0; */
    /* bottom:0; */
    /* position:absolute; */
    position:relative;
}
.com-chilipeppr-widget-spconsole .com-chilipeppr-widget-spconsole-console-log {
    overflow: auto;
    /* margin:0; */
    margin-bottom:35px;
    /* padding: 0 0 40px 16px; */
    padding-left:12px;
    padding-bottom:4px;
    padding-right:12px;
    /* position:absolute; */
    width:100%;
    height:40px;
    /* top:44px; */
    /* bottom:36px; */
    /* height:100%; */
}
.com-chilipeppr-widget-spconsole-consoleinput {
    position: absolute;
    width:100%;
    left:0;
    bottom:0;
    /* padding-top:2px; */
    /* margin-top:1px; */
    /* background-color:silver; */
}
.com-chilipeppr-widget-spconsole .subtitle {
    font-size:9px;
}

JavaScript

// Load additional files via Chilipeppr's require.js
requirejs.config({
    paths: {
        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',
    },
    shim: {
        jqueryuiWidget: ['jqueryui'],
        jqueryuiMouse: ['jqueryuiWidget'],
        jqueryuiResizeable: ['jqueryuiMouse']
    }
});

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

    var singlePortMode = true;

    var test = function() {
        if (singlePortMode) {

            // sample sending of data, perhaps from another widget, or from
            // ourselves
            // /com-chilipeppr-widget-serialport/send  data: G91 G1 Y0.001 F100\nG90\n
            setTimeout(function() {
                chilipeppr.publish("/com-chilipeppr-widget-serialport/jsonSend", {
                    D: 'G91 G1 Y0.001 F100\nG90\n',
                    Id: "g1"
                });
            }, 1000);

            setTimeout(function() {
                chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", {
                    dataline: 'G91 G1 Y10.001 F100\nG90\n'
                });
            }, 2000);

            // sample recvline from the serial port
            setTimeout(function() {
                chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", {
                    dataline: '{"sr":{"vel":0.02,"mpox":10.474,"dist":1,"stat":5}}\n'
                });
            }, 3000);

            setTimeout(function() {
                for (var ctr = 0; ctr < 200; ctr++) {
                    chilipeppr.publish("/com-chilipeppr-widget-serialport/send", 'G91 G1 Y0.001...