Marvin JS - Convert Structure To Image

Hi ,

I am using Marvin JS 15.12.14 without webservices . I have followed the same steps as suggested by chemaxon in the example https://marvinjs-demo.chemaxon.com/latest/examples/example-create-image.html  . The final method CreateExporter  is returning an error. The code snippet is as given below . 

function createExporter(imageType) {

var inputFormat ="mrv";

if(inputFormat == "") {

inputFormat = null;

}

alert(inputFormat);

var defaultServices = getDefaultServices();

var services = {};

services['molconvertws'] = defaultServices['molconvertws'];

services['stereoinfows'] = defaultServices['stereoinfows'];  // enable stereo calculation

 

  var settings = {

'background-color': $('#bg').val()

};

var params = {

'imageType': imageType,

'settings': settings,

'inputFormat': inputFormat,// type of output image

'services': services // to resolve any molecule format and be able to calculate stereo info

}

alert(params);

try

{

return new marvin.ImageExporter(params);

}catch(err)

{

alert("error here ---->");

}

}

The line inside the try block is returning error where the alert statement inside the catch block is displayed .

Also let me know if JChem Webservices is a dependency for this function to work . 

Anyways i have included the following scripts in my xhtml as suggested.

<script src="../js/lib/jquery-1.9.1.min.js"></script>

	<script src="../gui/lib/promise-1.0.0.min.js"></script>

	<script src="../js/marvinjslauncher.js"></script>	

	<script src="../js/webservices.js"></script>

Please help me in sorting out this issue . 

I have tested your code.

Although, I haven't got exception at the

return new marvin.ImageExporter(params);

statement but the image export is failed because of the lack of the JChem WS. The image exporter attempted to call the WS but it got a 404 error for the HTTP request.

Thus, please, do not specify the location of services if JChem WS is not installed.

If you modify your code like this, the image export should work.

function createExporter(imageType) {
            var inputFormat = "mrv";
            var settings = {
                'background-color': $('#bg').val()            
            };
            var params = {
                    'imageType': imageType, // type of output image
                    'settings': settings, // display settings
                    'inputFormat': inputFormat, // renderer will expect molecule source in this format
            }
            return new marvin.ImageExporter(params);
        } 

Loading of webservices.js is insufficient in this case.

Thanks Tamas ,

It worked fine for me .The problem was actually in the applyDataURI method on below line of code 

var img = $('<img>', { src: dataUri}).appendTo($("#imageContainer"));

I changed this line of code to 

$("#image").attr("src", dataUri);

which basically worked fine for me . I have a another clarification to be done .

The images that are rendered after converting the structure to image are relatively lesser in size while loaded than it was when initially saved .In turn when i call these images in the marvin editor ,It will be still smaller in size . I have attached the photo copy of attachments along with this reply . Please suggest me a solution for this . 

Hello,

We believe that we fixed this problem and the fix will be released later this week. So I would like to ask you to download the newest version on Friday afternoon, and please take a look whether this bug is also exists.

I would really appreciate your feedback.

Best regards,

Efi 

Hi,

I am writing to inform you that the release of Marvin JS is postponed to early next week.

We are sorry for the inconvenience.

Best regards,
Eszter

Hi,

I would like to inform you, that Marvin JS 16.2.8 release is out, and it contains the fix that could solve the issue, you reported.

Please, check this version, and let us know your findings.

Best regards,
Eszter 

 

There is somme mistery for me :(  : In this function

createImage("image/jpeg", applyDataUri);

function createImage(imageType, callback) {

			var exporter = createExporter(imageType);

			exporter.render($("#molsource-box").val()).then(callback, alert);

		}

 

The applyDataUri script is called thru the callback. But where  dataUri is comming from ? 

function applyDataUri(dataUri) {

			$('#imageContainer').empty();

			var img = $('<img>', { src: dataUri}).appendTo($("#imageContainer"));

			$("#imageContainer").css("display", "inline-block");

		}

Hi Fabrice, 

I am not sure if I understood your question well.

In case of PNG and JPEG image generation, Image Exporter generates the data URI. 

When exporter.render() function is called, since it is an asynchronous call, it will return with a Promise. When this Promise is fulfilled, the function inside the '.then' part will be called with the dataURI as a parameter (which was returned when the render function is finished).

Please find more detailed information here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

If you have more questions, please let us know. 

Best regards,
Eszter 

ok, I understand that the method called applyDataUri is called with an implicit parameter named dataUri thru a promise, is that right ?

Could i have :

function getImage(source) {
  imageType='image/png'
  var exporter = createExporter(imageType)
  exporter.render(source).then(
    return dataUri
  , 
    console.log('error)
  )
}

I am not sure if this is what you want.

Could you give us more information, what would you like to achieve?

 

Im working with vus.js. So the image source is not pushed from a jqueryScript, but pulled with a binded scr value :

<tr v-for="structure in structures">


	<td>@{{ structure.name }}</td>


	<td><img v-bind:src="getImage(structure.cml)"></td>


	<td>

		<button  class="btn btn-xs btn-sucess" @click="deleteStructure(structure)" >Delete</button>

	</td>


</tr>

So the method getImage has to return the dataURI value (as showned in th example). But i read that computed values can't be a promise

getImage() {


...do stuf


  return dataUri


}

Hi Fabrice,

As I see, you need a function from the Marvin JS API that generates an image immediately as you give the input molecule.

In the Marvin JS API the following functions fullfill this requirement:

marvin.ImageExporter.molToDataUrl

marvin.ImageExporter.mrvToDataUrl

The first one expects molecule source in MDL molfile V2000 format, the second one expects an MRV source.

Both returns with an image data URI.

As I see, your molecule input is in CML format. To perform CML source, Marvin JS requires ChemAxon JChem Webservices. In this case, you have to options:

1. Convert CML into MRV in advance before you invoke image generator code. In this case you can use the mrvToDataUrl function in your current getImage function.

2. Create a new ImageExport object with the desired export parameters and call its render function with your CML source. The render function cannot present the image directly. It wraps your request into a Promise object and returns with this object. To get a notification about the result of your request, pass a function to the promise objects that is evaluated as the request completed successful. It works like an event handler.

Although this way can seem a bit more complicated but it has an important benefit: you do not have to care with the CML - MRV convertion since the ImageExporter calls it automatically (invoke JChem WS in the background).

Our example demonstrates its usage:  Marvin JS Examples - Convert Structure To Image
In this example, applyDataUri or applySvg function are performed when the desired image is created.