Workspace / Grbl

This is a workspace for ChiliPeppr's Hardware Fiddle. It is geared towards CNC machines using TinyG and Shapeoko.

by chilipeppr

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- This is the workspace layout for the Gcode Workspace -->
<div id="com-chilipeppr-ws-gcode-wrapper" class="dropArea">
    <div id="com-chilipeppr-ws-gcode-dragdropoverlay" class="hidden">
        <div class="well">Drag and Drop Gcode Files Onto Browser Window</div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 widgetx padrt">
                <!-- 3D Viewer. Must be loaded at top to get z-orders correct -->
                <div id="com-chilipeppr-3dviewer">Load 3D Viewport Here</div>
                <!-- Workspace Hdr -->
                <div id="com-chilipeppr-ws-gcode-hdr" class="com-chilipeppr-ws-hdr zhigh well">Workspace Grbl
                    <div id="com-chilipeppr-ws-gcode-menu" class=""> 
                        <div class="dropdown pull-right">
                            <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-ws" role="menu">
                                <li id="com-chilipeppr-ws-gcode-menu-billboard" style="width:350px;"></li>
                            </ul>
                        </div>

                        <div id="com-chilipeppr-ws-gcode-dragdrop"  style="margin-right:6px;" class=""></div>
                        <!-- <div class="btn-group"> -->
                            <button type="button" class="btn btn-xs btn-default zipwhip-button" data-container="body" data-toggle="popover" data-placement="auto" data-content="Get a text sent to you when your CNC job is completed." data-trigger="hover" data-delay="100"><span class="zipwhip"></span></button>
                        <!-- </div>
                        <div class="btn-group"> -->
                           ...

CSS

.zipwhip-button {
    line-height:0px;
    padding: 1px 2px;
}
.zipwhip {
    background: url('http://www.zipwhip.com/resources/images/favicon.ico') no-repeat top left;
    display: inline-block;
    margin: 1px 0;
    height: 16px;
    width: 16px;
    /* line-height:0px; */
    background-size: 16px 16px;
    /* -webkit-background-size: 50% 50%; Safari
    -khtml-background-size: 50% 50%; Konqueror
    -moz-background-size: 50% 50%; Firefox */
}
#com-chilipeppr-ws-gcode-wrapper .dropdown-menu {
    /* z-index:6; */
    /* position:inherit; */
}
#com-chilipeppr-ws-gcode-wrapper .panel-heading {
    /* padding: 10px 12px; */
}
#com-chilipeppr-ws-gcode-wrapper .well.com-chilipeppr-ws-hdr {
    /* padding: 10px 15px; */
}
#com-chilipeppr-ws-gcode-dragdrop {
    margin-right:6px;
}
#com-chilipeppr-ws-gcode-hdr {
    margin-bottom:10px;
}
.panel {
    margin-bottom:10px;
}
#com-chilipeppr-ws-gcode-wrapper #com-chilipeppr-widget-gcode-body {
    /* max-height:250px; */
    height:250px;
}
#com-chilipeppr-ws-gcode-wrapper .com-chilipeppr-widget-spconsole {
    margin-bottom:0;
}
#com-chilipeppr-ws-gcode-dragdropoverlay {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    padding:100px;
    border: 3px dashed #3276b1;
    text-align:center;
    pointer-events: none;
}
#com-chilipeppr-ws-gcode-dragdropoverlay .well {
    background-color: rgba(127, 127, 127, 0.5);
}
#com-chilipeppr-ws-gcode-wrapper.hover {
    /* background-color: blue; */
}
.com-chilipeppr-elem-dragdrop {
    /* border: 1px dashed gray; */
    /* border-radius: 4px; */
    padding:0;
    margin-right:6px;
}
.padrt {
    padding-right:10px;
}
.zhigh {
    /* z-index:5; */
    position:relative;
}
#com-chilipeppr-ws-gcode-wrapper .dropdown-menu {
    /* z-index:20; */
}
#mainnav {
    z-index:5;
}
.nopadding {
    padding:0;
}
#com-chilipeppr-widget-3dviewer .panel-heading,...

JavaScript

// Makes sure we only run once jquery is loaded as well
// as ensuring we don't load javascript libraries multiple times
cprequire(["chilipeppr_ready"], function () {

    // Define standard ChiliPeppr objects
    var ws = {
        id: "com-chilipeppr-ws-tinyg",
        url: 'http://jsfiddle.net/chilipeppr/2J3JH/show/light',
        fiddleurl: 'http://jsfiddle.net/chilipeppr/2J3JH/',
        name: "Workspace / TinyG",
        desc: "This is a workspace for ChiliPeppr's Hardware Fiddle. It is geared towards CNC machines using TinyG.",
        foreignSubscribe: {
            "/com-chilipeppr-elem-dragdrop/ondragover" : "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
            "/com-chilipeppr-elem-dragdrop/ondragleave" : "We need to know when the drag is over to remove the CSS hilites.",
            "/com-chilipeppr-widget-gcode/resize" : "We watch if the Gcode viewer resizes so that we can reposition or resize other elements in the workspace. Specifically we ask the Serial Port Console to resize. We also redraw the 3D Viewer so it fills the whole screen."
        },
        foreignPublish: {
        }
    }
            
    // Load top bar elements
    
    // Zipwhip texting
    // com-chilipeppr-ws-zipwhip
    chilipeppr.load(
        "#com-chilipeppr-ws-zipwhip",
        "http://fiddle.jshell.net/chilipeppr/56X9G/show/light/", function () {
        require(["inline:com-chilipeppr-elem-zipwhip"], function (zipwhip) {
            zipwhip.init();
            // setup toggle button
            var zwBtn = $('#com-chilipeppr-ws-gcode-menu .zipwhip-button');
            var zwDiv = $('#com-chilipeppr-ws-zipwhip');
            zwBtn.click(function() {
                if (zwDiv.hasClass("hidden")) {
                 ...