Updating image during user interactions

Photoshop UXP Plugin API
1

I have custom sliders in my panel.

image

When user interacts with a slider by holding mouse button, many operations in Photoshop do run, but don’t display on the screen. The simplest example is updating Levels adjustment layer gamma value with a slider, image changes only when mouse button is released.

Logging everything I don’t see any errors. Batchplay descriptors behind the slider handle update are running with modalBehavior: "execute" set.

Any way to make image update in real time while user interacts with the panel? It seems to work for some elements in Photoshop, for example Hue Saturation adjustment layer does update in real time.

2

Which event are you using to listen for change? I managed to get slider to respond real time with onInput. I suppose plain JS it would be

sliderEl.addEventListener("input", (e) => {
  console.log(e.target.value)
})

Just keep in mind, that on a bit heavier Ps operations changes still won’t be visible real time. Only when you pause the sliding, it would catch up on last value

3

I can always delay the real heavy operation with setTimeout and update only after some time when user doesn’t move the slider, to avoid spamming heavy operations.

Still, at the moment UI doesn’t update at all, only after mouse button is released.

The event I am using is a custom update event inside noUiSlider GitHub - leongersen/noUiSlider: noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies., but it’s a pure js library.

4

Well… Even their first color picker example isn’t very responsive I’d say. Just try moving it a bit quicker and color changes only after mouse release

5

Here’s what I’ve achieved with <sp-textfield/> and <sp-slider/>

6

I take it back :slight_smile: One of my Chrome extensions was messing up the output and responsiveness of that example

7

I use that slider in many different scenarios, I doubt I will be able to reliably implement them on top of sp-slider.

8

update event should work. Can you try just adding a console.log() on update and see if you get every value there?

9

Yes, everything is invoked, I can see my functions running, calling to batchPlay and no errors.
But image doesn’t change until I release the mouse button