Rendering gradient/pattern preview in CEP panel

[boguslavsky]

I'm writing an extension where some of the functionality requires me to create a div in the CEP panel where the background of the div is the same as the currently selected swatch. Doing this for solid colors is no problem (just set the div background-color property to be the hex value of the color), but if the swatch is a gradient or a pattern, I'm not sure how to create a div that reflects that. Does anybody know how to accomplish this?

[Inventsable · Accepted solution]

Are you using any frameworks like React, Angular, or Vue? Having a reactive framework with style injection would make this really easy, otherwise you may need to do a lot of bending over backwards and DOM manipulation or style/class injection. Do you know about linear-gradient in CSS? I'd use an evalScript call to read a gradient's stops and colors, collect them into a primitive array, then JSON.stringify (or multiple .join()s to force it into a string that can be split with different delimeters like ; and , ) the result and return it from the function, parse/split it in the callback of CEP, and (since I use vue) assign the result to a computed property which automatically constructs the :style attribute of a preview DIV.

[boguslavsky]

This sounds solid, I'll give it a shot. If I was using a framework, can you point me to some resources I could look at to implement this? Specifically the style injection you mentioned. Never used something like that before...

[maryg56488698]

The corrected answer has nothing to do with the CEP panel.  

The CEP panel uses an older javascript engine.  You can read about creating a gradient here.  https://ai-scripting.docsforadobe.dev/jsobjref/Gradient.html

[Inventsable]

The answer did have to do with the CEP panel: to read a gradient's stops through JSX scripting, send it to CEP via JSON, then translate that to a CSS property. The question wasn't how to create a gradient within scripting, it was how to render it within a <div> of a CEP panel's HTML.

CEP 11 uses Chromium v88 so it supports nearly all modern Javascript and if you use a modern framework those inevitably come with compilers like Vite or Webpack which can compile down to be compatible allowing you to use modern methods and CSS like linear-gradient anyway.

[OhmsG]

I agree your answer seems way over board first of all.  React, Vue or Angular for the CEP panel? 

Also if by the CEP panel you are referring to interactions with the adboe engine such as scriptng for illustrator, photoshop then it does not suppor the latest JS.

[boguslavsky]

Inventsable is right, and I ended up using his suggestion. If you're curious, this is the CEP panel I developed: https://www.randomill.com/

One of its features is randomizing colors from a color set. To visualize the color set in the CEP panel, I needed a little square that previews the color. In some cases, the imported color would be a gradient, and I needed a way to basically get the gradient information out of Illustrator, and render it in a div in the CEP panel.

The CEP panel is build with React and TypeScript. The underlying Illustrator script that actually executes actions in Illustrator is written in Adobe ExtendScript (basically old JavaScript with some proprietary Adobe features).

[Inventsable]

I remember seeing it when you released and talking more in other posts. It would be a nightmare to make something that complex in vanilla HTML and JS.

Using frameworks is nowhere near as daunting as the uninitiated might expect it to be. Boilerplates like Bolt-CEP or my own Bombino are arguably far easier to use than demystifying Adobe's own lacking documentation and all the special edge cases of CEP as an environment, with the added benefit that you develop in line with modern web development.

[OhmsG]

The comment was based on "CEP panel where the background of the div is the same as the currently selected swatch" not a full fledged system.  It wasn't intended to turn into anything else than just an observation.

[Inventsable]

Seeing this single post lacks context. boguslavsky had already asked several questions around the same time to the extent I understood their project already had decent complexity. It's not as if the first suggestion I make to anyone making a CEP panel would be "learn React".