First cut of port of LED Strip configuration UI.

Thanks for the original code decompyler!
10.3.x-maintenance
Dominic Clifton 2015-01-08 21:46:43 +00:00
parent a348b5de8e
commit c5e2a13b6c
7 changed files with 585 additions and 0 deletions

View File

@ -83,6 +83,9 @@
"tabMotorTesting": {
"message": "Motors"
},
"tabLedStrip": {
"message": "LED Strip"
},
"tabRawSensorData": {
"message": "Sensors"
},
@ -941,5 +944,11 @@
},
"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."
}
}

13
js/libraries/jquery-ui-1.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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);

291
tabs/led_strip.css Normal file
View File

@ -0,0 +1,291 @@
.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 #000;
width: 28px;
height: 28px;
margin: 3px;
border-radius: 7px;
background: rgba(0,0,0,.3);
cursor: pointer;
}
.tab-led-strip .gPoint.mode-w { /* warning */
background: red;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: red;
}
.tab-led-strip .gPoint.mode-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.mode-w.mode-f {
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%);
}
.tab-led-strip .gPoint.mode-i { /* indicator */
background: yellow;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: yellow;
}
.tab-led-strip .gPoint.mode-a { /* Armed Mode */
background: blue;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: blue;
}
.tab-led-strip .gPoint.mode-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 .alertMsg {
background: rgba(100,0,0,.5);
text-align: center;
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #FFF;
padding: 30px;
font-family: sans-serif;
}
.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: 26px;
}
.gridWire .wire {
color: rgba(255,255,255,1);
}
.gridWire .gPoint {
background: #333 !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 .modeW.btnOn {background: red;}
.tab-led-strip .modeF.btnOn {background: rgb(50, 205, 50);}
.tab-led-strip .modeI.btnOn {background: yellow; color: #333;}
.tab-led-strip .modeA.btnOn {background: blue;}
.tab-led-strip .modeT.btnOn {background: orange;}
.tab-led-strip .dirN.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirE.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirS.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirW.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirU.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirD.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 .output {
bottom: 0px;
position: absolute;
width: 100%;
height: 160px;
}
.tab-led-strip .tempOutput {
color: #fff;
background: rgba(0,0,0,.2);
width: 100%;
height: 100%;
outline: none;
}
.tab-led-strip .orientation {
width: 130px;
height: 100px;
position: relative;
}
.tab-led-strip .orientation button {
position: absolute;
width: 30px;
height: 30px;
}
.tab-led-strip .orientation .dirN {top: 0; left: 32px;}
.tab-led-strip .orientation .dirS {bottom: 0; left: 32px;}
.tab-led-strip .orientation .dirE {left: 64px; top: 32px;}
.tab-led-strip .orientation .dirW {left: 0; top: 32px;}
.tab-led-strip .orientation .dirU {right: 0; top: 15px;}
.tab-led-strip .orientation .dirD {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 #c0c0c0 !important;
}
.tab-led-strip .ui-selectable-helper {
background: rgba(0,0,0,.4);
position: absolute;
z-index: 100;
border: 1px dotted white;
}

46
tabs/led_strip.html Normal file
View File

@ -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 Modes</div>
<div class="modes">
<button class="modeW w50">Warnings</button>
<button class="modeF w50">Flight &amp; Orientation</button><br>
<button class="modeI w33">Indicator</button>
<button class="modeA w33">Arm State</button>
<button class="modeT w33">Thrust</button>
</div>
<div class="section">LED Orientation</div>
<div class="orientation">
<button class="dirN">N</button>
<button class="dirE">E</button>
<button class="dirS">S</button>
<button class="dirW">W</button>
<button class="dirU">U</button>
<button class="dirD">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>Wiring order must be set before code will be generated</p>
<div class="output">
<textarea class="tempOutput" readonly></textarea>
</div>
</div>
</div>

219
tabs/led_strip.js Normal file
View File

@ -0,0 +1,219 @@
'use strict';
TABS.led_strip = {
totalLights: 0,
currentWire: 0,
wireMode: false,
flightModes: ['w', 'f', 'i', 'a', 't'],
ledOrientations: ['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_html() {
$('#content').load("./tabs/led_strip.html", process_html);
}
load_html();
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
$('.orientation').on('click', 'button', function() {
var that = this;
if ($('.ui-selected').length > 0) {
TABS.led_strip.ledOrientations.forEach(function(letter) {
if ($(that).is('.dir' + letter.toUpperCase())) {
$(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('dir-' + letter);
}
});
updateBulkCmd();
}
});
// Mode Buttons
$('.modes').on('click', 'button', function() {
var that = this;
if ($('.ui-selected').length > 0) {
TABS.led_strip.flightModes.forEach(function(letter) {
if ($(that).is('.mode' + letter.toUpperCase())) {
$(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('mode-' + 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('');
TABS.led_strip.currentWire--;
}
updateBulkCmd();
});
});
$('.funcWireClear').click(function() {
TABS.led_strip.currentWire = 0;
$('.gPoint .wire').html('');
updateBulkCmd();
});
$('.mainGrid').selectable({
filter: ' > div',
stop: function() {
$('.ui-selected').each(function() {
if (TABS.led_strip.wireMode) {
if ($(this).find('.wire').html() == '' && TABS.led_strip.currentWire < 32) {
$(this).find('.wire').html(TABS.led_strip.currentWire);
TABS.led_strip.currentWire++;
}
}
var that = this;
TABS.led_strip.ledOrientations.forEach(function(letter) {
if ($(that).is('.dir-' + letter)) {
$('.dir' + letter.toUpperCase()).addClass('btnOn');
} else {
$('.dir' + letter.toUpperCase()).removeClass('btnOn');
}
});
TABS.led_strip.flightModes.forEach(function(letter) {
if ($(that).is('.mode-' + letter)) {
$('.mode' + letter.toUpperCase()).addClass('btnOn');
} else {
$('.mode' + letter.toUpperCase()).removeClass('btnOn');
}
});
updateBulkCmd();
});
}
});
$('.mainGrid').disableSelection();
updateBulkCmd();
if (callback) callback();
}
function updateBulkCmd() {
$('.tempOutput').empty();
$('.tempOutput').html('# Copy and paste commands below into the CLI' + "\n\n");
var counter = 0;
$('.gPoint').each(function(){
if ($(this).is('[class*="mode"]')) {
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 ledModes = '';
var directions = '';
var that = this;
TABS.led_strip.flightModes.forEach(function(letter){
if ($(that).is('.mode-' + letter)) {
ledModes += letter.toUpperCase();
}
});
TABS.led_strip.ledOrientations.forEach(function(letter){
if ($(that).is('.dir-' + letter)) {
directions += letter.toUpperCase();
}
});
if (wireNumber != '') {
$('.tempOutput').append('led ' + wireNumber + ' ' + col + ',' + row + ':' + directions + ':' + ledModes + "\n");
}
counter++;
}
});
TABS.led_strip.totalLights = counter;
var remaining = 32 - TABS.led_strip.totalLights;
if (remaining <= 0) {
remaining = 0;
$('.wires-remaining').addClass('error');
} else {
$('.wires-remaining').removeClass('error');
}
$('.wires-remaining div').html(remaining);
}
function message(msg) {
$('tab-led-strip').append('<div class="alertMsg"> ' + msg + ' </div>');
$('.alertMsg').click(function() {
$('.alertMsg').remove();
});
var time = setTimeout(function(){
$('.alertMsg').fadeOut();
}, 3000);
}
};
TABS.led_strip.cleanup = function (callback) {
if (callback) callback();
};