mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-15 12:25:13 +03:00
Allow LED strip colors to be used. Requires new firmware.
At the moment colors are only used by the thrust ring mode.
This commit is contained in:
Dominic Clifton
parent
d045deb28f
commit
a5de593da7
4 changed files with 121 additions and 49 deletions
|
|
@ -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++;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 & Orientation</button><br>
|
||||
<button class="function-i w33">Indicator</button>
|
||||
<button class="function-a w33">Arm State</button>
|
||||
<button class="function-t w33">Thrust</button>
|
||||
<button class="function-f w50">Modes & Orientation</button>
|
||||
<button class="function-i w50">Indicator</button>
|
||||
<button class="function-a w50">Arm State</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue