search

cheminfo / nmrium

React component to display and process nuclear magnetic resonance (NMR) spectra.
https://docs.nmrium.org
MIT License
55 stars 25 forks source link

Improve display quality #1246

Closed lpatiny closed 2 years ago

lpatiny commented 2 years ago

Well NMRium and be used on big screen ... with a width of over 5000 pixels

image

And in this case the quality is not great. The reason is that we use xyReduce to increase the spead a little bit everywhere in the code

https://github.com/mljs/spectra-processing/blob/3ab1b4ed1380197747eacf62544f4679349481e8/src/xy/xyReduce.js#L10-L17

Please when calling this method use the option nbPoints = 2 * size of the NMR display component. I think it will increase the speed for small screen but improve the quality on large display.

hamed-musallam commented 2 years ago

@lpatiny why not use window width and not the component size? but still, this will make a problem if the screen is big but the PC performance is not good

lpatiny commented 2 years ago

Seems the component size (component in which you draw the spectrum) is in the state and it is only this size that is relevant for the calculations.

I think that most of the time if you can afford a huge screen you have good performance on your PC as well.

hamed-musallam commented 2 years ago

@lpatiny take for example my screen, component size 942 * 500, the default number of points 4001? I will get a value less than the default value and it is around 2000. I think we need to think about another way to calculate it, maybe if we define constant and put assumptions, for example, the screen with width 900px or less the best number of points 4000 that mean with 1200px we need 5300 points.

lpatiny commented 2 years ago

In your case you have a low res screen and a relatively slow computer. It does not make sense to try to draw 4000 points like today if half of them are enough. So you will see an acceleration drawing only 1884 points. I don't see the problem with this it seems an advantage to me.

hamed-musallam commented 2 years ago

@lpatiny this the quality on my pc look like this and it is worse than what it was before image

hamed-musallam commented 2 years ago

@lpatiny I will push the changes so you can test it also on your pc and close this ticket.

lpatiny commented 2 years ago

@hamed-musallam you are right it is not perfect when we reduce the number of points. I create 4 times the nbPoints that is displayed now.

https://github.com/cheminfo/nmrium/commit/6f269841cedd2443b4667177fab3e0c671dc8d5e

Even if you have a SVG that contains many lines at the same integer point is seems that the browser will make some antialiasing that looks better. So it is difficult to reduce the number of points.