16mm
/
mcopy
1
0
Fork 0
Code Issues 14 Pull Requests Projects 2 Releases 13 Wiki Activity

Add kelvin edge-case UI states

This commit is contained in:
Matt 2016-04-17 21:24:11 -04:00
parent 3a1b038c1b
commit c72eed3d5d
2 changed files with 72 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/js/app.js
View File

@ -3090,6 +3090,10 @@ light.swatches = [
rgb : chroma.kelvin(5600).rgb(), rgb : chroma.kelvin(5600).rgb(),
name : '5600 kelvin' name : '5600 kelvin'
}, },
{
rgb : chroma.kelvin(6500).rgb(),
name : '6500 kelvin'
},
{ {
rgb : light.color, rgb : light.color,
set : true, set : true,
@ -3101,8 +3105,6 @@ light.lock = false;
light.init = function () { light.init = function () {
'use strict'; 'use strict';
light.listen();
//create dynamic style for displaying light across screens //create dynamic style for displaying light across screens
light.icon = document.createElement('style'); light.icon = document.createElement('style');
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}'; light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
@ -3110,6 +3112,7 @@ light.init = function () {
light.colorPickers(); light.colorPickers();
light.swatch.init(); light.swatch.init();
light.listen();
light.display(light.current); light.display(light.current);
@ -3138,7 +3141,7 @@ light.colorPickers = function () {
$('.colors-page').hide(); $('.colors-page').hide();
$('#' + event.target + '-page').show(); $('#' + event.target + '-page').show();
if (event.target === 'rgb') { if (event.target === 'rgb') {
light.rgb.unlock(); light.rgb.page();
} }
} }
}); });
@ -3184,15 +3187,18 @@ light.listen = function () {
return event.returnValue = true; return event.returnValue = true;
}); });
}; };
light.preview = function (rgb) { light.preview = function (rgb, name) {
'use strict'; 'use strict';
var rgbStr; var rgbStr;
rgb = light.rgb.floor(rgb); rgb = light.rgb.floor(rgb);
rgbStr = 'rgb(' + rgb.join(',') + ')'; rgbStr = 'rgb(' + rgb.join(',') + ')';
light.color = rgb; light.color = rgb;
if (typeof name === 'undefined') {
name = rgbStr;
}
$('#light-swatches .swatch.set').css('background', rgbStr) $('#light-swatches .swatch.set').css('background', rgbStr)
.attr('color', rgb.join(',')) .attr('color', rgb.join(','))
.prop('title', rgbStr); .prop('title', name);
if (light.preview_state) { if (light.preview_state) {
light.display(rgb); light.display(rgb);
@ -3213,6 +3219,8 @@ light.display = function (rgb) { //display light active state
light.icon.deleteRule(0); light.icon.deleteRule(0);
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0) light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
}; };
//KELVIN GUI
light.kelvin = {}; light.kelvin = {};
light.kelvin.steps = 348; light.kelvin.steps = 348;
light.kelvin.min = light.kelvin.steps * 4; light.kelvin.min = light.kelvin.steps * 4;
@ -3247,7 +3255,7 @@ light.kelvin.change = function () {
var val = $('#kelvin').val(), var val = $('#kelvin').val(),
rgb = chroma.kelvin(val).rgb(); rgb = chroma.kelvin(val).rgb();
light.kelvin.pos(val); light.kelvin.pos(val);
light.preview(rgb); light.preview(rgb, val + ' kelvin');
}; };
light.kelvin.scale = function () { light.kelvin.scale = function () {
'use strict'; 'use strict';
@ -3296,16 +3304,21 @@ light.kelvin.click = function (t, e) {
light.kelvin.set(kelvin); light.kelvin.set(kelvin);
}; };
//CMY GUI
light.cmy = {}; light.cmy = {};
light.cmy.init = function () { light.cmy.init = function () {
'use strict'; 'use strict';
}; };
//RGB GUI
light.rgb = {}; light.rgb = {};
light.rgb.elem;
light.rgb.lock = true; light.rgb.lock = true;
light.rgb.init = function () { light.rgb.init = function () {
'use strict'; 'use strict';
var colors = jsColorPicker('#rgb', { light.rgb.elem = jsColorPicker('#rgb', {
customBG: '#222', customBG: '#222',
readOnly: true, readOnly: true,
size: 3, size: 3,
@ -3318,12 +3331,13 @@ light.rgb.init = function () {
convertCallback: light.rgb.change convertCallback: light.rgb.change
}); });
}; };
light.rgb.unlock = function () { light.rgb.page = function () {
'use strict'; 'use strict';
if (light.rgb.lock) { if (light.rgb.lock) {
$('#rgb').focus(); $('#rgb').focus();
light.rgb.lock = false; light.rgb.lock = false;
} }
light.rgb.set(light.color);
}; };
light.rgb.change = function (colors, type) { light.rgb.change = function (colors, type) {
'use strict'; 'use strict';
@ -3341,6 +3355,13 @@ light.rgb.floor = function (rgb) {
Math.floor(rgb[2]) 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();
};
light.swatch = {}; light.swatch = {};
light.swatch.init = function () { light.swatch.init = function () {
'use strict'; 'use strict';
@ -3376,6 +3397,9 @@ light.swatch.init = function () {
rgb = rgb.split(','); rgb = rgb.split(',');
$('#light-swatches .swatch').removeClass('default set'); $('#light-swatches .swatch').removeClass('default set');
$(this).addClass('default set'); $(this).addClass('default set');
if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color);
}
light.preview(rgb); light.preview(rgb);
} }
}); });
@ -3414,6 +3438,10 @@ nav.change = function (id) {
$('#' + id).show(); $('#' + id).show();
if (id === 'controls') { if (id === 'controls') {
w2ui['log'].resize(); w2ui['log'].resize();
} else if (id === 'light') {
if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color);
}
} }
}; };

44
app/src/index.js
View File

@ -634,6 +634,10 @@ light.swatches = [
rgb : chroma.kelvin(5600).rgb(), rgb : chroma.kelvin(5600).rgb(),
name : '5600 kelvin' name : '5600 kelvin'
}, },
{
rgb : chroma.kelvin(6500).rgb(),
name : '6500 kelvin'
},
{ {
rgb : light.color, rgb : light.color,
set : true, set : true,
@ -645,8 +649,6 @@ light.lock = false;
light.init = function () { light.init = function () {
'use strict'; 'use strict';
light.listen();
//create dynamic style for displaying light across screens //create dynamic style for displaying light across screens
light.icon = document.createElement('style'); light.icon = document.createElement('style');
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}'; light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
@ -654,6 +656,7 @@ light.init = function () {
light.colorPickers(); light.colorPickers();
light.swatch.init(); light.swatch.init();
light.listen();
light.display(light.current); light.display(light.current);
@ -682,7 +685,7 @@ light.colorPickers = function () {
$('.colors-page').hide(); $('.colors-page').hide();
$('#' + event.target + '-page').show(); $('#' + event.target + '-page').show();
if (event.target === 'rgb') { if (event.target === 'rgb') {
light.rgb.unlock(); light.rgb.page();
} }
} }
}); });
@ -728,15 +731,18 @@ light.listen = function () {
return event.returnValue = true; return event.returnValue = true;
}); });
}; };
light.preview = function (rgb) { light.preview = function (rgb, name) {
'use strict'; 'use strict';
var rgbStr; var rgbStr;
rgb = light.rgb.floor(rgb); rgb = light.rgb.floor(rgb);
rgbStr = 'rgb(' + rgb.join(',') + ')'; rgbStr = 'rgb(' + rgb.join(',') + ')';
light.color = rgb; light.color = rgb;
if (typeof name === 'undefined') {
name = rgbStr;
}
$('#light-swatches .swatch.set').css('background', rgbStr) $('#light-swatches .swatch.set').css('background', rgbStr)
.attr('color', rgb.join(',')) .attr('color', rgb.join(','))
.prop('title', rgbStr); .prop('title', name);
if (light.preview_state) { if (light.preview_state) {
light.display(rgb); light.display(rgb);
@ -757,6 +763,8 @@ light.display = function (rgb) { //display light active state
light.icon.deleteRule(0); light.icon.deleteRule(0);
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0) light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
}; };
//KELVIN GUI
light.kelvin = {}; light.kelvin = {};
light.kelvin.steps = 348; light.kelvin.steps = 348;
light.kelvin.min = light.kelvin.steps * 4; light.kelvin.min = light.kelvin.steps * 4;
@ -791,7 +799,7 @@ light.kelvin.change = function () {
var val = $('#kelvin').val(), var val = $('#kelvin').val(),
rgb = chroma.kelvin(val).rgb(); rgb = chroma.kelvin(val).rgb();
light.kelvin.pos(val); light.kelvin.pos(val);
light.preview(rgb); light.preview(rgb, val + ' kelvin');
}; };
light.kelvin.scale = function () { light.kelvin.scale = function () {
'use strict'; 'use strict';
@ -840,16 +848,21 @@ light.kelvin.click = function (t, e) {
light.kelvin.set(kelvin); light.kelvin.set(kelvin);
}; };
//CMY GUI
light.cmy = {}; light.cmy = {};
light.cmy.init = function () { light.cmy.init = function () {
'use strict'; 'use strict';
}; };
//RGB GUI
light.rgb = {}; light.rgb = {};
light.rgb.elem;
light.rgb.lock = true; light.rgb.lock = true;
light.rgb.init = function () { light.rgb.init = function () {
'use strict'; 'use strict';
var colors = jsColorPicker('#rgb', { light.rgb.elem = jsColorPicker('#rgb', {
customBG: '#222', customBG: '#222',
readOnly: true, readOnly: true,
size: 3, size: 3,
@ -862,12 +875,13 @@ light.rgb.init = function () {
convertCallback: light.rgb.change convertCallback: light.rgb.change
}); });
}; };
light.rgb.unlock = function () { light.rgb.page = function () {
'use strict'; 'use strict';
if (light.rgb.lock) { if (light.rgb.lock) {
$('#rgb').focus(); $('#rgb').focus();
light.rgb.lock = false; light.rgb.lock = false;
} }
light.rgb.set(light.color);
}; };
light.rgb.change = function (colors, type) { light.rgb.change = function (colors, type) {
'use strict'; 'use strict';
@ -885,6 +899,13 @@ light.rgb.floor = function (rgb) {
Math.floor(rgb[2]) 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();
};
light.swatch = {}; light.swatch = {};
light.swatch.init = function () { light.swatch.init = function () {
'use strict'; 'use strict';
@ -920,6 +941,9 @@ light.swatch.init = function () {
rgb = rgb.split(','); rgb = rgb.split(',');
$('#light-swatches .swatch').removeClass('default set'); $('#light-swatches .swatch').removeClass('default set');
$(this).addClass('default set'); $(this).addClass('default set');
if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color);
}
light.preview(rgb); light.preview(rgb);
} }
}); });
@ -958,6 +982,10 @@ nav.change = function (id) {
$('#' + id).show(); $('#' + id).show();
if (id === 'controls') { if (id === 'controls') {
w2ui['log'].resize(); w2ui['log'].resize();
} else if (id === 'light') {
if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color);
}
} }
}; };