CF new LED strip port

_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.<br />Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions. LEDs without wire ordering number will not be saved.<br />Double-click on a color to edit the HSV values."
     },
     "ledStripButtonSave": {
         "message": "Save"

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() {

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

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);
+                    if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
-                    offset += 2;
+                        var directionMask = data.getUint16(offset, 1);
-
+                        offset += 2;
-                    var functions = [];
+                        
-                    for (var functionLetterIndex = 0; functionLetterIndex < MSP.ledFunctionLetters.length; functionLetterIndex++) {
+                        var directions = [];
-                        if (bit_check(functionMask, functionLetterIndex)) {
+                        for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
-                            functions.push(MSP.ledFunctionLetters[functionLetterIndex]);
+                            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;
+        if (semver.lt(CONFIG.apiVersion, "1.17.0")) {
-        for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
+            var directionMask = 0;
-            var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
+            for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
-            if (bitIndex >= 0) {
+                var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
-                directionMask = bit_set(directionMask, bitIndex);
+                if (bitIndex >= 0) {
+                    directionMask = bit_set(directionMask, bitIndex);
+                }
             }
-        }
+            buffer.push(specificByte(directionMask, 0));
-        buffer.push(specificByte(directionMask, 0));
+            buffer.push(specificByte(directionMask, 1));
-        buffer.push(specificByte(directionMask, 1));
+    
-
+            var functionMask = 0;
-        var functionMask = 0;
+            for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
-        for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
+                var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
-            var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
+                if (bitIndex >= 0) {
-            if (bitIndex >= 0) {
+                    functionMask = bit_set(functionMask, bitIndex);
-                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 = [];
     

tabs/led_strip.css

@@ -32,10 +32,16 @@
     cursor: pointer;
 }
 
-.tab-led-strip .gPoint.function-w { /* Warning */
+.tab-led-strip .gPoint.function-s { /* RSSI */
-    background: red;
+    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 */
+.tab-led-strip .gPoint.function-l { /* Battery */
-    background: orange;
+    background: magenta;
     box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: orange;
+    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-r { /* Ring */
@@ -80,49 +74,70 @@
     border-color: rgb(52, 155, 255);
 }
 
-.tab-led-strip .gPoint.function-s { /* RSSI */
+.tab-led-strip .gPoint.function-c .overlay-color,
-    background: brown;
+.tab-led-strip .gPoint.function-r .overlay-color {
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    float: left;
-    border-color: rgb(52, 155, 255);
+    height: 15px;
+    width: 15px;
+    margin-top: -23px;
+    margin-left: 4px;
+    border-radius: 4px;
 }
 
-.tab-led-strip .gPoint.function-b { /* Blink */
+.tab-led-strip .gPoint.function-s .overlay-s,
-    background: white;
+.tab-led-strip .gPoint.function-w .overlay-w,
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+.tab-led-strip .gPoint.function-i .overlay-i,
-    border-color: rgb(52, 155, 255);
+.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 {
+.tab-led-strip .gPoint.function-w .overlay-w {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(50, 205, 50) 50%, rgb(50, 205, 50) 100%);
+    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 {
+.tab-led-strip .gPoint.function-i .overlay-i {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(52, 155, 255) 50%, rgb(52, 155, 255) 100%);
+    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 {
+.tab-led-strip .gPoint.function-t .overlay-t {
-    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%);
+    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 {
+.tab-led-strip .gPoint.function-s .overlay-s {
-    background: linear-gradient(to bottom, yellow 0%,yellow 33%,red 33%, red 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
+    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 {
+.tab-led-strip .gPoint.function-o .overlay-o {
-    background: linear-gradient(to bottom, orange 0%,orange 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, red 66%, red 100%);
+    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 {
+.tab-led-strip .gPoint.function-b .overlay-b {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,#ff5454 50%,#ba3535 100%);
+    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 {
+.tab-led-strip .gPoint.function-n .overlay-n {
-    background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,#ff5454 50%,#ba3535 100%);
+    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;}
+/* Drop-down boxes */
-.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 .select {    background: white;}
-.tab-led-strip .functions .function-a.btnOn {background: #0084ff;}
+.tab-led-strip .select .function-c {
-.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 {
     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 .select .function-f {    background: rgb(50, 205, 50);}
-.tab-led-strip .functions .function-b.btnOn {background: white;}
+.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,

tabs/led_strip.html

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

tabs/led_strip.js

@@ -1,13 +1,25 @@
 'use strict';
 
 TABS.led_strip = {
-    wireMode: false,
+        wireMode: false,
-    functions: ['w', 'f', 'i', 'a', 't', 'r', 'c', 'g', 's', 'b'],
+        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.17.0")) {
+        TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b'];
+        TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'b', 'g', 'r'];
+        TABS.led_strip.overlays = ['t', 's', 'i', 'w'];
+    } else {
+        TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l', 'o', 'n'];
+        TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'l', 's', 'g', 'r'];
+        TABS.led_strip.overlays = ['t', 'o', 'b', 'n', 'i', 'w'];
+    }
 
     TABS.led_strip.wireMode = false;
 
@@ -16,9 +28,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
     }
 
     function load_led_config() {
-        MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
+        MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_led_colors);
     }
 
+    function load_led_colors() {
+        MSP.send_message(MSP_codes.MSP_LED_COLORS, false, false, load_led_mode_colors);
+    }
+
+    function load_led_mode_colors() {
+        if (semver.gte(CONFIG.apiVersion, "1.17.0"))
+            MSP.send_message(MSP_codes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
+        else
+            load_html();
+    }
+    
+    
+    
+    
+    
     function load_html() {
         $('#content').load("./tabs/led_strip.html", process_html);
     }
@@ -46,7 +73,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
         var theHTML = [];
         var theHTMLlength = 0;
         for (var i = 0; i < 256; i++) {
-            theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span></div>');
+            if (semver.lt(CONFIG.apiVersion, "1.17.0"))
+                theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span><span class="overlay-t"> </span><span class="overlay-s"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
+            else
+                theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span><span class="overlay-t"> </span><span class="overlay-o"> </span><span class="overlay-b"> </span><span class="overlay-n"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
         }
         $('.mainGrid').html(theHTML.join(''));
 
@@ -81,8 +111,11 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
 
         function removeFunctionsAndDirections(element) {
             var classesToRemove = [];
-            
+
-            TABS.led_strip.functions.forEach(function(letter) {
+            TABS.led_strip.baseFuncs.forEach(function(letter) {
+                classesToRemove.push('function-' + letter);
+            });
+            TABS.led_strip.overlays.forEach(function(letter) {
                 classesToRemove.push('function-' + letter);
             });
             TABS.led_strip.directions.forEach(function(letter) {
@@ -108,51 +141,128 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                     }
                 });
 
+                clearModeColorSelection();
                 updateBulkCmd();
             }
         });
-
+        
-
+        // Mode Color Buttons
-        // Mode Buttons
+        $('.mode_colors').on('click', 'button', function() {
-        $('.functions').on('click', 'button', function() {
             var that = this;
-            if ($('.ui-selected').length > 0) {
+            LED_MODE_COLORS.forEach(function(mc) {
-                TABS.led_strip.functions.forEach(function(letter) {
+                if ($(that).is('.mode_color-' + mc.mode + '-' + mc.direction)) {
-                    if ($(that).is('.function-' + letter)) {
+                    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')) {
+                        // select the color button
-                            $(that).removeClass('btnOn');
+                        for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
-                            $('.ui-selected').removeClass('function-' + letter);
+                            var className = '.color-' + colorIndex;
-                        } else {
+                            if (colorIndex == getModeColor(mc.mode, mc.direction)) {
-                            $(that).addClass('btnOn');
+                                $(className).addClass('btnOn');
-                            $('.ui-selected').addClass('function-' + letter);
+                                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) {
+                        that = this;
-                        var className = '.dir-' + letter;
+    
-                        if ($(that).is(className)) {
+                        // Get function & overlays or current cell
-                            directionsInSelection.push(className);
+                        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 uiSelectedLast = that;
-                        var className = '.function-' + letter;
+                $('select.functionSelect').val("");
-                        if ($(that).is(className)) {
-                            functionsInSelection.push(className);
-                        }
-                    });
 
+                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');
+                setColorSliders(selectedColorIndex);
-                functionsInSelection.forEach(function(function_e) {
+                
-                    $(function_e).addClass('btnOn');
+                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') {
+        applyFunctionToSelectedLeds();
-            $(".extra_functions").hide();
+        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) {