Widget / Laser Solder

This widget shows the TinyG planner buffer so other widgets can limit their flow of sending commands and other specific TinyG features.

by Tim Aveiro

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="test-serial-port"></div>
<div id="test-tinyg"></div>
<div id="com-chilipeppr-widget-lasersolder" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group">
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default lasersolder-on" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Turn Laser On" data-content="laser-on"><span class="glyphicon glyphicon-fire"></span><!-- <span style="margin-left:-2px;opacity:0.5;" class="glyphicon glyphicon-ok"></span> --></button>
                <button type="button" class="btn btn-xs btn-default lasersolder-off" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Turn Laser Off" data-content="laser-off"><span style="opacity:0.5" class="glyphicon glyphicon-fire"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
            </div>
            <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="panel-title" data-toggle="popover">Laser Solderer</span> <span style="font-size:9px;" class="fb-build"></span>
    </div>
    <div class="panel-body">
        <!-- Nav tabs -->
       ...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
#com-chilipeppr-widget-lasersolder .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-lasersolder .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
    max-height:170px;
}
#com-chilipeppr-widget-lasersolder .panel-body {
    padding:3px;
}

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

JavaScript

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

    chilipeppr.load("#test-serial-port", "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",

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

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg");
        });
    });
    
    // tinyg widget test load
    chilipeppr.load("#test-tinyg", "http://fiddle.jshell.net/chilipeppr/XxEBZ/show/light/",

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

        function (tinyg) {
            tinyg.init();
        });
    });

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-lasersolder", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-lasersolder",
        url: "http://fiddle.jshell.net/chilipeppr/xuu785yz/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/xuu785yz/",
        name: "Widget / Laser Solderer",
        desc: "This widget lets you control a laser solderer which uses a laser to heat solder with an infrared heat sensor to control over heating.",
        publish: {
        },
        subscribe: {
        },
        foreignPublish: {
        },
        foreignSubscribe: {
        },
        isInitted: false, // keep track of our one-time init
        init: function () {

            this.setupUiFromLocalStorage();
            this.btnSetup();
            this.setupPortList();
            this.setupWsRecv();
            this.status("Loaded...");
            this.setupWatchZ();

            this.forkSetup();
            
            this.lazyLoadTutorial();
            this.isInitted = true;
            console.log(this.name + " done loading.");
        },
        isHidden: false,
        unactivateWidget: function() {
      ...