How to parse and display picture (jpg, png, etc.) in a plugin?

NOMAD and FAIRmat
1

In a schema plugin, I would like to be able to parse a picture and display it in the entry. This can manually be done using RichTextEditQuantity, but how to do it from a plugin?

1 Like
2

There is not feature to do this directly. It is imaginable that we add certain annotations that allow the UI to interpret string quantities as paths to images. Here is the feature request.

Here are possible workarrounds:

Under the “DATA” tab, string quantities with a FileEditQuantity annotation, can be clicked to open a preview in the next lane. You could set the path to uploaded images as the value for such a quantity in a normalize function.

Quantities with RichTextEditQuantity use HTML strings as values and when such a value is displayed it is rendered as HTML. You could write a normalize function that populates the value of a RichTextEditQuantity automatically. You could do the same thing as the HTML editor. It encodes the image file contents in a data-URI.

You can also have a non editable string quantity with a browser(render_value:HtmlValue) annotation. Again, produce html values with data-URI image tags to add your picture here.

3

Hello,
just as an example of possible normalize function that you can implement, I post here a small snippet of code.
You can see below a class containing only one quantity called “images”, it has an array shape so we can append multiple images there. The normalize function is listing all the png files found in the upload through the .raw_directory_list() function and appending them in the “images” quantity.

Starting from this example you may implement your favorite variation with RichTextEditQuantity, more restrictions on the files to append, or other subtleties that you may find useful.

from nomad.datamodel.data import EntryData
from nomad.datamodel.metainfo.annotations import (
    ELNAnnotation,
    BrowserAnnotation
)
from nomad.files import UploadFiles

class MyExampleClass(EntryData):
    """An example to show how to parse images"""

    m_def = Section(
        a_eln=dict(lane_width='600px'),
    )

    images = Quantity(
        type=str,
        shape=['*'],
        description='''
        an image file.
        ''',
        a_browser=BrowserAnnotation(
            adaptor='RawFileAdaptor'
        ),
        a_eln=ELNAnnotation(
            component='FileEditQuantity'
        )
    )

    def normalize(self, archive, logger):
        super(MyExampleClass, self).normalize(archive, logger)

        upload_files=UploadFiles.get(archive.metadata.upload_id)
        for i in upload_files.raw_directory_list():
            images = []
            if '.png' in i.path:
                images.append(i.path)
                if hasattr(self, 'images'):
                    setattr(self, 'images', images)