Black Lives Matter. Please consider donating to Black Girls Code today.

Dynamic resolution for moving images

I’ve been making an image alignment app in Dash that requires some manual input through two sliders (controlling x and y translation). The issue is specifically with the plot, so I’m sorry if this is in the wrong place.

Currently, I have two graphs (each containing a heatmap) overlaid within the Dash app to avoid both traces graph re-rendering when I move just the top trace. Additionally, I have only been able to get animation by changing the layout, rather than the x0 and y0 positions. I am not too bothered with animation if the rendering can be quick enough, but the delay on two ~700px^2 images rendering is currently prohibitive as I need users to have fairly quick feedback from their actions.

Unfortunately, having two overlaid graphs obviously causes problems with interactivity (zooming, hover-info, etc.), so it’s far from an ideal solution. I was wondering whether there would be a way to have a quick-rendering low-res copy that moves over a pre-rendered background, and then load a higher-res graph containing both traces when changes stop occurring? Is this possible, and how would I go about this? I am getting stuck on how I make it wait for a slider to stop being used while the slider is in ‘drag’ mode for the low-res, as well as how to stop the high-res version rendering if a slider is changed again.

Alternatively, if the resolution could be dynamically changed to render different resolutions depending on frequency of input from within Dash/plotly it would obviously be much more efficient than my awkward workaround idea but I don’t think that’s a current feature… Please correct me if I’m wrong!

Thanks in advance for any help you can give.

It occurs to me, now that I’ve typed that out, that I could create a callback that reads any update to the slider, waits some seconds, then writes it to a hidden div, and a second callback that compares the two and sets the high-res to render if they are the same. It’s not a nice solution though, so any alternative suggestions would be really really great.

Hi @tomfish thanks for raising this interesting question on the forum. I’ve got a project on developing more tools for image processing with Dash so this is exactly the kind of questions I’m trying to address. No simple answer at the moment though… You could use a dcc.Interval (https://dash.plot.ly/live-updates) which updates the high-res version every n seconds, no matter what has been done with the slider. Or could you set updatemode='mouseup' for the sliders?

Hi @Emmanuelle, thanks for getting back to me so quickly. I would be very interested in further image processing tools - I noticed the addition of an matplotlib imshow-like option recently, which is great! I need custom colormaps for my purposes, so I’m still using heatmaps for now, but it’s exciting to see Dash/Plotly growing. I’d be happy to contribute my perspective from working on this project if that is at all useful.

Thank you for your suggestions. Unfortunately, I am worried that updating the high-res image using dcc.Interval, would cause a lot of unwanted processing when the graph starts rendering an (immediately out of date) image while the slider is moving. updatemode=‘mouseup’ would work if I didn’t want the low-res version to update on drag, and I don’t see a way to have both as separate outputs, so I think I’ll have to stick with my janky method for now.

1 Like