Merge branch 'led-strip' into development
Dominic Clifton
commit
f480e05027
|
|
@ -83,6 +83,9 @@
|
|||
"tabMotorTesting": {
|
||||
"message": "Motors"
|
||||
},
|
||||
"tabLedStrip": {
|
||||
"message": "LED Strip"
|
||||
},
|
||||
"tabRawSensorData": {
|
||||
"message": "Sensors"
|
||||
},
|
||||
|
|
@ -941,5 +944,15 @@
|
|||
},
|
||||
"firmwareFlasherWaitForFinish": {
|
||||
"message": "You <span style=\"color: red\">can't</span> do this right now, please wait for current operation to finish ..."
|
||||
},
|
||||
|
||||
"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."
|
||||
},
|
||||
"ledStripButtonSave": {
|
||||
"message": "Save"
|
||||
},
|
||||
"ledStripEepromSaved": {
|
||||
"message": "EEPROM <span style=\"color: green\">saved</span>"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,9 @@ var BF_CONFIG = {
|
|||
currentoffset: 0
|
||||
};
|
||||
|
||||
var LED_STRIP = [];
|
||||
|
||||
|
||||
var PID_names = [];
|
||||
var PIDs = new Array(10);
|
||||
for (var i = 0; i < 10; i++) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
100
js/msp.js
100
js/msp.js
|
|
@ -13,6 +13,8 @@ var MSP_codes = {
|
|||
MSP_SET_CHANNEL_FORWARDING: 33,
|
||||
MSP_MODE_RANGES: 34,
|
||||
MSP_SET_MODE_RANGE: 35,
|
||||
MSP_LED_STRIP_CONFIG: 48,
|
||||
MSP_SET_LED_STRIP_CONFIG: 49,
|
||||
MSP_ADJUSTMENT_RANGES: 52,
|
||||
MSP_SET_ADJUSTMENT_RANGE: 53,
|
||||
MSP_CF_SERIAL_CONFIG: 54,
|
||||
|
|
@ -91,6 +93,9 @@ var MSP = {
|
|||
callbacks: [],
|
||||
packet_error: 0,
|
||||
|
||||
ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order
|
||||
ledFunctionLetters: ['i', 'w', 'f', 'a', 't'], // in LSB bit order
|
||||
|
||||
read: function (readInfo) {
|
||||
var data = new Uint8Array(readInfo.data);
|
||||
|
||||
|
|
@ -612,6 +617,50 @@ var MSP = {
|
|||
}
|
||||
break;
|
||||
|
||||
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 offset = 0;
|
||||
for (var i = 0; offset < data.byteLength && i < ledCount; i++) {
|
||||
|
||||
var directionMask = data.getUint16(offset, 1);
|
||||
offset += 2;
|
||||
|
||||
var directions = [];
|
||||
for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
|
||||
if (bit_check(directionMask, directionLetterIndex)) {
|
||||
directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
var functionMask = data.getUint16(offset, 1);
|
||||
offset += 2;
|
||||
|
||||
var functions = [];
|
||||
for (var functionLetterIndex = 0; functionLetterIndex < MSP.ledFunctionLetters.length; functionLetterIndex++) {
|
||||
if (bit_check(functionMask, functionLetterIndex)) {
|
||||
functions.push(MSP.ledFunctionLetters[functionLetterIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
var led = {
|
||||
directions: directions,
|
||||
functions: functions,
|
||||
x: data.getUint8(offset++, 1),
|
||||
y: data.getUint8(offset++, 1)
|
||||
};
|
||||
|
||||
LED_STRIP.push(led);
|
||||
}
|
||||
|
||||
break;
|
||||
case MSP_codes.MSP_SET_LED_STRIP_CONFIG:
|
||||
console.log('Led strip config saved');
|
||||
break;
|
||||
|
||||
|
||||
case MSP_codes.MSP_SET_MODE_RANGE:
|
||||
console.log('Mode range saved');
|
||||
break;
|
||||
|
|
@ -619,6 +668,7 @@ var MSP = {
|
|||
console.log('Adjustment range saved');
|
||||
break;
|
||||
|
||||
|
||||
default:
|
||||
console.log('Unknown code detected: ' + code);
|
||||
}
|
||||
|
|
@ -944,3 +994,53 @@ MSP.sendAdjustmentRanges = function(onCompleteCallback) {
|
|||
}
|
||||
};
|
||||
|
||||
MSP.sendLedStripConfig = function(onCompleteCallback) {
|
||||
|
||||
var nextFunction = send_next_led_strip_config;
|
||||
|
||||
var ledIndex = 0;
|
||||
|
||||
send_next_led_strip_config();
|
||||
|
||||
function send_next_led_strip_config() {
|
||||
|
||||
var led = LED_STRIP[ledIndex];
|
||||
|
||||
var buffer = [];
|
||||
|
||||
buffer.push(ledIndex);
|
||||
|
||||
var directionMask = 0;
|
||||
for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
|
||||
var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
|
||||
if (bitIndex >= 0) {
|
||||
directionMask = bit_set(directionMask, bitIndex);
|
||||
}
|
||||
}
|
||||
buffer.push(specificByte(directionMask, 0));
|
||||
buffer.push(specificByte(directionMask, 1));
|
||||
|
||||
var functionMask = 0;
|
||||
for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
|
||||
var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
|
||||
if (bitIndex >= 0) {
|
||||
functionMask = bit_set(functionMask, bitIndex);
|
||||
}
|
||||
}
|
||||
buffer.push(specificByte(functionMask, 0));
|
||||
buffer.push(specificByte(functionMask, 1));
|
||||
|
||||
buffer.push(led.x);
|
||||
buffer.push(led.y);
|
||||
|
||||
|
||||
// prepare for next iteration
|
||||
ledIndex++;
|
||||
if (ledIndex == LED_STRIP.length) {
|
||||
nextFunction = onCompleteCallback;
|
||||
}
|
||||
|
||||
MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_CONFIG, buffer, false, nextFunction);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="./tabs/servos.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/gps.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/motors.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/sensors.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
|
||||
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery-2.1.3.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
|
||||
|
|
@ -62,6 +64,7 @@
|
|||
<script type="text/javascript" src="./tabs/servos.js"></script>
|
||||
<script type="text/javascript" src="./tabs/gps.js"></script>
|
||||
<script type="text/javascript" src="./tabs/motors.js"></script>
|
||||
<script type="text/javascript" src="./tabs/led_strip.js"></script>
|
||||
<script type="text/javascript" src="./tabs/sensors.js"></script>
|
||||
<script type="text/javascript" src="./tabs/cli.js"></script>
|
||||
<script type="text/javascript" src="./tabs/logging.js"></script>
|
||||
|
|
@ -129,6 +132,7 @@
|
|||
<li class="tab_servos"><a href="#" i18n="tabServos"></a></li>
|
||||
<li class="tab_gps"><a href="#" i18n="tabGPS"></a></li>
|
||||
<li class="tab_motors"><a href="#" i18n="tabMotorTesting"></a></li>
|
||||
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip"></a></li>
|
||||
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData"></a></li>
|
||||
<li class="tab_logging"><a href="#" i18n="tabLogging"></a></li>
|
||||
<li class="tab_cli"><a href="#" i18n="tabCLI"></a></li>
|
||||
|
|
|
|||
3
main.js
3
main.js
|
|
@ -102,6 +102,9 @@ $(document).ready(function () {
|
|||
case 'tab_ports':
|
||||
TABS.ports.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_led_strip':
|
||||
TABS.led_strip.initialize(content_ready);
|
||||
break;
|
||||
|
||||
case 'tab_setup':
|
||||
TABS.setup.initialize(content_ready);
|
||||
|
|
|
|||
|
|
@ -98,10 +98,7 @@
|
|||
}
|
||||
|
||||
.tab-adjustments > .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
margin-top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-adjustments > .buttons a {
|
||||
|
|
|
|||
|
|
@ -139,10 +139,7 @@
|
|||
}
|
||||
|
||||
.tab-auxiliary > .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
margin-top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-auxiliary > .buttons a {
|
||||
|
|
|
|||
|
|
@ -140,13 +140,6 @@
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.tab-auxiliary > .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
margin-top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-configuration .save {
|
||||
display: block;
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,282 @@
|
|||
|
||||
.tab-led-strip .help {
|
||||
padding: 10px;
|
||||
background-color: #ffcb18;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .section {
|
||||
color: #565656;
|
||||
margin: 20px 0 0 0;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid {
|
||||
width: calc((30px + 8px) * 16);
|
||||
height: calc((30px + 8px) * 16);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid .gPoint {
|
||||
float: left;
|
||||
border: solid 2px #ADADAD;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 3px;
|
||||
border-radius: 7px;
|
||||
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-w.function-f {
|
||||
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 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;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.tab-led-strip .wire {
|
||||
color: rgba(255,255,255,.5);
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
text-shadow: 1px 1px rgba(0,0,0,.4);
|
||||
padding-top: 0px;
|
||||
display: block;
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
margin-top: -32px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gridWire .wire {
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.gridWire .gPoint {
|
||||
background: #CAFFCD !important;
|
||||
}
|
||||
|
||||
/*function buttons*/
|
||||
|
||||
.tab-led-strip button {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
|
||||
padding: 7px 7px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.tab-led-strip button:hover {
|
||||
background-color: #acacac;
|
||||
}
|
||||
|
||||
.tab-led-strip .funcWire.btnOn {
|
||||
background: rgb(15, 171, 22);
|
||||
}
|
||||
|
||||
|
||||
.tab-led-strip button.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-led-strip button.w50 {
|
||||
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 .directions .btnOn {background: #FFF; color: #000;}
|
||||
|
||||
.tab-led-strip .indicators {
|
||||
position: relative;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators span {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .north {
|
||||
top: -4px;
|
||||
left: 7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .south {
|
||||
bottom: -2px;
|
||||
left: 7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .east {
|
||||
bottom: 8px;
|
||||
right: -5px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-left: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .west {
|
||||
bottom: 8px;
|
||||
left: -5px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .up {
|
||||
top: 0px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .down {
|
||||
bottom: 17px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.tab-led-strip .dir-n .north {display: inline;}
|
||||
.tab-led-strip .dir-s .south {display: inline;}
|
||||
.tab-led-strip .dir-e .east {display: inline;}
|
||||
.tab-led-strip .dir-w .west {display: inline;}
|
||||
.tab-led-strip .dir-u .up {display: inline;}
|
||||
.tab-led-strip .dir-d .down {display: inline;}
|
||||
|
||||
.tab-led-strip .controls {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 290px;
|
||||
height: calc((30px + 8px) * 16);
|
||||
}
|
||||
|
||||
.tab-led-strip .directions {
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-led-strip .directions button {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.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-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 .wires-remaining {
|
||||
float: right;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining div {
|
||||
font-size: 40px;
|
||||
color: #7AAE2D;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining.error div {
|
||||
color: #FF5700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******JQUERYUI**********/
|
||||
|
||||
.tab-led-strip .ui-selected {
|
||||
box-shadow: inset 0 0 30px rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selecting {
|
||||
box-shadow: inset 0 0 30px rgba(255, 255, 255, .7) !important;
|
||||
border: solid 2px #000 !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selectable-helper {
|
||||
background: rgba(0,0,0,.4);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
|
||||
.tab-led-strip > .buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .save {
|
||||
display: block;
|
||||
float: right;
|
||||
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
padding: 0 15px 0 15px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.tab-led-strip.save:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="tab-led-strip">
|
||||
<div class="help">
|
||||
<p i18n="ledStripHelp"></p>
|
||||
</div>
|
||||
<div class="mainGrid"></div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="wires-remaining"><div></div>Remaining</div>
|
||||
<button class="funcClear">Clear selected</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="section">LED Orientation</div>
|
||||
<div class="directions">
|
||||
<button class="dir-n">N</button>
|
||||
<button class="dir-e">E</button>
|
||||
<button class="dir-s">S</button>
|
||||
<button class="dir-w">W</button>
|
||||
<button class="dir-u">U</button>
|
||||
<button class="dir-d">D</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">LED Strip Wiring</div>
|
||||
<div class="wiringMode">
|
||||
<button class="funcWire w100">Wire Ordering Mode</button>
|
||||
</div>
|
||||
<div class="wiringControls">
|
||||
<button class="funcWireClearSelect w50">Clear selected</button>
|
||||
<button class="funcWireClear w50">Clear ALL Wiring</button>
|
||||
</div>
|
||||
<p>LEDs without wire ordering number will not be saved.</p>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
<div class="buttons">
|
||||
<a class="save" href="#" i18n="ledStripButtonSave"></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
'use strict';
|
||||
|
||||
TABS.led_strip = {
|
||||
wireMode: false,
|
||||
functions: ['w', 'f', 'i', 'a', 't'],
|
||||
directions: ['n', 'e', 's', 'w', 'u', 'd'],
|
||||
};
|
||||
|
||||
TABS.led_strip.initialize = function (callback, scrollPosition) {
|
||||
var self = this;
|
||||
|
||||
if (GUI.active_tab != 'led_strip') {
|
||||
GUI.active_tab = 'led_strip';
|
||||
googleAnalytics.sendAppView('LED Strip');
|
||||
}
|
||||
|
||||
function load_led_config() {
|
||||
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
|
||||
}
|
||||
|
||||
function load_html() {
|
||||
$('#content').load("./tabs/led_strip.html", process_html);
|
||||
}
|
||||
|
||||
load_led_config();
|
||||
|
||||
|
||||
function buildUsedWireNumbers() {
|
||||
var usedWireNumbers = [];
|
||||
$('.mainGrid .gPoint .wire').each(function () {
|
||||
var wireNumber = parseInt($(this).html());
|
||||
if (wireNumber >= 0) {
|
||||
usedWireNumbers.push(wireNumber);
|
||||
}
|
||||
});
|
||||
usedWireNumbers.sort(function(a,b){return a - b});
|
||||
return usedWireNumbers;
|
||||
}
|
||||
|
||||
function process_html() {
|
||||
|
||||
localize();
|
||||
|
||||
// Build Grid
|
||||
var theHTML = [];
|
||||
var theHTMLlength = 0;
|
||||
for (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>');
|
||||
}
|
||||
$('.mainGrid').html(theHTML.join(''));
|
||||
|
||||
$('.tempOutput').click(function() {
|
||||
$(this).select();
|
||||
});
|
||||
|
||||
// Clear Button
|
||||
$('.funcClear').click(function() {
|
||||
$('.gPoint').each(function() {
|
||||
if ($(this).is('.ui-selected')) {
|
||||
$(this).removeClass(function(index, theClass) {
|
||||
theClass = theClass.replace(/(^|\s)+gPoint\s+/, '');
|
||||
return theClass;
|
||||
});
|
||||
$(this).addClass('ui-selected');
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.controls button').removeClass('btnOn');
|
||||
});
|
||||
|
||||
|
||||
// Directional Buttons
|
||||
$('.directions').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.directions.forEach(function(letter) {
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('dir-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mode Buttons
|
||||
$('.functions').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.functions.forEach(function(letter) {
|
||||
if ($(that).is('.function-' + letter)) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('function-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.funcWire').click(function() {
|
||||
(TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
|
||||
$(this).toggleClass('btnOn');
|
||||
$('.mainGrid').toggleClass('gridWire');
|
||||
});
|
||||
|
||||
$('.funcWireClearSelect').click(function() {
|
||||
$('.ui-selected').each(function() {
|
||||
var thisWire = $(this).find('.wire');
|
||||
if (thisWire.html() != '') {
|
||||
thisWire.html('');
|
||||
}
|
||||
updateBulkCmd();
|
||||
});
|
||||
});
|
||||
|
||||
$('.funcWireClear').click(function() {
|
||||
$('.gPoint .wire').html('');
|
||||
updateBulkCmd();
|
||||
});
|
||||
|
||||
$('.mainGrid').selectable({
|
||||
filter: ' > div',
|
||||
stop: function() {
|
||||
$('.ui-selected').each(function() {
|
||||
|
||||
|
||||
var usedWireNumbers = buildUsedWireNumbers();
|
||||
|
||||
var nextWireNumber = 0;
|
||||
for (var nextWireNumber = 0; nextWireNumber < usedWireNumbers.length; nextWireNumber++) {
|
||||
if (usedWireNumbers[nextWireNumber] != nextWireNumber) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (TABS.led_strip.wireMode) {
|
||||
if ($(this).find('.wire').html() == '' && nextWireNumber < LED_STRIP.length) {
|
||||
$(this).find('.wire').html(nextWireNumber);
|
||||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.directions.forEach(function(letter) {
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
$('.dir-' + letter).addClass('btnOn');
|
||||
} else {
|
||||
$('.dir-' + letter).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.functions.forEach(function(letter) {
|
||||
if ($(that).is('.function-' + letter)) {
|
||||
$('.function-' + letter).addClass('btnOn');
|
||||
} else {
|
||||
$('.function-' + letter).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.mainGrid').disableSelection();
|
||||
|
||||
$('.gPoint').each(function(){
|
||||
var gridNumber = ($(this).index() + 1);
|
||||
var row = Math.ceil(gridNumber / 16) - 1;
|
||||
var col = gridNumber/16 % 1 * 16 - 1;
|
||||
if (col < 0) {
|
||||
col = 15;
|
||||
}
|
||||
|
||||
var ledResult = findLed(col, row);
|
||||
if (!ledResult) {
|
||||
return;
|
||||
}
|
||||
|
||||
var ledIndex = ledResult.index;
|
||||
var led = ledResult.led;
|
||||
|
||||
if (led.functions.length == 0 && led.directions.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).find('.wire').html(ledIndex);
|
||||
|
||||
for (var modeIndex = 0; modeIndex < led.functions.length; modeIndex++) {
|
||||
$(this).addClass('function-' + led.functions[modeIndex]);
|
||||
}
|
||||
|
||||
for (var directionIndex = 0; directionIndex < led.directions.length; directionIndex++) {
|
||||
$(this).addClass('dir-' + led.directions[directionIndex]);
|
||||
}
|
||||
|
||||
});
|
||||
updateBulkCmd();
|
||||
|
||||
$('a.save').click(function () {
|
||||
|
||||
MSP.sendLedStripConfig(save_to_eeprom);
|
||||
|
||||
function save_to_eeprom() {
|
||||
MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function() {
|
||||
GUI.log(chrome.i18n.getMessage('ledStripEepromSaved'));
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (callback) callback();
|
||||
}
|
||||
|
||||
function findLed(x, y) {
|
||||
for (var ledIndex = 0; ledIndex < LED_STRIP.length; ledIndex++) {
|
||||
var led = LED_STRIP[ledIndex];
|
||||
if (led.x == x && led.y == y) {
|
||||
return { index: ledIndex, led: led };
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function updateBulkCmd() {
|
||||
var counter = 0;
|
||||
|
||||
var lines = [];
|
||||
var ledStripLength = LED_STRIP.length;
|
||||
|
||||
LED_STRIP = [];
|
||||
|
||||
$('.gPoint').each(function(){
|
||||
if ($(this).is('[class*="function"]')) {
|
||||
var gridNumber = ($(this).index() + 1);
|
||||
var row = Math.ceil(gridNumber / 16) - 1;
|
||||
var col = gridNumber/16 % 1 * 16 - 1;
|
||||
if (col < 0) {col = 15;}
|
||||
|
||||
var wireNumber = $(this).find('.wire').html();
|
||||
var functions = '';
|
||||
var directions = '';
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.functions.forEach(function(letter){
|
||||
if ($(that).is('.function-' + letter)) {
|
||||
functions += letter;
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.directions.forEach(function(letter){
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
directions += letter;
|
||||
}
|
||||
});
|
||||
|
||||
if (wireNumber != '') {
|
||||
var led = {
|
||||
x: col,
|
||||
y: row,
|
||||
directions: directions,
|
||||
functions: functions
|
||||
}
|
||||
|
||||
LED_STRIP[wireNumber] = led;
|
||||
}
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
|
||||
var defaultLed = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
directions: '',
|
||||
functions: ''
|
||||
};
|
||||
|
||||
for (var i = 0; i < ledStripLength; i++) {
|
||||
if (LED_STRIP[i]) {
|
||||
continue;
|
||||
}
|
||||
LED_STRIP[i] = defaultLed;
|
||||
}
|
||||
|
||||
var usedWireNumbers = buildUsedWireNumbers();
|
||||
|
||||
var remaining = LED_STRIP.length - usedWireNumbers.length;
|
||||
|
||||
$('.wires-remaining div').html(remaining);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TABS.led_strip.cleanup = function (callback) {
|
||||
if (callback) callback();
|
||||
};
|
||||
|
|
@ -38,12 +38,6 @@
|
|||
.tab-ports select {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.tab-ports > .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
margin-top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-ports .save {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue