Workspace / TinyG

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

by Riley Porter

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 widget 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 - TinyG
                    <div id="com-chilipeppr-ws-gcode-menu" class="pull-right">            
                        <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" role="menu">
                                    <li id="com-chilipeppr-ws-gcode-menu-billboard" style="width:350px;"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="com-chilipeppr-ws-gcode-dragdrop" class="pull-right"></div>
                </div>
                <!-- Gcode List -->
                <div id="com-chilipeppr-gcode-list" class="zhigh">Load Gcode List Here</div>
                <!-- Serial In/Out Text Log-->
                <div id="com-chilipeppr-serialport-log" class="zhigh">Load Serial Port Log Here</div>
            </div>
            <!-- 3D Viewer -->
            <div...

CSS

#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:100px;
}
#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 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, #com-chilipeppr-3dviewer-controlpanel .panel-heading {
    background:none;
    /* border:none; */
    padding:10px 15px;
    margin-bottom:0;
}
#com-chilipeppr-3dviewer-controlpanel {
    padding:0 10px;
    float:left;
}
#com-chilipeppr-gcode-list {
    /* padding-right: 10px; */
    /* z-index:5; */
    /* position: relative; */
}
#com-chilipeppr-serialport-ws-hdr {
    /* z-index:5; */
}
.well.com-chilipeppr-ws-hdr {
    padding:10px 15px;
    /* padding:8px; */
    /* padding-left:15px; */
   ...

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

    // Element / Drag Drop
    // Load the dragdrop element into workspace toolbar
    // http://jsfiddle.net/chilipeppr/Z9F6G/
    chilipeppr.load("#com-chilipeppr-ws-gcode-dragdrop",
        "http://fiddle.jshell.net/chilipeppr/Z9F6G/show/light/", function () {
        require(["inline:com-chilipeppr-elem-dragdrop"], function (dd) {
            console.log("inside require of dragdrop");
            $('.com-chilipeppr-elem-dragdrop').removeClass('well');
            dd.init();
            // The Chilipeppr drag drop element will publish
            // on channel...