Widget / Touch Plate

This widget helps you use a touch plate to create your Z zero offset.

by rogue203

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-touchplate" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            
            <!-- <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">Touch Plate</span> <span style="font-size:9px;" class="fb-build"></span>
    </div>
    <div class="panel-body">
        
        <div class="settings-overlay">
            <!-- <div style="position:absolute;border:1px solid green;height:100%;"> -->
    ...

CSS

#com-chilipeppr-widget-touchplate .panel-body {
    padding:0;
    position:relative;
    margin-bottom:-5px;
}
#com-chilipeppr-widget-touchplate .settings-overlay {
    position:absolute;
    top:20px;
    left:40%;
    bottom:10px;
    right:10px;
    border:0px solid red;
}
#com-chilipeppr-widget-touchplate .input-group-addon {
    font-size:10px;
}
#com-chilipeppr-widget-touchplate .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-touchplate-status {
    //overflow: auto;
    //max-height:30px;
    background:none;
    background-color:#f5f5f5;
    border:none;
}

JavaScript

requirejs.config({
    paths: {
        Three: 'http://threejs.org/build/three.min',
    }
});

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-touchplate"], function (touchplate) {
    console.log("test running of " + touchplate.id);
    touchplate.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");
            //sp.consoleToggle();
        });
    });
    
    // 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();
        });
    });
    
    // axes widget test load
    chilipeppr.load(
        "#test-axes",
        "http://fiddle.jshell.net/chilipeppr/gh45j/show/light/",

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

        function (xyz) {
            xyz.init();
        });
    });
    
    // Serial Port Console Log Window
    // http://jsfiddle.net/chilipeppr/JB2X7/
    // NEW VERSION http://jsfiddle.net/chilipeppr/rczajbx0/
    // The new version supports onQueue, onWrite, onComplete

    chilipeppr.load("#test-console",
        "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/",

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

        function (spc) {
            // pass in regular expression filter as 2nd parameter
            // to enable filter button and clean up how much
            // data is shown
            spc.init(true, /^{/);
            
        });
    });
    */

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-touchplate",...