How to work with CMYK colors in jQuery.colorpicker?

Question

I would like to use the nice jQuery colorpicker (https://github.com/vanderlee/colorpicker) with CMYK colors.

To get the cmyk values from the dialog I use

 colorFormat: ['EXACT', 'cp;mp;yp;kp'],

That results in something like this

 0;68.157958984375;68.157958984375;20.1904296875

But when I open the colorpicker dialog again, the color is not determined.

It seems that the EXACT pattern is not used for reading.

You can test this with:

<!DOCTYPE html>
<html><head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="colorpicker/jquery.colorpicker.js"></script>
 <link type="text/css" rel="stylesheet" href="colorpicker/jquery.colorpicker.css"></link>
</head>
<body>
<input type="text" class="cp-full" value="0;83.782958984375;83.782958984375;4.736328125" style="width:350px" />
<script>
$(function() {
    $('.cp-full').colorpicker({
        parts: ['map', 'bar', 'hex', 'rgb', 'alpha', 'cmyk', 'preview' ],
        showOn: 'both',
        colorFormat: ['EXACT', 'cp;mp;yp;kp'],

        init: function(event, color) {
            console.log(color);
        },      
    });
});
</script>
</body>

So, how can I do that?

(I had a look at the object whent init is fired, but i assume that is to late. Maybe there is an earlier event to split the values from the field.)

I tried colorFormat: ['EXACT', 'cp;mp;yp;kp'] without success. Your expression is not valid, I think. Either it has to be one of the predefiend formats like HEX or RGB. Otherwise it has to be a character for the coler (chanel) and a second one for the data-type. — smartmeta, Dec 05 '13 at 07:17
Recent versions of the Colorpicker allow you to create parser extension. You should be able to create one for this particular format using a simple regex by copying one of the provided examples. — Martijn, Dec 31 '13 at 10:40
Just to let you know. I fixed some code in Colorpicker which caused some parsers to not initialize color of the button. This is fixed and I've updated the jsfiddle by h3nr1x to reflect this improvement: http://jsfiddle.net/mwvdlee/B945t/ — Martijn, Jan 01 '14 at 18:33

score 3 · Accepted Answer · answered Dec 06 '13 at 21:40

The plugin's documentation don't states a way to do custom reading, checking the code you can see that both parsers CMYK and CMYK percent expects the format cmyk(value, value, value, value). But with the following "hack" (add the open event to read the input value and update the control color) you can circunvent the problem and show the previously selected color every time you click the control:

<!DOCTYPE html>
<html><head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="colorpicker/jquery.colorpicker.js"></script>
 <link type="text/css" rel="stylesheet" href="colorpicker/jquery.colorpicker.css"></link>
</head>
<body>
<input type="hidden" id="cp-hidden-input" value=""/>
<input type="text" class="cp-full" value="0,83.782958984375,83.782958984375,4.736328125" style="width:350px" />
<script type="text/javascript">
$(function() {
    $('.cp-full').colorpicker({
        parts: ['map', 'bar', 'hex', 'rgb', 'alpha', 'cmyk', 'preview' ],
        showOn: 'both',
        colorFormat: ['EXACT', 'cp,mp,yp,kp'],
        open: function(event, color) {
            var v = $(this).val();
            // Use either ',' or ';' as separator
            var separator = v.indexOf(',') != -1 ? ',' : ';';
            var cmyk = v.split(separator);
            color.colorPicker.color.setCMYK(cmyk[0] / 100.0, cmyk[1] / 100.0, cmyk[2] / 100.0, cmyk[3] / 100.0);
        },
    });
});
</script>
</body>

Thanks for your help. Now I want to use __buttonColorize: true__ and hide the input. After a change the background of the image-button is changed. But the initial value is not set. I tried to do the same you suggested for _open_ in the _init_, but that did not work. I also tried to set it with __color.colorPicker.color.setRGB("#b81111");__ in the _init_, but that did not work neither. Thanks for additional ideas. — smartmeta, Dec 09 '13 at 08:13
Here is th complete example http://jsfiddle.net/kdLpD/. When the page is loaded the icon is white, but it should have the predefiend color. If you select a new color then the color of the icon changes. (By the way: It is not relevant if the content of the input fields change. Later they both will be hidden.) Thanks for your help. — smartmeta, Dec 10 '13 at 17:30
It seems you've found a bug. It's quite easy to write a proper parser for this format (copy the example "cmyk-percentage" and change the regexp line as such: `var m = /^(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)/.exec(color);`), but the color is not displayed correctly initially. — Martijn, Dec 31 '13 at 10:58
I've fixed some bugs and updated h3nr1x's jsfiddle: http://jsfiddle.net/mwvdlee/B945t/ — Martijn, Jan 01 '14 at 18:35

How to work with CMYK colors in jQuery.colorpicker?

1 Answers1