CMYK Color Selector - xmpie-users/uStore-js GitHub Wiki

Introduction

This control is a simple CMYK color selector with several configuration options:

  • Administrator can select to show color swatches only, a custom color selector only, or both.
  • Color swatches can be set to specific colors by the administrator and the custom selector hidden to enforce only certain (eg corporate) colors.
  • Size, shape and position of the swatches can be changed.

The control is designed to return a comma separated text string to uStore (for example: "10,20,0,10" being percentages of C, M, Y, & K) allowing the dynamic document to use these values with either:

  • the Rectangle() function in a Graphic ADOR to color objects (frames, shapes, etc), or
  • the Style ADOR to color text. (Note that Style ADORs are not supported in XLIM and require a "Pro" uProduce server)

A sample InDesign document is provided below to help you understand how to setup the VDP template to use this control from uStore.

Alt

Configuration parameters

swatches

Type: string array

Example:

  "swatches": [
    "0,0,0,0",
    "100,100,100,100",
    "100,65,0,20",
    "0,100,85,5",
    "0,50,90,0",
    "100,0,45,40"
  ]

This parameter sets the CMYK colors that will be displayed as color swatches for the customer to select. Values should be entered as the percentage of each "Cyan,Magenta,Yellow,Black" with comma separating the values. Set as many colors as desired.

If the parameter is not provided, or the array is empty, then no swatches will be displayed by the color picker.

allowCustom

Type: boolean

Example:

"allowCustom": false

If provided, this parameter determines if the custom color selector is displayed. true will show the color picker. false will hide the color selector and only the swatches (if set) will be displayed.

If the parameter is not included in the configuration JSON, then the custom color picker will be displayed by default.

initialColor

Type: string

Example:

  "initialColor": "100,100,100,100"

This parameter sets the initial color that will be displayed/selected when first loaded. (Note if the customer is editing a draft, or previous order, then the initial color will be set to whatever color was previously selected when the draft was saved or order placed.)

Note this is the same as using the Default Value property on the uStore dial Customization Wizard page.

swatchSize

Type: integer

Example:

"swatchSize": 44

This parameter allows you to change the size (height and width) of the swatches displayed by the control. The unit is pixels (px).

swatchPosition

Example:

  "swatchPosition": "above"

When both swatches and the custom color picker are displayed, this parameter allows you to control whether the swatches appear above or below the color picker. Permitted options are above or below. Default is above

swatchShape

Example:

  "swatchShape": "circle"

This parameter controls the shape of the swatches.

Default shape is square. Other options include: circle, octagon, flower, starburst.

Full sample configuration

{
  "swatches": [
    "0,0,0,0",
    "100,100,100,100",
    "100,65,0,20",
    "0,100,85,5",
    "0,50,90,0",
    "100,0,45,40"
  ],
  "allowCustom": true,
  "initialColor": "0,0,0,0",
  "swatchSize": 44,
  "swatchPosition": "above",
  "swatchShape": "square"
}

Downloads

Built versions ready to install in uStore Presets:

CmykColorPicker v1

You can download and modify the source code below. To modify and build new versions follow these instructons using the source zip instead of the ng_duc_project_sample.zip:

CmykColorPicker v1 Source code

Setting up your InDesign document to use the CMYK Color Picker with uStore

The CMYK Color Picker will pass a single comma separated string to the VDP document's plan/logic.

It is recommended to use a text variable in uPlan or uCreate Print and set it as the campaign dial that you link to this Input Control.

Parse the incoming string to extract the different C, M, Y, K, color values and use either with a Graphic Content object and the Rectangle() function, or the Style ADOR using style++.

The values returned from the Input control will be CMYK color percentages (0-100). This is perfect for the Rectangle() function, but will need to be divided by 100 for style++ which uses values between 0 and 1.

This color test zip file contains a sample InDesign document, plan file and CPKG package for you to examine and see how to setup your documents to use this control.

The following will step you through setting up the sample:

  • Download and unzip the file.
  • Login to your uProduce dashboard and upload the color test.cpkg to an account that your uStore server has access to.
  • Proof and process the document relevant for your server.
    • If you have a Pro server, process the INDD document.
    • If you have XLIM-only server, process the XLIM document. (Note that XLIM does not support dynamic Style content objects.)
  • In uStore backoffice, create a new dynamic document and select the account/campaign/document that you processed.
  • On the customization step, select variables, and add the name and color variables to the customization step
  • Modify the color dial, select the "CMYK Color Picker" as the Input Control.
  • The default Json Configuration is fine, but you can adjust the settings to suit.
  • Save the product, put it online and test.

Tips

  • uStore v25.2 or later is required
  • If your storefront shows "sorry an error occurred" when viewing a product that uses this Input Control, first check that the configuration JSON is valid by using a tool such as JSONLint
  • If you experience other problems, or have suggestions for future versions, you should ask or comment on the XMPie-Users Google Group. Remember that this Input Control is not authored by XMPie, so you will probably not get support for this custom Input Control from XMPie Support.