Skip to main content
B
boguslavsky
Inspiring
January 18, 2020
Answered

Rendering gradient/pattern preview in CEP panel

  • January 18, 2020
  • 9 replies
  • 1406 views

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?

This topic has been closed for replies.
Correct answer Inventsable

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.

9 replies

maryg56488698
maryg56488698
Participant
June 27, 2024

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
Inventsable
Legend
June 28, 2024

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.

O
OhmsG
Inspiring
June 28, 2024

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.

Inventsable
InventsableCorrect answer
Legend
January 19, 2020

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.

B
boguslavskyAuthor
Inspiring
January 26, 2020

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

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices