Add text to a view

[hainm]

cc @kain88-de

[satary]

Hello @hainm !
This way works if you want to have "rotatable" text, but what if I need to overlay some text "in front" of the view? Are there any relatively simple ways to do that?
edited:
It looks like it is certainly possible, as atom name is displayed at the upper left corner while picking atoms.

[hainm]

@arose: any idea? Thanks.

[arose]

To some extent you can use the zOffset parameter. If that is larger than the bounding radius of your models then all text will be rendered in front.

[hainm]

and may be view.shape.add_text is another option if I understand the issue correctly.
https://github.com/arose/nglview/blob/b15ccc9d49ad191888be3f2ff3921b79ae647020/nglview/shape.py#L114

[satary]

@arose Sorry for the late reply.
The idea is not to just place the label in front of the molecule. The idea is to overlay the text onto the widget itself (to add title and legend, for example).
Something like the atom label at the left corner of this screenshot.

Another question is why this atom label (I mean at the left corner of the screenshot) is not rendered if I want to save the image?

[arose]

The label is not rendered in screenshots because its is not part of the 3d scene but a simple html element. As far as I know there is no API to add html to the widget but maybe @hainm has an idea.

Btw. Is that structure in the PDB archive? The protein look interestingly symmetric.

[satary]

@arose Ok, got it.
That is a part of the nucleosome (1kx5 pdbID), its got a two-fold symmetry axis =)

[hainm]

There is no API to add HTML yet, but there's a hacky way to do it by using view._execute_js_code
#768

code = """
$("<div></div>")
            .css("position", "absolute")
            .css("top", "5%")
            .css("left", "3%")
            .css("background-color", "white")
            .css("padding", "2px 5px 2px 5px")
            .css("opacity", "0.7")
            .appendTo(this.$container);
"""
view._execute_js_code(code)

You need to play around with this to add your own text. good luck.

[arose]

That is a part of the nucleosome (1kx5 pdbID), its got a two-fold symmetry axis =)

Thank, looks like there is local C2 symmetry, made a snapshot https://molstar.org/viewer/?snapshot-url=https%3A%2F%2Fwebchem.ncbr.muni.cz%2Fmolstar-state%2Fget%2F5de7da28-c560-4dc0-8c31-fce8f383348b

[hainm]

[satary]

@hainm Thanks for the great example!

[scottwsides]

Any progress on a 'add_title' method? The above did not work for me.

[hainm]

Any progress on a 'add_title' method? The above did not work for me.

have you tried in the traditional notebook yet?

[scottwsides]

I havent... but I'm never going to use the trad notebook. I've drunk the jupyterlab kool-aid ;-)

[hainm]

jupyterlab was not pleasure to work with in 2017 when this topic was opened, so we have not revisited the lab yet.

[scottwsides]

Understood. But my feeling is that jupyterlab is definitely the weapon of choice for most. Its the logical progression through the years of

python cmd line ---> ipython cmd line ---> jupyter notebook ---> jupyterlab notebook.

I dont think there's any going back. I'd love NGLView to have better integration because Chemistream leans heavily on your great library, and Chemistream is exclusively jupyterlab for UI

[hainm]

I dont think there's any going back. I'd love NGLView to have better integration because Chemistream leans heavily on your great library, and Chemistream is exclusively jupyterlab for UI

yeah, I agree with you about jupyterlab. I had more free time when I was a postdocs to work on nglview than nowadays.

[scottwsides]

Copy that... I hear ya brother ;-)