Resolved #28 issues with color selection in the GUI. Performing final tests before 1.5 release. On release will use new repo tagging methods and will build more frequently.
This commit is contained in:
parent
b0c7e4eed4
commit
d604f2aab5
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"ext_port": 1111,
|
||||
"profiles": {
|
||||
"mcopy": {
|
||||
|
|
|
|||
|
|
@ -374,13 +374,14 @@ class Grid {
|
|||
if (typeof seq.grid[x].light === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
//console.log(x)
|
||||
console.log(x);
|
||||
if (seq.grid[x].light === '0,0,0') {
|
||||
seq.setLight(x, light.color);
|
||||
}
|
||||
else {
|
||||
seq.setLight(x, [0, 0, 0]);
|
||||
}
|
||||
grid.state(x);
|
||||
}
|
||||
/**
|
||||
* Change all lights at all camera commands to a specific
|
||||
|
|
@ -413,7 +414,9 @@ class Grid {
|
|||
});
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$(`.w2ui-msg-body .swatch[color="${current}"`).eq(0).addClass('default set');
|
||||
$('#sequencer-cancel').on('click', this.swatchesElem.close);
|
||||
$('#sequencer-cancel').on('click', function () {
|
||||
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');
|
||||
|
|
@ -427,12 +430,19 @@ class Grid {
|
|||
gui.warn('Select Color', 'Please select a color to proceed.');
|
||||
}
|
||||
});
|
||||
$('.w2ui-msg-body .swatch').on('click', function () {
|
||||
var elem = $(this);
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
elem.addClass('default set');
|
||||
});
|
||||
$('#sequencer-ok').on('click', function () {
|
||||
var elem = $('.w2ui-msg-body .default'), rgb;
|
||||
var elem = $('.w2ui-msg-body .default');
|
||||
let rgb;
|
||||
if (elem.length > 0) {
|
||||
rgb = elem.attr('color').split(',');
|
||||
rgb = elem.attr('color').split(',').map(el => { return parseInt(el); });
|
||||
seq.setLight(x, rgb);
|
||||
light.color = rgb;
|
||||
grid.state(x);
|
||||
grid.swatchesElem.close();
|
||||
}
|
||||
else {
|
||||
|
|
@ -486,7 +496,7 @@ class Grid {
|
|||
const title = $(this).attr('title');
|
||||
let color;
|
||||
if (typeof color !== 'undefined') {
|
||||
color = colorStr.split(',');
|
||||
color = colorStr.split(',').map(el => { return parseInt(el); });
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$('#light-swatches .swatch').removeClass('default set');
|
||||
$(this).addClass('default set');
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,44 +1,44 @@
|
|||
const light = {};
|
||||
|
||||
//LIGHT
|
||||
light.id = 'light';
|
||||
light.preview_state = false; //light is on/off for preview viewing
|
||||
light.color = [255, 255, 255]; //default color
|
||||
light.current = [0, 0, 0]; //last sent
|
||||
light.icon = {};
|
||||
light.swatches = [
|
||||
'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: [0, 0, 0],
|
||||
name: 'off'
|
||||
},
|
||||
{
|
||||
rgb : [255, 255, 255],
|
||||
name : 'white (LED)'
|
||||
rgb: [255, 255, 255],
|
||||
name: 'white (LED)'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(2500).rgb(),
|
||||
name : '2500 kelvin'
|
||||
rgb: chroma.kelvin(2500).rgb(),
|
||||
name: '2500 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(3200).rgb(),
|
||||
name : '3200 kelvin'
|
||||
rgb: chroma.kelvin(3200).rgb(),
|
||||
name: '3200 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(5600).rgb(),
|
||||
name : '5600 kelvin'
|
||||
rgb: chroma.kelvin(5600).rgb(),
|
||||
name: '5600 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(6500).rgb(),
|
||||
name : '6500 kelvin'
|
||||
rgb: chroma.kelvin(6500).rgb(),
|
||||
name: '6500 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : light.color,
|
||||
set : true,
|
||||
default : true
|
||||
rgb: this.color,
|
||||
set: true,
|
||||
default: true
|
||||
}
|
||||
];
|
||||
|
||||
light.help = `
|
||||
];
|
||||
this.help = `
|
||||
Light Source Kelvin R G B Values Color
|
||||
Candle 1900 255, 147, 41
|
||||
40W Tungsten 2600 255, 197, 143
|
||||
|
|
@ -59,182 +59,173 @@ light.help = `
|
|||
Sodium Vapor 255, 209, 178
|
||||
Metal Halide 242, 252, 255
|
||||
High Pressure Sodium 255, 183, 76
|
||||
`;
|
||||
|
||||
light.queue = {};
|
||||
light.lock = false;
|
||||
light.disabled = false;
|
||||
light.init = function () {
|
||||
'use strict';
|
||||
|
||||
//create dynamic style for displaying light across screens
|
||||
light.icon = document.createElement('style');
|
||||
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
|
||||
document.body.appendChild(light.icon);
|
||||
|
||||
light.colorPickers();
|
||||
light.swatch.init();
|
||||
light.listen();
|
||||
|
||||
light.display(light.current);
|
||||
|
||||
$('#preview').on('change', function () {
|
||||
light.preview_state = $(this).prop('checked');
|
||||
if (light.preview_state) {
|
||||
light.display(light.color);
|
||||
light.set(light.color);
|
||||
} else {
|
||||
light.display([0,0,0]);
|
||||
light.set([0,0,0]);
|
||||
`;
|
||||
this.queue = {};
|
||||
this.lock = false;
|
||||
this.disabled = false;
|
||||
this.rgb = new LightRGB();
|
||||
//cmy : LightCMY = new LightCMY();
|
||||
this.kelvin = new LightKelvin();
|
||||
this.swatch = new LightSwatch();
|
||||
}
|
||||
});
|
||||
};
|
||||
light.disable = function () {
|
||||
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()
|
||||
disable: true,
|
||||
id: uuid()
|
||||
};
|
||||
light.disabled = true;
|
||||
this.disabled = true;
|
||||
$('#tb_toolbar_item_light').hide();
|
||||
$('#seq_labels .spacer').eq(1).hide();
|
||||
$('#light_set').hide();
|
||||
|
||||
ipcRenderer.sendSync(light.id, obj);
|
||||
}
|
||||
light.enable = function () {
|
||||
ipcRenderer.sendSync(this.id, obj);
|
||||
}
|
||||
enable() {
|
||||
const obj = {
|
||||
enable : true,
|
||||
id : uuid()
|
||||
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);
|
||||
};
|
||||
light.colorPickers = function () {
|
||||
'use strict';
|
||||
}
|
||||
colorPickers() {
|
||||
//@ts-ignore
|
||||
$('#colors-tabs').w2tabs({
|
||||
name: 'colors',
|
||||
active: 'kelvin',
|
||||
tabs: [
|
||||
{ id: 'kelvin', caption: 'Kelvin'},
|
||||
{ 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();
|
||||
if (event.target === 'rgb') {
|
||||
//@ts-ignore
|
||||
//if (event.target === 'rgb') {
|
||||
light.rgb.page();
|
||||
} else if (event.target) {
|
||||
light.cmy.page();
|
||||
}
|
||||
//} else if (event.target) {
|
||||
//light.cmy.page();
|
||||
//}
|
||||
}
|
||||
});
|
||||
light.rgb.init();
|
||||
light.kelvin.init();
|
||||
this.rgb.init();
|
||||
this.kelvin.init();
|
||||
//light.cmy.init();
|
||||
};
|
||||
light.set = function (rgb, callback) { //rgb = [0,0,0]
|
||||
'use strict';
|
||||
}
|
||||
;
|
||||
set(rgb, callback) {
|
||||
var obj;
|
||||
|
||||
if (light.disabled){
|
||||
if (this.disabled) {
|
||||
if (callback) {
|
||||
return callback();
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (light.lock) {
|
||||
if (this.lock) {
|
||||
//potential for logging overlapping commands
|
||||
return false;
|
||||
}
|
||||
|
||||
obj = {
|
||||
rgb,
|
||||
id : uuid()
|
||||
id: uuid()
|
||||
};
|
||||
ipcRenderer.sendSync(light.id, obj);
|
||||
|
||||
ipcRenderer.sendSync(this.id, obj);
|
||||
if (typeof callback !== 'undefined') {
|
||||
obj.callback = callback;
|
||||
}
|
||||
light.queue[obj.id] = obj;//
|
||||
light.current = rgb;
|
||||
light.lock = true;
|
||||
};
|
||||
light.end = function (id) {
|
||||
'use strict';
|
||||
if (typeof light.queue[id] !== 'undefined') {
|
||||
if (typeof light.queue[id].callback !== 'undefined') {
|
||||
light.queue[id].callback();
|
||||
this.queue[obj.id] = obj; //
|
||||
this.current = rgb;
|
||||
this.lock = true;
|
||||
}
|
||||
delete light.queue[id];
|
||||
light.lock = false;
|
||||
end(id) {
|
||||
if (typeof this.queue[id] !== 'undefined') {
|
||||
if (typeof this.queue[id].callback !== 'undefined') {
|
||||
this.queue[id].callback();
|
||||
}
|
||||
}
|
||||
light.listen = function () {
|
||||
'use strict';
|
||||
ipcRenderer.on(light.id, function (event, arg) {
|
||||
delete this.queue[id];
|
||||
this.lock = false;
|
||||
}
|
||||
}
|
||||
listen() {
|
||||
ipcRenderer.on(this.id, function (event, arg) {
|
||||
light.end(arg.id);
|
||||
return event.returnValue = true;
|
||||
});
|
||||
};
|
||||
light.preview = function (rgb, name) {
|
||||
'use strict';
|
||||
var rgbStr;
|
||||
|
||||
if (light.disabled) {
|
||||
}
|
||||
preview(rgb, name) {
|
||||
let rgbStr;
|
||||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
rgb = light.rgb.floor(rgb);
|
||||
rgb = this.rgb.floor(rgb);
|
||||
rgbStr = 'rgb(' + rgb.join(',') + ')';
|
||||
light.color = rgb;
|
||||
this.color = rgb;
|
||||
if (typeof name === 'undefined') {
|
||||
name = rgbStr;
|
||||
}
|
||||
$('#light-swatches .swatch.set').css('background', rgbStr)
|
||||
.attr('color', rgb.join(','))
|
||||
.prop('title', name);
|
||||
|
||||
if (light.preview_state) {
|
||||
light.display(rgb);
|
||||
light.set(rgb);
|
||||
if (this.preview_state) {
|
||||
this.display(rgb);
|
||||
this.set(rgb);
|
||||
}
|
||||
};
|
||||
light.display = function (rgb) { //display light active state
|
||||
'use strict';
|
||||
var str,
|
||||
i;
|
||||
|
||||
if (light.disabled) {
|
||||
}
|
||||
display(rgb) {
|
||||
let str;
|
||||
let i;
|
||||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
rgb = light.rgb.floor(rgb);
|
||||
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);
|
||||
light.icon = document.styleSheets[document.styleSheets.length - 1];
|
||||
light.icon.deleteRule(0);
|
||||
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
|
||||
};
|
||||
|
||||
//KELVIN GUI
|
||||
light.kelvin = {};
|
||||
light.kelvin.steps = 348;
|
||||
light.kelvin.min = light.kelvin.steps * 4;
|
||||
light.kelvin.max = 20000;
|
||||
light.kelvin.moving = false;
|
||||
light.kelvin.init = function () {
|
||||
'use strict';
|
||||
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;
|
||||
|
|
@ -256,46 +247,31 @@ light.kelvin.init = function () {
|
|||
});
|
||||
light.kelvin.scale();
|
||||
light.kelvin.set(5600); //default value
|
||||
};
|
||||
light.kelvin.change = function () {
|
||||
'use strict';
|
||||
var val = $('#kelvin').val(),
|
||||
rgb = chroma.kelvin(val).rgb();
|
||||
}
|
||||
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');
|
||||
};
|
||||
light.kelvin.preview = function (rgb_float) {
|
||||
'use strict';
|
||||
var elem = $('#kelvin-preview'),
|
||||
rgb = light.rgb.floor(rgb_float),
|
||||
rgb_str = 'rgb(' + rgb.join(', ') + ')';
|
||||
}
|
||||
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);
|
||||
};
|
||||
light.kelvin.scale = function () {
|
||||
'use strict';
|
||||
var i,
|
||||
min = light.kelvin.min,
|
||||
max = light.kelvin.max,
|
||||
steps = light.kelvin.steps,
|
||||
rgb,
|
||||
elem,
|
||||
elemStr = '<span style="background: rgb(XXXX);"></span>'
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
light.kelvin.pos = function (kelvin) {
|
||||
'use strict';
|
||||
var min = light.kelvin.min,
|
||||
max = light.kelvin.max,
|
||||
steps = light.kelvin.steps,
|
||||
start = -1,
|
||||
pos = Math.round((kelvin - min) / ( (max - min) / steps)) + start;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
|
@ -303,42 +279,83 @@ light.kelvin.pos = function (kelvin) {
|
|||
pos = steps;
|
||||
}
|
||||
$('#kelvin-pos').css('left', pos + 'px');
|
||||
};
|
||||
light.kelvin.set = function (kelvin) {
|
||||
'use strict';
|
||||
}
|
||||
set(kelvin) {
|
||||
$('#kelvin').val(kelvin);
|
||||
light.kelvin.change();
|
||||
};
|
||||
light.kelvin.click = function (t, e) {
|
||||
'use strict';
|
||||
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);
|
||||
}
|
||||
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 () {
|
||||
|
||||
//CMY GUI
|
||||
light.cmy = {};
|
||||
light.cmy.init = function () {
|
||||
'use strict';
|
||||
}
|
||||
|
||||
init () {
|
||||
$('.dial-wrapper input').on('input', function () {
|
||||
light.cmy.change(this);
|
||||
});
|
||||
$('.dial-wrapper input').on('change', function () {
|
||||
light.cmy.change(this);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
light.cmy.page = function () {
|
||||
'use strict';
|
||||
light.cmy.fromRgb(light.color);
|
||||
};
|
||||
page () {
|
||||
this.fromRgb(light.color);
|
||||
}
|
||||
|
||||
light.cmy.change = function (t) {
|
||||
'use strict';
|
||||
change (t : any) {
|
||||
var id = $(t).parent().attr('id').split('-')[1],
|
||||
val = $(t).val(),
|
||||
cmy = [];
|
||||
|
|
@ -350,26 +367,23 @@ light.cmy.change = function (t) {
|
|||
|
||||
light.cmy.setDial(id, val);
|
||||
light.cmy.preview(cmy);
|
||||
};
|
||||
}
|
||||
|
||||
light.cmy.fromRgb = function (rgb) {
|
||||
'use strict';
|
||||
fromRgb (rgb : RGB) {
|
||||
var cmy = chroma.rgb(rgb).cmyk();
|
||||
light.cmy.set(cmy);
|
||||
};
|
||||
}
|
||||
|
||||
light.cmy.set = function (cmy) {
|
||||
'use strict';
|
||||
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);
|
||||
};
|
||||
}
|
||||
|
||||
light.cmy.setDial = function (dial, val) {
|
||||
'use strict';
|
||||
setDial (dial : any, val : number) {
|
||||
var elem = $('#dial-' + dial),
|
||||
angle = Math.floor(360 * val),
|
||||
container1 = 0,
|
||||
|
|
@ -399,78 +413,22 @@ light.cmy.setDial = function (dial, val) {
|
|||
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);
|
||||
};
|
||||
}
|
||||
|
||||
light.cmy.preview = function (cmy) {
|
||||
'use strict';
|
||||
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);
|
||||
};
|
||||
|
||||
//RGB GUI
|
||||
light.rgb = {};
|
||||
light.rgb.elem;
|
||||
light.rgb.lock = true;
|
||||
light.rgb.init = function () {
|
||||
'use strict';
|
||||
light.rgb.elem = jsColorPicker('#rgb', {
|
||||
customBG: '#222',
|
||||
readOnly: true,
|
||||
size: 3,
|
||||
appendTo : document.getElementById('rgb-page'),
|
||||
// patch: false,
|
||||
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
|
||||
elm.style.backgroundColor = elm.value;
|
||||
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
|
||||
},
|
||||
convertCallback: light.rgb.change
|
||||
});
|
||||
};
|
||||
light.rgb.page = function () {
|
||||
'use strict';
|
||||
if (light.rgb.lock) {
|
||||
$('#rgb').focus();
|
||||
light.rgb.lock = false;
|
||||
}
|
||||
light.rgb.set(light.color);
|
||||
};
|
||||
light.rgb.change = function (colors, type) {
|
||||
'use strict';
|
||||
var a = colors.RND.rgb,
|
||||
rgb = [a.r, a.g, a.b];
|
||||
if (!light.rgb.lock) {
|
||||
light.preview(rgb);
|
||||
}*/
|
||||
class LightSwatch {
|
||||
//SWATCH GUI
|
||||
constructor() {
|
||||
}
|
||||
};
|
||||
light.rgb.floor = function (rgb) {
|
||||
'use strict';
|
||||
return [
|
||||
Math.floor(rgb[0]),
|
||||
Math.floor(rgb[1]),
|
||||
Math.floor(rgb[2])
|
||||
];
|
||||
};
|
||||
light.rgb.set = function (rgb) {
|
||||
'use strict';
|
||||
var hex = chroma.rgb(rgb).hex();
|
||||
light.rgb.elem.current.startRender();
|
||||
light.rgb.elem.current.setColor(hex);
|
||||
light.rgb.elem.current.stopRender();
|
||||
};
|
||||
|
||||
//SWATCH GUI
|
||||
light.swatch = {};
|
||||
light.swatch.init = function () {
|
||||
'use strict';
|
||||
var number = 12,
|
||||
add,
|
||||
elem,
|
||||
rgb,
|
||||
i,
|
||||
x;
|
||||
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(',') + ')';
|
||||
|
|
@ -479,7 +437,8 @@ light.swatch.init = function () {
|
|||
elem.attr('color', light.swatches[i].rgb.join(','));
|
||||
if (typeof light.swatches[i].name !== 'undefined') {
|
||||
elem.prop('title', light.swatches[i].name);
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
elem.prop('title', rgb);
|
||||
}
|
||||
if (light.swatches[i].default) {
|
||||
|
|
@ -491,30 +450,32 @@ light.swatch.init = function () {
|
|||
$('#new-swatch').before(elem);
|
||||
}
|
||||
$('#new-swatch').on('click', light.swatch.add);
|
||||
$(document.body).on('click', '#light-swatches .swatch', function () {
|
||||
var rgb = $(this).attr('color');
|
||||
$(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 = rgb.split(',');
|
||||
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);
|
||||
}
|
||||
else if (w2ui['colors'].active === 'cmy') {
|
||||
//light.cmy.fromRgb(light.color);
|
||||
}
|
||||
light.preview(rgb);
|
||||
}
|
||||
});
|
||||
$(document.body).on('dblclick', '.swatch', function () {
|
||||
|
||||
});
|
||||
};
|
||||
light.swatch.add = function () {
|
||||
'use strict';
|
||||
}
|
||||
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
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -19,7 +19,7 @@ class Sequence {
|
|||
}
|
||||
listener(event, arg) {
|
||||
let timeStr;
|
||||
console.log(JSON.stringify(arg));
|
||||
//console.log(JSON.stringify(arg))
|
||||
if (arg.start) {
|
||||
if (typeof arg.loop !== 'undefined' && typeof arg.step !== 'undefined') {
|
||||
this.activeStep(arg.step);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mcopy-app",
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mcopy-app",
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"description": "GUI for the mcopy small gauge film optical printer platform",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ interface Step {
|
|||
x : number;
|
||||
}
|
||||
|
||||
interface RGB extends Array<number> {
|
||||
|
||||
}
|
||||
|
||||
let grid : Grid;
|
||||
|
||||
/******
|
||||
|
|
@ -342,12 +346,12 @@ class Grid {
|
|||
if (typeof seq.grid[x].light === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
//console.log(x)
|
||||
if (seq.grid[x].light === '0,0,0') {
|
||||
seq.setLight(x, light.color);
|
||||
} else {
|
||||
seq.setLight(x, [0, 0, 0]);
|
||||
}
|
||||
grid.state(x);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -382,7 +386,9 @@ class Grid {
|
|||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$(`.w2ui-msg-body .swatch[color="${current}"`).eq(0).addClass('default set');
|
||||
|
||||
$('#sequencer-cancel').on('click', this.swatchesElem.close);
|
||||
$('#sequencer-cancel').on('click', function () {
|
||||
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');
|
||||
|
|
@ -395,13 +401,19 @@ class Grid {
|
|||
gui.warn('Select Color', 'Please select a color to proceed.');
|
||||
}
|
||||
});
|
||||
$('.w2ui-msg-body .swatch').on('click', function () {
|
||||
var elem = $(this);
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
elem.addClass('default set');
|
||||
})
|
||||
$('#sequencer-ok').on('click', function () {
|
||||
var elem = $('.w2ui-msg-body .default'),
|
||||
rgb;
|
||||
var elem = $('.w2ui-msg-body .default');
|
||||
let rgb : RGB;
|
||||
if (elem.length > 0) {
|
||||
rgb = elem.attr('color').split(',');
|
||||
rgb = elem.attr('color').split(',').map(el => { return parseInt(el) });
|
||||
seq.setLight(x, rgb);
|
||||
light.color = rgb;
|
||||
grid.state(x);
|
||||
grid.swatchesElem.close();
|
||||
} else {
|
||||
gui.warn('Select Color', 'Please select a color to proceed.');
|
||||
|
|
@ -454,9 +466,9 @@ class Grid {
|
|||
$(document.body).on('click', '.w2ui-msg-body .swatch', function () {
|
||||
const colorStr = $(this).attr('color');
|
||||
const title = $(this).attr('title');
|
||||
let color : string[];
|
||||
let color : RGB;
|
||||
if (typeof color !== 'undefined') {
|
||||
color = colorStr.split(',');
|
||||
color = colorStr.split(',').map(el => { return parseInt(el) });
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$('#light-swatches .swatch').removeClass('default set');
|
||||
$(this).addClass('default set');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,576 @@
|
|||
'use strict';
|
||||
|
||||
declare var uuid : any;
|
||||
declare var chroma : any;
|
||||
declare var ipcRenderer : any;
|
||||
declare var jsColorPicker : any;
|
||||
declare var color : any;
|
||||
declare var w2ui : any;
|
||||
|
||||
interface RGB extends Array <number> {}
|
||||
|
||||
interface CMYK extends Array <number> {}
|
||||
|
||||
interface LightEvent {
|
||||
id : string;
|
||||
disable? : boolean;
|
||||
enable? : boolean;
|
||||
rgb? : RGB;
|
||||
callback? : Function;
|
||||
}
|
||||
|
||||
let light : Light;
|
||||
|
||||
class Light {
|
||||
id : string = 'light';
|
||||
preview_state : boolean = false; //light is on/off for preview viewing
|
||||
color : RGB = [255, 255, 255]; //default color
|
||||
current : RGB = [0, 0, 0]; //last sent
|
||||
icon : any = {};
|
||||
public swatches : any = [
|
||||
{
|
||||
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
|
||||
}
|
||||
];
|
||||
|
||||
help : string = `
|
||||
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
|
||||
`;
|
||||
|
||||
queue : any = {};
|
||||
lock : boolean = false;
|
||||
disabled : boolean = false;
|
||||
|
||||
rgb : LightRGB = new LightRGB();
|
||||
//cmy : LightCMY = new LightCMY();
|
||||
kelvin : LightKelvin = new LightKelvin();
|
||||
swatch : LightSwatch = new LightSwatch();
|
||||
|
||||
constructor () {
|
||||
|
||||
}
|
||||
|
||||
public 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));
|
||||
}
|
||||
|
||||
private 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]);
|
||||
}
|
||||
}
|
||||
|
||||
public disable () {
|
||||
const obj : LightEvent = {
|
||||
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);
|
||||
}
|
||||
|
||||
public 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);
|
||||
}
|
||||
|
||||
public 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 : MouseEvent) {
|
||||
$('.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();
|
||||
};
|
||||
|
||||
public set (rgb : RGB, callback? : Function) { //rgb = [0,0,0]
|
||||
var obj : LightEvent;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
public end (id : string) {
|
||||
if (typeof this.queue[id] !== 'undefined') {
|
||||
if (typeof this.queue[id].callback !== 'undefined') {
|
||||
this.queue[id].callback();
|
||||
}
|
||||
delete this.queue[id];
|
||||
this.lock = false;
|
||||
}
|
||||
}
|
||||
|
||||
public listen () {
|
||||
ipcRenderer.on(this.id, function (event : Event, arg : any) {
|
||||
light.end(arg.id);
|
||||
return event.returnValue = true;
|
||||
});
|
||||
}
|
||||
|
||||
public preview (rgb : RGB, name? : string) {
|
||||
let rgbStr : any;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
public display (rgb : RGB) { //display light active state
|
||||
let str : string;
|
||||
let i : number;
|
||||
|
||||
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 {
|
||||
//KELVIN GUI
|
||||
steps : number = 348;
|
||||
min : number = this.steps * 4;
|
||||
max : number = 20000;
|
||||
moving : boolean = false;
|
||||
|
||||
constructor () {
|
||||
|
||||
}
|
||||
|
||||
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 : any = $('#kelvin').val();
|
||||
let val : number = parseInt( valStr );
|
||||
var rgb = chroma.kelvin(val).rgb();
|
||||
light.kelvin.preview(rgb);
|
||||
light.kelvin.pos(val);
|
||||
light.preview(rgb, val + ' kelvin');
|
||||
}
|
||||
|
||||
preview (rgb_float : number[]) {
|
||||
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 : number) {
|
||||
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 : number) {
|
||||
$('#kelvin').val(kelvin);
|
||||
light.kelvin.change();
|
||||
}
|
||||
|
||||
click (t : any, e : any) {
|
||||
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 {
|
||||
//RGB GUI
|
||||
elem : any;
|
||||
lock : boolean = true;
|
||||
|
||||
constructor () {
|
||||
|
||||
}
|
||||
|
||||
init () {
|
||||
this.elem = jsColorPicker('#rgb', {
|
||||
customBG: '#222',
|
||||
readOnly: true,
|
||||
size: 3,
|
||||
appendTo : document.getElementById('rgb-page'),
|
||||
// patch: false,
|
||||
init: function(elem : HTMLInputElement, colors : any) { // colors is a different instance (not connected to colorPicker)
|
||||
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 : any, type : any) {
|
||||
var a = colors.RND.rgb,
|
||||
rgb = [a.r, a.g, a.b];
|
||||
if (!light.rgb.lock) {
|
||||
light.preview(rgb);
|
||||
}
|
||||
}
|
||||
|
||||
floor (rgb : any[]) {
|
||||
return [
|
||||
Math.floor(rgb[0]),
|
||||
Math.floor(rgb[1]),
|
||||
Math.floor(rgb[2])
|
||||
];
|
||||
}
|
||||
|
||||
set (rgb : 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
|
||||
}
|
||||
|
||||
private onClick () {
|
||||
let rgbStr : string = $(this).attr('color');
|
||||
let rgb : 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;
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
/// <reference path ="jquery.d.ts"/>
|
||||
|
||||
declare var gui : any;
|
||||
declare var light : any;
|
||||
declare var cfg : any;
|
||||
declare var log : any;
|
||||
declare var w2popup : any;
|
||||
|
|
@ -49,7 +48,7 @@ class Sequence {
|
|||
}
|
||||
private listener (event : Event, arg : Arg) {
|
||||
let timeStr;
|
||||
console.log(JSON.stringify(arg))
|
||||
//console.log(JSON.stringify(arg))
|
||||
if (arg.start) {
|
||||
if (typeof arg.loop !== 'undefined' && typeof arg.step !== 'undefined') {
|
||||
this.activeStep(arg.step);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"ext_port": 1111,
|
||||
"profiles": {
|
||||
"mcopy": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mcopy-cli",
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"description": "CLI for controlling the mcopy optical printer platform",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"ext_port": 1111,
|
||||
"profiles": {
|
||||
"mcopy": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mcopy",
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
"dev": true
|
||||
},
|
||||
"arduino": {
|
||||
"version": "file:lib/arduino"
|
||||
"version": "file:app/lib/arduino"
|
||||
},
|
||||
"argparse": {
|
||||
"version": "1.0.10",
|
||||
|
|
@ -166,7 +166,8 @@
|
|||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
|
||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||
"dev": true
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.7.0",
|
||||
|
|
@ -229,7 +230,7 @@
|
|||
}
|
||||
},
|
||||
"cam": {
|
||||
"version": "file:lib/cam"
|
||||
"version": "file:app/lib/cam"
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "2.1.1",
|
||||
|
|
@ -263,7 +264,7 @@
|
|||
}
|
||||
},
|
||||
"cmd": {
|
||||
"version": "file:lib/cmd"
|
||||
"version": "file:app/lib/cmd"
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
|
|
@ -489,18 +490,19 @@
|
|||
"dev": true
|
||||
},
|
||||
"delay": {
|
||||
"version": "file:lib/delay"
|
||||
"version": "file:app/lib/delay"
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
|
||||
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
|
||||
"dev": true
|
||||
},
|
||||
"devices": {
|
||||
"version": "file:lib/devices"
|
||||
"version": "file:app/lib/devices"
|
||||
},
|
||||
"display": {
|
||||
"version": "file:lib/display"
|
||||
"version": "file:app/lib/display"
|
||||
},
|
||||
"dmd": {
|
||||
"version": "4.0.6",
|
||||
|
|
@ -676,7 +678,7 @@
|
|||
}
|
||||
},
|
||||
"filmout": {
|
||||
"version": "file:lib/filmout"
|
||||
"version": "file:app/lib/filmout"
|
||||
},
|
||||
"find-replace": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -722,26 +724,6 @@
|
|||
"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
|
||||
"dev": true
|
||||
},
|
||||
"form-data": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
|
||||
"integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"requires": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
|
||||
|
|
@ -1093,7 +1075,7 @@
|
|||
}
|
||||
},
|
||||
"light": {
|
||||
"version": "file:lib/light"
|
||||
"version": "file:app/lib/light"
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "2.2.0",
|
||||
|
|
@ -1148,7 +1130,7 @@
|
|||
"dev": true
|
||||
},
|
||||
"log": {
|
||||
"version": "file:lib/log"
|
||||
"version": "file:app/lib/log"
|
||||
},
|
||||
"loud-rejection": {
|
||||
"version": "1.6.0",
|
||||
|
|
@ -1218,12 +1200,14 @@
|
|||
"mime-db": {
|
||||
"version": "1.38.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
|
||||
"integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
|
||||
"integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==",
|
||||
"dev": true
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.22",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
|
||||
"integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mime-db": "~1.38.0"
|
||||
}
|
||||
|
|
@ -1273,7 +1257,7 @@
|
|||
"dev": true
|
||||
},
|
||||
"mscript": {
|
||||
"version": "file:lib/mscript"
|
||||
"version": "file:app/lib/mscript"
|
||||
},
|
||||
"neo-async": {
|
||||
"version": "2.6.1",
|
||||
|
|
@ -1486,7 +1470,7 @@
|
|||
}
|
||||
},
|
||||
"proj": {
|
||||
"version": "file:lib/proj"
|
||||
"version": "file:app/lib/proj"
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.1.31",
|
||||
|
|
@ -1720,10 +1704,10 @@
|
|||
"dev": true
|
||||
},
|
||||
"sequencer": {
|
||||
"version": "file:lib/sequencer"
|
||||
"version": "file:app/lib/sequencer"
|
||||
},
|
||||
"settings": {
|
||||
"version": "file:lib/settings"
|
||||
"version": "file:app/lib/settings"
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
|
|
@ -1932,7 +1916,7 @@
|
|||
}
|
||||
},
|
||||
"system": {
|
||||
"version": "file:lib/system"
|
||||
"version": "file:app/lib/system"
|
||||
},
|
||||
"table-layout": {
|
||||
"version": "0.4.5",
|
||||
|
|
|
|||
31
package.json
31
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mcopy",
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"description": "Small gauge film optical printer platform",
|
||||
"main": "build.js",
|
||||
"directories": {
|
||||
|
|
@ -35,20 +35,19 @@
|
|||
"typescript": "^3.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"arduino": "file:lib/arduino",
|
||||
"cam": "file:lib/cam",
|
||||
"cmd": "file:lib/cmd",
|
||||
"delay": "file:lib/delay",
|
||||
"devices": "file:lib/devices",
|
||||
"display": "file:lib/display",
|
||||
"filmout": "file:lib/filmout",
|
||||
"form-data": "^3.0.0",
|
||||
"light": "file:lib/light",
|
||||
"log": "file:lib/log",
|
||||
"mscript": "file:lib/mscript",
|
||||
"proj": "file:lib/proj",
|
||||
"sequencer": "file:lib/sequencer",
|
||||
"settings": "file:lib/settings",
|
||||
"system": "file:lib/system"
|
||||
"arduino": "file:app/lib/arduino",
|
||||
"cam": "file:app/lib/cam",
|
||||
"cmd": "file:app/lib/cmd",
|
||||
"delay": "file:app/lib/delay",
|
||||
"devices": "file:app/lib/devices",
|
||||
"display": "file:app/lib/display",
|
||||
"filmout": "file:app/lib/filmout",
|
||||
"light": "file:app/lib/light",
|
||||
"log": "file:app/lib/log",
|
||||
"mscript": "file:app/lib/mscript",
|
||||
"proj": "file:app/lib/proj",
|
||||
"sequencer": "file:app/lib/sequencer",
|
||||
"settings": "file:app/lib/settings",
|
||||
"system": "file:app/lib/system"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.4.20",
|
||||
"version": "1.4.21",
|
||||
"ext_port": 1111,
|
||||
"profiles": {
|
||||
"mcopy": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue