From 994b04b0aaaf029400e9e7681ccca76882ffe9fb Mon Sep 17 00:00:00 2001
From: Dominic Clifton <me@dominicclifton.name>
Date: Sun, 25 Jan 2015 16:22:43 +0100
Subject: [PATCH] Add support for LED strip 'color' mode.

---
 js/msp.js           |  4 ++--
 tabs/led_strip.css  | 20 ++++++++++++++------
 tabs/led_strip.html |  1 +
 tabs/led_strip.js   |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/js/msp.js b/js/msp.js
index 85147254..80928af4 100644
--- a/js/msp.js
+++ b/js/msp.js
@@ -93,8 +93,8 @@ var MSP = {
     callbacks:                  [],
     packet_error:               0,
 
-    ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
-    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r'], // in LSB bit order
+    ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'],      // in LSB bit order
+    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r', 'c'], // in LSB bit order
 
     read: function (readInfo) {
         var data = new Uint8Array(readInfo.data);
diff --git a/tabs/led_strip.css b/tabs/led_strip.css
index c18cc3e8..42f053cc 100644
--- a/tabs/led_strip.css
+++ b/tabs/led_strip.css
@@ -29,19 +29,19 @@
     cursor: pointer;
 }
 
-.tab-led-strip .gPoint.function-w { /* warning */
+.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 */
+.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 */
+.tab-led-strip .gPoint.function-i { /* Indicator */
     background: yellow;
     box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
     border-color: yellow;       
@@ -53,13 +53,19 @@
     border-color: rgb(52, 155, 255);
 }
 
-.tab-led-strip .gPoint.function-t { /* Armed Mode */
+.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-r { /* ring */
+.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 */
     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;
@@ -161,7 +167,9 @@
 .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 {
+    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 .colors .btnOn,
 .tab-led-strip .directions .btnOn {background: #FFF; color: #000;}
 
diff --git a/tabs/led_strip.html b/tabs/led_strip.html
index ab7fbccc..dac944aa 100644
--- a/tabs/led_strip.html
+++ b/tabs/led_strip.html
@@ -35,6 +35,7 @@
             <button class="function-a w50">Arm State</button>
             <button class="function-t w50">Throttle</button>
             <button class="function-r w50">Ring</button>
+            <button class="function-c w50">Color</button>
         </div>
     
         <div class="section">LED Orientation and Color</div>
diff --git a/tabs/led_strip.js b/tabs/led_strip.js
index c6422fcc..9559174f 100644
--- a/tabs/led_strip.js
+++ b/tabs/led_strip.js
@@ -2,7 +2,7 @@
 
 TABS.led_strip = {
     wireMode: false,
-    functions: ['w', 'f', 'i', 'a', 't', 'r'],
+    functions: ['w', 'f', 'i', 'a', 't', 'r', 'c'],
     directions: ['n', 'e', 's', 'w', 'u', 'd'],
 };