Allow LED strip colors to be used. Requires new firmware.

At the moment colors are only used by the thrust ring mode.

js/msp.js

@@ -94,7 +94,7 @@ var MSP = {
     packet_error:               0,
 
     ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
-    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't'],      // in LSB bit order
+    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r'], // in LSB bit order
 
     read: function (readInfo) {
         var data = new Uint8Array(readInfo.data);
@@ -620,7 +620,7 @@ var MSP = {
             case MSP_codes.MSP_LED_STRIP_CONFIG:
                 LED_STRIP = [];
                 
-                var ledCount = data.byteLength / 6; // v1.4.0 and below incorrectly reported 4 bytes per led.
+                var ledCount = data.byteLength / 7; // v1.4.0 and below incorrectly reported 4 bytes per led.
                 
                 var offset = 0;
                 for (var i = 0; offset < data.byteLength && i < ledCount; i++) {
@@ -649,7 +649,8 @@ var MSP = {
                         directions: directions,
                         functions: functions,
                         x: data.getUint8(offset++, 1),
-                        y: data.getUint8(offset++, 1)
+                        y: data.getUint8(offset++, 1),
+                        color: data.getUint8(offset++, 1)
                     };
                     
                     LED_STRIP.push(led);
@@ -1045,6 +1046,8 @@ MSP.sendLedStripConfig = function(onCompleteCallback) {
         buffer.push(led.x);
         buffer.push(led.y);
 
+        buffer.push(led.color);
+
         
         // prepare for next iteration
         ledIndex++;

tabs/led_strip.css

@@ -7,7 +7,7 @@
 
 .tab-led-strip .section {
     color: #565656;
-    margin: 20px 0 0 0;
+    margin: 20px 0 5px 0;
     border-bottom: 1px solid silver;
 }
 
@@ -41,6 +41,30 @@
     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 { /* Armed Mode */
+    background: orange;
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    border-color: orange;
+}
+
+.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%);
 }
@@ -73,24 +97,6 @@
     background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,orange 50%,orange 100%);
 }
 
-.tab-led-strip .gPoint.function-i { /* indicator */
-    background: yellow;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: yellow;       
-}
-
-.tab-led-strip .gPoint.function-a { /* Armed Mode */
-    background: rgb(52, 155, 255);
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: rgb(52, 155, 255);
-}
-
-.tab-led-strip .gPoint.function-t { /* Armed Mode */
-    background: orange;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: orange;
-}
-
 .tab-led-strip .gPoint select {
     background: #000;
     width: 13px;
@@ -115,8 +121,8 @@
     color: rgba(255,255,255,1);
 }
 
-.gridWire .gPoint {
+.gridWire {
-    background: #CAFFCD !important;
+    background: rgba(15, 171, 22, .5) !important;
 }
 
 /*function buttons*/
@@ -149,16 +155,14 @@
     width: 49%;
 }
 
-.tab-led-strip button.w33 {
-    width: 32%;
-}
-
 .tab-led-strip .functions .function-w.btnOn {background: red;}
 .tab-led-strip .functions .function-f.btnOn {background: rgb(50, 205, 50);}
 .tab-led-strip .functions .function-i.btnOn {background: yellow; color: #333;}
 .tab-led-strip .functions .function-a.btnOn {background: blue;}
 .tab-led-strip .functions .function-t.btnOn {background: orange;}
+.tab-led-strip .functions .function-r.btnOn {background: #acacac;}
 
+.tab-led-strip .colors .btnOn,
 .tab-led-strip .directions .btnOn {background: #FFF; color: #000;}
 
 .tab-led-strip .indicators {
@@ -232,12 +236,15 @@
     height: calc((30px + 8px) * 16);
 }
 
-.tab-led-strip .directions {
+.tab-led-strip .directions,
-    width: 130px;
+.tab-led-strip .colors {
-    height: 100px;
+    height: 130px;
     position: relative;
+	display: inline-block;
+    width: 49%;
 }
 
+
 .tab-led-strip .directions button {
     position: absolute;
     width: 30px;
@@ -245,11 +252,15 @@
 }
 
 .tab-led-strip .directions .dir-n {top: 0; left: 32px;}
-.tab-led-strip .directions .dir-s {bottom: 0; left: 32px;}
+.tab-led-strip .directions .dir-s {top: 64px; left: 32px;}
 .tab-led-strip .directions .dir-e {left: 64px; top: 32px;}
 .tab-led-strip .directions .dir-w {left: 0; top: 32px;}
-.tab-led-strip .directions .dir-u {right: 0; top: 15px;}
+.tab-led-strip .directions .dir-u {right: 10px; top: 15px;}
-.tab-led-strip .directions .dir-d {right: 0; bottom: 15px;}
+.tab-led-strip .directions .dir-d {right: 10px; top: 54px;}
+
+.tab-led-strip .colors button {
+    width: 23%;
+}
 
 .tab-led-strip .wires-remaining {
     float: right;

tabs/led_strip.html

@@ -12,13 +12,14 @@
         <div class="section">LED Functions</div>
         <div class="functions">
             <button class="function-w w50">Warnings</button>
-            <button class="function-f w50">Flight &amp; Orientation</button><br>
+            <button class="function-f w50">Modes &amp; Orientation</button>
-            <button class="function-i w33">Indicator</button>
+            <button class="function-i w50">Indicator</button>
-            <button class="function-a w33">Arm State</button>
+            <button class="function-a w50">Arm State</button>
-            <button class="function-t w33">Thrust</button>
+            <button class="function-t w50">Throttle</button>
+            <button class="function-r w50">Ring</button>
         </div>
     
-        <div class="section">LED Orientation</div>
+        <div class="section">LED Orientation and Color</div>
         <div class="directions">
             <button class="dir-n">N</button>
             <button class="dir-e">E</button>
@@ -27,6 +28,24 @@
             <button class="dir-u">U</button>
             <button class="dir-d">D</button>
         </div>
+        <div class="colors">
+            <button class="color-0">0</button>
+            <button class="color-1">1</button>
+            <button class="color-2">2</button>
+            <button class="color-3">3</button>
+            <button class="color-4">4</button>
+            <button class="color-5">5</button>
+            <button class="color-6">6</button>
+            <button class="color-7">7</button>
+            <button class="color-8">8</button>
+            <button class="color-9">9</button>
+            <button class="color-10">10</button>
+            <button class="color-11">11</button>
+            <button class="color-12">12</button>
+            <button class="color-13">13</button>
+            <button class="color-14">14</button>
+            <button class="color-15">15</button>
+        </div>
 
 
         <div class="section">LED Strip Wiring</div>

tabs/led_strip.js

@@ -2,7 +2,7 @@
 
 TABS.led_strip = {
     wireMode: false,
-    functions: ['w', 'f', 'i', 'a', 't'],
+    functions: ['w', 'f', 'i', 'a', 't', 'r'],
     directions: ['n', 'e', 's', 'w', 'u', 'd'],
 };
 
@@ -122,6 +122,25 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             }
         });
 
+        // Color Buttons
+        $('.colors').on('click', 'button', function() {            
+            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 ($(that).is('.color-' + colorIndex)) {
+                    $('.ui-selected').addClass('color-' + colorIndex);
+                }
+            }
+
+            $(this).addClass('btnOn');
+
+            updateBulkCmd();
+        });
+
         $('.funcWire').click(function() {
             (TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
             $(this).toggleClass('btnOn');
@@ -167,21 +186,32 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                     var that = this;
 
                     TABS.led_strip.directions.forEach(function(letter) {
-                        if ($(that).is('.dir-' + letter)) {
+                        var className = '.dir-' + letter;
-                            $('.dir-' + letter).addClass('btnOn');
+                        if ($(that).is(className)) {
+                            $(className).addClass('btnOn');
                         } else {
-                            $('.dir-' + letter).removeClass('btnOn');
+                            $(className).removeClass('btnOn');
                         }
                     });
 
                     TABS.led_strip.functions.forEach(function(letter) {
-                        if ($(that).is('.function-' + letter)) {
+                        var className = '.function-' + letter;
-                            $('.function-' + letter).addClass('btnOn');
+                        if ($(that).is(className)) {
+                            $(className).addClass('btnOn');
                         } else {
-                            $('.function-' + letter).removeClass('btnOn');
+                            $(className).removeClass('btnOn');
                         }
                     });
 
+                    for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
+                        var className = '.color-' + colorIndex;
+                        if ($(this).is(className)) {
+                            $(className).addClass('btnOn');
+                        } else {
+                            $(className).removeClass('btnOn');
+                        }
+                    }
+
                     updateBulkCmd();
                 });
             }
@@ -205,7 +235,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) {
+            if (led.functions.length == 0 && led.directions.length == 0 && led.color == 0) {
                 return;
             }
             
@@ -219,6 +249,8 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                 $(this).addClass('dir-' + led.directions[directionIndex]);
             }
             
+            $(this).addClass('color-' + led.color);
+
         });
         updateBulkCmd(); 
         
@@ -265,8 +297,14 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                 var wireNumber = $(this).find('.wire').html();
                 var functions = '';
                 var directions = '';
+                var colorIndex = 0;
                 var that = this;
                 
+                var match = $(this).attr("class").match(/(^|\s)color-([0-9]+)(\s|$)/);
+                if (match) {
+                    colorIndex = match[2];
+                }
+                
                 TABS.led_strip.functions.forEach(function(letter){
                     if ($(that).is('.function-' + letter)) {
                         functions += letter;
@@ -284,7 +322,8 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                         x: col,
                         y: row,
                         directions: directions,
-                        functions: functions
+                        functions: functions,
+                        color: colorIndex
                     }
                     
                     LED_STRIP[wireNumber] = led;