Workspace / TinyG Tablet

This is a workspace for ChiliPeppr's Hardware Fiddle. It is meant for tablet screens showing a secondary screen for TinyG.

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>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 widgetx padrt">
                <!-- 3D Viewer. Must be loaded at top to get z-orders correct -->
                <div id="com-chilipeppr-3dviewer" class="hidden">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="">
                        <div class="pull-right">
                        <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-menu-ws" role="menu">
                                <li id="com-chilipeppr-ws-gcode-menu-billboard" style="width:350px;"></li>
                            </ul>
                        </div>
                        </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...

CSS

#com-chilipeppr-ws-gcode-wrapper .btn {
  padding: 8px 12px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 6px;
}
#com-chilipeppr-ws-gcode-wrapper .btn.jogy, #com-chilipeppr-ws-gcode-wrapper .btn.jogyneg, #com-chilipeppr-ws-gcode-wrapper .btn.jogz, #com-chilipeppr-ws-gcode-wrapper .btn.jogzneg {
  padding:20px 26px;
}
#com-chilipeppr-ws-gcode-wrapper .btn.jogx, #com-chilipeppr-ws-gcode-wrapper .btn.jogxneg, #com-chilipeppr-ws-gcode-wrapper .btnShowTouchJog  {
  padding:56px 26px;
}
#com-chilipeppr-widget-xyz-jog {
  display:none;
}
.jogx, .jogxneg, .jogy, .jogyneg, .jogz, .jogzneg {
  padding:20px;
}
#com-chilipeppr-ws-gcode-wrapper .jogincrements-horiz .btn.btn-xs {
  padding:12px;
  height:100%
}
#com-chilipeppr-ws-gcode-wrapper .panel-heading {
  padding-bottom:25px;
}
.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;
   ...

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/oamp4xrk/show/light',
        fiddleurl: 'http://jsfiddle.net/chilipeppr/oamp4xrk/',
        name: "Workspace / TinyG Tablet",
        desc: "This is a workspace for TinyG on Tablets. It is generally geared for secondary displays.",
        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...