Widget / Programmer

This widget lets you program your Arduino/Atmel from within ChiliPeppr using SPJS's new programfromurl method.

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-programmer" class="modal fade ">
    <div class="modal-dialog modal-lg zhigh">
        <div class="modal-content">
            <div class="modal-header">
                <div class="btn-toolbar pull-right" role="toolbar">
                    <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="modal-title" data-toggle="popover">Arduino/Atmel Programmer</span>  <span style="font-size:9px;" class="fb-build"></span>

            </div>
            <div class="modal-body">
                
                <div class="alert alert-danger hidden">
                    Serial Port JSON Server 1.83 or higher is needed for this Arduino / Atmel Firmware Programmer to operate.
                </div>
                
                <div class="form-group">
                    <label for="programmer-serialport">Serial Port</label>
                    <div class="programmer-serialport-staticname hidden well">asfsdf</div>
                    <select class="form-control programmer-serialport hidden">
                        <!--<option>Serial port list unknown</option>-->
                        <!--<option value="COM9">Arduino Due Programming Port (COM9)</option>
                        <option value="arduino:avr:yun">Arduino Yún</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>-->
                    </select>
      ...

CSS

#com-chilipeppr-widget-programmer .programmer-progbar-lbl {
    /* color: #999999; */
    margin-left:10px;
}
#com-chilipeppr-widget-programmer .programmer-output-lbl {
    /* color: #999999; */
}
#com-chilipeppr-widget-programmer .programmer-output-pre {
    max-height: 230px;
}
.programmer-progbar-greyedout {
    color: #999999;
}
.programmer-progbar-black {
    color: #000000;
}
.programmer-brdicon {
    /* margin:10px; */
    width:50px;
    border-radius:6px;
    margin-right:10px;
}
.programmer-device-dd {
    width:100%;
    text-align: left;
}

#com-chilipeppr-widget-programmer .well {
    padding:6px 10px;
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-programmer"], function (programmer) {
    console.log("test running of " + programmer.id);

    // Serial Port Selector
    // NEW VERSION for SPJS v1.7 http://jsfiddle.net/chilipeppr/vetj5fvx/
    var testSpjsDiv = $("<div></div>").attr("id", "com-chilipeppr-serialport-spselector-test");
    $('body').append(testSpjsDiv);
    chilipeppr.load("#com-chilipeppr-serialport-spselector-test",
        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",

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

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg", 115200); //, "tinyg or tinygg2");
            sp.consoleToggle();
            // now show the modal popup
            programmer.init();
            
            setTimeout(function() {
            programmer.show();
            /*programmer.show({
                port: '/dev/ttyACM2',
                device: 'arduino_due_x',
                url: 'http://synthetos.github.io/g2/blahblah.bin'
            });*/
            }, 3000);
            
        });
    });
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-programmer", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-programmer",
        url: "http://jsfiddle.net/chilipeppr/qcduvhkh/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/qcduvhkh/",
        name: "Widget / Programmer",
        desc: "This widget lets you program your Arduino/Atmel from within ChiliPeppr using SPJS's new programfromurl method.",
        publish: {},
        subscribe: {},
        foreignPublish: {
            "/com-chilipeppr-widget-serialport/send": "We send to the serial port certain commands like the initial configuration commands for the TinyG to be in the correct mode and to get initial statuses like planner buffers...