Widget / ShuttleXpress

This widget helps you use your Contour ShuttleXpress as a jog dial.

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-shuttlexpress" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar">
            <div class="btn-group">
                <span xstyle="font-size:9px;" class="shuttlexpress-axis badge">-</span> <span xstyle="font-size:9px;" class="shuttlexpress-moveby badge">-</span>
            </div>
            <div class="btn-group">
                
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span>

                </button>
            </div>
            <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 dropdown-menu-right" role="menu"></ul>
                </div>
            </div>
            
        </div> <span class="panel-title" data-toggle="popover">ShuttleXpress Jog Dial</span>  

    </div>
    <div class="panel-body">
        <p>By <a href="https://plus.google.com/+FrankGraffagnino/posts">Frank Graffagnino</a>
        </p>
        <p>This code is meant to allow button, jog, and shuttle events from a Contour ShuttleXpress controller to flow to the Serial Port JSON server typically used with ChiliPeppr driven CNC machines.</p>
        <p>Interface to Shuttle Contour Xpress based on "Contour ShuttlePro v2 interface" by Eric Messick.</p>
        
        <p>Purchase online<br/>
            <a target="_blank" href="http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=shuttlexpress">Amazon.com</a><br/>
            <a target="_blank"...

CSS

#com-chilipeppr-widget-shuttlexpress .panel-body {
    padding-right: 30%;
    background-image: url('http://chilipeppr.com/img/icons/shuttlexpress.jpg');
    background-position-x: -50%;
    background-position-y: 28%;
    background-size: 150%;
    overflow: auto;
    max-height: 230px;
    color: white;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
#com-chilipeppr-widget-shuttlexpress h1 {
    font-size:18px;
}
#com-chilipeppr-widget-shuttlexpress .panel-body ol {
    padding-left: 20px;
}
#com-chilipeppr-widget-shuttlexpress .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-shuttlexpress-status {
    //overflow: auto;
    //max-height:30px;
    background:none;
    background-color:#f5f5f5;
    border:none;
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-shuttlexpress"], function (shuttle) {
    console.log("test running of " + shuttle.id);
    shuttle.init();
    
    // load spjs widget in test mode
    // create div to hold it below our shuttlexpress widget
    
    var spjs = $("<div id=\"test-spjs\">spjs here</div>");
    $('#com-chilipeppr-widget-shuttlexpress').parent().append(spjs);
    
    chilipeppr.load("#test-spjs", "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",

    function () {
        cprequire(
        ["inline:com-chilipeppr-widget-serialport"],

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg");
            sp.consoleToggle();
        });
    });
    

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-shuttlexpress", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-shuttlexpress",
        url: "http://fiddle.jshell.net/chilipeppr/27v59xLg/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/27v59xLg/",
        name: "Widget / ShuttleXpress",
        desc: "This widget helps you use your Contour ShuttleXpress as a jog dial.",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {
            '/com-chilipeppr-widget-serialport/onBroadcast' : 'We subscribe to broadcast messages so we know whether to play audio on the "move by" button press or on the xyza button presses.'
        },
        isInitted: false, // keep track of our one-time init
        audio: [],
        audioaxis: [],
        init: function () {

            if (this.isInitted) return;
            
            this.setupUiFromLocalStorage();
            this.btnSetup();

            // load audio
            this.loadAudio();
            
            // listen to broadcast msgs on spjs
            this.setupOnBroadcast();
            
           ...