diff --git a/js/msp.js b/js/msp.js index 907456a7..85147254 100644 --- a/js/msp.js +++ b/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++; diff --git a/tabs/led_strip.css b/tabs/led_strip.css index ce75a329..c6187bc4 100644 --- a/tabs/led_strip.css +++ b/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 { - background: #CAFFCD !important; +.gridWire { + 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 { - width: 130px; - height: 100px; +.tab-led-strip .directions, +.tab-led-strip .colors { + 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-d {right: 0; bottom: 15px;} +.tab-led-strip .directions .dir-u {right: 10px; top: 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; diff --git a/tabs/led_strip.html b/tabs/led_strip.html index 7b9686a5..b05c6050 100644 --- a/tabs/led_strip.html +++ b/tabs/led_strip.html @@ -12,13 +12,14 @@
LED Functions
-
- - - + + + + +
-
LED Orientation
+
LED Orientation and Color
@@ -27,6 +28,24 @@
+
+ + + + + + + + + + + + + + + + +
LED Strip Wiring
diff --git a/tabs/led_strip.js b/tabs/led_strip.js index 9f284ad2..c6422fcc 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'], + 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)) { - $('.dir-' + letter).addClass('btnOn'); + var className = '.dir-' + letter; + 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)) { - $('.function-' + letter).addClass('btnOn'); + var className = '.function-' + letter; + 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; } @@ -218,6 +248,8 @@ TABS.led_strip.initialize = function (callback, scrollPosition) { for (var directionIndex = 0; directionIndex < led.directions.length; directionIndex++) { $(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;