Rendering gradient/pattern preview in CEP panel

9 replies
1420 views
Translate

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?

Scripting

This topic is closed to new replies. Start a new post to keep the conversation going.

InventsableCorrect answer

Legend

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.

maryg56488698

Participant

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

Translate

Inventsable

Legend

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.

Translate

O

OhmsG

Inspiring

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.

Translate

InventsableCorrect answer

Legend

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.

Translate

B

boguslavskyAuthor

Inspiring

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...

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.