From 0e5190edd357668ece7fdb50c9fd22898af4ab59 Mon Sep 17 00:00:00 2001 From: gaelj Date: Wed, 20 Jul 2016 00:04:26 +0200 Subject: [PATCH] LED strip update --- _locales/en/messages.json | 2 +- js/backup_restore.js | 42 +- js/fc.js | 5 +- js/msp.js | 353 ++++++++++++---- js/serial_backend.js | 3 +- tabs/led_strip.css | 186 ++++++--- tabs/led_strip.html | 118 +++++- tabs/led_strip.js | 824 +++++++++++++++++++++++++++++++++++--- 8 files changed, 1331 insertions(+), 202 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index be37ce94..9788e6f8 100755 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1475,7 +1475,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." + "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 f91fc140..56890083 100644 --- a/js/backup_restore.js +++ b/js/backup_restore.js @@ -93,7 +93,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() { @@ -110,6 +111,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.19.0")) { + uniqueData.push(MSP_codes.MSP_LED_STRIP_MODECOLOR); + } } update_unique_data_list(); @@ -129,7 +133,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.19.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); @@ -164,7 +172,7 @@ function configuration_backup(callback) { now = (d.getMonth() + 1) + '.' + d.getDate() + '.' + d.getFullYear() + '.' + d.getHours() + '.' + d.getMinutes(); // create or load the file - chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'cleanflight_backup_' + now, accepts: accepts}, function (fileEntry) { + chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'inav_backup_' + now, accepts: accepts}, function (fileEntry) { if (chrome.runtime.lastError) { console.error(chrome.runtime.lastError.message); return; @@ -583,6 +591,21 @@ function configuration_restore(callback) { appliedMigrationsCount++; } + if (!compareVersions(migratedVersion, '1.3.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.3.1'; + GUI.log(chrome.i18n.getMessage('configMigratedTo', [migratedVersion])); + appliedMigrationsCount++; + } + if (appliedMigrationsCount > 0) { GUI.log(chrome.i18n.getMessage('configMigrationSuccessful', [appliedMigrationsCount])); } @@ -709,6 +732,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; @@ -738,7 +763,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.19.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 0369086e..6f1e080c 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; @@ -75,9 +77,10 @@ var FC = { }; LED_STRIP = []; + LED_COLORS = []; + LED_MODE_COLORS = []; PID = { - }; PID_names = []; diff --git a/js/msp.js b/js/msp.js index 0f3675aa..c47e9932 100644 --- 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, @@ -66,6 +68,7 @@ var MSP_codes = { MSP_3D: 124, MSP_RC_DEADBAND: 125, MSP_SENSOR_ALIGNMENT: 126, + MSP_LED_STRIP_MODECOLOR:127, MSP_STATUS_EX: 150, MSP_SET_RAW_RC: 200, @@ -86,6 +89,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, @@ -127,8 +131,10 @@ var MSP = { packet_error: 0, unsupported: 0, - ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order - ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c'], // in LSB bit order + 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 last_received_timestamp: null, analog_last_received_timestamp: null, @@ -887,45 +893,142 @@ 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.20.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; + if (semver.lt(CONFIG.apiVersion, "1.20.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 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 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 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) - }; + 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); + 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); + } } - 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.19.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 @@ -1022,18 +1125,20 @@ var MSP = { // trigger callbacks, cleanup/remove callback after trigger for (var i = this.callbacks.length - 1; i >= 0; i--) { // itterating in reverse because we use .splice which modifies array length - if (this.callbacks[i].code == code) { - // save callback reference - var callback = this.callbacks[i].callback; - - // remove timeout - clearInterval(this.callbacks[i].timer); - - // remove object from array - this.callbacks.splice(i, 1); - - // fire callback - if (callback) callback({'command': code, 'data': data, 'length': message_length}); + if (i < this.callbacks.length) { + if (this.callbacks[i].code == code) { + // save callback reference + var callback = this.callbacks[i].callback; + + // remove timeout + clearInterval(this.callbacks[i].timer); + + // remove object from array + this.callbacks.splice(i, 1); + + // fire callback + if (callback) callback({'command': code, 'data': data, 'length': message_length}); + } } } }, @@ -1083,10 +1188,14 @@ var MSP = { var requestExists = false; for (var i = 0; i < MSP.callbacks.length; i++) { - if (MSP.callbacks[i].code == code) { - // request already exist, we will just attach - requestExists = true; - break; + if (i < MSP.callbacks.length) { + if (MSP.callbacks[i].code == code) { + // request already exist, we will just attach + requestExists = true; + break; + } + } else { + console.log("Callback index error: "+ i); } } @@ -1108,7 +1217,6 @@ var MSP = { } }); } - return true; }, callbacks_cleanup: function () { @@ -1368,7 +1476,7 @@ MSP.crunch = function (code) { buffer.push(SENSOR_ALIGNMENT.align_gyro); buffer.push(SENSOR_ALIGNMENT.align_acc); buffer.push(SENSOR_ALIGNMENT.align_mag); - break + break; default: return false; @@ -1604,49 +1712,148 @@ 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.20.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++; if (ledIndex == LED_STRIP.length) { nextFunction = onCompleteCallback; } - + MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_CONFIG, buffer, false, nextFunction); } } +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 = []; @@ -1709,4 +1916,4 @@ MSP.SDCARD_STATE_NOT_PRESENT = 0; MSP.SDCARD_STATE_FATAL = 1; MSP.SDCARD_STATE_CARD_INIT = 2; MSP.SDCARD_STATE_FS_INIT = 3; -MSP.SDCARD_STATE_READY = 4; +MSP.SDCARD_STATE_READY = 4; \ No newline at end of file diff --git a/js/serial_backend.js b/js/serial_backend.js index cfe34beb..7e68e54d 100755 --- a/js/serial_backend.js +++ b/js/serial_backend.js @@ -280,7 +280,6 @@ function onConnect() { dataflash.show(); startLiveDataRefreshTimer(); - } function onClosed(result) { @@ -317,7 +316,7 @@ function read_serial(info) { function sensor_status(sensors_detected) { // initialize variable (if it wasn't) if (!sensor_status.previous_sensors_detected) { - sensor_status.previous_sensors_detected = 0; + sensor_status.previous_sensors_detected = -1; // Otherwise first iteration will not be run if sensors_detected == 0 } // update UI (if necessary) diff --git a/tabs/led_strip.css b/tabs/led_strip.css index db6ebc7f..797ed2b5 100644 --- a/tabs/led_strip.css +++ b/tabs/led_strip.css @@ -17,6 +17,8 @@ float: left; margin-right: 10px; border-radius: 3px; + background-color: #dcdcdc; + border: silver; } .tab-led-strip .mainGrid .gPoint { @@ -26,84 +28,117 @@ height: 23px; margin: 3px; border-radius: 7px; - background: #ececec;; + background: #ececec; cursor: pointer; } -.tab-led-strip .gPoint.function-w { /* Warning */ - background: red; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: red; -} - -.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */ - background: rgb(50, 205, 50); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(50, 205, 50); -} - -.tab-led-strip .gPoint.function-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); +.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-t { /* Thrust Mode */ - background: orange; - 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; } +.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */ + background: rgb(50, 205, 50); + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(50, 205, 50); +} + +.tab-led-strip .gPoint.function-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-l { /* Battery */ + background: magenta; + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); +} + .tab-led-strip .gPoint.function-r { /* Ring */ background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, white 60%,white 70%,black 70%, black 100%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); border-color: black; } -.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-g { /* GPS */ + background: green; + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); } -.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-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-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-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-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-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-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-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-w { - background: linear-gradient(to bottom, yellow 0%,yellow 50%,#ff5454 50%,#ba3535 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-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-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-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.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-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-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 select { background: #000; width: 13px; @@ -137,10 +172,9 @@ .tab-led-strip button { text-align: center; font-weight: bold; - border: 1px solid silver; background-color: #ececec; - + border-radius: 3px; padding: 7px 6px; margin: 3px 0; } @@ -162,16 +196,46 @@ 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: blue;} -.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 .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;} .tab-led-strip .color-3 {background: orange;} @@ -188,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; } @@ -269,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, @@ -304,8 +377,9 @@ .tab-led-strip .wires-remaining div { font-size: 40px; - color: #37a8db; - font-family: monospace; + color: #ffbb00; + margin-bottom: -5px; + margin-top: -10px; } .tab-led-strip .wires-remaining.error div { diff --git a/tabs/led_strip.html b/tabs/led_strip.html index 8ee3b461..3a0cf02d 100644 --- a/tabs/led_strip.html +++ b/tabs/led_strip.html @@ -28,6 +28,24 @@
+
+
Color setup
+
+ + + +
+
+ + + +
+
+ + + +
+
@@ -37,16 +55,79 @@
LED Functions
-
- - - - - - - + + +
+ Function +
+ +
+ Color modifier +
+ + +
+
+ + +
+
+ +
+ Blink +
+ + +
+
+ + +
+
+ +
+ Overlay +
+ + +
+
+ + +
+
+ +
+
Mode colors
+ + + + + + + + + +
+
LED Orientation and Color
@@ -56,6 +137,7 @@
+
@@ -75,7 +157,18 @@
- +
+
Special colors
+ + + + + + + + +
+
LED Strip Wiring
@@ -86,6 +179,11 @@

LEDs without wire ordering number will not be saved.

+ +
+ +
+
@@ -93,4 +191,4 @@
- \ No newline at end of file + diff --git a/tabs/led_strip.js b/tabs/led_strip.js index a29c77a7..33532d2c 100644 --- a/tabs/led_strip.js +++ b/tabs/led_strip.js @@ -2,12 +2,24 @@ TABS.led_strip = { wireMode: false, - functions: ['w', 'f', 'i', 'a', 't', 'r', 'c'], - directions: ['n', 'e', 's', 'w', 'u', 'd'], + 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.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']; + } 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; @@ -17,9 +29,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.19.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); } @@ -47,7 +74,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.lte(CONFIG.apiVersion, "1.19.0")) + theHTML[theHTMLlength++] = ('
UD
'); + else + theHTML[theHTMLlength++] = ('
UD
'); } $('.mainGrid').html(theHTML.join('')); @@ -82,8 +112,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) { @@ -92,7 +125,6 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { $(element).removeClass(classesToRemove.join(' ')); } - // Directional Buttons $('.directions').on('click', 'button', function() { var that = this; @@ -109,51 +141,126 @@ 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'); @@ -181,8 +288,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(); @@ -199,38 +308,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; - TABS.led_strip.functions.forEach(function(letter) { - var className = '.function-' + letter; - if ($(that).is(className)) { - functionsInSelection.push(className); - } - }); + // 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); + } + }); + } + }); + 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) { @@ -239,6 +395,115 @@ 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() != "") { + + var p = $(this).parent(); + + TABS.led_strip.functions.forEach(function(f) { + if (p.is('.function-' + f)) { + + switch (letter) { + case 't': + case 'o': + case 's': + if (areModifiersActive('function-' + f)) + p.addClass('function-' + letter); + break; + case 'b': + case 'n': + if (areBlinkersActive('function-' + f)) + p.addClass('function-' + letter); + break; + case 'i': + if (areOverlaysActive('function-' + f)) + p.addClass('function-' + letter); + break; + case 'w': + if (areOverlaysActive('function-' + f)) + if (isWarningActive('function-' + f)) + p.addClass('function-' + letter); + break; + } + } + }); + } + }); + } else { + $('.ui-selected').removeClass('function-' + letter); + } + return $(that).is(':checked'); + } + + // UI: check-box 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'); // blink on landing + var cbb = $('.checkbox .function-b'); // blink + + if (ret) { + if (letter == 'b' && cbn.is(':checked')) { + cbn.prop('checked', false); + cbn.change(); + toggleSwitch(cbn, 'n'); + } else if (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(){ @@ -257,7 +522,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { var ledIndex = ledResult.index; var led = ledResult.led; - if (led.functions.length == 0 && led.directions.length == 0 && led.color == 0) { + if (led.functions[0] == 'c' && led.functions.length == 1 && led.directions.length == 0 && led.color == 0 && led.x == 0 && led.y == 0) { return; } @@ -274,12 +539,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.19.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')); @@ -287,10 +562,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { } }); + + $('.colorDefineSliders').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]; @@ -300,12 +589,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 = []; @@ -326,8 +618,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; } @@ -375,8 +672,423 @@ 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.19.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 areModifiersActive(activeFunction) { + switch (activeFunction) { + case "function-c": + case "function-a": + case "function-f": + return true; + break; + } + return false; + } + + function areOverlaysActive(activeFunction) { + if (semver.lt(CONFIG.apiVersion, "1.20.0")) { + switch (activeFunction) { + case "function-c": + case "function-a": + case "function-f": + case "function-g": + return true; + break; + } + } else { + switch (activeFunction) { + case "": + case "function-c": + case "function-a": + case "function-f": + case "function-s": + case "function-l": + case "function-r": + case "function-o": + case "function-g": + return true; + break; + } + } + return false; + } + + function areBlinkersActive(activeFunction) { + if (semver.gte(CONFIG.apiVersion, "1.20.0")) { + switch (activeFunction) { + case "function-c": + case "function-a": + case "function-f": + return true; + break; + } + } + return false; + } + + function isWarningActive(activeFunction) { + switch (activeFunction) { + case "function-l": + case "function-s": + case "function-g": + return false; + break; + case "function-r": + case "function-b": + if (semver.lt(CONFIG.apiVersion, "1.20.0")) + return false; + break; + default: + return true; + break; + } + } + + function setOptionalGroupsVisibility() { + + var activeFunction = $('select.functionSelect').val(); + $('select.functionSelect').addClass(activeFunction); + + + 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_functions20").hide(); + $(".mode_colors").hide(); + } else { + // >= 20 + // Show GPS (Func) + // Hide RSSI (O/L), Blink (Func) + // Show Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L) + $(".extra_functions20").show(); + $(".mode_colors").show(); + } + + + // set color modifiers (check-boxes) visibility + $('.overlays').hide(); + $('.modifiers').hide(); + $('.blinkers').hide(); + $('.warningOverlay').hide(); + + if (areOverlaysActive(activeFunction)) + $('.overlays').show(); + + if (areModifiersActive(activeFunction)) + $('.modifiers').show(); + + if (areBlinkersActive(activeFunction)) + $('.blinkers').show(); + + if (isWarningActive(activeFunction)) + $('.warningOverlay').show(); + + + + // set directions visibility + if (semver.lt(CONFIG.apiVersion, "1.20.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.19.0")) { + // set mode colors visibility + + if (semver.gte(CONFIG.apiVersion, "1.20.0")) + 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.20.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.20 + 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) { + $('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) { + if (input == undefined) + return ""; + + 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) { if (callback) callback(); -}; +}; \ No newline at end of file