Workspace / Glow Writer

This is a workspace for ChiliPeppr's Hardware for the Glow Writer project.

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="test-com-chilipeppr-flash"></div>
<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>
    <!-- TOP -->
    <div class="container-fluid">
        <div class="row">
            <div id="com-chilipeppr-ws-gcode-dragdrop" style="margin-right:6px;" class=""></div>
            <div class="col-xs-1 widgetx padrt">
                <!-- 3D Viewer. Must be loaded at top to get z-orders correct -->
                <div id="com-chilipeppr-3dviewer">Load 3D Viewport Here</div>
            </div>
            <div class="col-xs-3 col-xs-offset-9 nopadding">Serial Port Selector
                <div id="com-chilipeppr-serialport-spselector" class="">Load Serial Port Selector Here</div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4  col-xs-offset-8 nopadding">
                <div id="com-chilipeppr-serialport-log" class="zhigh">Load Serial Port Log Here</div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <h3>GlowWriter</h3>
    </div>
</nav>

CSS

body {
    padding-bottom: 70px;
}
.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...

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/ril3y/fbxpkr8x/show/light',
        fiddleurl: 'http://jsfiddle.net/ril3y/fbxpkr8x/',
        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
    // If in test mode, i.e. the href is jsfiddle or jshell
    // then inject space up at the top to clear the room that
    // jsfiddle chews up with their annoying overlay
    console.log("href is:", location.href);
    if (location.href.match(/jsfiddle.net|jshell.net/)) {
        console.log("href matched jsfiddle");
        $('#com-chilipeppr-ws-gcode-wrapper').css('margin-top', '44px');
        chilipeppr.load("#test-com-chilipeppr-flash",
            "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",

        function () {
            console.log("mycallback got called...