From 92ec31f80ba3ee121cbdd89cc10e0fe54a88c968 Mon Sep 17 00:00:00 2001 From: gaelj Date: Sat, 25 Jun 2016 15:25:38 +0200 Subject: [PATCH 1/2] CF new LED strip port --- _locales/en/messages.json | 2 +- js/backup_restore.js | 42 +- js/fc.js | 4 + js/msp.js | 310 ++++++++++++--- tabs/led_strip.css | 161 +++++--- tabs/led_strip.html | 120 +++++- tabs/led_strip.js | 787 +++++++++++++++++++++++++++++++++++--- 7 files changed, 1245 insertions(+), 181 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c682e8d2..15d0ff90 100755 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -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.
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.
Double-click on a color to edit the HSV values." }, "ledStripButtonSave": { "message": "Save" diff --git a/js/backup_restore.js b/js/backup_restore.js index 29367dca..7b37046e 100644 --- a/js/backup_restore.js +++ b/js/backup_restore.js @@ -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() { diff --git a/js/fc.js b/js/fc.js index c1abd715..6cd01080 100644 --- a/js/fc.js +++ b/js/fc.js @@ -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 diff --git a/js/msp.js b/js/msp.js index db0a6f1d..31b32c1a 100755 --- a/js/msp.js +++ b/js/msp.js @@ -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 = []; diff --git a/tabs/led_strip.css b/tabs/led_strip.css index cec6f085..0fc4a277 100644 --- a/tabs/led_strip.css +++ b/tabs/led_strip.css @@ -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, diff --git a/tabs/led_strip.html b/tabs/led_strip.html index 105cb8b3..27ade963 100644 --- a/tabs/led_strip.html +++ b/tabs/led_strip.html @@ -28,6 +28,24 @@
+
+
Color setup
+
+ + + +
+
+ + + +
+
+ + + +
+
@@ -37,19 +55,79 @@
LED Functions
-
- - - - - - - - - - + + +
+ Function +
+ +
+ Color modifier +
+ + +
+
+ + +
+
+ +
+ Blink +
+ + +
+
+ + +
+
+ +
+ Overlay +
+ + +
+
+ + +
+
+ +
+
Mode colors
+ + + + + + + + + +
+
LED Orientation and Color
@@ -59,6 +137,7 @@
+
@@ -78,7 +157,18 @@
- +
+
Special colors
+ + + + + + + + +
+
LED Strip Wiring
@@ -87,7 +177,13 @@
+

LEDs without wire ordering number will not be saved.

+ +
+ +
+
diff --git a/tabs/led_strip.js b/tabs/led_strip.js index 91962963..27f19a09 100644 --- a/tabs/led_strip.js +++ b/tabs/led_strip.js @@ -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++] = ('
UD
'); + if (semver.lt(CONFIG.apiVersion, "1.17.0")) + theHTML[theHTMLlength++] = ('
UD
'); + else + theHTML[theHTMLlength++] = ('
UD
'); } $('.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) { From b62abd74e7eeb5ccc16c3dfa94d37b10cf8a1a11 Mon Sep 17 00:00:00 2001 From: gaelj Date: Sun, 26 Jun 2016 23:02:28 +0200 Subject: [PATCH 2/2] MSP versioning CF compatible --- js/backup_restore.js | 10 +++++----- js/msp.js | 8 ++++---- tabs/led_strip.html | 10 +++++----- tabs/led_strip.js | 32 ++++++++++++++++---------------- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/js/backup_restore.js b/js/backup_restore.js index 7b37046e..4385d0f9 100644 --- a/js/backup_restore.js +++ b/js/backup_restore.js @@ -112,7 +112,7 @@ 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")) { + if (semver.gte(CONFIG.apiVersion, "1.19.0")) { uniqueData.push(MSP_codes.MSP_LED_STRIP_MODECOLOR); } } @@ -136,7 +136,7 @@ function configuration_backup(callback) { configuration.LED_STRIP = jQuery.extend(true, [], LED_STRIP); configuration.LED_COLORS = jQuery.extend(true, [], LED_COLORS); - if (semver.gte(CONFIG.apiVersion, "1.17.0")) { + if (semver.gte(CONFIG.apiVersion, "1.19.0")) { configuration.LED_MODE_COLORS = jQuery.extend(true, [], LED_MODE_COLORS); } if (semver.gte(CONFIG.apiVersion, "1.8.0")) { @@ -612,7 +612,7 @@ function configuration_restore(callback) { appliedMigrationsCount++; } - if (!compareVersions(migratedVersion, '1.2.1')) { + if (!compareVersions(migratedVersion, '1.3.1')) { // LED_COLORS & LED_MODE_COLORS support was added. if (!configuration.LED_COLORS) { @@ -622,7 +622,7 @@ function configuration_restore(callback) { configuration.LED_MODE_COLORS = []; } - migratedVersion = '1.2.1'; + migratedVersion = '1.3.1'; GUI.log(chrome.i18n.getMessage('configMigratedTo', [migratedVersion])); appliedMigrationsCount++; } @@ -793,7 +793,7 @@ function configuration_restore(callback) { } function send_led_strip_mode_colors() { - if (semver.gte(CONFIG.apiVersion, "1.17.0")) + if (semver.gte(CONFIG.apiVersion, "1.19.0")) MSP.sendLedStripModeColors(send_rxfail_config); else send_rxfail_config(); diff --git a/js/msp.js b/js/msp.js index 31b32c1a..198b504f 100755 --- a/js/msp.js +++ b/js/msp.js @@ -941,13 +941,13 @@ var MSP = { 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")) + if (semver.gte(CONFIG.apiVersion, "1.20.0")) ledCount = data.byteLength / 4; var offset = 0; for (var i = 0; offset < data.byteLength && i < ledCount; i++) { - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { var directionMask = data.getUint16(offset, 1); offset += 2; @@ -1048,7 +1048,7 @@ var MSP = { console.log('Led strip colors saved'); break; case MSP_codes.MSP_LED_STRIP_MODECOLOR: - if (semver.gte(CONFIG.apiVersion, "1.17.0")) { + if (semver.gte(CONFIG.apiVersion, "1.19.0")) { LED_MODE_COLORS = []; @@ -1838,7 +1838,7 @@ MSP.sendLedStripConfig = function(onCompleteCallback) { buffer.push(ledIndex); - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { var directionMask = 0; for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) { var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]); diff --git a/tabs/led_strip.html b/tabs/led_strip.html index 27ade963..bd9d6e20 100644 --- a/tabs/led_strip.html +++ b/tabs/led_strip.html @@ -64,9 +64,9 @@ - - - + + +
@@ -78,13 +78,13 @@
-
+
-
+
Blink
diff --git a/tabs/led_strip.js b/tabs/led_strip.js index 27f19a09..bc825a9a 100644 --- a/tabs/led_strip.js +++ b/tabs/led_strip.js @@ -11,7 +11,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { var selectedColorIndex = null; var selectedModeColor = null; - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.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']; @@ -36,7 +36,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { } function load_led_mode_colors() { - if (semver.gte(CONFIG.apiVersion, "1.17.0")) + if (semver.gte(CONFIG.apiVersion, "1.19.0")) MSP.send_message(MSP_codes.MSP_LED_STRIP_MODECOLOR, false, false, load_html); else load_html(); @@ -73,7 +73,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { var theHTML = []; var theHTMLlength = 0; for (var i = 0; i < 256; i++) { - if (semver.lt(CONFIG.apiVersion, "1.17.0")) + if (semver.lte(CONFIG.apiVersion, "1.19.0")) theHTML[theHTMLlength++] = ('
UD
'); else theHTML[theHTMLlength++] = ('
UD
'); @@ -520,7 +520,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { } function send_led_strip_mode_colors() { - if (semver.gte(CONFIG.apiVersion, "1.17.0")) + if (semver.gte(CONFIG.apiVersion, "1.19.0")) MSP.sendLedStripModeColors(save_to_eeprom); else save_to_eeprom(); @@ -645,7 +645,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { // refresh mode color buttons function setModeBackgroundColor(element) { - if (semver.gte(CONFIG.apiVersion, "1.17.0")) { + if (semver.gte(CONFIG.apiVersion, "1.19.0")) { element.find('[class*="mode_color"]').each(function() { var m = 0; var d = 0; @@ -678,19 +678,19 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { $('select.functionSelect').addClass(activeFunction); - if (semver.lte(CONFIG.apiVersion, "1.16.0")) { - // <= 16 + if (semver.lte(CONFIG.apiVersion, "1.18.0")) { + // <= 18 // 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(); + $(".extra_functions20").hide(); $(".mode_colors").hide(); } else { - // >= 17 + // >= 20 // 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(); + $(".extra_functions20").show(); $(".mode_colors").show(); } @@ -701,7 +701,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { $('.modifiers').hide(); $('.blinkers').hide(); - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { switch (activeFunction) { case "function-c": case "function-a": @@ -751,7 +751,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { break; case "function-r": case "function-b": - if (semver.lt(CONFIG.apiVersion, "1.17.0")) + if (semver.lt(CONFIG.apiVersion, "1.20.0")) $('.warningOverlay').hide(); break; default: @@ -783,7 +783,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { // set overlays (checkboxes) visibility // set directions visibility - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { switch (activeFunction) { case "function-r": $('.indicatorOverlay').hide(); @@ -796,7 +796,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { } } $('.mode_colors').hide(); - if (semver.gte(CONFIG.apiVersion, "1.17.0")) { + if (semver.gte(CONFIG.apiVersion, "1.19.0")) { // set mode colors visibility if (activeFunction == "function-f") $('.mode_colors').show(); @@ -868,7 +868,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { } function unselectOverlays(letter) { - if (semver.lt(CONFIG.apiVersion, "1.17.0")) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { if (letter == 'b' || letter == 'r') { unselectOverlay(letter, 'i'); } @@ -878,7 +878,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { unselectOverlay(letter, 's'); } } else { - // MSP 1.17 + // MSP 1.20 if (letter == 'r' || letter == '') { unselectOverlay(letter, 'o'); unselectOverlay(letter, 'b');