1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-26 01:35:41 +03:00

CSS Tweaks

This commit is contained in:
decompyler 2015-01-08 16:28:05 -08:00
parent 683e68b036
commit 257855b457
3 changed files with 546 additions and 546 deletions

View file

@ -1,291 +1,291 @@
.tab-led-strip .help { .tab-led-strip .help {
padding: 10px; padding: 10px;
background-color: #ffcb18; background-color: #ffcb18;
margin-bottom: 10px; margin-bottom: 10px;
} }
.tab-led-strip .section { .tab-led-strip .section {
color: #565656; color: #565656;
margin: 20px 0 0 0; margin: 20px 0 0 0;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
} }
.tab-led-strip .mainGrid { .tab-led-strip .mainGrid {
width: calc((30px + 8px) * 16); width: calc((30px + 8px) * 16);
height: calc((30px + 8px) * 16); height: calc((30px + 8px) * 16);
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.tab-led-strip .mainGrid .gPoint { .tab-led-strip .mainGrid .gPoint {
float: left; float: left;
border: solid 2px #000; border: solid 1px #ADADAD;
width: 28px; width: 30px;
height: 28px; height: 30px;
margin: 3px; margin: 3px;
border-radius: 7px; border-radius: 3px;
background: rgba(0,0,0,.3); background: #ececec;
cursor: pointer; cursor: pointer;
} }
.tab-led-strip .gPoint.mode-w { /* warning */ .tab-led-strip .gPoint.mode-w { /* warning */
background: red; background: red;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: red; border-color: red;
} }
.tab-led-strip .gPoint.mode-f { /* flight mode & orientation */ .tab-led-strip .gPoint.mode-f { /* flight mode & orientation */
background: rgb(50, 205, 50); background: rgb(50, 205, 50);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: rgb(50, 205, 50); border-color: rgb(50, 205, 50);
} }
.tab-led-strip .gPoint.mode-w.mode-f { .tab-led-strip .gPoint.mode-w.mode-f {
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%); background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%);
} }
.tab-led-strip .gPoint.mode-i { /* indicator */ .tab-led-strip .gPoint.mode-i { /* indicator */
background: yellow; background: yellow;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: yellow; border-color: yellow;
} }
.tab-led-strip .gPoint.mode-a { /* Armed Mode */ .tab-led-strip .gPoint.mode-a { /* Armed Mode */
background: blue; background: rgb(52, 155, 255);
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: blue; border-color: rgb(52, 155, 255);
} }
.tab-led-strip .gPoint.mode-t { /* Armed Mode */ .tab-led-strip .gPoint.mode-t { /* Armed Mode */
background: orange; background: orange;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
border-color: orange; border-color: orange;
} }
.tab-led-strip .gPoint select { .tab-led-strip .gPoint select {
background: #000; background: #000;
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
.tab-led-strip .alertMsg { .tab-led-strip .alertMsg {
background: rgba(100,0,0,.5); background: rgba(100,0,0,.5);
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
color: #FFF; color: #FFF;
padding: 30px; padding: 30px;
font-family: sans-serif; font-family: sans-serif;
} }
.tab-led-strip .wire { .tab-led-strip .wire {
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
text-align: center; text-align: center;
font-size: 25px; font-size: 23px;
text-shadow: 1px 1px rgba(0,0,0,.4); text-shadow: 1px 1px rgba(0,0,0,.4);
padding-top: 0px; padding-top: 0px;
display: block; display: block;
font-family: monospace; font-family: monospace;
position: absolute; position: absolute;
margin-top: -32px; margin-top: -29px;
width: 28px; width: 28px;
} }
.gridWire .wire { .gridWire .wire {
color: rgba(255,255,255,1); color: rgba(255,255,255,1);
} }
.gridWire .gPoint { .gridWire .gPoint {
background: #333 !important; background: #CAFFCD !important;
} }
/*function buttons*/ /*function buttons*/
.tab-led-strip button { .tab-led-strip button {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
border: 1px solid silver; border: 1px solid silver;
background-color: #ececec; background-color: #ececec;
padding: 7px 7px; padding: 7px 7px;
margin: 3px 0; margin: 3px 0;
} }
.tab-led-strip button:hover { .tab-led-strip button:hover {
background-color: #acacac; background-color: #acacac;
} }
.tab-led-strip .funcWire.btnOn { .tab-led-strip .funcWire.btnOn {
background: rgb(15, 171, 22); background: rgb(15, 171, 22);
} }
.tab-led-strip button.w100 { .tab-led-strip button.w100 {
width: 100%; width: 100%;
} }
.tab-led-strip button.w50 { .tab-led-strip button.w50 {
width: 49%; width: 49%;
} }
.tab-led-strip button.w33 { .tab-led-strip button.w33 {
width: 32%; width: 32%;
} }
.tab-led-strip .modeW.btnOn {background: red;} .tab-led-strip .modeW.btnOn {background: red;}
.tab-led-strip .modeF.btnOn {background: rgb(50, 205, 50);} .tab-led-strip .modeF.btnOn {background: rgb(50, 205, 50);}
.tab-led-strip .modeI.btnOn {background: yellow; color: #333;} .tab-led-strip .modeI.btnOn {background: yellow; color: #333;}
.tab-led-strip .modeA.btnOn {background: blue;} .tab-led-strip .modeA.btnOn {background: blue;}
.tab-led-strip .modeT.btnOn {background: orange;} .tab-led-strip .modeT.btnOn {background: orange;}
.tab-led-strip .dirN.btnOn {background: #FFF; color: #000;} .tab-led-strip .dirN.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirE.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 .dirS.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirW.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 .dirU.btnOn {background: #FFF; color: #000;}
.tab-led-strip .dirD.btnOn {background: #FFF; color: #000;} .tab-led-strip .dirD.btnOn {background: #FFF; color: #000;}
.tab-led-strip .indicators { .tab-led-strip .indicators {
position: relative; position: relative;
height: 30px height: 30px
} }
.tab-led-strip .indicators span { .tab-led-strip .indicators span {
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
display: none; display: none;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
} }
.tab-led-strip .indicators .north { .tab-led-strip .indicators .north {
top: -4px; top: -5px;
left: 7px; left: 10px;
border-left: 7px solid transparent; border-left: 5px solid transparent;
border-right: 7px solid transparent; border-right: 5px solid transparent;
border-bottom: 7px solid rgba(0,0,0,.8); border-bottom: 5px solid rgba(0,0,0,.8);
} }
.tab-led-strip .indicators .south { .tab-led-strip .indicators .south {
bottom: -2px; bottom: -5px;
left: 7px; left: 10px;
border-left: 7px solid transparent; border-left: 5px solid transparent;
border-right: 7px solid transparent; border-right: 5px solid transparent;
border-top: 7px solid rgba(0,0,0,.8); border-top: 5px solid rgba(0,0,0,.8);
} }
.tab-led-strip .indicators .east { .tab-led-strip .indicators .east {
bottom: 8px; bottom: 10px;
right: -5px; right: -5px;
border-top: 7px solid transparent; border-top: 5px solid transparent;
border-bottom: 7px solid transparent; border-bottom: 5px solid transparent;
border-left: 7px solid rgba(0,0,0,.8); border-left: 5px solid rgba(0,0,0,.8);
} }
.tab-led-strip .indicators .west { .tab-led-strip .indicators .west {
bottom: 8px; bottom: 10px;
left: -5px; left: -5px;
border-top: 7px solid transparent; border-top: 5px solid transparent;
border-bottom: 7px solid transparent; border-bottom: 5px solid transparent;
border-right: 7px solid rgba(0,0,0,.8); border-right: 5px solid rgba(0,0,0,.8);
} }
.tab-led-strip .indicators .up { .tab-led-strip .indicators .up {
top: 0px; top: -1px;
left: 2px; left: 1px;
} }
.tab-led-strip .indicators .down { .tab-led-strip .indicators .down {
bottom: 17px; bottom: 13px;
right: 10px; right: 9px;
} }
.tab-led-strip .dir-n .north {display: inline;}
.tab-led-strip .dir-n .north {display: inline;} .tab-led-strip .dir-s .south {display: inline;}
.tab-led-strip .dir-s .south {display: inline;} .tab-led-strip .dir-e .east {display: inline;}
.tab-led-strip .dir-e .east {display: inline;} .tab-led-strip .dir-w .west {display: inline;}
.tab-led-strip .dir-w .west {display: inline;} .tab-led-strip .dir-u .up {display: inline;}
.tab-led-strip .dir-u .up {display: inline;} .tab-led-strip .dir-d .down {display: inline;}
.tab-led-strip .dir-d .down {display: inline;}
.tab-led-strip .controls {
.tab-led-strip .controls { position: relative;
position: relative; float: left;
float: left; width: 290px;
width: 290px; height: calc((30px + 8px) * 16);
height: calc((30px + 8px) * 16); }
}
.tab-led-strip .output {
.tab-led-strip .output { bottom: 0px;
bottom: 0px; position: absolute;
position: absolute; width: 100%;
width: 100%; height: 160px;
height: 160px; }
}
.tab-led-strip .tempOutput { .tab-led-strip .tempOutput {
color: #fff; color: #fff;
background: rgba(0,0,0,.2); background: rgba(0,0,0,.2);
width: 100%; width: 100%;
height: 100%; height: 100%;
outline: none; outline: none;
} }
.tab-led-strip .orientation { .tab-led-strip .orientation {
width: 130px; width: 130px;
height: 100px; height: 100px;
position: relative; position: relative;
} }
.tab-led-strip .orientation button { .tab-led-strip .orientation button {
position: absolute; position: absolute;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.tab-led-strip .orientation .dirN {top: 0; left: 32px;} .tab-led-strip .orientation .dirN {top: 0; left: 32px;}
.tab-led-strip .orientation .dirS {bottom: 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 .dirE {left: 64px; top: 32px;}
.tab-led-strip .orientation .dirW {left: 0; top: 32px;} .tab-led-strip .orientation .dirW {left: 0; top: 32px;}
.tab-led-strip .orientation .dirU {right: 0; top: 15px;} .tab-led-strip .orientation .dirU {right: 0; top: 15px;}
.tab-led-strip .orientation .dirD {right: 0; bottom: 15px;} .tab-led-strip .orientation .dirD {right: 0; bottom: 15px;}
.tab-led-strip .wires-remaining { .tab-led-strip .wires-remaining {
float: right; float: right;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
}
}
.tab-led-strip .wires-remaining div {
.tab-led-strip .wires-remaining div { font-size: 40px;
font-size: 40px; color: #7AAE2D;
color: #7AAE2D; font-family: monospace;
font-family: monospace; }
}
.tab-led-strip .wires-remaining.error div {
.tab-led-strip .wires-remaining.error div { color: #FF5700;
color: #FF5700; }
}
/*******JQUERYUI**********/
/*******JQUERYUI**********/
.tab-led-strip .ui-selected {
.tab-led-strip .ui-selected { box-shadow: inset 0 0 40px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0 0 30px rgba(255, 255, 255, 1) !important; border: solid 1px #000 !important;
} }
.tab-led-strip .ui-selecting { .tab-led-strip .ui-selecting {
box-shadow: inset 0 0 30px rgba(255, 255, 255, .7) !important; box-shadow: inset 0 0 40px rgba(255, 255, 255, 1) !important;
border: solid 2px #c0c0c0 !important; border: solid 1px #000 !important;
} }
.tab-led-strip .ui-selectable-helper { .tab-led-strip .ui-selectable-helper {
background: rgba(0,0,0,.4); background: rgba(0,0,0,.4);
position: absolute; position: absolute;
z-index: 100; z-index: 100;
border: 1px dotted white; border: 1px dotted white;
} }

View file

@ -1,46 +1,46 @@
<div class="tab-led-strip"> <div class="tab-led-strip">
<div class="help"> <div class="help">
<p i18n="ledStripHelp"></p> <p i18n="ledStripHelp"></p>
</div> </div>
<div class="mainGrid"></div> <div class="mainGrid"></div>
<div class="controls"> <div class="controls">
<div class="wires-remaining"><div></div>Remaining</div> <div class="wires-remaining"><div></div>Remaining</div>
<button class="funcClear">Clear selected</button> <button class="funcClear">Clear selected</button>
<div class="section">LED Modes</div> <div class="section">LED Modes</div>
<div class="modes"> <div class="modes">
<button class="modeW w50">Warnings</button> <button class="modeW w50">Warnings</button>
<button class="modeF w50">Flight &amp; Orientation</button><br> <button class="modeF w50">Flight &amp; Orientation</button><br>
<button class="modeI w33">Indicator</button> <button class="modeI w33">Indicator</button>
<button class="modeA w33">Arm State</button> <button class="modeA w33">Arm State</button>
<button class="modeT w33">Thrust</button> <button class="modeT w33">Thrust</button>
</div> </div>
<div class="section">LED Orientation</div> <div class="section">LED Orientation</div>
<div class="orientation"> <div class="orientation">
<button class="dirN">N</button> <button class="dirN">N</button>
<button class="dirE">E</button> <button class="dirE">E</button>
<button class="dirS">S</button> <button class="dirS">S</button>
<button class="dirW">W</button> <button class="dirW">W</button>
<button class="dirU">U</button> <button class="dirU">U</button>
<button class="dirD">D</button> <button class="dirD">D</button>
</div> </div>
<div class="section">LED Strip Wiring</div> <div class="section">LED Strip Wiring</div>
<div class="wiringMode"> <div class="wiringMode">
<button class="funcWire w100">Wire Ordering Mode</button> <button class="funcWire w100">Wire Ordering Mode</button>
</div> </div>
<div class="wiringControls"> <div class="wiringControls">
<button class="funcWireClearSelect w50">Clear selected</button> <button class="funcWireClearSelect w50">Clear selected</button>
<button class="funcWireClear w50">Clear ALL Wiring</button> <button class="funcWireClear w50">Clear ALL Wiring</button>
</div> </div>
<p>Wiring order must be set before code will be generated</p> <p>Wiring order must be set before code will be generated</p>
<div class="output"> <div class="output">
<textarea class="tempOutput" readonly></textarea> <textarea class="tempOutput" readonly></textarea>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,211 +1,211 @@
'use strict'; 'use strict';
TABS.led_strip = { TABS.led_strip = {
totalLights: 0, totalLights: 0,
currentWire: 0, currentWire: 0,
wireMode: false, wireMode: false,
flightModes: ['w', 'f', 'i', 'a', 't'], flightModes: ['w', 'f', 'i', 'a', 't'],
ledOrientations: ['n', 'e', 's', 'w', 'u', 'd'], ledOrientations: ['n', 'e', 's', 'w', 'u', 'd'],
}; };
TABS.led_strip.initialize = function (callback, scrollPosition) { TABS.led_strip.initialize = function (callback, scrollPosition) {
var self = this; var self = this;
if (GUI.active_tab != 'led_strip') { if (GUI.active_tab != 'led_strip') {
GUI.active_tab = 'led_strip'; GUI.active_tab = 'led_strip';
googleAnalytics.sendAppView('LED Strip'); googleAnalytics.sendAppView('LED Strip');
} }
function load_led_config() { 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_html);
} }
function load_html() { function load_html() {
$('#content').load("./tabs/led_strip.html", process_html); $('#content').load("./tabs/led_strip.html", process_html);
} }
load_led_config(); load_led_config();
function process_html() { function process_html() {
localize(); localize();
// Build Grid // Build Grid
var theHTML = []; var theHTML = [];
var theHTMLlength = 0; var theHTMLlength = 0;
for (i=0; i<256; i++) { 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>'); 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('')); $('.mainGrid').html(theHTML.join(''));
$('.tempOutput').click(function() { $('.tempOutput').click(function() {
$(this).select(); $(this).select();
}); });
// Clear Button // Clear Button
$('.funcClear').click(function() { $('.funcClear').click(function() {
$('.gPoint').each(function() { $('.gPoint').each(function() {
if ($(this).is('.ui-selected')) { if ($(this).is('.ui-selected')) {
$(this).removeClass(function(index, theClass) { $(this).removeClass(function(index, theClass) {
theClass = theClass.replace(/(^|\s)+gPoint\s+/, ''); theClass = theClass.replace(/(^|\s)+gPoint\s+/, '');
return theClass; return theClass;
}); });
$(this).addClass('ui-selected'); $(this).addClass('ui-selected');
updateBulkCmd(); updateBulkCmd();
} }
}); });
$('.controls button').removeClass('btnOn'); $('.controls button').removeClass('btnOn');
}); });
// Directional Buttons // Directional Buttons
$('.orientation').on('click', 'button', function() { $('.orientation').on('click', 'button', function() {
var that = this; var that = this;
if ($('.ui-selected').length > 0) { if ($('.ui-selected').length > 0) {
TABS.led_strip.ledOrientations.forEach(function(letter) { TABS.led_strip.ledOrientations.forEach(function(letter) {
if ($(that).is('.dir' + letter.toUpperCase())) { if ($(that).is('.dir' + letter.toUpperCase())) {
$(that).toggleClass('btnOn'); $(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('dir-' + letter); $('.ui-selected').toggleClass('dir-' + letter);
} }
}); });
updateBulkCmd(); updateBulkCmd();
} }
}); });
// Mode Buttons // Mode Buttons
$('.modes').on('click', 'button', function() { $('.modes').on('click', 'button', function() {
var that = this; var that = this;
if ($('.ui-selected').length > 0) { if ($('.ui-selected').length > 0) {
TABS.led_strip.flightModes.forEach(function(letter) { TABS.led_strip.flightModes.forEach(function(letter) {
if ($(that).is('.mode' + letter.toUpperCase())) { if ($(that).is('.mode' + letter.toUpperCase())) {
$(that).toggleClass('btnOn'); $(that).toggleClass('btnOn');
$('.ui-selected').toggleClass('mode-' + letter); $('.ui-selected').toggleClass('mode-' + letter);
} }
}); });
updateBulkCmd(); updateBulkCmd();
} }
}); });
$('.funcWire').click(function() { $('.funcWire').click(function() {
(TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true; (TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
$(this).toggleClass('btnOn'); $(this).toggleClass('btnOn');
$('.mainGrid').toggleClass('gridWire'); $('.mainGrid').toggleClass('gridWire');
}); });
$('.funcWireClearSelect').click(function() { $('.funcWireClearSelect').click(function() {
$('.ui-selected').each(function() { $('.ui-selected').each(function() {
var thisWire = $(this).find('.wire'); var thisWire = $(this).find('.wire');
if (thisWire.html() != '') { if (thisWire.html() != '') {
thisWire.html(''); thisWire.html('');
TABS.led_strip.currentWire--; TABS.led_strip.currentWire--;
} }
updateBulkCmd(); updateBulkCmd();
}); });
}); });
$('.funcWireClear').click(function() { $('.funcWireClear').click(function() {
TABS.led_strip.currentWire = 0; TABS.led_strip.currentWire = 0;
$('.gPoint .wire').html(''); $('.gPoint .wire').html('');
updateBulkCmd(); updateBulkCmd();
}); });
$('.mainGrid').selectable({ $('.mainGrid').selectable({
filter: ' > div', filter: ' > div',
stop: function() { stop: function() {
$('.ui-selected').each(function() { $('.ui-selected').each(function() {
if (TABS.led_strip.wireMode) { if (TABS.led_strip.wireMode) {
if ($(this).find('.wire').html() == '' && TABS.led_strip.currentWire < LED_STRIP.length) { if ($(this).find('.wire').html() == '' && TABS.led_strip.currentWire < LED_STRIP.length) {
$(this).find('.wire').html(TABS.led_strip.currentWire); $(this).find('.wire').html(TABS.led_strip.currentWire);
TABS.led_strip.currentWire++; TABS.led_strip.currentWire++;
} }
} }
var that = this; var that = this;
TABS.led_strip.ledOrientations.forEach(function(letter) { TABS.led_strip.ledOrientations.forEach(function(letter) {
if ($(that).is('.dir-' + letter)) { if ($(that).is('.dir-' + letter)) {
$('.dir' + letter.toUpperCase()).addClass('btnOn'); $('.dir' + letter.toUpperCase()).addClass('btnOn');
} else { } else {
$('.dir' + letter.toUpperCase()).removeClass('btnOn'); $('.dir' + letter.toUpperCase()).removeClass('btnOn');
} }
}); });
TABS.led_strip.flightModes.forEach(function(letter) { TABS.led_strip.flightModes.forEach(function(letter) {
if ($(that).is('.mode-' + letter)) { if ($(that).is('.mode-' + letter)) {
$('.mode' + letter.toUpperCase()).addClass('btnOn'); $('.mode' + letter.toUpperCase()).addClass('btnOn');
} else { } else {
$('.mode' + letter.toUpperCase()).removeClass('btnOn'); $('.mode' + letter.toUpperCase()).removeClass('btnOn');
} }
}); });
updateBulkCmd(); updateBulkCmd();
}); });
} }
}); });
$('.mainGrid').disableSelection(); $('.mainGrid').disableSelection();
updateBulkCmd(); updateBulkCmd();
if (callback) callback(); if (callback) callback();
} }
function updateBulkCmd() { function updateBulkCmd() {
$('.tempOutput').empty(); $('.tempOutput').empty();
$('.tempOutput').html('# Copy and paste commands below into the CLI' + "\n\n"); $('.tempOutput').html('# Copy and paste commands below into the CLI' + "\n\n");
var counter = 0; var counter = 0;
$('.gPoint').each(function(){ $('.gPoint').each(function(){
if ($(this).is('[class*="mode"]')) { if ($(this).is('[class*="mode"]')) {
var gridNumber = ($(this).index() + 1); var gridNumber = ($(this).index() + 1);
var row = Math.ceil(gridNumber / 16) - 1; var row = Math.ceil(gridNumber / 16) - 1;
var col = gridNumber/16 % 1 * 16 - 1; var col = gridNumber/16 % 1 * 16 - 1;
if (col < 0) {col = 15;} if (col < 0) {col = 15;}
var wireNumber = $(this).find('.wire').html(); var wireNumber = $(this).find('.wire').html();
var ledModes = ''; var ledModes = '';
var directions = ''; var directions = '';
var that = this; var that = this;
TABS.led_strip.flightModes.forEach(function(letter){ TABS.led_strip.flightModes.forEach(function(letter){
if ($(that).is('.mode-' + letter)) { if ($(that).is('.mode-' + letter)) {
ledModes += letter.toUpperCase(); ledModes += letter.toUpperCase();
} }
}); });
TABS.led_strip.ledOrientations.forEach(function(letter){ TABS.led_strip.ledOrientations.forEach(function(letter){
if ($(that).is('.dir-' + letter)) { if ($(that).is('.dir-' + letter)) {
directions += letter.toUpperCase(); directions += letter.toUpperCase();
} }
}); });
if (wireNumber != '') { if (wireNumber != '') {
$('.tempOutput').append('led ' + wireNumber + ' ' + col + ',' + row + ':' + directions + ':' + ledModes + "\n"); $('.tempOutput').append('led ' + wireNumber + ' ' + col + ',' + row + ':' + directions + ':' + ledModes + "\n");
} }
counter++; counter++;
} }
}); });
TABS.led_strip.totalLights = counter; TABS.led_strip.totalLights = counter;
var remaining = LED_STRIP.length - TABS.led_strip.totalLights; var remaining = LED_STRIP.length - TABS.led_strip.totalLights;
if (remaining <= 0) { if (remaining <= 0) {
remaining = 0; remaining = 0;
$('.wires-remaining').addClass('error'); $('.wires-remaining').addClass('error');
} else { } else {
$('.wires-remaining').removeClass('error'); $('.wires-remaining').removeClass('error');
} }
$('.wires-remaining div').html(remaining); $('.wires-remaining div').html(remaining);
} }
}; };
TABS.led_strip.cleanup = function (callback) { TABS.led_strip.cleanup = function (callback) {
if (callback) callback(); if (callback) callback();
}; };