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

CMYK controls almost fully functional 

Need to better tie into swatch selection, and need to add UI to dials
themselves, but currently can display and change values with the inputs.
This commit is contained in:
mmcwilliams 2016-05-18 18:05:43 -04:00
parent 08e4738b86
commit 5d2dcac4c4
3 changed files with 111 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/css/app.css
View File

@ -162,23 +162,23 @@ footer {
} }
.dial-wrapper { .dial-wrapper {
position: absolute; position: absolute;
width: 5.5em; width: 80px;
height: 5.5em; height: 80px;
} }
.dial-wrapper:after { .dial-wrapper:after {
content: ""; content: "";
background: #272b30; background: #272b30;
border-radius: 50%; border-radius: 50%;
width: 5em; width: 66px;
height: 5em; height: 66px;
position: absolute; position: absolute;
top: 0.25em; top: 7px;
left: 0.25em; left: 7px;
} }
.dial-wrapper input { .dial-wrapper input {
margin-top: 6em; margin-top: 94px;
width: 4.5em; width: 52px;
margin-left: 0.5em; margin-left: 14px;
background: #272b30; background: #272b30;
border: 1px solid; border: 1px solid;
text-align: center; text-align: center;
@ -188,14 +188,14 @@ footer {
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
width: 2.75em; width: 40px;
} }
.dial-container.dial-container1 { .dial-container.dial-container1 {
left: 2.75em; left: 40px;
} }
.dial-container.dial-container1 .dial-wedge { .dial-container.dial-container1 .dial-wedge {
transform: rotateZ(360deg); transform: rotateZ(0deg);
border-radius: 0 5.5em 5.5em 0; border-radius: 0 80px 80px 0;
left: 0; left: 0;
transform-origin: 0 50%; transform-origin: 0 50%;
} }
@ -203,25 +203,25 @@ footer {
left: 0; left: 0;
} }
.dial-container.dial-container2 .dial-wedge { .dial-container.dial-container2 .dial-wedge {
transform: rotateZ(0); transform: rotateZ(0deg);
border-radius: 5.5em 0 0 5.5em; border-radius: 80px 0 0 80px;
transform-origin: 5.5em 5.5em; transform-origin: 40px 40px;
} }
.dial-wedge { .dial-wedge {
height: 5.5em; height: 80px;
width: 2.75em; width: 40px;
} }
.dial-marker { .dial-marker {
border-radius: 50%; border-radius: 50%;
height: 0.25em; height: 7px;
width: 0.25em; width: 7px;
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(49%); left: calc(22%);
} }
.dial-end { .dial-end {
transform: rotateZ(360deg); transform: rotateZ(0deg);
transform-origin: 50% 2.75em; transform-origin: 50% 40px;
} }
#cmy-preview { #cmy-preview {
position: absolute; position: absolute;

25
app/css/app.less
View File

@ -163,8 +163,11 @@ footer{
color: @BG; color: @BG;
} }
@dial_size : 5.5em; //@dial_size : 5.5em;
@dial_thickness : 0.5em; //@dial_thickness : 0.5em;
@dial_size : 80px;
@dial_thickness : 14px;
@dial_cyan : #00FFFF; @dial_cyan : #00FFFF;
@dial_magenta : #FF00FF; @dial_magenta : #FF00FF;
@dial_yellow : #FFFF00; @dial_yellow : #FFFF00;
@ -187,7 +190,6 @@ footer{
#dial-c { #dial-c {
.dial-class(@dial_cyan, 0); .dial-class(@dial_cyan, 0);
} }
#dial-m { #dial-m {
.dial-class(@dial_magenta, 1); .dial-class(@dial_magenta, 1);
@ -218,9 +220,9 @@ footer{
left: @dial_thickness / 2; left: @dial_thickness / 2;
} }
input{ input{
margin-top: @dial_size + 0.5em; margin-top: @dial_size + @dial_thickness;
width: @dial_size - 1em; width: @dial_size - (@dial_thickness * 2);
margin-left: 0.5em; margin-left: @dial_thickness;
background: @BG; background: @BG;
border: 1px solid; border: 1px solid;
text-align: center; text-align: center;
@ -235,7 +237,7 @@ footer{
&.dial-container1 { &.dial-container1 {
left: @dial_size / 2; left: @dial_size / 2;
.dial-wedge { .dial-wedge {
transform: rotateZ(360deg); transform: rotateZ(0deg);
border-radius: 0 @dial_size @dial_size 0; border-radius: 0 @dial_size @dial_size 0;
left: 0; left: 0;
transform-origin: 0 50%; transform-origin: 0 50%;
@ -244,9 +246,9 @@ footer{
&.dial-container2 { &.dial-container2 {
left: 0; left: 0;
.dial-wedge { .dial-wedge {
transform: rotateZ(0); transform: rotateZ(0deg);
border-radius: @dial_size 0 0 @dial_size; border-radius: @dial_size 0 0 @dial_size;
transform-origin: @dial_size @dial_size; transform-origin: @dial_size/2 @dial_size/2;
} }
} }
} }
@ -263,9 +265,10 @@ footer{
left: calc(50% - (@dial_thickness * 2)); left: calc(50% - (@dial_thickness * 2));
} }
.dial-end { .dial-end {
transform: rotateZ(360deg); transform: rotateZ(0deg);
transform-origin: 50% @dial_size / 2; transform-origin: 50% (@dial_size/2);
} }
#cmy-preview { #cmy-preview {
position: absolute; position: absolute;
margin-top: 220px; margin-top: 220px;

81
app/lib/light-ui.js
View File

@ -74,11 +74,14 @@ light.colorPickers = function () {
$('#' + event.target + '-page').show(); $('#' + event.target + '-page').show();
if (event.target === 'rgb') { if (event.target === 'rgb') {
light.rgb.page(); light.rgb.page();
} else if (event.target) {
light.cmy.page();
} }
} }
}); });
light.rgb.init(); light.rgb.init();
light.kelvin.init(); light.kelvin.init();
light.cmy.init();
}; };
light.set = function (rgb, callback) { //rgb = [0,0,0] light.set = function (rgb, callback) { //rgb = [0,0,0]
'use strict'; 'use strict';
@ -249,25 +252,87 @@ light.kelvin.click = function (t, e) {
light.cmy = {}; light.cmy = {};
light.cmy.init = function () { light.cmy.init = function () {
'use strict'; 'use strict';
$('.dial-wrapper input').on('input', function () {
light.cmy.change(this);
});
$('.dial-wrapper input').on('change', function () {
light.cmy.change(this);
});
}; };
light.cmy.set = function (rgb) { light.cmy.page = function () {
'use strict';
light.cmy.fromRgb(light.color);
};
light.cmy.change = function (t) {
'use strict';
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);
};
light.cmy.fromRgb = function (rgb) {
'use strict';
var cmy = chroma.rgb(rgb).cmyk();
light.cmy.set(cmy);
};
light.cmy.set = function (cmy) {
'use strict';
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) { light.cmy.setDial = function (dial, val) {
'use strict'; 'use strict';
var elem = $('#dial-' + dial), var elem = $('#dial-' + dial),
angle = Math.floor(360 * val); angle = Math.floor(360 * val),
elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + angle + 'deg)'); container1 = 0,
elem.find('.dial-end').css('transform', 'rotateZ(' + angle + 'deg)'); 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);
}; };
light.cmy.preview = function (rgb_float) { light.cmy.preview = function (cmy) {
'use strict'; 'use strict';
var elem = $('#cmy-preview'), var elem = $('#cmy-preview'),
rgb = light.rgb.floor(rgb_float), rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
rgb_str = 'rgb(' + rgb.join(', ') + ')'; rgb_str = 'rgb(' + rgb.join(', ') + ')';
elem.css('background', rgb_str); elem.css('background', rgb_str);
elem.text(rgb_str); elem.text(rgb_str);
@ -362,6 +427,8 @@ light.swatch.init = function () {
$(this).addClass('default set'); $(this).addClass('default set');
if (w2ui['colors'].active === 'rgb') { if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color); light.rgb.set(light.color);
} else if (w2ui['colors'].active === 'cmy') {
light.cmy.fromRgb(light.color);
} }
light.preview(rgb); light.preview(rgb);
} }