Ketcher - No Edition Mode - Read Only - Hide Toolbar - Molfile Rendering on Client side

[Grégory MERCIER]

Hello,

 

We would like to render molfiles on client side by using Ketcher with read only mode

Currently, in the example 'demo.html', we need to press « Render Now » button to display the structure.

 

Is there a way/workaround to render the molfile in the HTML table on the page loading (e.g. without the « Render Now » button)?

We try to call the JS ‘render’ function after the HTML table without success;

It seems to be a issue with the Ketcher iframe loading.

 

You’ll find in attachement an example 'demo_dng.html'

 

Thanks for your help and support.

Regards,

Grégory.

[Mikhail Kozhevnikov]

Hi Grégory,

If you only need to display the structure, you can avoid using iframe altogether, -- just create a div and use ketcher.showMolfileOpts(). Note that in this case you have to load all the necessary source scripts manually, as in the example attached.

Regards,
Mikhail

--
 
 

[Grégory MERCIER]

Hi Mikhail,

 

Thank you for the quickly reponse. It works great.

However, we've built a gallery (15 stuctures) based on your example and have observed a "slow" perfomance to complete the render.
Have you got any suggestions about this ?

You'll find an example in the attachement.

 

Regards,
Grégory.

[Mikhail Kozhevnikov]

Hi Grégory,

The rendering does take a while, especially for complex structures, so if you have a dosen or more of them in one page, it pays to do rendering in the background after the page is loaded so as not to make the user wait.

We're working to improve the performance in general, especially on older browsers, and appreciate suggestions in this regard.

Cheers,

Mikhail

[Mikhail Kozhevnikov]

Hi Shakti,

Plain text format is exactly what it takes, you're correct. I'm not sure what exactly may have gone wrong in your case. Could you show me what exactly your PL/SQL function produces, if you use the normal newline characters, rather than <br/>? Does it use some sort of escaping?

As to the example, if you replace all the br tags with actual line breaks, it will work just fine. Try "$('mf_628_185').innerHTML.replace(/<br\/?>/g,'\n')".

Cheers,
Mikhail

On Fri, Dec 7, 2012 at 5:40 PM, shaktir...@gmail.com <shaktir...@gmail.com> wrote:

Hi,

I'm trying out Ketcher and it is great so far. However, I have the same problem when trying to render molfiles in a report.

By following the previous examples the picture is actually displayed with the static <p> tag 'molfile', but it doesn't work if the molfile is generated by a pl/sql function called up-front.

I have tried using '<br/>', '\n', and '' to build the molfile as if it was written in plain text in the <p> tag, but it still doesn't seem to be the write format for Ketcher.

Could you please tell me were I went wrong (example attached) ?

Thanks for your help and support.

Regards,

Shakti

[Mikhail Kozhevnikov]

Hi Shakti,

There's not much documentation on the subject as yet -- most of the options (showAtomIds, showBondIds, etc.) are only used for debugging purposes. 

Some just do what the name suggests, e.g. 

• showValenceWarnings = true/false, default:true
• atomColoring = true/false, default:true
• hideImplicitHydrogen = true/false, default:false
• hideTerminalLabels = true/false, default:false

Autoscale is a bit trickier, it adjusts the size of the structure to either the size you provide or the size of the element. It also overrides "bondLength". 

There's no parameter in ketcher.showMolfileOpts to pass the desired size of the structure now, but we'll add it in the next release (thanks for pointing this out!). In the meantime, you can modify the definition of ketcher.showMolfileOpts in ketcher.js as follows (just add the extra parameter and pass it on to the render):

ketcher.showMolfileOpts = function (clientArea, molfileText, bondLength, opts, viewSz)

{

    this.render = new rnd.Render(clientArea, bondLength, opts, viewSz);

...

Then you can invoke it using something like ketcher.showMolfileOpts('client_area', molfileString, 0, {'autoScale': true, 'ignoreMouseEvents': true, 'autoScaleMargin': 20}, {x: 300, y: 300}), where the last parameter specifies the required size of the element and autoScaleMargin is the distance the structure should keep from the boundaries.

Cheers,
Mikhail

On Mon, Dec 10, 2012 at 10:57 AM, Shakti <shaktir...@gmail.com> wrote:

Hi Mikhail,

First of all thank you for your quick answer.

The rendering problem is solved : in fact there is already a windows type newline character (chr10) in my data, so adding an extra character was the problem. Although, the structure still could'nt be seen in the table cell because it was too large. I changed the third showMolfileOpts parameter from 100 to 20 to get a smaller picture that could actually be seen in the table cell.

Thus I still have a question : since the autoscale doesn't seem to be applied properly, could you tell me where I can find more information about the showMolfileOpts parameters ?

Thank you,

Shakti

[Mikhail Kozhevnikov]

One important point here is that you set the size to scale to with this last parameter, so in your example it'll produce an image of size 300x300. You can always feed it the size of the cell, but be careful if it is determined automatically. E.g. if you use a <div> without absolute size and without other context, its initial offsetHeight may be 0, which will cause a rather strange visual effect.

Cheers,
Mikhail  

On Mon, Dec 10, 2012 at 2:29 PM, Shakti <shaktir...@gmail.com> wrote:

Hi again,

Thanks for the reactivity !

I have tried your solution of adding a parameter to the showMolfileOpts function in ketcher.js and changing the way it is called by :

ketcher.showMolfileOpts('textarea_634_191', $('mf_634_191').innerHTML, 0, {'autoscale':true,'ignoreMouseEvents':true, 'autoScaleMargin':20}, {x: 300, y: 300});

Now, the structure is centered in the table cell, but still way too big (example attached) ! In fact, changing the size of the autoScaleMargin, or the x and y parameters, does'nt seem to be taken in account and the picture remains the same. Maybe there is a last parameter to add to force the autoscaling ?

Cheers,

Shakti

[gno...@web.de]

Hello,

I Know it is an old topic, but the example "ketcher-example.html" is nearly what I need. I need a version to load the table from a local mol file e.g. c:\Test\testmol.mol. This colud be a simple solution for me.

I will embed this example in my c# application by using a webbrowser control. Is there a way to hand over a mol file via c# to ketcher? Sorry I have no java oder html skills, so it is not so clear for me to handel this concern.

Kind reguards
Marco

 

[ksasi...@gmail.com]

Hello Mikhail,

I used grunt CLI to compile Ketcher 2.0. And I need to display the structures of each molecule on a web page as well (as part of a molecule search site). 

Could you please provide the paths to source scripts when ketcher has been compiled using grunt?

PS: I tried to find most of the files and came up with the following:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/raphael/raphael.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/dist/raphael.min.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/dist/prototype-min.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/rename-function-calls/node_modules/esprima-fb/test/module.js' %}"></script>-->
<script type="text/javascript" src="{% static 'molbank/ketcher/Gruntfile.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/crypto-browserify/example/bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/jshint/dist/jshint.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/@browserify/acorn5-object-spread/inject.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'molbank/ketcher/node_modules/watchify/node_modules/browserify/example/source_maps/js/build/bundle.js' %}"></script>-->
<script type="text/javascript" src="{% static 'molbank/ketcher/script/util/index.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/util/vec2.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/util/set.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/util/map.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/util/pool.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/element.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/sgroup.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/struct.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/struct_valence.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/molfile.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/dfs.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/chem/smiles.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'molbank/ketcher/script/rnd/events.js' %}"></script>-->
<script type="text/javascript" src="{% static 'molbank/ketcher/script/rnd/visel.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/rnd/restruct.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/rnd/restruct_rendering.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/script/rnd/render.js' %}"></script>
<script type="text/javascript" src="{% static 'molbank/ketcher/dist/ketcher.js' %}"></script>

However, the browser throws the following errors:

Basically, "module" in Gruntfile.js is not defined. And most of the modules after that cannot be found. 

Thank you.

Regards,

Sasirekha