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

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;

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;

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);
} }