Widget / Tigershark

Allows control of Tigershark specific items.

by chilipeppr

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="com-chilipeppr-widget-tigershark" 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">
            </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">Tigershark</span> <span style="font-size:9px;" class="fb-build"></span>
    </div>
    <div class="panel-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="xactive"><a href="#tigershark-temp" role="tab" data-toggle="tab">Temperature</a></li>
            <li class="active"><a href="#tigershark-extruder" role="tab" data-toggle="tab">Extruder Control</a></li>
            <li><a href="#tigershark-print" role="tab" data-toggle="tab">Print</a></li>
        </ul>
        
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane xactive" id="tigershark-temp">
                
                <div class="container-fluid com-chilipeppr-widget-tigershark-stat">
                    <div class="row">
                        
                        <table class="table table-condensed">
                            
            ...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
#com-chilipeppr-widget-tigershark .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-tigershark .tab-pane {
    padding:10px 3px 6px 3px;
    overflow:auto;
    max-height:270px;
    /* height:250px; */
}
#com-chilipeppr-widget-tigershark .ts-extruder-btn {
    width: 100%;
    /* padding-right:6px; */
}
#com-chilipeppr-widget-tigershark .panel-body {
    padding:3px;
}
#com-chilipeppr-widget-tigershark .table>tbody>tr>td {
    border-top:0px;
}
#com-chilipeppr-widget-tigershark .tigershark-canvas {
    border:1px solid #000000;
    /* height:40px; */
    /* width:100%; */
}
.com-chilipeppr-widget-tigershark-stat .table {
    width: initial;
}

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

JavaScript

requirejs.config({
    paths: {
        Smoothie: 'http://smoothiecharts.org/smoothie'
    }
});


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


} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-tigershark", ["chilipeppr_ready", "Smoothie"], function () {
    return {
        id: "com-chilipeppr-widget-tigershark",
        url: "http://fiddle.jshell.net/chilipeppr/ende4L9h/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/ende4L9h/",
        name: "Widget / Tigershark",
        desc: "Tigershark control UI",
        publish: {
        },
        subscribe: {
        },
        foreignPublish: {
        },
        foreignSubscribe: {
        },
        init: function () {

            this.setupUiFromLocalStorage();

            this.forkSetup();
            
            this.initSmoothie();
            this.setupExtruderBtns();
            
            this.status("Hi Adam and Sidney");
            //this.status("Connected to tigershark and ready to rock");
                        
            console.log(this.name + " done loading.");
        },
        setupExtruderBtns: function() {
            $('#com-chilipeppr-widget-tigershark .ts-extruder0-extrude').click({num:0, dir:"fwd"}, this.onBtnExtrude.bind(this));
            $('#com-chilipeppr-widget-tigershark .ts-extruder0-reverse').click({num:0, dir:"rev"}, this.onBtnExtrude.bind(this));
            $('#com-chilipeppr-widget-tigershark .ts-extruder1-extrude').click({num:1, dir:"fwd"}, this.onBtnExtrude.bind(this));
            $('#com-chilipeppr-widget-tigershark .ts-extruder1-reverse').click({num:1, dir:"rev"}, this.onBtnExtrude.bind(this));
        },
        onBtnExtrude: function(evt) {
            console.log("extrude btn got clicked. btn number:", evt.data);
            var num = evt.data.num;
            var dir =...