383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
'use strict';
|
|
|
|
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;
|
|
|
|
TABS.led_strip.wireMode = false;
|
|
|
|
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')) {
|
|
removeFunctionsAndDirections(this);
|
|
$(this).find('.wire').html('');
|
|
}
|
|
});
|
|
|
|
$('.controls button').removeClass('btnOn');
|
|
updateBulkCmd();
|
|
});
|
|
|
|
// Clear All button
|
|
$('.funcClearAll').click(function() {
|
|
$('.gPoint').each(function() {
|
|
removeFunctionsAndDirections(this);
|
|
});
|
|
$('.gPoint .wire').html('');
|
|
|
|
updateBulkCmd();
|
|
|
|
$('.controls button').removeClass('btnOn');
|
|
});
|
|
|
|
function removeFunctionsAndDirections(element) {
|
|
var classesToRemove = [];
|
|
|
|
TABS.led_strip.functions.forEach(function(letter) {
|
|
classesToRemove.push('function-' + letter);
|
|
});
|
|
TABS.led_strip.directions.forEach(function(letter) {
|
|
classesToRemove.push('dir-' + letter);
|
|
});
|
|
$(element).removeClass(classesToRemove.join(' '));
|
|
}
|
|
|
|
|
|
// 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)) {
|
|
if ($(that).is('.btnOn')) {
|
|
$(that).removeClass('btnOn');
|
|
$('.ui-selected').removeClass('dir-' + letter);
|
|
} else {
|
|
$(that).addClass('btnOn');
|
|
$('.ui-selected').addClass('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)) {
|
|
|
|
if ($(that).is('.btnOn')) {
|
|
$(that).removeClass('btnOn');
|
|
$('.ui-selected').removeClass('function-' + letter);
|
|
} else {
|
|
$(that).addClass('btnOn');
|
|
$('.ui-selected').addClass('function-' + letter);
|
|
}
|
|
}
|
|
});
|
|
|
|
updateBulkCmd();
|
|
}
|
|
});
|
|
|
|
// Color Buttons
|
|
$('.colors').on('click', 'button', function() {
|
|
var that = this;
|
|
var colorButtons = $(this).parent().find('button');
|
|
|
|
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
|
|
colorButtons.removeClass('btnOn');
|
|
$('.ui-selected').removeClass('color-' + colorIndex);
|
|
|
|
if ($(that).is('.color-' + colorIndex)) {
|
|
$('.ui-selected').addClass('color-' + colorIndex);
|
|
}
|
|
}
|
|
|
|
$(this).addClass('btnOn');
|
|
|
|
updateBulkCmd();
|
|
});
|
|
|
|
$('.funcWire').click(function() {
|
|
$(this).toggleClass('btnOn');
|
|
TABS.led_strip.wireMode = $(this).hasClass('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() {
|
|
var functionsInSelection = [];
|
|
var directionsInSelection = [];
|
|
|
|
$('.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) {
|
|
var className = '.dir-' + letter;
|
|
if ($(that).is(className)) {
|
|
directionsInSelection.push(className);
|
|
}
|
|
});
|
|
|
|
TABS.led_strip.functions.forEach(function(letter) {
|
|
var className = '.function-' + letter;
|
|
if ($(that).is(className)) {
|
|
functionsInSelection.push(className);
|
|
}
|
|
});
|
|
|
|
for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
|
|
var className = '.color-' + colorIndex;
|
|
if ($(this).is(className)) {
|
|
$(className).addClass('btnOn');
|
|
} else {
|
|
$(className).removeClass('btnOn');
|
|
}
|
|
}
|
|
|
|
updateBulkCmd();
|
|
});
|
|
|
|
$('.functions button').removeClass('btnOn');
|
|
functionsInSelection.forEach(function(function_e) {
|
|
$(function_e).addClass('btnOn');
|
|
});
|
|
|
|
$('.directions button').removeClass('btnOn');
|
|
directionsInSelection.forEach(function(direction_e) {
|
|
$(direction_e).addClass('btnOn');
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.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 && led.color == 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]);
|
|
}
|
|
|
|
$(this).addClass('color-' + led.color);
|
|
|
|
});
|
|
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'));
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
GUI.content_ready(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 colorIndex = 0;
|
|
var that = this;
|
|
|
|
var match = $(this).attr("class").match(/(^|\s)color-([0-9]+)(\s|$)/);
|
|
if (match) {
|
|
colorIndex = match[2];
|
|
}
|
|
|
|
TABS.led_strip.functions.forEach(function(letter){
|
|
if ($(that).is('.function-' + letter)) {
|
|
functions += letter;
|
|
}
|
|
});
|
|
|
|
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,
|
|
color: colorIndex
|
|
}
|
|
|
|
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();
|
|
};
|