How to tweak the 2d image settings

[xjjius]

I have hard time to tweak the image quality of kekule Chem Viewer 2D widget. I am using kekule Chem Viewer 2D widget in my website. Here is the image generated by Kekule (The real size on web site is 185px * 185px)

And this is the image generated by another chemistry widget (The real size on web site is 185px * 185px)

I don't like the later one since it can not display nitro group properly. However, the image quality is better than kekule with default settings. I know there should be some way to tweak the settings of kekule 2d viewer to achieve better image quality. I had gone through the api document and the tutorials, it was really hard to find any useful information there. And I also read some source code and it was not quite effective for me since I am not an expert of javascript.

So, is there any document or live tutorial that can help me tweaking the image quality of kelule 2d viewer to at least reach the standard of the the other web viewer that I mentioned above? Those parameters that can help are: font family, font size, bond length, bond-atom spacing, bond width, bond length, image resolution, caption text styling, etc.

[partridgejiang]

Hi @xjjius, some of the styles can be controlled by CSS (such as the caption of viewer), others can be configured with viewer.getRenderConfigs() object, e.g.:

var configs = viewer.getRenderConfigs();
configs.getTextFontConfigs().setAtomFontFamily('Times New Roman, serif');  // set the font family of atom label
configs.getLengthConfigs().setAtomFontSize(10);  // set font size to 10px
configs.getLengthConfigs().setAtomLabelBoxExpandRatio(0.8);  // controls the bond-atom spacing
configs.getLengthConfigs().setDefBondLength(20);  // set default bond length
configs.getLengthConfigs().setBondLineWidth(2);  // width of normal bond
viewer.requestRepaint();  // repaint if neccessary

More of those configs can be found in /render/kekule.render.configs.js. By default, all viewers in one HTML page shares the same config object, so setting it at the initialization stage of web page will affect all viewers on it.

By the way, the image resolution here refers to the dpi? Just set a larger size to viewer than shrink it with CSS transition will be a workaround?

[xjjius]

@partridgejiang I have tried the options, the setDefBondLength() method doesn't work. It renders the same size of the image no matter what number I put. 30 and 300, even 3000 all look the same. Is this due to the autofit was set to "true"? While other options worked fine so far. The image still looked fuzzy though. Is there any options that can improve the image quality?

And I was told be the browser that the function requestRepaint() is not a valid method. I think it should be repaint().

[partridgejiang]

Hi @xjjius, yes, the setDefBondLength won't work when autofit is true, in such a case the bond lengths will be automatically calculated from the widget's dimension. And the requestRepaint is a new function introduced newly, for the older versions, just calling the repaint() method. As the quality of rendering, I am working on it these days, please stay tuned.

[partridgejiang]

Hi @xjjius, in the latest dist, some extra work has been done to improve the antialiasing in rendering. You may now use the following code to customize your viewer:

var envConfig = viewer.getDisplayerConfigs().getEnvironment2DConfigs();
envConfig.setAntialias(true);
envConfig.setAntialiasBlurRatio(0.5);
envConfig.setOverSamplingRatio(2);

Please note that in different web browser and OS, the antialiasing effects differ a lot, so you may have to adjust the antialiasBlurRatio and overSamplingRatio properties to fit your own environment.

[xjjius]

@partridgejiang Thank you for the instruction. I downloaded the newest version of Kekule and I got this error: TypeError: chemViewer.getDisplayerConfigs(...).getEnvironment2DConfigs is not a function

BTW, I am using Kekule in my React project along with Typescript.

[xjjius]

@partridgejiang BTW, I tried to load Kekule as a module using: var Kekule = require('kekule').Kekule; instead of traditional way. But it doesn't work.

Should it be： var Kekule = require('kekule') or: import Kekule from 'kekule' ?

I finally managed to get it work in my React project (webpack env) using: import Kekule from 'kekule';

[xjjius]

@partridgejiang I figure out about the settings when using Kekule as a module, now it works.

However, I still get Type Error getDisplayerConfigs(...).getEnvironment2DConfigs is not a function

[partridgejiang]

@xjjius, please update from the dist directory of this repository manually rather than using the npm, since this new dist has not been published to npm yet. After that, please check if the Kekule.VERSION is '20120300', :).