mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-14 20:10:11 +03:00
LED strip update
This commit is contained in:
gaelj
parent
1e7c0597a5
commit
0e5190edd3
8 changed files with 1331 additions and 202 deletions
|
|
@ -1475,7 +1475,7 @@
|
|||
},
|
||||
|
||||
"ledStripHelp": {
|
||||
"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."
|
||||
"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"
|
||||
|
|
|
|||
|
|
@ -93,7 +93,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() {
|
||||
|
|
@ -110,6 +111,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.19.0")) {
|
||||
uniqueData.push(MSP_codes.MSP_LED_STRIP_MODECOLOR);
|
||||
}
|
||||
}
|
||||
|
||||
update_unique_data_list();
|
||||
|
|
@ -129,7 +133,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.19.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);
|
||||
|
|
@ -164,7 +172,7 @@ function configuration_backup(callback) {
|
|||
now = (d.getMonth() + 1) + '.' + d.getDate() + '.' + d.getFullYear() + '.' + d.getHours() + '.' + d.getMinutes();
|
||||
|
||||
// create or load the file
|
||||
chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'cleanflight_backup_' + now, accepts: accepts}, function (fileEntry) {
|
||||
chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'inav_backup_' + now, accepts: accepts}, function (fileEntry) {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error(chrome.runtime.lastError.message);
|
||||
return;
|
||||
|
|
@ -583,6 +591,21 @@ function configuration_restore(callback) {
|
|||
appliedMigrationsCount++;
|
||||
}
|
||||
|
||||
if (!compareVersions(migratedVersion, '1.3.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.3.1';
|
||||
GUI.log(chrome.i18n.getMessage('configMigratedTo', [migratedVersion]));
|
||||
appliedMigrationsCount++;
|
||||
}
|
||||
|
||||
if (appliedMigrationsCount > 0) {
|
||||
GUI.log(chrome.i18n.getMessage('configMigrationSuccessful', [appliedMigrationsCount]));
|
||||
}
|
||||
|
|
@ -709,6 +732,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;
|
||||
|
|
@ -738,7 +763,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.19.0"))
|
||||
MSP.sendLedStripModeColors(send_rxfail_config);
|
||||
else
|
||||
send_rxfail_config();
|
||||
}
|
||||
|
||||
function send_rxfail_config() {
|
||||
|
|
|
|||
5
js/fc.js
5
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;
|
||||
|
|
@ -75,9 +77,10 @@ var FC = {
|
|||
};
|
||||
|
||||
LED_STRIP = [];
|
||||
LED_COLORS = [];
|
||||
LED_MODE_COLORS = [];
|
||||
|
||||
PID = {
|
||||
|
||||
};
|
||||
|
||||
PID_names = [];
|
||||
|
|
|
|||
215
js/msp.js
215
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,
|
||||
|
|
@ -66,6 +68,7 @@ var MSP_codes = {
|
|||
MSP_3D: 124,
|
||||
MSP_RC_DEADBAND: 125,
|
||||
MSP_SENSOR_ALIGNMENT: 126,
|
||||
MSP_LED_STRIP_MODECOLOR:127,
|
||||
MSP_STATUS_EX: 150,
|
||||
|
||||
MSP_SET_RAW_RC: 200,
|
||||
|
|
@ -86,6 +89,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,
|
||||
|
||||
|
|
@ -128,7 +132,9 @@ var MSP = {
|
|||
unsupported: 0,
|
||||
|
||||
ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
|
||||
ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c'], // 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,
|
||||
|
|
@ -887,10 +893,13 @@ var MSP = {
|
|||
LED_STRIP = [];
|
||||
|
||||
var ledCount = data.byteLength / 7; // v1.4.0 and below incorrectly reported 4 bytes per led.
|
||||
if (semver.gte(CONFIG.apiVersion, "1.20.0"))
|
||||
ledCount = data.byteLength / 4;
|
||||
|
||||
var offset = 0;
|
||||
for (var i = 0; offset < data.byteLength && i < ledCount; i++) {
|
||||
|
||||
if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
|
||||
var directionMask = data.getUint16(offset, 1);
|
||||
offset += 2;
|
||||
|
||||
|
|
@ -920,12 +929,106 @@ var MSP = {
|
|||
};
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
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.19.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
|
||||
|
|
@ -1022,6 +1125,7 @@ var MSP = {
|
|||
|
||||
// trigger callbacks, cleanup/remove callback after trigger
|
||||
for (var i = this.callbacks.length - 1; i >= 0; i--) { // itterating in reverse because we use .splice which modifies array length
|
||||
if (i < this.callbacks.length) {
|
||||
if (this.callbacks[i].code == code) {
|
||||
// save callback reference
|
||||
var callback = this.callbacks[i].callback;
|
||||
|
|
@ -1036,6 +1140,7 @@ var MSP = {
|
|||
if (callback) callback({'command': code, 'data': data, 'length': message_length});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
send_message: function (code, data, callback_sent, callback_msp) {
|
||||
var bufferOut,
|
||||
|
|
@ -1083,11 +1188,15 @@ var MSP = {
|
|||
|
||||
var requestExists = false;
|
||||
for (var i = 0; i < MSP.callbacks.length; i++) {
|
||||
if (i < MSP.callbacks.length) {
|
||||
if (MSP.callbacks[i].code == code) {
|
||||
// request already exist, we will just attach
|
||||
requestExists = true;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
console.log("Callback index error: "+ i);
|
||||
}
|
||||
}
|
||||
|
||||
if (!requestExists) {
|
||||
|
|
@ -1108,7 +1217,6 @@ var MSP = {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
callbacks_cleanup: function () {
|
||||
|
|
@ -1368,7 +1476,7 @@ MSP.crunch = function (code) {
|
|||
buffer.push(SENSOR_ALIGNMENT.align_gyro);
|
||||
buffer.push(SENSOR_ALIGNMENT.align_acc);
|
||||
buffer.push(SENSOR_ALIGNMENT.align_mag);
|
||||
break
|
||||
break;
|
||||
|
||||
default:
|
||||
return false;
|
||||
|
|
@ -1606,11 +1714,20 @@ 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);
|
||||
|
||||
if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
|
||||
var directionMask = 0;
|
||||
for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
|
||||
var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
|
||||
|
|
@ -1635,7 +1752,50 @@ MSP.sendLedStripConfig = function(onCompleteCallback) {
|
|||
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));
|
||||
}
|
||||
|
||||
// prepare for next iteration
|
||||
ledIndex++;
|
||||
|
|
@ -1647,6 +1807,53 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -280,7 +280,6 @@ function onConnect() {
|
|||
dataflash.show();
|
||||
|
||||
startLiveDataRefreshTimer();
|
||||
|
||||
}
|
||||
|
||||
function onClosed(result) {
|
||||
|
|
@ -317,7 +316,7 @@ function read_serial(info) {
|
|||
function sensor_status(sensors_detected) {
|
||||
// initialize variable (if it wasn't)
|
||||
if (!sensor_status.previous_sensors_detected) {
|
||||
sensor_status.previous_sensors_detected = 0;
|
||||
sensor_status.previous_sensors_detected = -1; // Otherwise first iteration will not be run if sensors_detected == 0
|
||||
}
|
||||
|
||||
// update UI (if necessary)
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
float: left;
|
||||
margin-right: 10px;
|
||||
border-radius: 3px;
|
||||
background-color: #dcdcdc;
|
||||
border: silver;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid .gPoint {
|
||||
|
|
@ -26,84 +28,117 @@
|
|||
height: 23px;
|
||||
margin: 3px;
|
||||
border-radius: 7px;
|
||||
background: #ececec;;
|
||||
background: #ececec;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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 */
|
||||
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 */
|
||||
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);
|
||||
.tab-led-strip .gPoint.function-s { /* RSSI */
|
||||
background: brown;
|
||||
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 */
|
||||
background: orange;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.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 */
|
||||
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-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-l { /* Battery */
|
||||
background: magenta;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: rgb(52, 155, 255);
|
||||
}
|
||||
|
||||
.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%);
|
||||
.tab-led-strip .gPoint.function-g { /* GPS */
|
||||
background: green;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: rgb(52, 155, 255);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.function-i.function-a {
|
||||
background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(52, 155, 255) 50%, rgb(52, 155, 255) 100%);
|
||||
.tab-led-strip .gPoint.function-c .overlay-color,
|
||||
.tab-led-strip .gPoint.function-r .overlay-color {
|
||||
float: left;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin-top: -23px;
|
||||
margin-left: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.function-i.function-f.function-a {
|
||||
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%);
|
||||
.tab-led-strip .gPoint.function-s .overlay-s,
|
||||
.tab-led-strip .gPoint.function-w .overlay-w,
|
||||
.tab-led-strip .gPoint.function-i .overlay-i,
|
||||
.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-w.function-a {
|
||||
background: linear-gradient(to bottom, yellow 0%,yellow 33%,red 33%, red 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
|
||||
.tab-led-strip .gPoint.function-w .overlay-w {
|
||||
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-t.function-f.function-w {
|
||||
background: linear-gradient(to bottom, orange 0%,orange 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, red 66%, red 100%);
|
||||
.tab-led-strip .gPoint.function-i .overlay-i {
|
||||
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-w {
|
||||
background: linear-gradient(to bottom, yellow 0%,yellow 50%,#ff5454 50%,#ba3535 100%);
|
||||
.tab-led-strip .gPoint.function-t .overlay-t {
|
||||
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-f.function-w {
|
||||
background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,#ff5454 50%,#ba3535 100%);
|
||||
.tab-led-strip .gPoint.function-s .overlay-s {
|
||||
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-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.function-o .overlay-o {
|
||||
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-b .overlay-b {
|
||||
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-n .overlay-n {
|
||||
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 select {
|
||||
background: #000;
|
||||
width: 13px;
|
||||
|
|
@ -137,10 +172,9 @@
|
|||
.tab-led-strip button {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
|
||||
border-radius: 3px;
|
||||
padding: 7px 6px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
|
@ -162,16 +196,46 @@
|
|||
width: 49%;
|
||||
}
|
||||
|
||||
.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 .functions .function-c.btnOn {
|
||||
/* Drop-down boxes */
|
||||
|
||||
.tab-led-strip .select { background: white;}
|
||||
.tab-led-strip .select .function-c {
|
||||
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 .select .function-f { background: rgb(50, 205, 50);}
|
||||
.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;}
|
||||
.tab-led-strip .color-3 {background: orange;}
|
||||
|
|
@ -188,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;
|
||||
}
|
||||
|
||||
|
|
@ -269,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,
|
||||
|
|
@ -304,8 +377,9 @@
|
|||
|
||||
.tab-led-strip .wires-remaining div {
|
||||
font-size: 40px;
|
||||
color: #37a8db;
|
||||
font-family: monospace;
|
||||
color: #ffbb00;
|
||||
margin-bottom: -5px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining.error div {
|
||||
|
|
|
|||
|
|
@ -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,14 +55,77 @@
|
|||
<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 & 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>
|
||||
<button class="function-c w50">Color</button>
|
||||
|
||||
|
||||
<div class="select">
|
||||
<span class="color_section">Function</span>
|
||||
<select class="functionSelect">
|
||||
<option value="">None</option>
|
||||
<option value="function-c" class="">Color</option>
|
||||
<option value="function-f" class="">Modes & Orientation</option>
|
||||
<option value="function-a" class="">Arm State</option>
|
||||
<option value="function-l" class="extra_functions20">Battery</option>
|
||||
<option value="function-s" class="extra_functions20">RSSI</option>
|
||||
<option value="function-g" class="extra_functions20">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_functions20">
|
||||
<input type="checkbox" name="LarsonScanner" class="toggle function-o" />
|
||||
<label> <span>Larson scanner</span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blinkers extra_functions20">
|
||||
<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>
|
||||
|
|
@ -56,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>
|
||||
|
|
@ -75,6 +157,17 @@
|
|||
<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">
|
||||
|
|
@ -86,6 +179,11 @@
|
|||
</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">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,24 @@
|
|||
|
||||
TABS.led_strip = {
|
||||
wireMode: false,
|
||||
functions: ['w', 'f', 'i', 'a', 't', 'r', 'c'],
|
||||
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.20.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;
|
||||
|
||||
|
|
@ -17,9 +29,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.19.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);
|
||||
}
|
||||
|
|
@ -47,7 +74,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.lte(CONFIG.apiVersion, "1.19.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(''));
|
||||
|
||||
|
|
@ -83,7 +113,10 @@ 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) {
|
||||
|
|
@ -92,7 +125,6 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
$(element).removeClass(classesToRemove.join(' '));
|
||||
}
|
||||
|
||||
|
||||
// Directional Buttons
|
||||
$('.directions').on('click', 'button', function() {
|
||||
var that = this;
|
||||
|
|
@ -109,51 +141,126 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
}
|
||||
});
|
||||
|
||||
clearModeColorSelection();
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mode Buttons
|
||||
$('.functions').on('click', 'button', function() {
|
||||
// Mode Color Buttons
|
||||
$('.mode_colors').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.functions.forEach(function(letter) {
|
||||
if ($(that).is('.function-' + letter)) {
|
||||
|
||||
LED_MODE_COLORS.forEach(function(mc) {
|
||||
if ($(that).is('.mode_color-' + mc.mode + '-' + mc.direction)) {
|
||||
if ($(that).is('.btnOn')) {
|
||||
$(that).removeClass('btnOn');
|
||||
$('.ui-selected').removeClass('function-' + letter);
|
||||
$('.ui-selected').removeClass('mode_color-' + mc.mode + '-' + mc.direction);
|
||||
selectedModeColor = null;
|
||||
} else {
|
||||
$(that).addClass('btnOn');
|
||||
$('.ui-selected').addClass('function-' + letter);
|
||||
selectedModeColor = { mode: mc.mode, direction: mc.direction };
|
||||
|
||||
// select the color button
|
||||
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
|
||||
var className = '.color-' + colorIndex;
|
||||
if (colorIndex == getModeColor(mc.mode, mc.direction)) {
|
||||
$(className).addClass('btnOn');
|
||||
selectedColorIndex = colorIndex;
|
||||
setColorSliders(colorIndex);
|
||||
|
||||
} else {
|
||||
$(className).removeClass('btnOn');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.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');
|
||||
if (selectedModeColor == undefined)
|
||||
$('.ui-selected').removeClass('color-' + colorIndex);
|
||||
|
||||
if ($(that).is('.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');
|
||||
|
|
@ -181,8 +288,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();
|
||||
|
||||
|
|
@ -199,8 +308,11 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
if ($(this).find('.wire').text() != '') {
|
||||
|
||||
that = this;
|
||||
|
||||
// Get function & overlays or current cell
|
||||
TABS.led_strip.directions.forEach(function(letter) {
|
||||
var className = '.dir-' + letter;
|
||||
if ($(that).is(className)) {
|
||||
|
|
@ -208,29 +320,73 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.functions.forEach(function(letter) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var uiSelectedLast = that;
|
||||
$('select.functionSelect').val("");
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
$('.functions button').removeClass('btnOn');
|
||||
functionsInSelection.forEach(function(function_e) {
|
||||
$(function_e).addClass('btnOn');
|
||||
// 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();
|
||||
|
||||
setColorSliders(selectedColorIndex);
|
||||
|
||||
setOptionalGroupsVisibility();
|
||||
|
||||
$('.directions button').removeClass('btnOn');
|
||||
directionsInSelection.forEach(function(direction_e) {
|
||||
|
|
@ -239,6 +395,115 @@ 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() != "") {
|
||||
|
||||
var p = $(this).parent();
|
||||
|
||||
TABS.led_strip.functions.forEach(function(f) {
|
||||
if (p.is('.function-' + f)) {
|
||||
|
||||
switch (letter) {
|
||||
case 't':
|
||||
case 'o':
|
||||
case 's':
|
||||
if (areModifiersActive('function-' + f))
|
||||
p.addClass('function-' + letter);
|
||||
break;
|
||||
case 'b':
|
||||
case 'n':
|
||||
if (areBlinkersActive('function-' + f))
|
||||
p.addClass('function-' + letter);
|
||||
break;
|
||||
case 'i':
|
||||
if (areOverlaysActive('function-' + f))
|
||||
p.addClass('function-' + letter);
|
||||
break;
|
||||
case 'w':
|
||||
if (areOverlaysActive('function-' + f))
|
||||
if (isWarningActive('function-' + f))
|
||||
p.addClass('function-' + letter);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('.ui-selected').removeClass('function-' + letter);
|
||||
}
|
||||
return $(that).is(':checked');
|
||||
}
|
||||
|
||||
// UI: check-box 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'); // blink on landing
|
||||
var cbb = $('.checkbox .function-b'); // blink
|
||||
|
||||
if (ret) {
|
||||
if (letter == 'b' && cbn.is(':checked')) {
|
||||
cbn.prop('checked', false);
|
||||
cbn.change();
|
||||
toggleSwitch(cbn, 'n');
|
||||
} else if (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(){
|
||||
|
|
@ -257,7 +522,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 && led.color == 0) {
|
||||
if (led.functions[0] == 'c' && led.functions.length == 1 && led.directions.length == 0 && led.color == 0 && led.x == 0 && led.y == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -274,11 +539,21 @@ 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.19.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() {
|
||||
|
|
@ -288,9 +563,23 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
|
||||
});
|
||||
|
||||
$('.colorDefineSliders').hide();
|
||||
|
||||
applyFunctionToSelectedLeds();
|
||||
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];
|
||||
|
|
@ -301,11 +590,14 @@ 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 = [];
|
||||
|
||||
|
|
@ -327,7 +619,12 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
|
|||
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;
|
||||
}
|
||||
|
|
@ -375,6 +672,421 @@ 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.19.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 areModifiersActive(activeFunction) {
|
||||
switch (activeFunction) {
|
||||
case "function-c":
|
||||
case "function-a":
|
||||
case "function-f":
|
||||
return true;
|
||||
break;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function areOverlaysActive(activeFunction) {
|
||||
if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
|
||||
switch (activeFunction) {
|
||||
case "function-c":
|
||||
case "function-a":
|
||||
case "function-f":
|
||||
case "function-g":
|
||||
return true;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (activeFunction) {
|
||||
case "":
|
||||
case "function-c":
|
||||
case "function-a":
|
||||
case "function-f":
|
||||
case "function-s":
|
||||
case "function-l":
|
||||
case "function-r":
|
||||
case "function-o":
|
||||
case "function-g":
|
||||
return true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function areBlinkersActive(activeFunction) {
|
||||
if (semver.gte(CONFIG.apiVersion, "1.20.0")) {
|
||||
switch (activeFunction) {
|
||||
case "function-c":
|
||||
case "function-a":
|
||||
case "function-f":
|
||||
return true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isWarningActive(activeFunction) {
|
||||
switch (activeFunction) {
|
||||
case "function-l":
|
||||
case "function-s":
|
||||
case "function-g":
|
||||
return false;
|
||||
break;
|
||||
case "function-r":
|
||||
case "function-b":
|
||||
if (semver.lt(CONFIG.apiVersion, "1.20.0"))
|
||||
return false;
|
||||
break;
|
||||
default:
|
||||
return true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function setOptionalGroupsVisibility() {
|
||||
|
||||
var activeFunction = $('select.functionSelect').val();
|
||||
$('select.functionSelect').addClass(activeFunction);
|
||||
|
||||
|
||||
if (semver.lte(CONFIG.apiVersion, "1.18.0")) {
|
||||
// <= 18
|
||||
// Hide GPS (Func)
|
||||
// Hide RSSI (O/L), Blink (Func)
|
||||
// Hide Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
|
||||
$(".extra_functions20").hide();
|
||||
$(".mode_colors").hide();
|
||||
} else {
|
||||
// >= 20
|
||||
// Show GPS (Func)
|
||||
// Hide RSSI (O/L), Blink (Func)
|
||||
// Show Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
|
||||
$(".extra_functions20").show();
|
||||
$(".mode_colors").show();
|
||||
}
|
||||
|
||||
|
||||
// set color modifiers (check-boxes) visibility
|
||||
$('.overlays').hide();
|
||||
$('.modifiers').hide();
|
||||
$('.blinkers').hide();
|
||||
$('.warningOverlay').hide();
|
||||
|
||||
if (areOverlaysActive(activeFunction))
|
||||
$('.overlays').show();
|
||||
|
||||
if (areModifiersActive(activeFunction))
|
||||
$('.modifiers').show();
|
||||
|
||||
if (areBlinkersActive(activeFunction))
|
||||
$('.blinkers').show();
|
||||
|
||||
if (isWarningActive(activeFunction))
|
||||
$('.warningOverlay').show();
|
||||
|
||||
|
||||
|
||||
// set directions visibility
|
||||
if (semver.lt(CONFIG.apiVersion, "1.20.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.19.0")) {
|
||||
// set mode colors visibility
|
||||
|
||||
if (semver.gte(CONFIG.apiVersion, "1.20.0"))
|
||||
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.20.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.20
|
||||
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) {
|
||||
$('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) {
|
||||
if (input == undefined)
|
||||
return "";
|
||||
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue