Widget / Auto-Level

Allows you to auto-level your PCB before milling. Most raw PCB boards have a slight warpage. This widget lets you probe the warpage and then it auto-scales your Gcode to match the warpage so you get very clean/predictable z-positions in your milling job.

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-autolevel" class="panel panel-default">
    <div class="panel-heading">
        <span class="panel-title" data-toggle="popover">Auto-Level</span>

            <div class="btn-group pull-right" style="margin-right:0;">
                <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-menu2 xdropdown-menu-right" role="menu">
                        <li role="presentation" class="dropdown-header">Load Probe Data From Clipboard</li>
                        <li style="padding:0 20px;">
                            <div class="input-group">
                                <textarea class="form-control paste-load" placeholder="Paste Probe Data Here" style="font-size:10px;" rows="5"></textarea>
                                <span class="input-group-btn" style="vertical-align: top;">
                                    <button class="btn btn-default paste-load-go" style="" type="button">Load</button>
                                </span>
                            </div><!-- /input-group -->
                        </li>
                        <li class="divider"></li>
                        <li role="presentation" class="dropdown-header recent-files">Recent Probe Data</li>
                        <li><a href="javascript:" class="recent-file-delete"><span class="glyphicon glyphicon-trash"></span> Clear Probe Data</a></li>
                        
                    </ul>
                </div>
        </div>

        <div class="btn-toolbar " role="toolbar" style="padding-top:4px;">
            <div class="btn-group" style="xmargin-left:0;">
                <button type="button" id="" class="btn...

CSS

.lastModifyDate {
    color: silver;
}
#com-chilipeppr-widget-autolevel .btn-group {
    margin-left:0;
    margin-right:4px;
}
#com-chilipeppr-widget-autolevel-body {
    padding:0;
}
#com-chilipeppr-widget-autolevel-body .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
    max-height:170px;
}
#com-chilipeppr-widget-autolevel-body .title {
    width:86px;
    float:left;
    line-height:13px;
    padding-top:6px;
    /* vertical-align: middle; */
    /* display: table-cell; */
    /* height:100%; */
}
#com-chilipeppr-widget-autolevel-body .form-inline {
    float:left;
}
.autoleveltbarbtn {
    float:left;
}
#com-chilipeppr-widget-autolevel-body .al-coord {
    width:75px;
}
.form-inline .form-group {
    display: inline-table;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
}
#com-chilipeppr-widget-autolevel-ftr {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-autolevel-status {
    //overflow: auto;
    //max-height:30px;
    background:none;
    border:none;
}
.xdropdown-menu {
    list-style: none;
}
.xdropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    background: 0 0;
}
#com-chilipeppr-widget-autolevel-status{
    resize: none;
    overflow-y:scroll;
}

JavaScript

requirejs.config({
    paths: {
        Three: 'http://threejs.org/build/three.min',
        /*
        ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker',
        ThreeFontUtils: 'https://raw.githubusercontent.com/mrdoob/three.js/master/src/extras/FontUtils'
        */
        // Updated on 10/19/15 to fix dependency for r73 release of Three.js
        ThreeTextGeometry: 'http://chilipeppr.com/js/three/TextGeometry',
        ThreeFontUtils: 'http://chilipeppr.com/js/three/FontUtils',
        ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker'
    },
    shim: {
        ThreeTextGeometry: ['Three'],
        ThreeFontUtils: ['Three', 'ThreeTextGeometry'],
        ThreeHelvetiker: ['Three', 'ThreeTextGeometry', 'ThreeFontUtils'],
    }
});

// make sure Helvetiker loads
/*
var ThreeHelvetiker;
console.log("Making sure font load code run first.");
window["_typeface_js"] = {loadFace: function(data) {
    console.log("apparently we're supposed to load Helvetiker here???");
    ThreeHelvetiker = data;
}};
console.log(window["_typeface_js"]);
*/

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-autolevel"], function (autolevel) {
    console.log("test running of " + autolevel.id);
    autolevel.init();
    
    $('#com-chilipeppr-widget-autolevel').css('position', 'relative');
    $('#com-chilipeppr-widget-autolevel').css('background', 'none');
    $('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: true});
            $('#com-chilipeppr-widget-3dviewer .panel-heading').addClass('hidden');
            //autolevel.addRegionTo3d();
            //autolevel.loadFileFromLocalStorageKey('com-chilipeppr-widget-autolevel-recent8');
           ...