sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CF new LED strip port

10.3.x-maintenance
gaelj 2016-06-25 15:25:38 +02:00
parent b411b88961
commit 92ec31f80b
7 changed files with 1245 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_locales/en/messages.json
View File

@ -1458,7 +1458,7 @@
},
"ledStripHelp": {
"message": "The flight controller can control colors and effects of individual LEDs on a strip. Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions. LEDs without wire ordering number will not be saved."
"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. LEDs without wire ordering number will not be saved.<br />Double-click on a color to edit the HSV values."
},
"ledStripButtonSave": {
"message": "Save"

42
js/backup_restore.js
View File

@ -94,7 +94,8 @@ function configuration_backup(callback) {
MSP_codes.MSP_RX_MAP,
MSP_codes.MSP_BF_CONFIG,
MSP_codes.MSP_CF_SERIAL_CONFIG,
MSP_codes.MSP_LED_STRIP_CONFIG
MSP_codes.MSP_LED_STRIP_CONFIG,
MSP_codes.MSP_LED_COLORS
];
function update_unique_data_list() {
@ -111,6 +112,9 @@ function configuration_backup(callback) {
uniqueData.push(MSP_codes.MSP_FAILSAFE_CONFIG);
uniqueData.push(MSP_codes.MSP_RXFAIL_CONFIG);
}
if (semver.gte(CONFIG.apiVersion, "1.17.0")) {
uniqueData.push(MSP_codes.MSP_LED_STRIP_MODECOLOR);
}
}
update_unique_data_list();
@ -130,7 +134,11 @@ function configuration_backup(callback) {
configuration.BF_CONFIG = jQuery.extend(true, {}, BF_CONFIG);
configuration.SERIAL_CONFIG = jQuery.extend(true, {}, SERIAL_CONFIG);
configuration.LED_STRIP = jQuery.extend(true, [], LED_STRIP);
configuration.LED_COLORS = jQuery.extend(true, [], LED_COLORS);
if (semver.gte(CONFIG.apiVersion, "1.17.0")) {
configuration.LED_MODE_COLORS = jQuery.extend(true, [], LED_MODE_COLORS);
}
if (semver.gte(CONFIG.apiVersion, "1.8.0")) {
configuration.FC_CONFIG = jQuery.extend(true, {}, FC_CONFIG);
configuration.ARMING_CONFIG = jQuery.extend(true, {}, ARMING_CONFIG);
@ -604,6 +612,21 @@ function configuration_restore(callback) {
appliedMigrationsCount++;
}
if (!compareVersions(migratedVersion, '1.2.1')) {
// LED_COLORS & LED_MODE_COLORS support was added.
if (!configuration.LED_COLORS) {
configuration.LED_COLORS = [];
}
if (!configuration.LED_MODE_COLORS) {
configuration.LED_MODE_COLORS = [];
}
migratedVersion = '1.2.1';
GUI.log(chrome.i18n.getMessage('configMigratedTo', [migratedVersion]));
appliedMigrationsCount++;
}
if (appliedMigrationsCount > 0) {
GUI.log(chrome.i18n.getMessage('configMigrationSuccessful', [appliedMigrationsCount]));
}
@ -731,6 +754,8 @@ function configuration_restore(callback) {
BF_CONFIG = configuration.BF_CONFIG;
SERIAL_CONFIG = configuration.SERIAL_CONFIG;
LED_STRIP = configuration.LED_STRIP;
LED_COLORS = configuration.LED_COLORS;
LED_MODE_COLORS = configuration.LED_MODE_COLORS;
ARMING_CONFIG = configuration.ARMING_CONFIG;
FC_CONFIG = configuration.FC_CONFIG;
_3D = configuration._3D;
@ -760,7 +785,18 @@ function configuration_restore(callback) {
}
function send_led_strip_config() {
MSP.sendLedStripConfig(send_rxfail_config);
MSP.sendLedStripConfig(send_led_strip_colors);
}
function send_led_strip_colors() {
MSP.sendLedStripColors(send_led_strip_mode_colors);
}
function send_led_strip_mode_colors() {
if (semver.gte(CONFIG.apiVersion, "1.17.0"))
MSP.sendLedStripModeColors(send_rxfail_config);
else
send_rxfail_config();
}
function send_rxfail_config() {

4
js/fc.js
View File

@ -4,6 +4,8 @@
var CONFIG;
var BF_CONFIG;
var LED_STRIP;
var LED_COLORS;
var LED_MODE_COLORS;
var PID;
var PID_names;
var PIDs;
@ -73,6 +75,8 @@ var FC = {
};
LED_STRIP = [];
LED_COLORS = [];
LED_MODE_COLORS = [];
PID = {
controller: 0

310
js/msp.js
View File

@ -15,6 +15,8 @@ var MSP_codes = {
MSP_SET_MODE_RANGE: 35,
MSP_RX_CONFIG: 44,
MSP_SET_RX_CONFIG: 45,
MSP_LED_COLORS: 46,
MSP_SET_LED_COLORS: 47,
MSP_LED_STRIP_CONFIG: 48,
MSP_SET_LED_STRIP_CONFIG: 49,
MSP_ADJUSTMENT_RANGES: 52,
@ -82,6 +84,7 @@ var MSP_codes = {
MSP_3D: 124,
MSP_RC_DEADBAND: 125,
MSP_SENSOR_ALIGNMENT: 126,
MSP_LED_STRIP_MODECOLOR:127,
MSP_SET_RAW_RC: 200,
MSP_SET_RAW_GPS: 201,
@ -101,6 +104,7 @@ var MSP_codes = {
MSP_SET_RC_DEADBAND: 218,
MSP_SET_RESET_CURR_PID: 219,
MSP_SET_SENSOR_ALIGNMENT: 220,
MSP_SET_LED_STRIP_MODECOLOR:221,
// MSP_BIND: 240,
@ -142,7 +146,9 @@ var MSP = {
unsupported: 0,
ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b'], // in LSB bit order
ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l'], // in LSB bit order
ledBaseFunctionLetters: ['c', 'f', 'a', 'l', 's', 'g', 'r'], // in LSB bit
ledOverlayLetters: ['t', 'o', 'b', 'n', 'i', 'w'], // in LSB bit
last_received_timestamp: null,
analog_last_received_timestamp: null,
@ -930,49 +936,147 @@ var MSP = {
SENSOR_CONFIG.baro_hardware = data.getUint8(offset++, 1);
SENSOR_CONFIG.mag_hardware = data.getUint8(offset, 1);
break;
case MSP_codes.MSP_LED_STRIP_CONFIG:
LED_STRIP = [];
var ledCount = data.byteLength / 7; // v1.4.0 and below incorrectly reported 4 bytes per led.
if (semver.gte(CONFIG.apiVersion, "1.17.0"))
ledCount = data.byteLength / 4;
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]);
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
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),
color: data.getUint8(offset++, 1)
};
LED_STRIP.push(led);
} else {
var mask = data.getUint32(offset, 1);
offset +=4;
var functionId = (mask >> 8) & 0xF;
var functions = [];
for (var baseFunctionLetterIndex = 0; baseFunctionLetterIndex < MSP.ledBaseFunctionLetters.length; baseFunctionLetterIndex++) {
if (functionId == baseFunctionLetterIndex) {
functions.push(MSP.ledBaseFunctionLetters[baseFunctionLetterIndex]);
break;
}
}
var overlayMask = (mask >> 12) & 0x3F;
for (var overlayLetterIndex = 0; overlayLetterIndex < MSP.ledOverlayLetters.length; overlayLetterIndex++) {
if (bit_check(overlayMask, overlayLetterIndex)) {
functions.push(MSP.ledOverlayLetters[overlayLetterIndex]);
}
}
var directionMask = (mask >> 22) & 0x3F;
var directions = [];
for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
if (bit_check(directionMask, directionLetterIndex)) {
directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
}
}
var led = {
y: (mask) & 0xF,
x: (mask >> 4) & 0xF,
functions: functions,
color: (mask >> 18) & 0xF,
directions: directions,
parameters: (mask >> 28) & 0xF
};
LED_STRIP.push(led);
}
var led = {
directions: directions,
functions: functions,
x: data.getUint8(offset++, 1),
y: data.getUint8(offset++, 1),
color: 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_LED_COLORS:
LED_COLORS = [];
var colorCount = data.byteLength / 4;
var offset = 0;
for (var i = 0; offset < data.byteLength && i < colorCount; i++) {
var h = data.getUint16(offset, 1);
var s = data.getUint8(offset + 2, 1);
var v = data.getUint8(offset + 3, 1);
offset += 4;
var color = {
h: h,
s: s,
v: v
};
LED_COLORS.push(color);
}
break;
case MSP_codes.MSP_SET_LED_COLORS:
console.log('Led strip colors saved');
break;
case MSP_codes.MSP_LED_STRIP_MODECOLOR:
if (semver.gte(CONFIG.apiVersion, "1.17.0")) {
LED_MODE_COLORS = [];
var colorCount = data.byteLength / 3;
var offset = 0;
for (var i = 0; offset < data.byteLength && i < colorCount; i++) {
var mode = data.getUint8(offset++, 1);
var direction = data.getUint8(offset++, 1);
var color = data.getUint8(offset++, 1);
var mode_color = {
mode: mode,
direction: direction,
color: color
};
LED_MODE_COLORS.push(mode_color);
}
}
break;
case MSP_codes.MSP_SET_LED_STRIP_MODECOLOR:
console.log('Led strip mode colors saved');
break;
case MSP_codes.MSP_DATAFLASH_SUMMARY:
if (data.byteLength >= 13) {
var
@ -1721,36 +1825,88 @@ MSP.sendLedStripConfig = function(onCompleteCallback) {
function send_next_led_strip_config() {
var led = LED_STRIP[ledIndex];
/*
var led = {
directions: directions,
functions: functions,
x: data.getUint8(offset++, 1),
y: data.getUint8(offset++, 1),
color: data.getUint8(offset++, 1)
};
*/
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);
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
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(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);
buffer.push(led.color);
} else {
var mask = 0;
/*
ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l'], // in LSB bit order
ledBaseFunctionLetters: ['c', 'f', 'a', 'l', 's', 'g', 'r'], // in LSB bit
ledOverlayLetters: ['t', 'o', 'b', 'n', 'i', 'w'], // in LSB bit
*/
mask |= (led.y << 0);
mask |= (led.x << 4);
for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
var fnIndex = MSP.ledBaseFunctionLetters.indexOf(led.functions[functionLetterIndex]);
if (fnIndex >= 0) {
mask |= (fnIndex << 8);
break;
}
}
for (var overlayLetterIndex = 0; overlayLetterIndex < led.functions.length; overlayLetterIndex++) {
var bitIndex = MSP.ledOverlayLetters.indexOf(led.functions[overlayLetterIndex]);
if (bitIndex >= 0) {
mask |= bit_set(mask, bitIndex + 12);
}
}
mask |= (led.color << 18);
for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
if (bitIndex >= 0) {
mask |= bit_set(mask, bitIndex + 22);
}
}
mask |= (0 << 28); // parameters
buffer.push(specificByte(mask, 0));
buffer.push(specificByte(mask, 1));
buffer.push(specificByte(mask, 2));
buffer.push(specificByte(mask, 3));
}
buffer.push(specificByte(functionMask, 0));
buffer.push(specificByte(functionMask, 1));
buffer.push(led.x);
buffer.push(led.y);
buffer.push(led.color);
// prepare for next iteration
ledIndex++;
@ -1762,6 +1918,54 @@ MSP.sendLedStripConfig = function(onCompleteCallback) {
}
}
MSP.sendLedStripColors = function(onCompleteCallback) {
if (LED_COLORS.length == 0) {
onCompleteCallback();
} else {
var buffer = [];
for (var colorIndex = 0; colorIndex < LED_COLORS.length; colorIndex++) {
var color = LED_COLORS[colorIndex];
buffer.push(specificByte(color.h, 0));
buffer.push(specificByte(color.h, 1));
buffer.push(color.s);
buffer.push(color.v);
}
MSP.send_message(MSP_codes.MSP_SET_LED_COLORS, buffer, false, onCompleteCallback);
}
}
MSP.sendLedStripModeColors = function(onCompleteCallback) {
var nextFunction = send_next_led_strip_mode_color;
var index = 0;
if (LED_MODE_COLORS.length == 0) {
onCompleteCallback();
} else {
send_next_led_strip_mode_color();
}
function send_next_led_strip_mode_color() {
var buffer = [];
var mode_color = LED_MODE_COLORS[index];
buffer.push(mode_color.mode);
buffer.push(mode_color.direction);
buffer.push(mode_color.color);
// prepare for next iteration
index++;
if (index == LED_MODE_COLORS.length) {
nextFunction = onCompleteCallback;
}
MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_MODECOLOR, buffer, false, nextFunction);
}
}
MSP.serialPortFunctionMaskToFunctions = function(functionMask) {
var functions = [];

161
tabs/led_strip.css
View File

@ -32,10 +32,16 @@
cursor: pointer;
}
.tab-led-strip .gPoint.function-w { /* Warning */
background: red;
.tab-led-strip .gPoint.function-s { /* RSSI */
background: brown;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: red;
border-color: rgb(52, 155, 255);
}
.tab-led-strip .gPoint.function-c { /* Color */
background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: grey;
}
.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */
@ -44,28 +50,16 @@
border-color: rgb(50, 205, 50);
}
.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 { /* Thrust Mode */
background: orange;
.tab-led-strip .gPoint.function-l { /* Battery */
background: magenta;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: orange;
}
.tab-led-strip .gPoint.function-c { /* Color */
background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: grey;
border-color: rgb(52, 155, 255);
}
.tab-led-strip .gPoint.function-r { /* Ring */
@ -80,49 +74,70 @@
border-color: rgb(52, 155, 255);
}
.tab-led-strip .gPoint.function-s { /* RSSI */
background: brown;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: rgb(52, 155, 255);
.tab-led-strip .gPoint.function-c .overlay-color,
.tab-led-strip .gPoint.function-r .overlay-color {
float: left;
height: 15px;
width: 15px;
margin-top: -23px;
margin-left: 4px;
border-radius: 4px;
}
.tab-led-strip .gPoint.function-b { /* Blink */
background: white;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: rgb(52, 155, 255);
.tab-led-strip .gPoint.function-s .overlay-s,
.tab-led-strip .gPoint.function-w .overlay-w,
.tab-led-strip .gPoint.function-i .overlay-i,
.tab-led-strip .gPoint.function-t .overlay-t,
.tab-led-strip .gPoint.function-o .overlay-o,
.tab-led-strip .gPoint.function-b .overlay-b,
.tab-led-strip .gPoint.function-n .overlay-n {
float: left;
height: 6px;
width: 16px;
}
.tab-led-strip .gPoint.function-i.function-f {
background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(50, 205, 50) 50%, rgb(50, 205, 50) 100%);
.tab-led-strip .gPoint.function-w .overlay-w {
background-image: radial-gradient(1px at 8px 50% , red 0%, red 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -30px;
margin-left: -9px;
}
.tab-led-strip .gPoint.function-i.function-a {
background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(52, 155, 255) 50%, rgb(52, 155, 255) 100%);
.tab-led-strip .gPoint.function-i .overlay-i {
background-image: radial-gradient(1px at 8px 50% , yellow 0%, yellow 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -30px;
margin-left: 16px;
}
.tab-led-strip .gPoint.function-i.function-f.function-a {
background: linear-gradient(to bottom, yellow 0%,yellow 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
.tab-led-strip .gPoint.function-t .overlay-t {
background-image: radial-gradient(1px at 8px 50% , orange 0%, orange 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -6px;
margin-left: -9px;
}
.tab-led-strip .gPoint.function-i.function-w.function-a {
background: linear-gradient(to bottom, yellow 0%,yellow 33%,red 33%, red 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
.tab-led-strip .gPoint.function-s .overlay-s {
background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -6px;
margin-left: 16px;
}
.tab-led-strip .gPoint.function-t.function-f.function-w {
background: linear-gradient(to bottom, orange 0%,orange 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, red 66%, red 100%);
.tab-led-strip .gPoint.function-o .overlay-o {
background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -6px;
margin-left: 16px;
}
.tab-led-strip .gPoint.function-i.function-w {
background: linear-gradient(to bottom, yellow 0%,yellow 50%,#ff5454 50%,#ba3535 100%);
.tab-led-strip .gPoint.function-b .overlay-b {
background-image: radial-gradient(1px at 8px 50% , rgb(52, 155, 255) 0%, rgb(52, 155, 255) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -18px;
margin-left: -9px;
}
.tab-led-strip .gPoint.function-f.function-w {
background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,#ff5454 50%,#ba3535 100%);
.tab-led-strip .gPoint.function-n .overlay-n {
background-image: radial-gradient(1px at 8px 50% , blue 0%, blue 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
margin-top: -18px;
margin-left: 16px;
}
.tab-led-strip .gPoint.function-f.function-t {
background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,orange 50%,orange 100%);
}
.tab-led-strip .gPoint select {
background: #000;
@ -181,18 +196,45 @@
width: 49%;
}
.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: #0084ff;}
.tab-led-strip .functions .function-t.btnOn {background: orange;}
.tab-led-strip .functions .function-r.btnOn {background: #acacac;}
.tab-led-strip .functions .function-c.btnOn {
/* Drop-down boxes */
.tab-led-strip .select { background: white;}
.tab-led-strip .select .function-c {
background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%);
}
.tab-led-strip .functions .function-g.btnOn {background: green;}
.tab-led-strip .functions .function-s.btnOn {background: brown;}
.tab-led-strip .functions .function-b.btnOn {background: white;}
.tab-led-strip .select .function-f { background: rgb(50, 205, 50);}
.tab-led-strip .select .function-a { background: rgb(52, 155, 255);}
.tab-led-strip .select .function-l { background: magenta;}
.tab-led-strip .select .function-s { background: brown;}
.tab-led-strip .select .function-g { background: green;}
/* .tab-led-strip .select .function-b { background: white; color:black;} */
.tab-led-strip .select .function-r { background: #acacac;}
.tab-led-strip .select .functionSelect option {
background: white;
color: black;
}
.tab-led-strip .overlays,
.tab-led-strip .blinkers,
.tab-led-strip .modifiers {
display: inline-block;
}
.tab-led-strip .colorDefineSliders {
display: inline-block;
position: absolute;
z-index: 10000;
background: white;
padding: 5px;
margin: 10px;
border-color: #565656;
border-style: solid;
border-radius: 6px;
border-width: 2px;
}
.tab-led-strip .color-1 {background: white;}
.tab-led-strip .color-2 {background: red;}
@ -210,8 +252,9 @@
.tab-led-strip .directions button.btnOn,
.tab-led-strip .functions button.btnOn,
.tab-led-strip .colors .btnOn {
.tab-led-strip .colors .btnOn,
.tab-led-strip .special_colors button.btnOn,
.tab-led-strip .mode_colors button.btnOn {
border-color: #000;
}
@ -291,6 +334,14 @@
position: relative;
float: left;
width: 285px;
margin-right: 10px;
}
.colorDefineSliderValue,
.colorDefineSliderLabel {
width: 10px;
display: inline-table;
margin-bottom: 5px;
}
.tab-led-strip .directions,

120
tabs/led_strip.html
View File

@ -28,6 +28,24 @@
<div class="block"></div>
<div class="block"></div>
</div>
<div class="colorDefineSliders">
<div class="">Color setup</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel">H</Label>
<input class="sliderHSV" type="range" min="0" max="359" value="0">
<Label class="colorDefineSliderValue Hvalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel">S</Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Svalue">0</Label>
</div>
<div class="colorDefineSliderContainer">
<Label class="colorDefineSliderLabel">V</Label>
<input class="sliderHSV" type="range" min="0" max="255" value="0">
<Label class="colorDefineSliderValue Vvalue">0</Label>
</div>
</div>
<div class="controls">
<div class="wires-remaining">
<div></div>
@ -37,19 +55,79 @@
<button class="funcClearAll">Clear ALL</button>
<div class="section">LED Functions</div>
<div class="functions">
<button class="function-w w50">Warnings</button>
<button class="function-f w50">Modes &amp; Orientation</button>
<button class="function-i w50">Indicator</button>
<button class="function-a w50">Arm State</button>
<button class="function-t w50">Throttle</button>
<button class="function-r w50">Ring</button>
<button class="function-c w50">Color</button>
<button class="function-g w50 extra_functions">GPS</button>
<button class="function-s w50 extra_functions">RSSI</button>
<button class="function-b w50 extra_functions">Blink</button>
<div class="select">
<span class="color_section">Function</span>
<select class="functionSelect">
<option value="">None</option>
<option value="function-c" class="">Color</option>
<option value="function-f" class="">Modes &amp; Orientation</option>
<option value="function-a" class="">Arm State</option>
<option value="function-l" class="extra_functions17">Battery</option>
<option value="function-s" class="extra_functions17">RSSI</option>
<option value="function-g" class="extra_functions17">GPS</option>
<option value="function-r" class="">Ring</option>
</select>
</div>
<div class="modifiers">
<span class="color_section">Color modifier</span>
<div class="checkbox">
<input type="checkbox" name="ThrottleHue" class="toggle function-t" />
<label> <span>Throttle</span></label>
</div>
<div class="checkbox extra_functions17">
<input type="checkbox" name="LarsonScanner" class="toggle function-o" />
<label> <span>Larson scanner</span></label>
</div>
</div>
<div class="blinkers extra_functions17">
<span class="color_section">Blink</span>
<div class="checkbox blinkOverlay">
<input type="checkbox" name="blink" class="toggle function-b" />
<label> <span>Blink always</span></label>
</div>
<div class="checkbox landingBlinkOverlay">
<input type="checkbox" name="landingBlink" class="toggle function-n" />
<label> <span>Blink on landing</span></label>
</div>
</div>
<div class="overlays">
<span class="color_section">Overlay</span>
<div class="checkbox warningOverlay">
<input type="checkbox" name="Warnings" class="toggle function-w" />
<label> <span>Warnings</span></label>
</div>
<div class="checkbox indicatorOverlay">
<input type="checkbox" name="Indicator" class="toggle function-i" />
<label> <span>Indicator</span></label>
</div>
</div>
<div class="mode_colors">
<div class="section">Mode colors</div>
<select class="modeSelect">
<option value="0">Orientation</option>
<option value="1">Headfree</option>
<option value="2">Horizon</option>
<option value="3">Angle</option>
<option value="4">Mag</option>
<option value="5">Baro</option>
</select>
<button class="mode_color-0-0 dir-n">N</button>
<button class="mode_color-0-1 dir-e">E</button>
<button class="mode_color-0-2 dir-s">S</button>
<button class="mode_color-0-3 dir-w">W</button>
<button class="mode_color-0-4 dir-u">U</button>
<button class="mode_color-0-5 dir-d">D</button>
</div>
<div class="section">LED Orientation and Color</div>
<div class="directions">
<button class="dir-n">N</button>
@ -59,6 +137,7 @@
<button class="dir-u">U</button>
<button class="dir-d">D</button>
</div>
<div class="colors">
<button class="color-0" title="black">0</button>
<button class="color-1" title="white">1</button>
@ -78,7 +157,18 @@
<button class="color-15" title="black">15</button>
</div>
<div class="special_colors mode_colors">
<div class="section">Special colors</div>
<button class="mode_color-6-0" title="green">Disarmed</button>
<button class="mode_color-6-1" title="blue">Armed</button>
<button class="mode_color-6-2" title="white">Animation</button>
<!-- button class="mode_color-6-3" title="black">Background</button -->
<button class="mode_color-6-4" title="black">Blink background</button>
<button class="mode_color-6-5" title="red">GPS: no sats</button>
<button class="mode_color-6-6" title="orange">GPS: no lock</button>
<button class="mode_color-6-7" title="green">GPS: locked</button>
</div>
<div class="section">LED Strip Wiring</div>
<div class="wiringMode">
<button class="funcWire w100">Wire Ordering Mode</button>
@ -87,7 +177,13 @@
<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="colorControls">
</div>
<div class="clear-both"></div>
</div>
<div class="content_toolbar">

787
tabs/led_strip.js
View File

@ -1,13 +1,25 @@
'use strict';
TABS.led_strip = {
wireMode: false,
functions: ['w', 'f', 'i', 'a', 't', 'r', 'c', 'g', 's', 'b'],
directions: ['n', 'e', 's', 'w', 'u', 'd'],
};
wireMode: false,
directions: ['n', 'e', 's', 'w', 'u', 'd'],
};
TABS.led_strip.initialize = function (callback, scrollPosition) {
var self = this;
var selectedColorIndex = null;
var selectedModeColor = null;
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b'];
TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'b', 'g', 'r'];
TABS.led_strip.overlays = ['t', 's', 'i', 'w'];
} else {
TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l', 'o', 'n'];
TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'l', 's', 'g', 'r'];
TABS.led_strip.overlays = ['t', 'o', 'b', 'n', 'i', 'w'];
}
TABS.led_strip.wireMode = false;
@ -16,9 +28,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
function load_led_config() {
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_led_colors);
}
function load_led_colors() {
MSP.send_message(MSP_codes.MSP_LED_COLORS, false, false, load_led_mode_colors);
}
function load_led_mode_colors() {
if (semver.gte(CONFIG.apiVersion, "1.17.0"))
MSP.send_message(MSP_codes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
else
load_html();
}
function load_html() {
$('#content').load("./tabs/led_strip.html", process_html);
}
@ -46,7 +73,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
var theHTML = [];
var theHTMLlength = 0;
for (var 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>');
if (semver.lt(CONFIG.apiVersion, "1.17.0"))
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><span class="overlay-t"> </span><span class="overlay-s"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
else
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><span class="overlay-t"> </span><span class="overlay-o"> </span><span class="overlay-b"> </span><span class="overlay-n"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
}
$('.mainGrid').html(theHTML.join(''));
@ -81,8 +111,11 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
function removeFunctionsAndDirections(element) {
var classesToRemove = [];
TABS.led_strip.functions.forEach(function(letter) {
TABS.led_strip.baseFuncs.forEach(function(letter) {
classesToRemove.push('function-' + letter);
});
TABS.led_strip.overlays.forEach(function(letter) {
classesToRemove.push('function-' + letter);
});
TABS.led_strip.directions.forEach(function(letter) {
@ -108,51 +141,128 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
});
clearModeColorSelection();
updateBulkCmd();
}
});
// Mode Buttons
$('.functions').on('click', 'button', function() {
// Mode Color Buttons
$('.mode_colors').on('click', 'button', function() {
var that = this;
if ($('.ui-selected').length > 0) {
TABS.led_strip.functions.forEach(function(letter) {
if ($(that).is('.function-' + letter)) {
LED_MODE_COLORS.forEach(function(mc) {
if ($(that).is('.mode_color-' + mc.mode + '-' + mc.direction)) {
if ($(that).is('.btnOn')) {
$(that).removeClass('btnOn');
$('.ui-selected').removeClass('mode_color-' + mc.mode + '-' + mc.direction);
selectedModeColor = null;
} else {
$(that).addClass('btnOn');
selectedModeColor = { mode: mc.mode, direction: mc.direction };
if ($(that).is('.btnOn')) {
$(that).removeClass('btnOn');
$('.ui-selected').removeClass('function-' + letter);
} else {
$(that).addClass('btnOn');
$('.ui-selected').addClass('function-' + letter);
// select the color button
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
var className = '.color-' + colorIndex;
if (colorIndex == getModeColor(mc.mode, mc.direction)) {
$(className).addClass('btnOn');
selectedColorIndex = colorIndex;
setColorSliders(colorIndex);
} else {
$(className).removeClass('btnOn');
}
}
}
});
}
});
updateBulkCmd();
}
$('.mode_colors').each(function() {
$(this).children().each(function() {
if (! $(this).is($(that))) {
if ($(this).is('.btnOn')) {
$(this).removeClass('btnOn');
}
}
});
});
updateBulkCmd();
});
// Color sliders
var ip = $('div.colorDefineSliders input');
ip.eq(0).on("input change", function() { updateColors($(this).val(), 0); });
ip.eq(1).on("input change", function() { updateColors($(this).val(), 1); });
ip.eq(2).on("input change", function() { updateColors($(this).val(), 2); });
for (var i = 0; i < 3; i++) {
updateColors(ip.eq(i).val(), i);
}
// Color Buttons
$('.colors').on('click', 'button', function() {
$('.colors').on('click', 'button', function(e) {
var that = this;
var colorButtons = $(this).parent().find('button');
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
colorButtons.removeClass('btnOn');
$('.ui-selected').removeClass('color-' + colorIndex);
if (selectedModeColor == undefined)
$('.ui-selected').removeClass('color-' + colorIndex);
if ($(that).is('.color-' + colorIndex)) {
$('.ui-selected').addClass('color-' + colorIndex);
selectedColorIndex = colorIndex;
if (selectedModeColor == undefined)
$('.ui-selected').addClass('color-' + colorIndex);
}
}
setColorSliders(selectedColorIndex);
$(this).addClass('btnOn');
if (selectedModeColor) {
setModeColor(selectedModeColor.mode, selectedModeColor.direction, selectedColorIndex);
}
drawColorBoxesInColorLedPoints();
// refresh color buttons
$('.colors').children().each(function() { setBackgroundColor($(this)); });
$('.overlay-color').each(function() { setBackgroundColor($(this)); });
$('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
$('.special_colors').each(function() { setModeBackgroundColor($(this)); });
updateBulkCmd();
});
$('.colors').on('dblclick', 'button', function(e) {
var pp = $('.tab-led-strip').position();
var moveLeft = $('.tab-led-strip').position().left + ($('.colorDefineSliders').width() / 2);
var moveUp = $('.tab-led-strip').position().top + $('.colorDefineSliders').height() + 20;
$('.colorDefineSliders').css('left', e.pageX - e.offsetX - moveLeft);
$('.colorDefineSliders').css('top', e.pageY - e.offsetY - moveUp);
$('.colorDefineSliders').show();
});
$('.colorDefineSliders').on({
mouseleave: function () {
$('.colorDefineSliders').hide();
}
});
$('.colors').children().on({
mouseleave: function () {
if (!$('.colorDefineSliders').is(":hover"))
$('.colorDefineSliders').hide();
}
});
$('.funcWire').click(function() {
$(this).toggleClass('btnOn');
TABS.led_strip.wireMode = $(this).hasClass('btnOn');
@ -180,8 +290,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
var functionsInSelection = [];
var directionsInSelection = [];
$('.ui-selected').each(function() {
clearModeColorSelection();
var that;
$('.ui-selected').each(function() {
var usedWireNumbers = buildUsedWireNumbers();
@ -198,38 +310,85 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
}
var that = this;
if ($(this).find('.wire').text() != '') {
TABS.led_strip.directions.forEach(function(letter) {
var className = '.dir-' + letter;
if ($(that).is(className)) {
directionsInSelection.push(className);
}
});
that = this;
// Get function & overlays or current cell
TABS.led_strip.directions.forEach(function(letter) {
var className = '.dir-' + letter;
if ($(that).is(className)) {
directionsInSelection.push(className);
}
});
TABS.led_strip.baseFuncs.forEach(function(letter) {
var className = '.function-' + letter;
if ($(that).is(className)) {
functionsInSelection.push(className);
}
});
TABS.led_strip.overlays.forEach(function(letter) {
var className = '.function-' + letter;
if ($(that).is(className)) {
functionsInSelection.push(className);
}
});
}
});
TABS.led_strip.functions.forEach(function(letter) {
var className = '.function-' + letter;
if ($(that).is(className)) {
functionsInSelection.push(className);
}
});
var uiSelectedLast = that;
$('select.functionSelect').val("");
TABS.led_strip.baseFuncs.forEach(function(letter) {
var className = 'function-' + letter;
if ($('select.functionSelect').is("." + className)) {
$('select.functionSelect').removeClass(className);
}
});
selectedColorIndex = 0;
if (uiSelectedLast) {
// set active color
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
var className = '.color-' + colorIndex;
if ($(this).is(className)) {
if ($(uiSelectedLast).is(className)) {
$(className).addClass('btnOn');
selectedColorIndex = colorIndex;
} else {
$(className).removeClass('btnOn');
}
}
updateBulkCmd();
});
// set checkbox values
TABS.led_strip.overlays.forEach(function(letter) {
var feature_o = $('.checkbox').find('input.function-' + letter);
var newVal = ($(uiSelectedLast).is('.function-' + letter));
if (feature_o.is(':checked') != newVal) {
feature_o.prop('checked', newVal);
feature_o.change();
}
});
// Update active function in combobox
TABS.led_strip.baseFuncs.forEach(function(letter) {
if ($(uiSelectedLast).is('.function-' + letter)) {
$('select.functionSelect').val("function-" + letter);
$('select.functionSelect').addClass("function-" + letter);
}
});
}
updateBulkCmd();
$('.functions button').removeClass('btnOn');
functionsInSelection.forEach(function(function_e) {
$(function_e).addClass('btnOn');
});
setColorSliders(selectedColorIndex);
setOptionalGroupsVisibility();
$('.directions button').removeClass('btnOn');
directionsInSelection.forEach(function(direction_e) {
@ -238,6 +397,84 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
});
// UI: select LED function from drop-down
$('.functionSelect').on('change', function() {
clearModeColorSelection();
applyFunctionToSelectedLeds();
drawColorBoxesInColorLedPoints();
setOptionalGroupsVisibility();
updateBulkCmd();
});
// UI: select mode from drop-down
$('.modeSelect').on('change', function() {
var that = this;
var mode = Number($(that).val());
$('.mode_colors').find('button').each(function() {
for (var i = 0; i < 6; i++)
for (var j = 0; j < 6; j++)
if ($(this).hasClass('mode_color-' + i + '-' + j)) {
$(this).removeClass('mode_color-' + i + '-' + j);
$(this).addClass('mode_color-' + mode + '-' + j);
}
});
$('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
});
function toggleSwitch(that, letter)
{
if ($(that).is(':checked')) {
$('.ui-selected').find('.wire').each(function() {
if ($(this).text() != "")
$(this).parent().addClass('function-' + letter);
});
} else {
$('.ui-selected').removeClass('function-' + letter);
}
return $(that).is(':checked');
}
// UI: checkbox toggle
$('.checkbox').change(function(e) {
if (e.originalEvent) {
// user-triggered event
var that = $(this).find('input');
if ($('.ui-selected').length > 0) {
TABS.led_strip.overlays.forEach(function(letter) {
if ($(that).is('.function-' + letter)) {
var ret = toggleSwitch(that, letter);
var cbn = $('.checkbox .function-n');
var cbb = $('.checkbox .function-b');
if (ret && letter == 'b' && cbn.is(':checked')) {
cbn.prop('checked', false);
cbn.change();
toggleSwitch(cbn, 'n');
} else if (ret && letter == 'n' && cbb.is(':checked')) {
cbb.prop('checked', false);
cbb.change();
toggleSwitch(cbb, 'b');
}
}
});
clearModeColorSelection();
updateBulkCmd();
setOptionalGroupsVisibility();
}
} else {
// code-triggered event
}
});
$('.mainGrid').disableSelection();
$('.gPoint').each(function(){
@ -273,12 +510,22 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
$(this).addClass('color-' + led.color);
});
updateBulkCmd();
$('a.save').click(function () {
MSP.sendLedStripConfig(save_to_eeprom);
MSP.sendLedStripConfig(send_led_strip_colors);
function send_led_strip_colors() {
MSP.sendLedStripColors(send_led_strip_mode_colors);
}
function send_led_strip_mode_colors() {
if (semver.gte(CONFIG.apiVersion, "1.17.0"))
MSP.sendLedStripModeColors(save_to_eeprom);
else
save_to_eeprom();
}
function save_to_eeprom() {
MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function() {
GUI.log(chrome.i18n.getMessage('ledStripEepromSaved'));
@ -286,14 +533,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
});
$('.colorDefineSliders').hide();
if (CONFIG.apiVersion < '1.18.0') {
$(".extra_functions").hide();
}
applyFunctionToSelectedLeds();
drawColorBoxesInColorLedPoints();
setOptionalGroupsVisibility();
updateBulkCmd();
GUI.content_ready(callback);
}
function findLed(x, y) {
for (var ledIndex = 0; ledIndex < LED_STRIP.length; ledIndex++) {
var led = LED_STRIP[ledIndex];
@ -303,12 +560,15 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
}
return undefined;
}
function updateBulkCmd() {
var counter = 0;
var lines = [];
var ledStripLength = LED_STRIP.length;
var ledColorsLength = LED_COLORS.length;
var ledModeColorsLenggth = LED_MODE_COLORS.length;
LED_STRIP = [];
@ -329,8 +589,13 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
if (match) {
colorIndex = match[2];
}
TABS.led_strip.functions.forEach(function(letter){
TABS.led_strip.baseFuncs.forEach(function(letter){
if ($(that).is('.function-' + letter)) {
functions += letter;
}
});
TABS.led_strip.overlays.forEach(function(letter){
if ($(that).is('.function-' + letter)) {
functions += letter;
}
@ -378,6 +643,414 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
$('.wires-remaining div').html(remaining);
}
// refresh mode color buttons
function setModeBackgroundColor(element) {
if (semver.gte(CONFIG.apiVersion, "1.17.0")) {
element.find('[class*="mode_color"]').each(function() {
var m = 0;
var d = 0;
var match = $(this).attr("class").match(/(^|\s)mode_color-([0-9]+)-([0-9]+)(\s|$)/);
if (match) {
m = Number(match[2]);
d = Number(match[3]);
$(this).css('background-color', HsvToColor(LED_COLORS[getModeColor(m, d)]));
}
});
}
}
function setBackgroundColor(element) {
if (element.is('[class*="color"]')) {
var colorIndex = 0;
var match = element.attr("class").match(/(^|\s)color-([0-9]+)(\s|$)/);
if (match) {
colorIndex = match[2];
element.css('background-color', HsvToColor(LED_COLORS[colorIndex]));
}
}
}
function setOptionalGroupsVisibility() {
var activeFunction = $('select.functionSelect').val();
$('select.functionSelect').addClass(activeFunction);
if (semver.lte(CONFIG.apiVersion, "1.16.0")) {
// <= 16
// Hide GPS (Func)
// Hide RSSI (O/L), Blink (Func)
// Hide Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
$(".extra_functions17").hide();
$(".mode_colors").hide();
} else {
// >= 17
// Show GPS (Func)
// Hide RSSI (O/L), Blink (Func)
// Show Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
$(".extra_functions17").show();
$(".mode_colors").show();
}
// set color modifiers (checkboxes) visibility
$('.overlays').hide();
$('.modifiers').hide();
$('.blinkers').hide();
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
switch (activeFunction) {
case "function-c":
case "function-a":
case "function-f":
$('.modifiers').show();
$('.overlays').show();
break;
case "function-g":
$('.overlays').show();
break;
default:
break;
}
} else {
switch (activeFunction) {
case "":
$('.overlays').show();
break;
case "function-c":
case "function-a":
case "function-f":
$('.modifiers').show();
$('.overlays').show();
$('.blinkers').show();
break;
case "function-s":
case "function-l":
case "function-r":
case "function-o":
case "function-g":
$('.overlays').show();
break;
break;
default:
break;
}
}
// set overlays (checkboxes) visibility
switch (activeFunction) {
case "function-l":
case "function-s":
case "function-g":
$('.warningOverlay').hide();
break;
case "function-r":
case "function-b":
if (semver.lt(CONFIG.apiVersion, "1.17.0"))
$('.warningOverlay').hide();
break;
default:
$('.warningOverlay').show();
break;
}
// set color palette visibility
/*
switch (activeFunction) {
case "":
case "function-c":
case "function-b":
case "function-r":
case "function-a":
case "function-f":
case "function-g":
case "function-l":
$('.colors').show();
$('.colorDefineSliders').show();
break;
default:
$('.colors').hide();
$('.colorDefineSliders').hide();
break;
}
*/
// set overlays (checkboxes) visibility
// set directions visibility
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
switch (activeFunction) {
case "function-r":
$('.indicatorOverlay').hide();
$('.directions').hide();
break;
default:
$('.indicatorOverlay').show();
$('.directions').show();
break;
}
}
$('.mode_colors').hide();
if (semver.gte(CONFIG.apiVersion, "1.17.0")) {
// set mode colors visibility
if (activeFunction == "function-f")
$('.mode_colors').show();
// set special colors visibility
$('.special_colors').show();
$('.mode_color-6-0').hide();
$('.mode_color-6-1').hide();
$('.mode_color-6-2').hide();
$('.mode_color-6-3').hide();
$('.mode_color-6-4').hide();
$('.mode_color-6-5').hide();
$('.mode_color-6-6').hide();
$('.mode_color-6-7').hide();
switch (activeFunction) {
case "": // none
case "function-f": // Modes & Orientation
case "function-l": // Battery
// $('.mode_color-6-3').show(); // background
$('.special_colors').hide();
break;
case "function-g": // GPS
$('.mode_color-6-5').show(); // no sats
$('.mode_color-6-6').show(); // no lock
$('.mode_color-6-7').show(); // locked
// $('.mode_color-6-3').show(); // background
break;
case "function-b": // Blink
$('.mode_color-6-4').show(); // blink background
break;
case "function-a": // Arm state
$('.mode_color-6-0').show(); // disarmed
$('.mode_color-6-1').show(); // armed
break;
case "function-r": // Ring
default:
$('.special_colors').hide();
break;
}
}
}
function applyFunctionToSelectedLeds() {
var activeFunction = $('select.functionSelect').val();
TABS.led_strip.baseFuncs.forEach(function(letter) {
if (activeFunction == 'function-' + letter) {
$('select.functionSelect').addClass('function-' + letter);
$('.ui-selected').find('.wire').each(function() {
if ($(this).text() != "")
$(this).parent().addClass('function-' + letter);
});
unselectOverlays(letter);
} else {
$('select.functionSelect').removeClass('function-' + letter);
$('.ui-selected').removeClass('function-' + letter);
}
if (activeFunction == '') {
unselectOverlays(activeFunction);
}
});
}
function unselectOverlays(letter) {
if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
if (letter == 'b' || letter == 'r') {
unselectOverlay(letter, 'i');
}
if (letter == 'b' || letter == 'r' || letter == 'l' || letter == 'g') {
unselectOverlay(letter, 'w');
unselectOverlay(letter, 't');
unselectOverlay(letter, 's');
}
} else {
// MSP 1.17
if (letter == 'r' || letter == '') {
unselectOverlay(letter, 'o');
unselectOverlay(letter, 'b');
unselectOverlay(letter, 'n');
unselectOverlay(letter, 't');
}
if (letter == 'l' || letter == 'g' || letter == 's') {
unselectOverlay(letter, 'w');
unselectOverlay(letter, 't');
unselectOverlay(letter, 'o');
unselectOverlay(letter, 'b');
unselectOverlay(letter, 'n');
}
}
}
function unselectOverlay(func, overlay) {
if ($('input.function-' + overlay).is(':checked')) {
$('input.function-' + overlay).prop('checked', false);
$('input.function-' + overlay).change();
$('.ui-selected').each(function() {
if (func == '' || $(this).is('.function-' + func)) {
$(this).removeClass('function-' + overlay);
}
});
}
}
function updateColors(value, hsvIndex) {
var change = false;
value = Number(value);
var className = '.color-' + selectedColorIndex;
if ($(className).hasClass('btnOn')) {
switch (hsvIndex) {
case 0:
if (LED_COLORS[selectedColorIndex].h != value) {
LED_COLORS[selectedColorIndex].h = value;
$('.colorDefineSliderValue.Hvalue').text(LED_COLORS[selectedColorIndex].h);
change = true
}
break;
case 1:
if (LED_COLORS[selectedColorIndex].s != value) {
LED_COLORS[selectedColorIndex].s = value;
$('.colorDefineSliderValue.Svalue').text(LED_COLORS[selectedColorIndex].s);
change = true
}
break;
case 2:
if (LED_COLORS[selectedColorIndex].v != value) {
LED_COLORS[selectedColorIndex].v = value;
$('.colorDefineSliderValue.Vvalue').text(LED_COLORS[selectedColorIndex].v);
change = true
}
break;
}
}
// refresh color buttons
$('.colors').children().each(function() { setBackgroundColor($(this)); });
$('.overlay-color').each(function() { setBackgroundColor($(this)); });
$('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
$('.special_colors').each(function() { setModeBackgroundColor($(this)); });
if (change)
updateBulkCmd();
}
function drawColorBoxesInColorLedPoints() {
$('.gPoint').each(function() {
if ($(this).is('.function-c') || $(this).is('.function-r') || $(this).is('.function-b')) {
$(this).find('.overlay-color').show();
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
var className = 'color-' + colorIndex;
if ($(this).is('.' + className)) {
$(this).find('.overlay-color').addClass(className);
$(this).find('.overlay-color').css('background-color', HsvToColor(LED_COLORS[colorIndex]))
} else {
if ($(this).find('.overlay-color').is('.' + className))
$(this).find('.overlay-color').removeClass(className);
}
}
} else {
$(this).find('.overlay-color').hide();
}
});
}
function setColorSliders(colorIndex) {
var sliders = $('div.colorDefineSliders input');
var change = false;
if (!LED_COLORS[colorIndex])
return;
if (LED_COLORS[colorIndex].h != Number(sliders.eq(0).val())) {
sliders.eq(0).val(LED_COLORS[colorIndex].h);
$('.colorDefineSliderValue.Hvalue').text(LED_COLORS[colorIndex].h);
change = true;
}
if (LED_COLORS[colorIndex].s != Number(sliders.eq(1).val())) {
sliders.eq(1).val(LED_COLORS[colorIndex].s);
$('.colorDefineSliderValue.Svalue').text(LED_COLORS[colorIndex].s);
change = true;
}
if (LED_COLORS[colorIndex].v != Number(sliders.eq(2).val())) {
sliders.eq(2).val(LED_COLORS[colorIndex].v);
$('.colorDefineSliderValue.Vvalue').text(LED_COLORS[colorIndex].v);
change = true;
}
// only fire events when all values are set
if (change)
sliders.trigger('input');
}
function HsvToColor(input) {
var HSV = { h:Number(input.h), s:Number(input.s), v:Number(input.v) };
if (HSV.s == 0 && HSV.v == 0)
return "";
HSV = { h:HSV.h, s:1 - HSV.s / 255, v:HSV.v / 255 };
var HSL = { h:0, s:0, v:0};
HSL.h = HSV.h;
HSL.l = (2 - HSV.s) * HSV.v / 2;
HSL.s = HSL.l && HSL.l < 1 ? HSV.s * HSV.v / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
var ret = 'hsl(' + HSL.h + ', ' + HSL.s * 100 + '%, ' + HSL.l * 100 + '%)';
return ret;
}
function getModeColor(mode, dir) {
for (var i = 0; i < LED_MODE_COLORS.length; i++) {
var mc = LED_MODE_COLORS[i];
if (mc.mode == mode && mc.direction == dir)
return mc.color;
}
return "";
}
function setModeColor(mode, dir, color) {
for (var i = 0; i < LED_MODE_COLORS.length; i++) {
var mc = LED_MODE_COLORS[i];
if (mc.mode == mode && mc.direction == dir) {
mc.color = color;
return 1;
}
}
return 0;
}
function clearModeColorSelection() {
selectedModeColor = null;
$('.mode_colors').each(function() {
$(this).children().each(function() {
if ($(this).is('.btnOn')) {
$(this).removeClass('btnOn');
}
});
});
}
};
TABS.led_strip.cleanup = function (callback) {