If I get the color from the ColorPicker picker, it gets added to the foregroundColor automatically, once I add the color parameters to style.backgroundColor, why doesn’t it update the button’s backgroundColor color change? The change only occurs when I click the button again.
@Karmalakas how do I fix this delay? Thanks.
But your color picker here is for foreground and not for the button. If you have your JS, which changes color, on button click, then that’s when it happens. Or you should have an event listener and run your color change JS as soon as foreground color changes. One more way would be to have a separate color picker specifically for the button background. Too many ways to solve the case, but not without knowing what you really want
I’m not retyping your code from video 
Better to post it properly
I think I see what’s happening. You do not await for color picker and the button color is set right when you click on it. Basically you open picker and set color at the same time. You should await for picker color to be selected and only then set button background
To my knowledge, the only way to save the selector color somewhere is to add it to “foregroundColor” and then get your code #111111 with “app.foregroundColor.rgb.hexValue” and apply it to the button’s background with “document. querySelector(‘#btnColor’).style.backgroundColor = #111111” , but without success until you provided me with this:
document.querySelector(‘#btnColor’).style.backgroundColor = hsl(${app.foregroundColor.hsb.hue} ${app.foregroundColor.hsb.saturation}% ${app.foregroundColor.hsb.brightness}%) ;
When selecting the color and closing the color picker, note that the foregroundColor is updated with the selected color, the next event to be executed is exactly: “document.querySelector(‘#btnColor’).style.backgroundColor = hsl($ {app.foregroundColor.hsb.hue} ${app.foregroundColor.hsb.saturation}% ${app.foregroundColor.hsb.brightness}%);”: However, the same does not happen, only when I click the button again.
What I really want is to click on the button, select a color, save your code and use it as the button’s background. Thanks for listening.
Here goes my jx:
const app = require("photoshop").app;
const action = require("photoshop").action;
const core = require("photoshop").core;
document.getElementById('btnColor').addEventListener('click', async () => {
await core.executeAsModal(() => {
app.batchPlay([{ _obj: "showColorPicker", _target: [{ _ref: "application" }]}],{ });
document.querySelector('#btnColor').style.backgroundColor = `hsl(${app.foregroundColor.hsb.hue} ${app.foregroundColor.hsb.saturation}% ${app.foregroundColor.hsb.brightness}%)`;
})})
The result of BP showColorPicker is the color you’ve picked. You shouldn’t use foreground color in this case, but rather that result you get from BP
If this is possible? How do I store the values obtained by the BP? Could you please show me the way? Thanks!
I really can’t think of a more clear way to say, other than you need a result from batchPlay. So instead of just calling app.batchPlay() you have to assign the result to some variable - const result = await app.batchPlay(). Then use this result very similar to how you used app.foregroundColor
I don’t want to give a full working example, as I see you’re on the right path, but still need to figure some things out. And you really need to learn how to use dev tools and console - alert() is not really meant for developing.
If you’re struggling with async/await concept, there are lots of tutorials online - it’s not specific to UXP, but just a plain JS. IIRC there are some topics on it even on this forum
OK! I don’t know if I’m in the right community. Ask me a question: Is this community ideal for those who are starting with Js and UXP, or for those who already have a high level of knowledge? Maybe I’m just not ready to deal with clues. Thanks for your attention.
It is definitely not my intention to stop you from asking. Everyones level of knowledge is different and there are no wrong questions. I believe, the lesson you learn yourself is much more valuable than if you get a complete solution from someone. In this case, you have all the pieces already, just need to put them together.
Having said that, here’s what you need:
const result = await app.batchPlay([{ _obj: "showColorPicker", _target: [{ _ref: "application" }]}],{ })
const color = result[0].RGBFloatColor ?? null
color && document.querySelector('#btnColor').style.backgroundColor = `rgb(${color.red} ${color.grain} ${color.blue})`
I didn’t test in real example, but that should be pretty much it
(grain instead of green because of Ps legacy reasons)
This didn’t work with “manifestVersion”: 5,
document.getElementById('btnColor').addEventListener('click', async () => {
await core.executeAsModal(() => {
const result = app.batchPlay([{ _obj: "showColorPicker", _target: [{ _ref: "application" }]}],{ });
const color = result[0].RGBFloatColor ?? null
color && document.querySelector('#btnColor').style.backgroundColor = `rgb(${color.red} ${color.grain} ${color.blue})`
console.log(color.red, color.grain, color.blue);
}
)
})
I tested it that way in another template with “manifestVersion”: 4, the result was positive.
document.getElementById('btnColor').addEventListener('click', async () => {
const result = await action.batchPlay([{ _obj: "showColorPicker", _target: [{ _ref: "application" }]}],{ });
const color = result[0].RGBFloatColor ?? null
document.querySelector('#btnColor').style.backgroundColor = `rgb(${color.red} ${color.grain} ${color.blue})`
})
I could never have done this on my own without your help. I can’t wait for all users in the extendScript community to migrate to UXP and join you, so we can have much better support.
What error do you get with V5?
Did you try looking for error? This explains why you have this syntax error. Try wrapping assignment to parentheses:
color && (document.querySelector('#btnColor').style.backgroundColor = `rgb(${color.red} ${color.grain} ${color.blue})`)
1 Like
Replaced the line of code, the error no longer occurred but the background color of the button did not change, the console did not show any value obtained by the collector.
console.log(color.red, color.grain, color.blue);
No message appears.
What do you get as a result? And what’s in color (if it’s there at all)?
@Karmalakas I am grateful for your patience and your interest in helping us, you have certainly been a source of pride for this community and for us beginners, I am venturing into migrating from extendScript to UXP and I recognize my deficiency in working with development tools (consele.log ()), I’m more used to the extendScript Toolkit for testing those where a simple alert() is very useful. But I’ve been following your advice on using this tool and I don’t know if I’m doing it correctly. I’m testing several templates and some things I don’t understand is that in some plugin models in the event listeners we have to add this core.executeAsModal(() => { xxxxxxxx }) some functions don’t work, inside that block as a simple app .showAlert() or console.log(), in other plugins the functions work perfectly without using executeAsModal()… that boggles my mind.
But if you, as a young scholar, make yourself available and analyze my case, I leave here the test plugin project that I am using for this topic.
Just to remember, in another plugin with “manifestVersion”: 4, without using executeAsModal() it worked perfectly, I just had to look for and add a js confersor from rgb to hex.
Where did you lose your await from BP call? Add this back. Add async to the callback function for executeAsModal() and it works just fine.
Again, if you just logged the result as I suggested, you would’ve noticed, that it’s a Promise and not the actual result you want
It worked 100% now, you’ve gained a new friend, thanks for the tips. Thank you again.