Work in progress aux configuration ranges.
Dominic Clifton
parent
875a81e11d
commit
e892cbdbad
|
|
@ -0,0 +1,311 @@
|
|||
/*jslint browser: true */
|
||||
/*jslint white: true */
|
||||
|
||||
(function( $ ){
|
||||
|
||||
'use strict';
|
||||
|
||||
// Helpers
|
||||
|
||||
// Test in an object is an instance of jQuery or Zepto.
|
||||
function isInstance ( a ) {
|
||||
return a instanceof $ || ( $.zepto && $.zepto.isZ(a) );
|
||||
}
|
||||
|
||||
|
||||
// Link types
|
||||
|
||||
function fromPrefix ( target, method ) {
|
||||
|
||||
// If target is a string, a new hidden input will be created.
|
||||
if ( typeof target === 'string' && target.indexOf('-inline-') === 0 ) {
|
||||
|
||||
// By default, use the 'html' method.
|
||||
this.method = method || 'html';
|
||||
|
||||
// Use jQuery to create the element
|
||||
this.target = this.el = $( target.replace('-inline-', '') || '<div/>' );
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function fromString ( target ) {
|
||||
|
||||
// If the string doesn't begin with '-', which is reserved, add a new hidden input.
|
||||
if ( typeof target === 'string' && target.indexOf('-') !== 0 ) {
|
||||
|
||||
this.method = 'val';
|
||||
|
||||
var element = document.createElement('input');
|
||||
element.name = target;
|
||||
element.type = 'hidden';
|
||||
this.target = this.el = $(element);
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function fromFunction ( target ) {
|
||||
|
||||
// The target can also be a function, which will be called.
|
||||
if ( typeof target === 'function' ) {
|
||||
this.target = false;
|
||||
this.method = target;
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function fromInstance ( target, method ) {
|
||||
|
||||
if ( isInstance( target ) && !method ) {
|
||||
|
||||
// If a jQuery/Zepto input element is provided, but no method is set,
|
||||
// the element can assume it needs to respond to 'change'...
|
||||
if ( target.is('input, select, textarea') ) {
|
||||
|
||||
// Default to .val if this is an input element.
|
||||
this.method = 'val';
|
||||
|
||||
// Fire the API changehandler when the target changes.
|
||||
this.target = target.on('change.liblink', this.changeHandler);
|
||||
|
||||
} else {
|
||||
|
||||
this.target = target;
|
||||
|
||||
// If no method is set, and we are not auto-binding an input, default to 'html'.
|
||||
this.method = 'html';
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function fromInstanceMethod ( target, method ) {
|
||||
|
||||
// The method must exist on the element.
|
||||
if ( isInstance( target ) &&
|
||||
(typeof method === 'function' ||
|
||||
(typeof method === 'string' && target[method]))
|
||||
) {
|
||||
this.method = method;
|
||||
this.target = target;
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
var
|
||||
/** @const */
|
||||
creationFunctions = [fromPrefix, fromString, fromFunction, fromInstance, fromInstanceMethod];
|
||||
|
||||
|
||||
// Link Instance
|
||||
|
||||
/** @constructor */
|
||||
function Link ( target, method, format ) {
|
||||
|
||||
var that = this, valid = false;
|
||||
|
||||
// Forward calls within scope.
|
||||
this.changeHandler = function ( changeEvent ) {
|
||||
var decodedValue = that.formatInstance.from( $(this).val() );
|
||||
|
||||
// If the value is invalid, stop this event, as well as it's propagation.
|
||||
if ( decodedValue === false || isNaN(decodedValue) ) {
|
||||
|
||||
// Reset the value.
|
||||
$(this).val(that.lastSetValue);
|
||||
return false;
|
||||
}
|
||||
|
||||
that.changeHandlerMethod.call( '', changeEvent, decodedValue );
|
||||
};
|
||||
|
||||
// See if this Link needs individual targets based on its usage.
|
||||
// If so, return the element that needs to be copied by the
|
||||
// implementing interface.
|
||||
// Default the element to false.
|
||||
this.el = false;
|
||||
|
||||
// Store the formatter, or use the default.
|
||||
this.formatInstance = format;
|
||||
|
||||
// Try all Link types.
|
||||
/*jslint unparam: true*/
|
||||
$.each(creationFunctions, function(i, fn){
|
||||
valid = fn.call(that, target, method);
|
||||
return !valid;
|
||||
});
|
||||
/*jslint unparam: false*/
|
||||
|
||||
// Nothing matched, throw error.
|
||||
if ( !valid ) {
|
||||
throw new RangeError("(Link) Invalid Link.");
|
||||
}
|
||||
}
|
||||
|
||||
// Provides external items with the object value.
|
||||
Link.prototype.set = function ( value ) {
|
||||
|
||||
// Ignore the value, so only the passed-on arguments remain.
|
||||
var args = Array.prototype.slice.call( arguments ),
|
||||
additionalArgs = args.slice(1);
|
||||
|
||||
// Store some values. The actual, numerical value,
|
||||
// the formatted value and the parameters for use in 'resetValue'.
|
||||
// Slice additionalArgs to break the relation.
|
||||
this.lastSetValue = this.formatInstance.to( value );
|
||||
|
||||
// Prepend the value to the function arguments.
|
||||
additionalArgs.unshift(
|
||||
this.lastSetValue
|
||||
);
|
||||
|
||||
// When target is undefined, the target was a function.
|
||||
// In that case, provided the object as the calling scope.
|
||||
// Branch between writing to a function or an object.
|
||||
( typeof this.method === 'function' ?
|
||||
this.method :
|
||||
this.target[ this.method ] ).apply( this.target, additionalArgs );
|
||||
};
|
||||
|
||||
|
||||
// Developer API
|
||||
|
||||
/** @constructor */
|
||||
function LinkAPI ( origin ) {
|
||||
this.items = [];
|
||||
this.elements = [];
|
||||
this.origin = origin;
|
||||
}
|
||||
|
||||
LinkAPI.prototype.push = function( item, element ) {
|
||||
this.items.push(item);
|
||||
|
||||
// Prevent 'false' elements
|
||||
if ( element ) {
|
||||
this.elements.push(element);
|
||||
}
|
||||
};
|
||||
|
||||
LinkAPI.prototype.reconfirm = function ( flag ) {
|
||||
var i;
|
||||
for ( i = 0; i < this.elements.length; i += 1 ) {
|
||||
this.origin.LinkConfirm(flag, this.elements[i]);
|
||||
}
|
||||
};
|
||||
|
||||
LinkAPI.prototype.remove = function ( flag ) {
|
||||
var i;
|
||||
for ( i = 0; i < this.items.length; i += 1 ) {
|
||||
this.items[i].target.off('.liblink');
|
||||
}
|
||||
for ( i = 0; i < this.elements.length; i += 1 ) {
|
||||
this.elements[i].remove();
|
||||
}
|
||||
};
|
||||
|
||||
LinkAPI.prototype.change = function ( value ) {
|
||||
|
||||
if ( this.origin.LinkIsEmitting ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.origin.LinkIsEmitting = true;
|
||||
|
||||
var args = Array.prototype.slice.call( arguments, 1 ), i;
|
||||
args.unshift( value );
|
||||
|
||||
// Write values to serialization Links.
|
||||
// Convert the value to the correct relative representation.
|
||||
for ( i = 0; i < this.items.length; i += 1 ) {
|
||||
this.items[i].set.apply(this.items[i], args);
|
||||
}
|
||||
|
||||
this.origin.LinkIsEmitting = false;
|
||||
};
|
||||
|
||||
|
||||
// jQuery plugin
|
||||
|
||||
function binder ( flag, target, method, format ){
|
||||
|
||||
if ( flag === 0 ) {
|
||||
flag = this.LinkDefaultFlag;
|
||||
}
|
||||
|
||||
// Create a list of API's (if it didn't exist yet);
|
||||
if ( !this.linkAPI ) {
|
||||
this.linkAPI = {};
|
||||
}
|
||||
|
||||
// Add an API point.
|
||||
if ( !this.linkAPI[flag] ) {
|
||||
this.linkAPI[flag] = new LinkAPI(this);
|
||||
}
|
||||
|
||||
var linkInstance = new Link ( target, method, format || this.LinkDefaultFormatter );
|
||||
|
||||
// Default the calling scope to the linked object.
|
||||
if ( !linkInstance.target ) {
|
||||
linkInstance.target = $(this);
|
||||
}
|
||||
|
||||
// If the Link requires creation of a new element,
|
||||
// Pass the element and request confirmation to get the changehandler.
|
||||
// Set the method to be called when a Link changes.
|
||||
linkInstance.changeHandlerMethod = this.LinkConfirm( flag, linkInstance.el );
|
||||
|
||||
// Store the linkInstance in the flagged list.
|
||||
this.linkAPI[flag].push( linkInstance, linkInstance.el );
|
||||
|
||||
// Now that Link have been connected, request an update.
|
||||
this.LinkUpdate( flag );
|
||||
}
|
||||
|
||||
/** @export */
|
||||
$.fn.Link = function( flag ){
|
||||
|
||||
var that = this;
|
||||
|
||||
// Delete all linkAPI
|
||||
if ( flag === false ) {
|
||||
|
||||
return that.each(function(){
|
||||
|
||||
// .Link(false) can be called on elements without Links.
|
||||
// When that happens, the objects can't be looped.
|
||||
if ( !this.linkAPI ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.map(this.linkAPI, function(api){
|
||||
api.remove();
|
||||
});
|
||||
|
||||
delete this.linkAPI;
|
||||
});
|
||||
}
|
||||
|
||||
if ( flag === undefined ) {
|
||||
|
||||
flag = 0;
|
||||
|
||||
} else if ( typeof flag !== 'string') {
|
||||
|
||||
throw new Error("Flag must be string.");
|
||||
}
|
||||
|
||||
return {
|
||||
to: function( a, b, c ){
|
||||
return that.each(function(){
|
||||
binder.call(this, flag, a, b, c);
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
}( window.jQuery || window.Zepto ));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
|||
/*! noUiSlider - 7.0.9 - 2014-10-08 16:49:45 */
|
||||
|
||||
|
||||
.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-user-select:none;-ms-touch-action:none;-ms-user-select:none;-moz-user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base{width:100%;height:100%;position:relative}.noUi-origin{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-handle{position:relative;z-index:1}.noUi-stacking .noUi-handle{z-index:10}.noUi-state-tap .noUi-origin{-webkit-transition:left .3s,top .3s;transition:left .3s,top .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-background{background:#FAFAFA;box-shadow:inset 0 1px 1px #f0f0f0}.noUi-connect{background:#3FB8AF;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-origin{border-radius:2px}.noUi-target{border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-target.noUi-connect{box-shadow:inset 0 0 3px rgba(51,51,51,.45),0 3px 6px -5px #BBB}.noUi-dragable{cursor:w-resize}.noUi-vertical .noUi-dragable{cursor:n-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect,[disabled].noUi-connect{background:#B8B8B8}[disabled] .noUi-handle{cursor:not-allowed}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*! noUiSlider - 7.0.9 - 2014-10-08 16:49:45 */
|
||||
|
||||
|
||||
.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;font:400 12px Arial;color:#999}.noUi-value{width:40px;position:absolute;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:50px;top:100%;left:0;width:100%}.noUi-value-horizontal{margin-left:-20px;padding-top:20px}.noUi-value-horizontal.noUi-value-sub{padding-top:15px}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{width:15px;margin-left:20px;margin-top:-5px}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}
|
||||
|
|
@ -5,6 +5,8 @@
|
|||
<meta name="author" content="cTn" />
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="./main.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css" rel="stylesheet">
|
||||
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css" rel="stylesheet">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/default.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/initial_setup.css" media="all" />
|
||||
|
|
@ -22,6 +24,7 @@
|
|||
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
|
||||
<script type="text/javascript" src="./js/port_handler.js"></script>
|
||||
<script type="text/javascript" src="./js/port_usage.js"></script>
|
||||
<script type="text/javascript" src="./js/serial.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,156 @@
|
|||
.tab-auxiliary_configuration {
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes th, .tab-auxiliary_configuration .boxes td {
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
|
||||
border: 1px solid #8b8b8b;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .heads {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .main {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .name {
|
||||
text-align: center;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .on {
|
||||
color: white;
|
||||
background-color: #0d8b13;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .off {
|
||||
color: white;
|
||||
background-color: #be2222;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes td input {
|
||||
position: absolute;
|
||||
.tab-auxiliary_configuration .help {
|
||||
padding: 10px;
|
||||
background-color: #ffcb18;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
margin-top: -6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .switches:nth-child(odd) {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-auxiliary_configuration .boxes .heads th:first-child {
|
||||
border: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.tab-auxiliary_configuration .buttons {
|
||||
width: calc(100% - 20px);
|
||||
#templates {
|
||||
display: none;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.tab-auxiliary_configuration .update {
|
||||
display: block;
|
||||
float: right;
|
||||
.tab-auxiliary_configuration .modes {
|
||||
width: 100%;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
.tab-auxiliary_configuration .mode {
|
||||
background-color: #ececec;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
padding: 0 15px 0 15px;
|
||||
.tab-auxiliary_configuration .mode:nth-child(odd) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
.tab-auxiliary_configuration .mode .name {
|
||||
min-height: 50px;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-auxiliary_configuration .update:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
.tab-auxiliary_configuration .mode.on .info {
|
||||
background-color: #0fab16;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode.off .info {
|
||||
background-color: #ab150f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .info {
|
||||
text-align: center;
|
||||
width: 10%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .info .name {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .info .buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .info .buttons a {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .ranges {
|
||||
margin: 10px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
padding-top: 8px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range > .buttons {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range > .buttons .a {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range:nth-child(odd) {
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .range .channelInfo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
max-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .mode .range .channelInfo .limits {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range .channel {
|
||||
outline: 1px solid silver;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range .marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 27px;
|
||||
background-color: #0fab16;
|
||||
height: 13px;
|
||||
width: 6px;
|
||||
outline: 1px solid #0fab16;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .range .channel-slider {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 85%;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .channel-slider {
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .channel-slider .noUi-connect {
|
||||
background: #0fab16;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration > .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
margin-top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration > .buttons a {
|
||||
float: right;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 15px 0 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .buttons a {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.tab-auxiliary_configuration .buttons a:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
|
|
@ -1,4 +1,13 @@
|
|||
<div class="tab-auxiliary_configuration">
|
||||
<div class="help">
|
||||
<p>Use ranges to define the switches on your transmitter and corresponding mode assignments. A receiver channel that gives a reading between a range min/max will activate the mode. Remember to save your settings using the Save button.</p>
|
||||
</div>
|
||||
<table class="modes">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- templates -->
|
||||
|
||||
<table class="boxes">
|
||||
<tr class="heads">
|
||||
<th style="width: 18%"></th>
|
||||
|
|
@ -8,6 +17,39 @@
|
|||
</tr>
|
||||
</table>
|
||||
<div class="buttons">
|
||||
<a class="update" href="#" i18n="auxiliaryButtonSave"></a>
|
||||
<a class="save" href="#" i18n="auxiliaryButtonSave"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templates">
|
||||
<table class="modes">
|
||||
<tbody>
|
||||
<tr class="mode">
|
||||
<td class="info">
|
||||
<p class="name">ARM</p>
|
||||
<div class="buttons">
|
||||
<a class="addRange" href="#">Add Range</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="ranges">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="range">
|
||||
<div class="channelInfo">
|
||||
<select class="channel">
|
||||
<option value=""></option>
|
||||
</select>
|
||||
<div class="limits">
|
||||
<p class="lowerLimit">Min: <span class="lowerLimitValue"></span></p>
|
||||
<p class="upperLimit">Max: <span class="upperLimitValue"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channel-slider pips-channel-range">
|
||||
<div class="marker"></div>
|
||||
</div>
|
||||
<div class="buttons"><a class="deleteRange" href="#">X</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ TABS.auxiliary_configuration.initialize = function (callback) {
|
|||
GUI.active_tab_ref = this;
|
||||
GUI.active_tab = 'auxiliary_configuration';
|
||||
googleAnalytics.sendAppView('Auxiliary Configuration');
|
||||
|
||||
|
||||
function get_box_data() {
|
||||
MSP.send_message(MSP_codes.MSP_BOX, false, false, get_box_ids);
|
||||
}
|
||||
|
|
@ -25,7 +25,111 @@ TABS.auxiliary_configuration.initialize = function (callback) {
|
|||
|
||||
MSP.send_message(MSP_codes.MSP_BOXNAMES, false, false, get_box_data);
|
||||
|
||||
function createMode(modeIndex) {
|
||||
var modeTemplate = $('#templates .mode');
|
||||
var newMode = modeTemplate.clone();
|
||||
|
||||
var modeName = AUX_CONFIG[modeIndex];
|
||||
$(newMode).attr('id', 'mode-' + modeIndex);
|
||||
$(newMode).find('.name').text(modeName);
|
||||
|
||||
$(newMode).data('index', modeIndex);
|
||||
|
||||
$(newMode).find('.name').data('modeElement', newMode);
|
||||
$(newMode).find('a.addRange').data('modeElement', newMode);
|
||||
|
||||
return newMode;
|
||||
}
|
||||
|
||||
function configureRangeTemplate(auxChannelCount) {
|
||||
|
||||
var rangeTemplate = $('#templates .range');
|
||||
|
||||
var channelList = $(rangeTemplate).find('.channel');
|
||||
var channelOptionTemplate = $(channelList).find('option');
|
||||
channelOptionTemplate.remove();
|
||||
for (var channelIndex = 0; channelIndex < auxChannelCount; channelIndex++) {
|
||||
var channelOption = channelOptionTemplate.clone();
|
||||
channelOption.text('AUX ' + (channelIndex + 1));
|
||||
channelOption.val(channelIndex);
|
||||
channelList.append(channelOption);
|
||||
}
|
||||
channelList.select(0);
|
||||
}
|
||||
|
||||
function addRangeToMode(modeElement) {
|
||||
|
||||
var modeIndex = $(modeElement).data('index');
|
||||
|
||||
var channel_range = {
|
||||
'min': [ 900 ],
|
||||
'max': [ 2100 ]
|
||||
};
|
||||
|
||||
var rangeIndex = $(modeElement).find('.range').length;
|
||||
|
||||
var range = $('#templates .range').clone();
|
||||
range.attr('id', 'mode-' + modeIndex + '-range-' + rangeIndex);
|
||||
modeElement.find('.ranges').append(range);
|
||||
|
||||
$(range).find('.channel-slider').noUiSlider({
|
||||
start: [ 1400, 1600 ],
|
||||
behaviour: 'snap-drag',
|
||||
step: 25,
|
||||
connect: true,
|
||||
range: channel_range,
|
||||
format: wNumb({
|
||||
decimals: 0,
|
||||
})
|
||||
});
|
||||
|
||||
var elementName = '#mode-' + modeIndex + '-range-' + rangeIndex;
|
||||
$(elementName + ' .channel-slider').Link('lower').to($(elementName + ' .lowerLimitValue'));
|
||||
$(elementName + ' .channel-slider').Link('upper').to($(elementName + ' .upperLimitValue'));
|
||||
|
||||
$(range).find(".pips-channel-range").noUiSlider_pips({
|
||||
mode: 'values',
|
||||
values: [900, 1000, 1200, 1400, 1500, 1600, 1800, 2000, 2100],
|
||||
density: 4,
|
||||
stepped: true
|
||||
});
|
||||
|
||||
$(range).find('.deleteRange').data('rangeElement', range);
|
||||
|
||||
$(range).find('a.deleteRange').click(function () {
|
||||
var rangeElement = $(this).data('rangeElement');
|
||||
rangeElement.remove();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function process_html() {
|
||||
|
||||
$('.boxes').hide();
|
||||
|
||||
var auxChannelCount = RC.active_channels - 4;
|
||||
|
||||
|
||||
|
||||
configureRangeTemplate(auxChannelCount);
|
||||
|
||||
|
||||
var modeTableBodyElement = $('.tab-auxiliary_configuration .modes tbody')
|
||||
for (var modeIndex = 0; modeIndex < AUX_CONFIG.length; modeIndex++) {
|
||||
|
||||
var newMode = createMode(modeIndex);
|
||||
modeTableBodyElement.append(newMode);
|
||||
|
||||
if (AUX_CONFIG_values[modeIndex] > 0) {
|
||||
$('.mode .name').eq(modeIndex).data('modeElement').addClass('off');
|
||||
}
|
||||
}
|
||||
|
||||
$('a.addRange').click(function () {
|
||||
var modeElement = $(this).data('modeElement');
|
||||
addRangeToMode(modeElement);
|
||||
});
|
||||
|
||||
// generate heads according to RC count
|
||||
var table_head = $('table.boxes .heads');
|
||||
var main_head = $('table.boxes .main');
|
||||
|
|
@ -79,57 +183,16 @@ TABS.auxiliary_configuration.initialize = function (callback) {
|
|||
}
|
||||
|
||||
// UI Hooks
|
||||
$('a.update').click(function () {
|
||||
// catch the input changes
|
||||
var main_needle = 0;
|
||||
var needle = 0;
|
||||
$('a.save').click(function () {
|
||||
|
||||
var auxChannelCount = RC.active_channels - 4;
|
||||
// TODO update internal data structures based on current UI elements
|
||||
|
||||
// TODO send data to FC
|
||||
|
||||
var boxCountFor4AuxChannels = 3 * 4;
|
||||
var boxCountPerLine = auxChannelCount * 3;
|
||||
if (bit_check(CONFIG.capability, 5) && (auxChannelCount) > 4) {
|
||||
boxCountPerLine = boxCountFor4AuxChannels * 2;
|
||||
}
|
||||
|
||||
AUX_CONFIG_values[main_needle] = 0;
|
||||
$('.boxes input').each(function () {
|
||||
if (needle == 0) {
|
||||
AUX_CONFIG_values[main_needle] = 0;
|
||||
}
|
||||
|
||||
var bitIndex = needle;
|
||||
if (bit_check(CONFIG.capability, 5) && needle >= boxCountFor4AuxChannels) {
|
||||
bitIndex += 4; // 0-11 bits for aux 1-4, 16-27 for aux 5-8
|
||||
}
|
||||
|
||||
if ($(this).is(':checked')) {
|
||||
AUX_CONFIG_values[main_needle] = bit_set(AUX_CONFIG_values[main_needle], bitIndex);
|
||||
} else {
|
||||
AUX_CONFIG_values[main_needle] = bit_clear(AUX_CONFIG_values[main_needle], bitIndex);
|
||||
}
|
||||
|
||||
needle++;
|
||||
|
||||
if (needle >= boxCountPerLine) {
|
||||
main_needle++;
|
||||
needle = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// send over data
|
||||
// current code will only handle 4 AUX as the variable length is 16bits
|
||||
/* snippets of old code that might be useful...
|
||||
var AUX_val_buffer_out = [];
|
||||
for (var i = 0; i < AUX_CONFIG_values.length; i++) {
|
||||
AUX_val_buffer_out.push(lowByte(AUX_CONFIG_values[i] & 0xFFF));
|
||||
AUX_val_buffer_out.push(highByte(AUX_CONFIG_values[i] & 0xFFF));
|
||||
}
|
||||
if (bit_check(CONFIG.capability, 5) && auxChannelCount > 4) {
|
||||
for (var i = 0; i < AUX_CONFIG_values.length; i++) {
|
||||
AUX_val_buffer_out.push(lowByte((AUX_CONFIG_values[i] >> 16) & 0xFFF));
|
||||
AUX_val_buffer_out.push(highByte((AUX_CONFIG_values[i] >> 16) & 0xFFF));
|
||||
}
|
||||
}
|
||||
AUX_val_buffer_out.push(lowByte(0xFFFF));
|
||||
AUX_val_buffer_out.push(highByte(0xFFFF));
|
||||
|
||||
MSP.send_message(MSP_codes.MSP_SET_BOX, AUX_val_buffer_out, false, save_to_eeprom);
|
||||
|
||||
|
|
@ -138,25 +201,27 @@ TABS.auxiliary_configuration.initialize = function (callback) {
|
|||
GUI.log(chrome.i18n.getMessage('auxiliaryEepromSaved'));
|
||||
});
|
||||
}
|
||||
*/
|
||||
});
|
||||
|
||||
// val = channel value
|
||||
// aux_num = position of corresponding aux channel in the html table
|
||||
var switches_e = $('table.boxes .switches');
|
||||
function box_highlight(aux_num, val) {
|
||||
var pos = 0; // < 1300
|
||||
|
||||
if (val > 1300 && val < 1700) {
|
||||
pos = 1;
|
||||
} else if (val > 1700) {
|
||||
pos = 2;
|
||||
|
||||
function box_highlight(auxChannelIndex, channelPosition) {
|
||||
if (channelPosition < 900) {
|
||||
channelPosition = 900;
|
||||
} else if (channelPosition > 2100) {
|
||||
channelPosition = 2100;
|
||||
}
|
||||
|
||||
var highlight_column = (aux_num * 3) + pos + 2; // +2 to skip name column and index starting on 1 instead of 0
|
||||
var erase_columns = (aux_num * 3) + 2;
|
||||
|
||||
$('td:nth-child(n+' + erase_columns + '):nth-child(-n+' + (erase_columns + 2) + ')', switches_e).css('background-color', 'transparent');
|
||||
$('td:nth-child(' + highlight_column + ')', switches_e).css('background-color', 'orange');
|
||||
var percentage = (channelPosition - 900) / (2100-900) * 100;
|
||||
|
||||
$('.modes .ranges .range').each( function () {
|
||||
var auxChannelCandidateIndex = $(this).find('.channel').val();
|
||||
if (auxChannelCandidateIndex != auxChannelIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).find('.marker').css('left', percentage + '%');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// data pulling functions used inside interval timer
|
||||
|
|
@ -166,19 +231,20 @@ TABS.auxiliary_configuration.initialize = function (callback) {
|
|||
|
||||
function update_ui() {
|
||||
for (var i = 0; i < AUX_CONFIG.length; i++) {
|
||||
if (bit_check(CONFIG.mode, i)) {
|
||||
$('td.name').eq(i).addClass('on').removeClass('off');
|
||||
} else {
|
||||
$('td.name').eq(i).removeClass('on').removeClass('off');
|
||||
|
||||
if (AUX_CONFIG_values[i] > 0) {
|
||||
$('td.name').eq(i).addClass('off');
|
||||
}
|
||||
if (AUX_CONFIG_values[i] == 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (bit_check(CONFIG.mode, i)) {
|
||||
$('.mode .name').eq(i).data('modeElement').addClass('on').removeClass('off');
|
||||
} else {
|
||||
$('.mode .name').eq(i).data('modeElement').removeClass('on').addClass('off');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for (var i = 0; i < (RC.active_channels - 4); i++) {
|
||||
var auxChannelCount = RC.active_channels - 4;
|
||||
|
||||
for (var i = 0; i < (auxChannelCount); i++) {
|
||||
box_highlight(i, RC.channels[i + 4]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue