CMYK Color picker Dial for uPlan Rectangle() - xmpie-users/uStore-js GitHub Wiki

uPlan v9.8 introduced a new Rectangle() function that can be fed four numbers being CMYK values that will be used to color the rectangle. The rectangle function can then be used in a graphic ADOR that is applied to objects in InDesign to color the object.

The purpose of this HTML Generic Dial is to allow a customer in uStore to easily select a color that is then passed to uPlan and used to color something in the InDesign or XLIM document that they are ordering.

Unfortunately, most web browser-based color pickers work in RGB/HSL/HEX colors, and uPlan needs CMYK values, so this example is a quick hack of the Colpick jquery plugin.

The Rectangle() function requires 4 numbers as parameters, so:

• You need to setup 4 "number" variables, one for each number.
• The variables should be set as campaign dials, so that uStore can override their values.
• The graphic ADOR that contains the Rectangle function should reference the four variables for each of the relevant numbers.

(Refer to plan provided in the sample CPKG.)

The InDesign document should be setup with the relevant Graphic ADOR applied into the document. The feature will work with either InDesign or XLIM.

(Refer to document provided in the sample CPKG.)

Save the document to the server, or export from uCreate Print and import to the server. Proof and process the document as usual before adding the document to uStore.

Setup the product in uStore in the usual way.

The solution requires adding a custom JavaScript and CSS file to your uStore server. Personally, I am normally using a custom NG theme, so I like to put these extra files in my theme in the skin\images folder. If the files are in this folder, you can reference them with this path: /uStore/images/<theme name>/<file name> If you wish to put the files somewhere else on your uStore server, that's fine, but you will have to update the code below to the relevant path to the JavaScript and CSS files.

When configuring the customization step, set one of the variables to be:

• Visible to the customer
• Set a friendly display name
• Change input control to HTML Generic
• Set the callback function
• Set the markup:

To make it easier to copy/paste the markup is listed again below:

#DIAL_DISPLAY_NAME#
<script src="/uStore/images/PieceOfCake2/colpick.js"></script>
<link href="/uStore/images/PieceOfCake2/colpick.css" rel="stylesheet" />

<input id="special-color" class="colorSwatch" type="color" value="#fffb17"> <!-- change value to set a default color -->

<script>
$(document).ready(function() {

  //add the color picker(s)
  $('.colorSwatch').colpick({
    "layout": "cmyk",
    onSubmit:function(hsb,hex,rgb,el,bySetColor) {
      $(el).val('#'+hex); //this updates the color shown in the color picker
      $(el).colpickHide(); //this closes the color picker
      setC(bySetColor[0]); //this passes the C color to uStore
      setM(bySetColor[1]); //this passes the M color to uStore
      setY(bySetColor[2]); //this passes the Y color to uStore
      setK(bySetColor[3]); //this passes the K color to uStore
    }
  });

  //trigger the selection of the default color
  $('.colpick_submit').click();

});
</script>

For each of the other three color variables, you also need to make some settings:

• Hide the dial from the customer
• Set input control to HTML generic
• Set the callback function for the relevant color
• Note that markup is left empty. (All the code is in one dial only. The other dials are required only to set the callback function.)

The resulting customization step will show the display name you defined, and a color swatch. Clicking the color swatch will open the color picker:

(Note 1: the up/down arrows next to the values are designed to click-and-drag not to click singularly to increment the number.)

(Note 2: changes to the original colpick code were hasty and inelegant, so bugs are entirely mine and totally free of charge :) )

(Note 3: because of the way the web page shows color in HEX/RGB, the translation to CMYK will leave some bright web colors looking flat when printed. A smarter person than me could probably translate/simulate the RGB color to be a more accurate representative of the CMYK.)

A tutorial video showing how to use this, and also providing a downloadable sample, is available on XMPie Campus