Widget / Serial Port Console

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

by Riley Porter

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>
        <span class="panel-title">Serial Port Console <span class="subtitle">(Multi Port Mode)</span></span>
    </div>
    <div class="panel-body com-chilipeppr-widget-spconsole-body">
        <div class="com-chilipeppr-widget-spconsole-console-log">
            <pre></pre>
        </div>
        <div class="com-chilipeppr-widget-spconsole-consoleinput">
            <form id="com-chilipeppr-widget-spconsole-consoleform">
                <div class="input-group">
                    <span class="input-group-btn dropup">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <!-- <li><a href="#" id="">{"sr":""}</a>
                            </li> -->
                        </ul>

                    </span>
                    <input type="text" class="form-control" placeholder="Type serial port command" /> <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">Go!</button>
                        </span>

                        <!--...

CSS

/*html,body {
    height:100%;
    overflow:hidden;
}*/
.com-chilipeppr-widget-spconsole-console-log pre {
    margin:0;
    padding:0;
    background: none;
    background-color: black;
    border: none;
    color: white;
    
}
.com-chilipeppr-widget-spconsole .out {
    color: yellow;
    /* 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;
    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/send", 'G91 G1 Y0.001 F100\nG90\n');
        }, 1000);
        
        // 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}}'});
        }, 1000);
        
        setTimeout(function() {
            for(var ctr = 0; ctr < 200; ctr++) {
                chilipeppr.publish("/com-chilipeppr-widget-serialport/send", 'G91 G1 Y0.001 F100\nG90\n');
                chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", {dataline:'{"sr":{"vel":0.02,"mpox":10.474,"dist":1,"stat":5}}'});
                
            }
        }, 3500);
        
        sp.init(true);

    } else {        
        sp.portBoundTo = {Name:"COM21"};
        setTimeout(function() {
           ...