Widget / Serial Port SPJS

This widget shows your available serial ports. It must connect with your Serial Port JSON 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 id="com-chilipeppr-widget-serialport" 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:4px;">
      <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
    </div>

    <div class="btn-group pull-right hidden" style="padding-right:4px;">
      <button type="button" class="btn btn-xs btn-default...

CSS

.com-chilipeppr-widget-serialport .com-chilipeppr-widget-serialport-body {
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
  /* min-height:80px; */
}

.com-chilipeppr-widget-serialport .serial-port-version {
  font-size: 9px;
}

.com-chilipeppr-widget-serialport .panel-title {
  font-size: 12px;
}

.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;
  /* min-height:50px; */
}

.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; */
  font-size: 12px;
  margin: 0 0 2px 0;
  width: 85px;
}

.com-chilipeppr-widget-serialport-index {
  list-style-type: none;
  padding-left:...

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", 115200, "tinyg (or if you are using the Arduino Due or v9 board choose tinygg2)");
  //sp.init(null, "grbl");
  */

  sp.init({
    isSingleSelectMode: true,
    defaultBuffer: "timed",
    defaultBaud: 9600,
    bufferEncouragementMsg: 'For your NodeMCU device please choose the "timed" buffer in the pulldown and a 9600 baud rate before connecting.'
  });

  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();

  var testProgrammer = function() {
    var testProgrammerDiv = $("<div></div>").attr("id", "com-chilipeppr-widget-programmer-div");
    $('#com-chilipeppr-widget-serialport').append(testProgrammerDiv);

    // Programmer
    // FIDDLE http://jsfiddle.net/chilipeppr/qcduvhkh/11/
   ...