Dynamic UI Settings Generation

This widget helps configure the TinyG using json to build the UI. This is a test.

by Kevin Hauser

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 ng-controller="tgSettingsController" id="com-chilipeppr-widget-configtinyg" class="modal fade">
    <div class="modal-dialog modal-lg">
        <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">Configure TinyG v0.7 {{testAngularLoaded}}</span>  <span style="font-size:9px;" class="fb-build"></span> <button type="button" ng-click="updateSettingsJSON()" class="btn btn-danger">Update JSON</button>

            </div>
            <div class="modal-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#configtinyg-Motors" role="tab" data-toggle="tab">Motors</a>

                    </li>
                    <li><a href="#configtinyg-Axis" role="tab" data-toggle="tab">Axis</a>

                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="configtinyg-Motors">
                        <div class="panel-body">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a href="#configtinyg-Motors-1" role="tab" data-toggle="tab">Motor 1</a>

                              ...

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
#com-chilipeppr-widget-configtinyg .nav-tabs>li>a {
    padding: 2px 6px;
}
#com-chilipeppr-widget-configtinyg .tab-pane {
    padding:10px 16px 20px 16px;
    overflow:auto;
}
#com-chilipeppr-widget-configtinyg .panel-footer {
    font-size:11px;
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-configtinyg .col-xs-3 {
    padding:0;
    margin:0;
}
#com-chilipeppr-widget-configtinyg .progress-bar span {
    color: black;
    padding-left:4px;
}
#com-chilipeppr-widget-configtinyg .stat-val {
    padding-left:4px;
}
}

JavaScript

requirejs.config({
    paths: {
        angularjs: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular',
        angularStrap: 'http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap',
        angularStrapTpl: 'http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl',
        angularAnimate: 'http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate'
    },
    shim: {
        'angularStrap': {
            deps: ['angularjs'],
        },
            'angularAnimate': {
            deps: ['angularjs'],
        },
            'angularStrapTpl': {
            deps: ['angularjs', 'angularStrap'],
        },
    }
});



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

    // Serial Port Selector
    // http://jsfiddle.net/chilipeppr/4RgrS/
    // NEW VERSION for SPJS v1.7 http://jsfiddle.net/chilipeppr/vetj5fvx/
    chilipeppr.load("com-chilipeppr-serialport-spselector",
        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",



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

        function (sp) {
            sp.setSingleSelectMode();
            sp.init(null, "tinyg", 115200);
            setTimeout(function () {
                myTinygSettingsWidget.init()
            }, 2000);
        });
    });



} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-configtinyg", ["chilipeppr_ready", "angularjs", "angularAnimate", "angularStrap", "angularStrapTpl"], function (cp) {
    return {
        id: "com-chilipeppr-widget-configtinyg",
        url: "http://jsfiddle.net/khauser/vc1vd3n5/show/light/",
        fiddleurl: "http://jsfiddle.net/khauser/vc1vd3n5/",
        name: "Widget / Configure TinyG",
        desc: "This widget helps configure the TinyG",
       ...