mcopy/app/lib/ui/light.js

481 lines
14 KiB
JavaScript

'use strict';
let light;
class Light {
constructor() {
this.id = 'light';
this.preview_state = false; //light is on/off for preview viewing
this.color = [255, 255, 255]; //default color
this.current = [0, 0, 0]; //last sent
this.icon = {};
this.swatches = [
{
rgb: [0, 0, 0],
name: 'off'
},
{
rgb: [255, 255, 255],
name: 'white (LED)'
},
{
rgb: chroma.kelvin(2500).rgb(),
name: '2500 kelvin'
},
{
rgb: chroma.kelvin(3200).rgb(),
name: '3200 kelvin'
},
{
rgb: chroma.kelvin(5600).rgb(),
name: '5600 kelvin'
},
{
rgb: chroma.kelvin(6500).rgb(),
name: '6500 kelvin'
},
{
rgb: this.color,
set: true,
default: true
}
];
this.help = `
Light Source Kelvin R G B Values Color
Candle 1900 255, 147, 41
40W Tungsten 2600 255, 197, 143
100W Tungsten 2850 255, 214, 170
Halogen 3200 255, 241, 224
Carbon Arc 5200 255, 250, 244
High Noon Sun 5400 255, 255, 251
Direct Sunlight 6000 255, 255, 255
Overcast Sky 7000 201, 226, 255
Clear Blue Sky 20000 64, 156, 255
Warm Fluorescent 255, 244, 229
Standard Fluorescent 244, 255, 250
Cool White Fluorescent 212, 235, 255
Full Spectrum Fluorescent 255, 244, 242
Grow Light Fluorescent 255, 239, 247
Black Light Fluorescent 167, 0, 255
Mercury Vapor 216, 247, 255
Sodium Vapor 255, 209, 178
Metal Halide 242, 252, 255
High Pressure Sodium 255, 183, 76
`;
this.queue = {};
this.lock = false;
this.disabled = false;
this.rgb = new LightRGB();
//cmy : LightCMY = new LightCMY();
this.kelvin = new LightKelvin();
this.swatch = new LightSwatch();
}
init() {
//create dynamic style for displaying light across screens
this.icon = document.createElement('style');
this.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
document.body.appendChild(this.icon);
this.colorPickers();
this.swatch.init();
this.listen();
this.display(this.current);
$('#preview').on('change', this.onPreviewChange.bind(this));
}
onPreviewChange() {
this.preview_state = $('#preview').prop('checked');
if (this.preview_state) {
this.display(this.color);
this.set(this.color);
}
else {
this.display([0, 0, 0]);
this.set([0, 0, 0]);
}
}
disable() {
const obj = {
disable: true,
id: uuid()
};
this.disabled = true;
$('#tb_toolbar_item_light').hide();
$('#seq_labels .spacer').eq(1).hide();
$('#light_set').hide();
ipcRenderer.sendSync(this.id, obj);
}
enable() {
const obj = {
enable: true,
id: uuid()
};
light.disabled = false;
$('#tb_toolbar_item_light').show();
$('#seq_labels .spacer').eq(1).show();
$('#light_set').show();
ipcRenderer.sendSync(light.id, obj);
}
colorPickers() {
//@ts-ignore
$('#colors-tabs').w2tabs({
name: 'colors',
active: 'kelvin',
tabs: [
{ id: 'kelvin', caption: 'Kelvin' },
//{ id: 'cmy', caption: 'CMY'},
{ id: 'rgb', caption: 'RGB' }
],
onClick: function (event) {
$('.colors-page').hide();
log.info(event.target);
$('#' + event.target + '-page').show();
//@ts-ignore
//if (event.target === 'rgb') {
light.rgb.page();
//} else if (event.target) {
//light.cmy.page();
//}
}
});
this.rgb.init();
this.kelvin.init();
//light.cmy.init();
}
;
set(rgb, callback) {
var obj;
if (this.disabled) {
if (callback) {
return callback();
}
else {
return false;
}
}
if (this.lock) {
//potential for logging overlapping commands
return false;
}
obj = {
rgb,
id: uuid()
};
ipcRenderer.sendSync(this.id, obj);
if (typeof callback !== 'undefined') {
obj.callback = callback;
}
this.queue[obj.id] = obj; //
this.current = rgb;
this.lock = true;
}
end(id) {
if (typeof this.queue[id] !== 'undefined') {
if (typeof this.queue[id].callback !== 'undefined') {
this.queue[id].callback();
}
delete this.queue[id];
this.lock = false;
}
}
listen() {
ipcRenderer.on(this.id, function (event, arg) {
light.end(arg.id);
return event.returnValue = true;
});
}
preview(rgb, name) {
let rgbStr;
if (this.disabled) {
return false;
}
rgb = this.rgb.floor(rgb);
rgbStr = 'rgb(' + rgb.join(',') + ')';
this.color = rgb;
if (typeof name === 'undefined') {
name = rgbStr;
}
$('#light-swatches .swatch.set').css('background', rgbStr)
.attr('color', rgb.join(','))
.prop('title', name);
if (this.preview_state) {
this.display(rgb);
this.set(rgb);
}
}
display(rgb) {
let str;
let i;
if (this.disabled) {
return false;
}
rgb = this.rgb.floor(rgb);
for (i = 0; i < 3; i++) {
$('#light-status form input').eq(i).val(rgb[i]);
}
str = 'rgb(' + rgb.join(',') + ')';
$('#color').css('background-color', str);
this.icon = document.styleSheets[document.styleSheets.length - 1];
this.icon.deleteRule(0);
this.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0);
}
;
}
class LightKelvin {
constructor() {
//KELVIN GUI
this.steps = 348;
this.min = this.steps * 4;
this.max = 20000;
this.moving = false;
}
init() {
$('#kelvin').on('change', light.kelvin.change);
$('#kelvin').on('keypup', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
light.kelvin.change();
}
});
$('#kelvin-slider').on('mousemove', function (event) {
if (light.kelvin.moving) {
light.kelvin.click(this, event);
}
});
$('#kelvin-slider').on('mousedown', function (event) {
light.kelvin.moving = true;
light.kelvin.click(this, event);
});
$(document).on('mouseup', function () {
light.kelvin.moving = false;
});
light.kelvin.scale();
light.kelvin.set(5600); //default value
}
change() {
let valStr = $('#kelvin').val();
let val = parseInt(valStr);
var rgb = chroma.kelvin(val).rgb();
light.kelvin.preview(rgb);
light.kelvin.pos(val);
light.preview(rgb, val + ' kelvin');
}
preview(rgb_float) {
var elem = $('#kelvin-preview'), rgb = light.rgb.floor(rgb_float), rgb_str = 'rgb(' + rgb.join(', ') + ')';
elem.css('background', rgb_str);
elem.text(rgb_str);
}
scale() {
var i, min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, rgb, elem, elemStr = '<span style="background: rgb(XXXX);"></span>';
for (i = 0; i < steps; i++) {
rgb = chroma.kelvin((i * ((max - min) / steps)) + min).rgb();
rgb = light.rgb.floor(rgb).join(',');
elem = $(elemStr.replace('XXXX', rgb));
$('#kelvin-scale').append(elem);
}
}
pos(kelvin) {
var min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, start = -1, pos = Math.round((kelvin - min) / ((max - min) / steps)) + start;
if (pos < start) {
pos = start;
}
if (pos > steps) {
pos = steps;
}
$('#kelvin-pos').css('left', pos + 'px');
}
set(kelvin) {
$('#kelvin').val(kelvin);
light.kelvin.change();
}
click(t, e) {
var parentOffset = $(t).parent().offset(), relX = e.pageX - parentOffset.left - 31, //?
min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, kelvin = Math.round((relX * ((max - min) / steps)) + min);
light.kelvin.set(kelvin);
}
}
class LightRGB {
constructor() {
this.lock = true;
}
init() {
this.elem = jsColorPicker('#rgb', {
customBG: '#222',
readOnly: true,
size: 3,
appendTo: document.getElementById('rgb-page'),
// patch: false,
init: function (elem, colors) {
elem.style.backgroundColor = elem.value;
elem.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
},
convertCallback: light.rgb.change
});
}
page() {
if (this.lock) {
$('#rgb').focus();
this.lock = false;
}
this.set(light.color);
}
change(colors, type) {
var a = colors.RND.rgb, rgb = [a.r, a.g, a.b];
if (!light.rgb.lock) {
light.preview(rgb);
}
}
floor(rgb) {
return [
Math.floor(rgb[0]),
Math.floor(rgb[1]),
Math.floor(rgb[2])
];
}
set(rgb) {
var hex = chroma.rgb(rgb).hex();
this.elem.current.startRender();
this.elem.current.setColor(hex);
this.elem.current.stopRender();
}
;
}
/*class LightCMY {
//CMY GUI
constructor () {
}
init () {
$('.dial-wrapper input').on('input', function () {
light.cmy.change(this);
});
$('.dial-wrapper input').on('change', function () {
light.cmy.change(this);
});
}
page () {
this.fromRgb(light.color);
}
change (t : any) {
var id = $(t).parent().attr('id').split('-')[1],
val = $(t).val(),
cmy = [];
cmy[0] = $('#dial-c input').val();
cmy[1] = $('#dial-m input').val();
cmy[2] = $('#dial-y input').val();
cmy[3] = $('#dial-k input').val();
light.cmy.setDial(id, val);
light.cmy.preview(cmy);
}
fromRgb (rgb : RGB) {
var cmy = chroma.rgb(rgb).cmyk();
light.cmy.set(cmy);
}
set (cmy) {
light.cmy.setDial('c', cmy[0]);
light.cmy.setDial('m', cmy[1]);
light.cmy.setDial('y', cmy[2]);
light.cmy.setDial('k', cmy[3]);
light.cmy.preview(cmy);
}
setDial (dial : any, val : number) {
var elem = $('#dial-' + dial),
angle = Math.floor(360 * val),
container1 = 0,
container2 = 0;
elem.find('.dial-end').hide();
if (angle === 0) {
container1 = 180;
container2 = 180;
} else if (angle < 180) {
container1 = 180;
container2 = 180 - angle;
} else if (angle === 180) {
container1 = 180;
container2 = 0;
} else if (angle > 180 && angle < 360) {
container1 = 180 - (angle - 180);
container2 = 0;
} else if (angle === 360) {
//
}
if (angle !== 0) {
elem.find('.dial-end').show();
}
elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
elem.find('input').val(val);
}
preview (cmy : CMYK) {
var elem = $('#cmy-preview'),
rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
rgb_str = 'rgb(' + rgb.join(', ') + ')';
elem.css('background', rgb_str);
elem.text(rgb_str);
}
}*/
class LightSwatch {
//SWATCH GUI
constructor() {
}
init() {
var number = 12, add, elem, rgb, i, x;
for (i = 0; i < light.swatches.length; i++) {
light.swatches[i].rgb = light.rgb.floor(light.swatches[i].rgb);
rgb = 'rgb(' + light.swatches[i].rgb.join(',') + ')';
elem = $('<div class="swatch"></div>');
elem.css('background', rgb);
elem.attr('color', light.swatches[i].rgb.join(','));
if (typeof light.swatches[i].name !== 'undefined') {
elem.prop('title', light.swatches[i].name);
}
else {
elem.prop('title', rgb);
}
if (light.swatches[i].default) {
elem.addClass('default');
}
if (light.swatches[i].set) {
elem.addClass('set');
}
$('#new-swatch').before(elem);
}
$('#new-swatch').on('click', light.swatch.add);
$(document).on('click', '#light-swatches .swatch', this.onClick);
// swatch modal logic in grid.ts
}
onClick() {
let rgbStr = $(this).attr('color');
let rgb;
if (typeof color !== 'undefined') {
rgb = rgbStr.split(',').map(el => { return parseInt(el); });
$('#light-swatches .swatch').removeClass('default set');
$(this).addClass('default set');
if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color);
}
else if (w2ui['colors'].active === 'cmy') {
//light.cmy.fromRgb(light.color);
}
light.preview(rgb);
}
}
add() {
var swatch = $('<div class="swatch default set"></div>');
$('#light-swatches .swatch').removeClass('default set');
$('#new-swatch').before(swatch);
light.preview(light.color);
}
}
light = new Light();
module.exports = light;
//# sourceMappingURL=light.js.map