Widget / Eagle PCB Raycast

This widget lets you drag in an Eagle PCB ".brd" file to mill.

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-flash"></div>
<div id="test-drag-drop"></div>
<div id="com-chilipeppr-widget-eagle" 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="hidden btn btn-xs btn-default btn-clear" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Clear Eagle BRD from Viewer" data-content="Clear the Eagle BRD drawing from the 3D Viewer.">Clear
                </button> -->
                <button type="button" class="btn btn-xs btn-default btn-refresh" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Refresh 3D Viewer" data-content="Hit Ctrl+Enter in any of the edit boxes below to trigger a refresh. Update the 3D Viewer with your new settings.">Refresh
                </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>
                   ...

CSS

#com-chilipeppr-widget-eagle {
    /* width: 200px; */
}
#com-chilipeppr-widget-eagle input {
    padding: 0 0 0 6px;
}
#com-chilipeppr-widget-eagle .eagle-advanced {
    padding: 0 10px 10px 10px;
    border: 1px gray dashed;
}
#com-chilipeppr-widget-eagle .eagle-advanced .checkbox {
    margin-bottom: 4px;
}
#com-chilipeppr-widget-eagle .input-group-addon {
    padding: 5px;
}
#com-chilipeppr-widget-eagle .descriptive-text {
    font-size: 10px;
    padding-top: 5px;
}
#com-chilipeppr-widget-eagle h2 {
    font-size:17px;
}
}
#com-chilipeppr-widget-eagle #eagle-gcode {
    /* padding:0; */
}
#com-chilipeppr-widget-eagle .com-chilipeppr-widget-eagle-gcode {
    width: 100%;
    height: 100%;
    min-height: 100px;
    margin: 0;
}
.com-chilipeppr-widget-eagle-info {
    padding-bottom:0;
    margin-bottom:0;
    font-size:10px;
    position:absolute;
    width:200px;
}
.com-chilipeppr-widget-eagle-info-signal {
    padding-bottom:0;
    margin-bottom:0;
    font-size:10px;
    position:absolute;
    width:200px;
}
#com-chilipeppr-widget-eagle #eagle-canvas {
    width:100%;
}
#com-chilipeppr-widget-eagle .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-eagle .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
    max-height:240px;
}
#com-chilipeppr-widget-eagle .panel-body {
    padding:3px;
}
#com-chilipeppr-widget-eagle .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}

JavaScript

requirejs.config({
    paths: {
        //Three: 'http://mrdoob.github.io/three.js/build/three.min',
        //ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker',
        //ThreeFontUtils: 'https://raw.githubusercontent.com/mrdoob/three.js/master/src/extras/FontUtils',
        //Clipper: 'http://jsclipper.sourceforge.net/6.1.3.2/clipper_unminified',
        Clipper: 'http://chilipeppr.com/js/clipper/clipper_unminified',
    },
    shim: {}
});

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

    $('#com-chilipeppr-widget-eagle').css('position', 'relative');
    $('#com-chilipeppr-widget-eagle').css('background', 'none');
    $('#com-chilipeppr-widget-eagle').css('width', '300px');
    $('body').prepend('<div id="3dviewer"></div>');

    chilipeppr.load("#3dviewer", "http://fiddle.jshell.net/chilipeppr/y3HRF/show/light/", function () {
        cprequire(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
            threed.init({
                doMyOwnDragDrop: false
            });
            //$('#com-chilipeppr-widget-3dviewer .panel-heading').addClass('hidden');
            //autolevel.addRegionTo3d();
            //autolevel.loadFileFromLocalStorageKey('com-chilipeppr-widget-autolevel-recent8');
            //autolevel.toggleShowMatrix();

            // only init eagle widget once 3d is loaded
            // set doMyOwnDragDrop
            ew.init(true);
        });
    });


    chilipeppr.load("#test-drag-drop", "http://fiddle.jshell.net/chilipeppr/Z9F6G/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-elem-dragdrop"],

        function (dd) {
            dd.init();
            dd.bind("body", null);
        });
    });
    
    chilipeppr.load("#com-chilipeppr-flash",
        "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",

 ...