mcopy/app/lib/ui/grid.js

266 lines
6.6 KiB
JavaScript
Raw Normal View History

2019-03-22 01:02:41 +00:00
/******
Sequencer grid
*******/
const grid = {};
grid.swatchesElem = {};
grid.init = function () {
'use strict';
grid.refresh();
seq.stats();
grid.events();
};
/**
* Set a specific grid pad to the state stored in the sequence
* array at that step
*
2019-03-22 21:06:57 +00:00
* @param {integer} x Step in sequence
2019-03-22 01:02:41 +00:00
**/
2019-03-22 21:06:57 +00:00
grid.state = function (x) {
2019-03-22 01:02:41 +00:00
'use strict';
2019-03-22 21:06:57 +00:00
const elem = $(`input[x=${x}]`);
const lightElem = $(`.L[x=${x}]`);
const step = seq.grid[x];
2019-03-22 21:06:57 +00:00
if (typeof step !== 'undefined') {
2019-03-22 01:02:41 +00:00
elem.prop('checked', false);
2019-03-22 21:06:57 +00:00
$(`.${step.cmd}[x=${x}]`).prop('checked', true);
if (step.cmd === 'CF' || step.cmd === 'CB') {
lightElem.css('background', `rgb(${step.light})`)
2019-03-22 01:02:41 +00:00
.addClass('a')
2019-03-22 21:06:57 +00:00
.prop('title', `rgb(${seq.light})`);
2019-03-22 01:02:41 +00:00
} else {
lightElem.css('background', 'transparent')
.removeClass('a')
.prop('title', '');
}
} else {
lightElem.css('background', 'transparent')
.removeClass('a')
.prop('title', '');
}
};
/**
* Clears the UI of the grid and restores it to the
* state of the sequence.
*
**/
grid.refresh = function () {
'use strict';
2019-03-22 21:06:57 +00:00
const cmds = [
'camera_forward',
'camera_second_forward',
'projector_forward',
'projector_second_forward',
'camera_backward',
'camera_second_backward',
'projector_backward',
'projector_second_backward',
2019-03-22 21:06:57 +00:00
'light_set',
'numbers'
];
const width = 970 - 34 + ((940 / 24) * Math.abs(24 - seq.size));
2019-03-22 01:02:41 +00:00
let elem;
let cmd;
2019-03-22 01:02:41 +00:00
$('#sequence').width(`${width}px`);
for (let i = 0; i < cmds.length; i++) {
cmd = `#${cmds[i]}`;
$(cmd).empty();
for (let x = 0; x < seq.size; x++) {
if (cmds[i] === 'numbers') {
elem = `<div x="${x}">${x}</div>`
$(cmd).append($(elem));
} else if (cmds[i] === 'light_set') {
elem = `<div x="${x}" class="L"></div>`
$(cmd).append($(elem));
2019-03-22 01:02:41 +00:00
} else {
elem = `<input type="checkbox" x="${x}" />`;
$(cmd).append($(elem).addClass(cfg.cmd[cmds[i]]));
2019-03-22 01:02:41 +00:00
}
grid.state(x);
}
}
};
/**
* Function bound to click on grid pad elements
*
* @param {object} t This, passed from clicked element
**/
grid.click = function (t) {
'use strict';
2019-03-22 21:06:57 +00:00
const x = parseInt($(t).attr('x'));
2019-03-22 01:02:41 +00:00
let c;
2019-03-22 21:06:57 +00:00
if ($(t).prop('checked')) {
2019-03-22 01:02:41 +00:00
c = $(t).attr('class').replace('.', '');
2019-03-22 21:06:57 +00:00
seq.set(x, c);
2019-03-22 01:02:41 +00:00
} else {
seq.grid[i] = undefined;
delete seq.grid[i];
seq.unset(x);
2019-03-22 01:02:41 +00:00
}
2019-03-22 21:06:57 +00:00
grid.state(x);
2019-03-22 01:02:41 +00:00
seq.stats();
};
/**
* Clears the state of the sequence and then refreshes
* the grid and then recalculates the stats on the sequence
**/
grid.clear = function () {
'use strict';
const doit = confirm('Are you sure you want to clear this sequence?');
if (doit) {
seq.clear();
grid.refresh();
seq.stats();
2019-03-22 21:06:57 +00:00
log.info('Sequencer cleared');
2019-03-22 01:02:41 +00:00
}
};
/**
* Add 24 frames to the sequence in the GUI
**/
grid.plus_24 = function () {
'use strict';
seq.size += 24;
2019-03-22 01:02:41 +00:00
grid.refresh();
2019-03-22 21:06:57 +00:00
log.info(`Sequencer expanded to ${seq.size} steps`);
2019-03-22 01:02:41 +00:00
};
/**
* Set light value to black (0,0,0) when double clicked
*
* @param {object} t This, passed from clicked element
**/
grid.blackout = function (t) {
const elem = $(t);
2019-03-22 21:06:57 +00:00
const x = elem.attr('x');
if (typeof seq.grid[x].light === 'undefined') {
2019-03-22 01:02:41 +00:00
return false;
}
if (seq.grid[x].light === '0,0,0') {
2019-03-22 21:06:57 +00:00
seq.setLight(i, light.color);
2019-03-22 01:02:41 +00:00
} else {
2019-03-22 21:06:57 +00:00
seq.setLight(i, [0, 0, 0]);
2019-03-22 01:02:41 +00:00
}
};
/**
* Change all lights at all camera commands to a specific
* RGB value
*
* @param {array} rgb RGB value [255. 255, 255]
*/
grid.changeAll = function (rgb) {
'use strict';
2019-03-22 21:06:57 +00:00
let c;
for (let step of seq.grid) {
2019-03-22 21:06:57 +00:00
c = step.cmd;
2019-03-22 01:02:41 +00:00
if (c === 'CF' || c === 'CB') {
grid.setLight(i, rgb);
}
}
};
/**
* Display color swatch modal for selection of light
* color value at specific step
*
* @param {integer} x Position in sequence to change value
**/
grid.swatches = function (x) {
'use strict';
const current = seq.grid[x].light;
2019-03-22 01:02:41 +00:00
grid.swatchesElem = w2popup.open({
title : 'Select Color',
body : $('#light-swatches').html(),
buttons : '<button id="sequencer-ok" class="btn btn-default">Ok</button> <button id="sequencer-changeall" class="btn btn-warning">Change All</button> <button id="sequencer-cancel" class="btn btn-default">Cancel</button>',
onClose : () => {}
});
$('.w2ui-msg-body .swatch').removeClass('default set');
$(`.w2ui-msg-body .swatch[color="${current}"`).eq(0).addClass('default set');
$('#sequencer-cancel').on('click', grid.swatchesElem.close);
$('#sequencer-changeall').on('click', function () {
const doit = confirm('You sure you want to change all light settings?');
const elem = $('.w2ui-msg-body .default');
let rgb;
if (doit && elem.length > 0) {
rgb = elem.attr('color').split(',');
grid.changeAll(rgb);
grid.swatchesElem.close();
} else if (doit && elem.length === 0) {
gui.warn('Select Color', 'Please select a color to proceed.');
}
});
$('#sequencer-ok').on('click', function () {
var elem = $('.w2ui-msg-body .default'),
rgb;
if (elem.length > 0) {
rgb = elem.attr('color').split(',');
grid.setLight(x, rgb);
light.color = rgb;
grid.swatchesElem.close();
} else {
gui.warn('Select Color', 'Please select a color to proceed.');
}
});
};
/**
* Scroll the grid to a specific step
*
* @param {integer} i Step to scroll to
**/
grid.scrollTo = function (i) {
'use strict';
var w = 35 + 3; //width of pad + margin
$('#seq_scroll').scrollLeft(i * w);
};
/**
* Bind all events to sequence. Re-evaluate this in search
* of memory leak issues with long sequences.
**/
grid.events = function () {
'use strict';
$(document.body).on('click', '#sequencer input[type=checkbox]', function () {
grid.click(this);
});
//$(document.body).on('click', '.L', function () {
//alert('click');
2019-03-22 21:06:57 +00:00
//log.warn('please dont happen');
2019-03-22 01:02:41 +00:00
//});
$(document.body).on('dblclick', '.L', function () {
grid.blackout(this);
});
$(document.body).on('contextmenu', '.L', function (e) {
var x = e.target.attributes.x.value;
setTimeout(function () {
grid.swatches(x);
}, 300);
e.preventDefault();
return false;
});
$('#seq_scroll').on('scroll', function () {
var i = Math.ceil($('#seq_scroll').scrollLeft() / (35 + 3));
$('#seq_scroll_state').val(gui.fmtZero(i, 6));
});
$('#seq_scroll_state').on('change', function () {
var i = parseInt($(this).val());
$(this).val(gui.fmtZero(i, 6));
grid.scrollTo(i);
});
$(document.body).on('click', '.w2ui-msg-body .swatch', function () {
var color = $(this).attr('color'),
title = $(this).attr('title');
if (typeof color !== 'undefined') {
color = color.split(',');
$('.w2ui-msg-body .swatch').removeClass('default set');
$('#light-swatches .swatch').removeClass('default set');
$(this).addClass('default set');
$('#light-swatches .swatch[title="' + title + '"]').eq(0).addClass('default set');
light.color = color;
}
});
};
module.exports = grid;