Widget / Configure TinyG

This widget helps configure the TinyG

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 id="com-chilipeppr-widget-configtinyg" class="modal fade">
    <div id="com-chilipeppr-widget-configtinyg-main" ng-controller="mainTabs" class="modal-dialog modal-lg hidden">
        <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.8<br/></span>  
				<span>Hardware Platform Version:  {{platform}}</span>  
				<span style="font-size:9px;" class="fb-build"></span>
            </div>
            <div class="modal-body">
				<ul class="nav nav-tabs" role="tablist">
					<li ng-repeat="mainTab in settings" ng-class="{active: $first}">
						<a href="{{getHref(mainTab.collection_name)}}" role="tab" data-toggle="tab">{{mainTab.collection_name}}</a>
					</li>
				</ul>
				<div class="tab-content">
					<div ng-repeat="mainTab in settings" class="tab-pane" ng-class="{active: $first}" id="{{getID(mainTab.collection_name)}}">
						<div class="panel-body">
							<ul class="nav nav-tabs" role="tablist">
								<li ng-repeat="subTab in mainTab.iterations" ng-class="{active: $first}" >
									<a href="{{getHref(subTab.Name)}}" role="tab" data-toggle="tab">{{subTab.Name}}</a>
								</li>
							</ul>
							<div class="tab-content">
								<div ng-repeat="subTab in mainTab.iterations"...

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 (ls) {
    console.log("test running of " + ls.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);
        });
    });
	ls.initComms();
} /*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",
        publish: {},
        subscribe: {},
        foreignPublish: {
            "/com-chilipeppr-widget-serialport/send": "We send to the serial...