Widget / Laser

This widget generates laser pulsing Gcode.

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-laser" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group">
                <button class="btn btn-default btn-xs">Generate Gcode</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 <span style="font-size:9px;">(Not Implemented Yet)</span></span>
    </div>
    <div id="com-chilipeppr-widget-laser-body" class="panel-body">
        <div class="container-fluid com-chilipeppr-interface-cnccontroller-stat">
            <div class="row stat-row">
                <div class="col col-xs-3">
                    Start X
                </div>
                <div class="col col-xs-3 well">
                    <span class="stat-velocity">0.00</span> <span class="stat-unit">mm/min</span>
                </div>
                <div class="col col-xs-3 lblpad">
                    Max X
                </div>
                <div class="col col-xs-3 well">
                    <span class="stat-feedrate">0</span> <span class="stat-unit">mm/min</span>                    
                </div>
            </div><!-- row -->
            <div class="row stat-row">
                <div class="col col-xs-3">
                    Start Y
                </div>
                <div class="col col-xs-3 well">
                    <span class="stat-line">-</span>
                </div>
   ...

CSS

#com-chilipeppr-widget-laser-body {
    /* padding:0; */
}
#com-chilipeppr-widget-laser .panel-heading {
    /* height: 30px; */
}
.com-chilipeppr-interface-cnccontroller-stat .col {
    padding:0 10px 0 0;
}
.com-chilipeppr-interface-cnccontroller-stat .col:last-child {
    padding:0;
}
.com-chilipeppr-interface-cnccontroller-stat .stat-row {
    padding-top:2px;
}
.com-chilipeppr-interface-cnccontroller-stat div.col.lblpad {
    padding-left:10px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-unit {
    font-size:9px;
    display:none;
}
.com-chilipeppr-interface-cnccontroller-stat  div.col.well {
    margin-bottom:0px;
    padding-left:5px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-sm {
    font-size:10px;
}

JavaScript

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

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-laser", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-laser",
        url: "http://fiddle.jshell.net/chilipeppr/ULXC6/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/ULXC6/",
        name: "Widget / Laser",
        desc: "This widget generates laser pulsing Gcode.",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {},
        init: function () {

            this.forkSetup();

            this.btnSetup();
            
            console.log(this.name + " done loading.");
        },
        btnSetup: function() {
        },
        forkSetup: function () {
            var topCssSelector = '#com-chilipeppr-widget-laser';
            
            $(topCssSelector + ' .panel-title').popover({
                title: this.name,
                content: this.desc,
                html: true,
                delay: 200,
                animation: true,
                trigger: 'hover',
                placement: 'auto'
            });
            
            var that = this;
            chilipeppr.load("http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/", function () {
                require(['inline:com-chilipeppr-elem-pubsubviewer'], function (pubsubviewer) {
                    pubsubviewer.attachTo($(topCssSelector + ' .panel-heading .dropdown-menu'), that);
                });
            });
            
        }
    }
});