Merge branch 'led-strip' into development

10.3.x-maintenance
Dominic Clifton 2015-01-16 17:24:13 +00:00
commit f480e05027
13 changed files with 765 additions and 20 deletions

View File

@ -83,6 +83,9 @@
"tabMotorTesting": {
"message": "Motors"
},
"tabLedStrip": {
"message": "LED Strip"
},
"tabRawSensorData": {
"message": "Sensors"
},
@ -941,5 +944,15 @@
},
"firmwareFlasherWaitForFinish": {
"message": "You <span style=\"color: red\">can't</span> do this right now, please wait for current operation to finish ..."
},
"ledStripHelp": {
"message": "The flight controller can control colors and effects of individual LEDs on a strip.<br />Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions."
},
"ledStripButtonSave": {
"message": "Save"
},
"ledStripEepromSaved": {
"message": "EEPROM <span style=\"color: green\">saved</span>"
}
}

View File

@ -39,6 +39,9 @@ var BF_CONFIG = {
currentoffset: 0
};
var LED_STRIP = [];
var PID_names = [];
var PIDs = new Array(10);
for (var i = 0; i < 10; i++) {

13
js/libraries/jquery-ui-1.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

102
js/msp.js
View File

@ -13,6 +13,8 @@ var MSP_codes = {
MSP_SET_CHANNEL_FORWARDING: 33,
MSP_MODE_RANGES: 34,
MSP_SET_MODE_RANGE: 35,
MSP_LED_STRIP_CONFIG: 48,
MSP_SET_LED_STRIP_CONFIG: 49,
MSP_ADJUSTMENT_RANGES: 52,
MSP_SET_ADJUSTMENT_RANGE: 53,
MSP_CF_SERIAL_CONFIG: 54,
@ -91,6 +93,9 @@ var MSP = {
callbacks: [],
packet_error: 0,
ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
ledFunctionLetters: ['i', 'w', 'f', 'a', 't'], // in LSB bit order
read: function (readInfo) {
var data = new Uint8Array(readInfo.data);
@ -612,12 +617,57 @@ var MSP = {
}
break;
case MSP_codes.MSP_LED_STRIP_CONFIG:
LED_STRIP = [];
var ledCount = data.byteLength / 6; // v1.4.0 and below incorrectly reported 4 bytes per led.
var offset = 0;
for (var i = 0; offset < data.byteLength && i < ledCount; i++) {
var directionMask = data.getUint16(offset, 1);
offset += 2;
var directions = [];
for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
if (bit_check(directionMask, directionLetterIndex)) {
directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
}
}
var functionMask = data.getUint16(offset, 1);
offset += 2;
var functions = [];
for (var functionLetterIndex = 0; functionLetterIndex < MSP.ledFunctionLetters.length; functionLetterIndex++) {
if (bit_check(functionMask, functionLetterIndex)) {
functions.push(MSP.ledFunctionLetters[functionLetterIndex]);
}
}
var led = {
directions: directions,
functions: functions,
x: data.getUint8(offset++, 1),
y: data.getUint8(offset++, 1)
};
LED_STRIP.push(led);
}
break;
case MSP_codes.MSP_SET_LED_STRIP_CONFIG:
console.log('Led strip config saved');
break;
case MSP_codes.MSP_SET_MODE_RANGE:
console.log('Mode range saved');
break;
case MSP_codes.MSP_SET_ADJUSTMENT_RANGE:
console.log('Adjustment range saved');
break;
default:
console.log('Unknown code detected: ' + code);
@ -875,7 +925,7 @@ MSP.crunch = function (code) {
buffer.push(specificByte(SERIAL_CONFIG.gpsPassthroughBaudRate, 2));
buffer.push(specificByte(SERIAL_CONFIG.gpsPassthroughBaudRate, 3));
break;
default:
return false;
}
@ -944,3 +994,53 @@ MSP.sendAdjustmentRanges = function(onCompleteCallback) {
}
};
MSP.sendLedStripConfig = function(onCompleteCallback) {
var nextFunction = send_next_led_strip_config;
var ledIndex = 0;
send_next_led_strip_config();
function send_next_led_strip_config() {
var led = LED_STRIP[ledIndex];
var buffer = [];
buffer.push(ledIndex);
var directionMask = 0;
for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
if (bitIndex >= 0) {
directionMask = bit_set(directionMask, bitIndex);
}
}
buffer.push(specificByte(directionMask, 0));
buffer.push(specificByte(directionMask, 1));
var functionMask = 0;
for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
if (bitIndex >= 0) {
functionMask = bit_set(functionMask, bitIndex);
}
}
buffer.push(specificByte(functionMask, 0));
buffer.push(specificByte(functionMask, 1));
buffer.push(led.x);
buffer.push(led.y);
// prepare for next iteration
ledIndex++;
if (ledIndex == LED_STRIP.length) {
nextFunction = onCompleteCallback;
}
MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_CONFIG, buffer, false, nextFunction);
}
}

View File

@ -18,6 +18,7 @@
<link type="text/css" rel="stylesheet" href="./tabs/servos.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/gps.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/motors.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/sensors.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
@ -28,6 +29,7 @@
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.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/libraries/three/three.min.js"></script>
@ -62,6 +64,7 @@
<script type="text/javascript" src="./tabs/servos.js"></script>
<script type="text/javascript" src="./tabs/gps.js"></script>
<script type="text/javascript" src="./tabs/motors.js"></script>
<script type="text/javascript" src="./tabs/led_strip.js"></script>
<script type="text/javascript" src="./tabs/sensors.js"></script>
<script type="text/javascript" src="./tabs/cli.js"></script>
<script type="text/javascript" src="./tabs/logging.js"></script>
@ -129,6 +132,7 @@
<li class="tab_servos"><a href="#" i18n="tabServos"></a></li>
<li class="tab_gps"><a href="#" i18n="tabGPS"></a></li>
<li class="tab_motors"><a href="#" i18n="tabMotorTesting"></a></li>
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip"></a></li>
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData"></a></li>
<li class="tab_logging"><a href="#" i18n="tabLogging"></a></li>
<li class="tab_cli"><a href="#" i18n="tabCLI"></a></li>

View File

@ -102,6 +102,9 @@ $(document).ready(function () {
case 'tab_ports':
TABS.ports.initialize(content_ready);
break;
case 'tab_led_strip':
TABS.led_strip.initialize(content_ready);
break;
case 'tab_setup':
TABS.setup.initialize(content_ready);

View File

@ -98,10 +98,7 @@
}
.tab-adjustments > .buttons {
width: calc(100% - 20px);
margin-top: 10px;
bottom: 10px;
}
.tab-adjustments > .buttons a {

View File

@ -139,10 +139,7 @@
}
.tab-auxiliary > .buttons {
width: calc(100% - 20px);
margin-top: 10px;
bottom: 10px;
}
.tab-auxiliary > .buttons a {

View File

@ -140,13 +140,6 @@
margin-left: 15px;
}
.tab-auxiliary > .buttons {
width: calc(100% - 20px);
margin-top: 10px;
bottom: 10px;
}
.tab-configuration .save {
display: block;
float: right;

282
tabs/led_strip.css Normal file
View File

@ -0,0 +1,282 @@
.tab-led-strip .help {
padding: 10px;
background-color: #ffcb18;
margin-bottom: 10px;
}
.tab-led-strip .section {
color: #565656;
margin: 20px 0 0 0;
border-bottom: 1px solid silver;
}
.tab-led-strip .mainGrid {
width: calc((30px + 8px) * 16);
height: calc((30px + 8px) * 16);
float: left;
margin-right: 10px;
}
.tab-led-strip .mainGrid .gPoint {
float: left;
border: solid 2px #ADADAD;
width: 28px;
height: 28px;
margin: 3px;
border-radius: 7px;
background: #ececec;;
cursor: pointer;
}
.tab-led-strip .gPoint.function-w { /* warning */
background: red;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: red;
}
.tab-led-strip .gPoint.function-f { /* flight mode & orientation */
background: rgb(50, 205, 50);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: rgb(50, 205, 50);
}
.tab-led-strip .gPoint.function-w.function-f {
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%);
}
.tab-led-strip .gPoint.function-i { /* indicator */
background: yellow;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: yellow;
}
.tab-led-strip .gPoint.function-a { /* Armed Mode */
background: rgb(52, 155, 255);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: rgb(52, 155, 255);
}
.tab-led-strip .gPoint.function-t { /* Armed Mode */
background: orange;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: orange;
}
.tab-led-strip .gPoint select {
background: #000;
width: 13px;
height: 13px;
}
.tab-led-strip .wire {
color: rgba(255,255,255,.5);
text-align: center;
font-size: 25px;
text-shadow: 1px 1px rgba(0,0,0,.4);
padding-top: 0px;
display: block;
font-family: monospace;
position: absolute;
margin-top: -32px;
width: 28px;
}
.gridWire .wire {
color: rgba(255,255,255,1);
}
.gridWire .gPoint {
background: #CAFFCD !important;
}
/*function buttons*/
.tab-led-strip button {
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
padding: 7px 7px;
margin: 3px 0;
}
.tab-led-strip button:hover {
background-color: #acacac;
}
.tab-led-strip .funcWire.btnOn {
background: rgb(15, 171, 22);
}
.tab-led-strip button.w100 {
width: 100%;
}
.tab-led-strip button.w50 {
width: 49%;
}
.tab-led-strip button.w33 {
width: 32%;
}
.tab-led-strip .functions .function-w.btnOn {background: red;}
.tab-led-strip .functions .function-f.btnOn {background: rgb(50, 205, 50);}
.tab-led-strip .functions .function-i.btnOn {background: yellow; color: #333;}
.tab-led-strip .functions .function-a.btnOn {background: blue;}
.tab-led-strip .functions .function-t.btnOn {background: orange;}
.tab-led-strip .directions .btnOn {background: #FFF; color: #000;}
.tab-led-strip .indicators {
position: relative;
height: 30px
}
.tab-led-strip .indicators span {
width: 0;
height: 0;
position: absolute;
display: none;
font-size: 10px;
font-weight: bold;
}
.tab-led-strip .indicators .north {
top: -4px;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(0,0,0,.8);
}
.tab-led-strip .indicators .south {
bottom: -2px;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid rgba(0,0,0,.8);
}
.tab-led-strip .indicators .east {
bottom: 8px;
right: -5px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid rgba(0,0,0,.8);
}
.tab-led-strip .indicators .west {
bottom: 8px;
left: -5px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid rgba(0,0,0,.8);
}
.tab-led-strip .indicators .up {
top: 0px;
left: 2px;
}
.tab-led-strip .indicators .down {
bottom: 17px;
right: 10px;
}
.tab-led-strip .dir-n .north {display: inline;}
.tab-led-strip .dir-s .south {display: inline;}
.tab-led-strip .dir-e .east {display: inline;}
.tab-led-strip .dir-w .west {display: inline;}
.tab-led-strip .dir-u .up {display: inline;}
.tab-led-strip .dir-d .down {display: inline;}
.tab-led-strip .controls {
position: relative;
float: left;
width: 290px;
height: calc((30px + 8px) * 16);
}
.tab-led-strip .directions {
width: 130px;
height: 100px;
position: relative;
}
.tab-led-strip .directions button {
position: absolute;
width: 30px;
height: 30px;
}
.tab-led-strip .directions .dir-n {top: 0; left: 32px;}
.tab-led-strip .directions .dir-s {bottom: 0; left: 32px;}
.tab-led-strip .directions .dir-e {left: 64px; top: 32px;}
.tab-led-strip .directions .dir-w {left: 0; top: 32px;}
.tab-led-strip .directions .dir-u {right: 0; top: 15px;}
.tab-led-strip .directions .dir-d {right: 0; bottom: 15px;}
.tab-led-strip .wires-remaining {
float: right;
text-align: center;
font-size: 14px;
}
.tab-led-strip .wires-remaining div {
font-size: 40px;
color: #7AAE2D;
font-family: monospace;
}
.tab-led-strip .wires-remaining.error div {
color: #FF5700;
}
/*******JQUERYUI**********/
.tab-led-strip .ui-selected {
box-shadow: inset 0 0 30px rgba(255, 255, 255, 1) !important;
}
.tab-led-strip .ui-selecting {
box-shadow: inset 0 0 30px rgba(255, 255, 255, .7) !important;
border: solid 2px #000 !important;
}
.tab-led-strip .ui-selectable-helper {
background: rgba(0,0,0,.4);
position: absolute;
z-index: 100;
border: 1px dotted white;
}
.tab-led-strip > .buttons {
margin-top: 10px;
}
.tab-led-strip .save {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-led-strip.save:hover {
background-color: #dedcdc;
}

46
tabs/led_strip.html Normal file
View File

@ -0,0 +1,46 @@
<div class="tab-led-strip">
<div class="help">
<p i18n="ledStripHelp"></p>
</div>
<div class="mainGrid"></div>
<div class="controls">
<div class="wires-remaining"><div></div>Remaining</div>
<button class="funcClear">Clear selected</button>
<div class="section">LED Functions</div>
<div class="functions">
<button class="function-w w50">Warnings</button>
<button class="function-f w50">Flight &amp; Orientation</button><br>
<button class="function-i w33">Indicator</button>
<button class="function-a w33">Arm State</button>
<button class="function-t w33">Thrust</button>
</div>
<div class="section">LED Orientation</div>
<div class="directions">
<button class="dir-n">N</button>
<button class="dir-e">E</button>
<button class="dir-s">S</button>
<button class="dir-w">W</button>
<button class="dir-u">U</button>
<button class="dir-d">D</button>
</div>
<div class="section">LED Strip Wiring</div>
<div class="wiringMode">
<button class="funcWire w100">Wire Ordering Mode</button>
</div>
<div class="wiringControls">
<button class="funcWireClearSelect w50">Clear selected</button>
<button class="funcWireClear w50">Clear ALL Wiring</button>
</div>
<p>LEDs without wire ordering number will not be saved.</p>
</div>
<div class="clear-both"></div>
<div class="buttons">
<a class="save" href="#" i18n="ledStripButtonSave"></a>
</div>
</div>

300
tabs/led_strip.js Normal file
View File

@ -0,0 +1,300 @@
'use strict';
TABS.led_strip = {
wireMode: false,
functions: ['w', 'f', 'i', 'a', 't'],
directions: ['n', 'e', 's', 'w', 'u', 'd'],
};
TABS.led_strip.initialize = function (callback, scrollPosition) {
var self = this;
if (GUI.active_tab != 'led_strip') {
GUI.active_tab = 'led_strip';
googleAnalytics.sendAppView('LED Strip');
}
function load_led_config() {
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
}
function load_html() {
$('#content').load("./tabs/led_strip.html", process_html);
}
load_led_config();
function buildUsedWireNumbers() {
var usedWireNumbers = [];
$('.mainGrid .gPoint .wire').each(function () {
var wireNumber = parseInt($(this).html());
if (wireNumber >= 0) {
usedWireNumbers.push(wireNumber);
}
});
usedWireNumbers.sort(function(a,b){return a - b});
return usedWireNumbers;
}
function process_html() {
localize();
// Build Grid
var theHTML = [];
var theHTMLlength = 0;
for (i=0; i<256; i++) {
theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span></div>');
}
$('.mainGrid').html(theHTML.join(''));
$('.tempOutput').click(function() {
$(this).select();
});
// Clear Button
$('.funcClear').click(function() {
$('.gPoint').each(function() {
if ($(this).is('.ui-selected')) {
$(this).removeClass(function(index, theClass) {
theClass = theClass.replace(/(^|\s)+gPoint\s+/, '');
return theClass;
});
$(this).addClass('ui-selected');
updateBulkCmd();
}
});
$('.controls button').removeClass('btnOn');
});
// Directional Buttons
$('.directions').on('click', 'button', function() {
var that = this;
if ($('.ui-selected').length > 0) {
TABS.led_strip.directions.forEach(function(letter) {
if ($(that).is('.dir-' + letter)) {
$(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('dir-' + letter);
}
});
updateBulkCmd();
}
});
// Mode Buttons
$('.functions').on('click', 'button', function() {
var that = this;
if ($('.ui-selected').length > 0) {
TABS.led_strip.functions.forEach(function(letter) {
if ($(that).is('.function-' + letter)) {
$(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('function-' + letter);
}
});
updateBulkCmd();
}
});
$('.funcWire').click(function() {
(TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
$(this).toggleClass('btnOn');
$('.mainGrid').toggleClass('gridWire');
});
$('.funcWireClearSelect').click(function() {
$('.ui-selected').each(function() {
var thisWire = $(this).find('.wire');
if (thisWire.html() != '') {
thisWire.html('');
}
updateBulkCmd();
});
});
$('.funcWireClear').click(function() {
$('.gPoint .wire').html('');
updateBulkCmd();
});
$('.mainGrid').selectable({
filter: ' > div',
stop: function() {
$('.ui-selected').each(function() {
var usedWireNumbers = buildUsedWireNumbers();
var nextWireNumber = 0;
for (var nextWireNumber = 0; nextWireNumber < usedWireNumbers.length; nextWireNumber++) {
if (usedWireNumbers[nextWireNumber] != nextWireNumber) {
break;
}
}
if (TABS.led_strip.wireMode) {
if ($(this).find('.wire').html() == '' && nextWireNumber < LED_STRIP.length) {
$(this).find('.wire').html(nextWireNumber);
}
}
var that = this;
TABS.led_strip.directions.forEach(function(letter) {
if ($(that).is('.dir-' + letter)) {
$('.dir-' + letter).addClass('btnOn');
} else {
$('.dir-' + letter).removeClass('btnOn');
}
});
TABS.led_strip.functions.forEach(function(letter) {
if ($(that).is('.function-' + letter)) {
$('.function-' + letter).addClass('btnOn');
} else {
$('.function-' + letter).removeClass('btnOn');
}
});
updateBulkCmd();
});
}
});
$('.mainGrid').disableSelection();
$('.gPoint').each(function(){
var gridNumber = ($(this).index() + 1);
var row = Math.ceil(gridNumber / 16) - 1;
var col = gridNumber/16 % 1 * 16 - 1;
if (col < 0) {
col = 15;
}
var ledResult = findLed(col, row);
if (!ledResult) {
return;
}
var ledIndex = ledResult.index;
var led = ledResult.led;
if (led.functions.length == 0 && led.directions.length == 0) {
return;
}
$(this).find('.wire').html(ledIndex);
for (var modeIndex = 0; modeIndex < led.functions.length; modeIndex++) {
$(this).addClass('function-' + led.functions[modeIndex]);
}
for (var directionIndex = 0; directionIndex < led.directions.length; directionIndex++) {
$(this).addClass('dir-' + led.directions[directionIndex]);
}
});
updateBulkCmd();
$('a.save').click(function () {
MSP.sendLedStripConfig(save_to_eeprom);
function save_to_eeprom() {
MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function() {
GUI.log(chrome.i18n.getMessage('ledStripEepromSaved'));
});
}
});
if (callback) callback();
}
function findLed(x, y) {
for (var ledIndex = 0; ledIndex < LED_STRIP.length; ledIndex++) {
var led = LED_STRIP[ledIndex];
if (led.x == x && led.y == y) {
return { index: ledIndex, led: led };
}
}
return undefined;
}
function updateBulkCmd() {
var counter = 0;
var lines = [];
var ledStripLength = LED_STRIP.length;
LED_STRIP = [];
$('.gPoint').each(function(){
if ($(this).is('[class*="function"]')) {
var gridNumber = ($(this).index() + 1);
var row = Math.ceil(gridNumber / 16) - 1;
var col = gridNumber/16 % 1 * 16 - 1;
if (col < 0) {col = 15;}
var wireNumber = $(this).find('.wire').html();
var functions = '';
var directions = '';
var that = this;
TABS.led_strip.functions.forEach(function(letter){
if ($(that).is('.function-' + letter)) {
functions += letter;
}
});
TABS.led_strip.directions.forEach(function(letter){
if ($(that).is('.dir-' + letter)) {
directions += letter;
}
});
if (wireNumber != '') {
var led = {
x: col,
y: row,
directions: directions,
functions: functions
}
LED_STRIP[wireNumber] = led;
}
counter++;
}
});
var defaultLed = {
x: 0,
y: 0,
directions: '',
functions: ''
};
for (var i = 0; i < ledStripLength; i++) {
if (LED_STRIP[i]) {
continue;
}
LED_STRIP[i] = defaultLed;
}
var usedWireNumbers = buildUsedWireNumbers();
var remaining = LED_STRIP.length - usedWireNumbers.length;
$('.wires-remaining div').html(remaining);
}
};
TABS.led_strip.cleanup = function (callback) {
if (callback) callback();
};

View File

@ -38,12 +38,6 @@
.tab-ports select {
border: 1px solid silver;
}
.tab-ports > .buttons {
width: calc(100% - 20px);
margin-top: 10px;
bottom: 10px;
}
.tab-ports .save {
display: block;