Widget / Serial Port v2

This widget shows your available serial ports. It must connect with your local serial port Ajax server that ChiliPeppr provides for Windows, Mac, and Linux.

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-serialport">
    <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 class=""><a href="javascript:" id="com-chilipeppr-widget-serialport-tbar-disconws">Connect to Alternate Host/IP</a></li>
                <li><a href="javascript:" id="com-chilipeppr-widget-serialport-tbar-showhideconsole">Show / Hide Console</a></li>
                <li><a href="javascript:" id="com-chilipeppr-widget-serialport-tbar-showhidestatus">Show / Hide Status</a></li>
                <li class="divider"></li>
                <li class="hidden"><a href="javascript:"id="com-chilipeppr-widget-serialport-tbar-disconws">Disconnect</a></li>
                <li><a href="javascript:"id="com-chilipeppr-widget-serialport-tbar-reconws">Reconnect</a></li>
                <li class="hidden"><a href="javascript:" id="com-chilipeppr-widget-serialport-tbar-refresh">Refresh Serial Port List</a></li>
                
                <!-- <li class="divider"></li>
                    <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="padding-right:6px;">
            <button type="button" class="btn btn-xs btn-default refresh" data-toggle="popover" data-placement="auto" data-container="body" data-content="Reload serial port list from ajax server" data-trigger="hover"...

CSS

.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-body {
    padding:0;
    overflow: auto;
    overflow-x: hidden;
}
.com-chilipeppr-widget-serialport-install .alert-warning {
    /* max-height:130px; */
    /* overflow: scroll; */
    /* overflow-x: hidden; */
}
.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-body .row .col-xs-12 {
    padding:0;
}
.com-chilipeppr-widget-serialport .table {
    margin-bottom:0;
}
.com-chilipeppr-widget-serialport-disconnected {
    position: absolute;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: white;
    height:80%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    line-height: 100%;
    z-index: 100;
    margin:0;
    padding:20px;
}
.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-status .well.well-sm {
    margin: 0;
    padding-left:16px;
    font-size: 10px;
}
.com-chilipeppr-widget-serialport .btn .glyphicon-ok-circle {
    padding: 0 16px;
}
.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-console {
    padding-top: 0px;
}
.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-console-log {
    overflow: auto;
    height: 160px;
    margin:0;
    padding: 0 8px;
}
.com-chilipeppr-widget-serialport .panel-footer {
    font-size: 11px;
}
.com-chilipeppr-widget-serialport-portlist {
    margin-bottom:0;
}
.com-chilipeppr-widget-serialport-portlistarea {
    max-height:150px;
    overflow: auto;
}
.com-chilipeppr-widget-serialport input[type=checkbox] {
    margin-left:10px;
}
.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-baud {
    margin-right:10px;
}
.com-chilipeppr-widget-serialport-index {
    list-style-type: none;
    padding-left: 0;
}
.com-chilipeppr-widget-serialport-install {
    max-height:300px;
    overflow:auto;
}
.com-chilipeppr-widget-serialport-install p {
    padding-top:10px;
}
.com-chilipeppr-widget-serialport-install p:first {
   ...

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-serialport"], function (sp) {
    console.log("test running of " + sp.id);
    //sp.init("192.168.1.7");
    sp.setSingleSelectMode();
    sp.init(null, "tinyg");
    //sp.init(null, "grbl");
    sp.consoleToggle();
    
    var test = function() {
        setTimeout(function() {
            for (ctr = 0; ctr < 3; ctr++) {
                //sp.sendBuffered('{"sr":""}\n');
                //sp.sendBuffered('{"qr":""}\n');
                sp.sendBuffered('{"sr":""}\n{"qr":""}\n');
            }
        }, 5000);
    }
    //test()

    var test2 = function() {
        for (ctr = 0; ctr < 30; ctr++) {
            setTimeout(function() {
                sp.sendBuffered('{"sr":""}\n');
                sp.sendBuffered('{"qr":""}\n');
            }, 5000 + (ctr * 2));
        }
    }
    //test2()

    setTimeout(function() {
        chilipeppr.publish("/com-chilipeppr-widget-serialport/requestSingleSelectPort", "");
    }, 2000);
    
    /*
    setTimeout(function() {
        chilipeppr.publish("/" + sp.id + "/send", '{"sr":""}\n{"sr":""}\n{"sr":""}\n{"sr":""}\n'); 
        //chilipeppr.publish("/" + sp.id + "/ws/send", 'send COM22 {"sr":""}\nsend COM22 {"sr":""}\nsend COM22 {"sr":""}\nsend COM22 {"sr":""}\n'); 
    }, 2000);
    setTimeout(function() {
    //    chilipeppr.publish("/" + sp.id + "/ws/send", 'send COM22 {"sr":""}\n'); 
    }, 1000);
    */
    //sp.wsScan();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-serialport", ["chilipeppr_ready", "jquerycookie"], function () {
    return {
        id: "com-chilipeppr-widget-serialport",
        url: "http://fiddle.jshell.net/chilipeppr/4RgrS/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/4RgrS/",
        name: "Widget / Serial Port v2",
        desc: "This widget shows your available serial ports. It must connect with your local serial port Ajax server that...