View blurred on high resolution screen

[asaboor-gh]

I came up using weas-widget in python and find out blurry crystal structure on a 3K screen. Since dependency of weas-widget goes through this package directly to THREE.js, I tried to see what may be causing the issue using THREE.js in Observablehq notebook and found out that blurriness comes from not setting pixel ratio properly.

In this package code, after definition of renderer somewhere after this line, if you may add following line of code

renderer.setPixelRatio(devicePixelRatio);

That would show scene completely perfect on any device. I hope it will solve the problem.

[superstar54]

Hi @asaboor-gh , thanks for reporting the issue and providing a suggestion for fixing it. I have implemented the fix, and published a new version (v0.1.13) of weas-widget, please try and let me know if it works.

[asaboor-gh]

Thank you for very quick fix in both packages.

Here is the view before this fix:

And this is so good crisp view after fix that you can just screenshot and use it, but there is some other issue:

Please note that widget /cell/atom size does not change with it which is a good thing. It's the only left and bottom of coordinates which seems to be scaled by window.devicePixelRatio.

Also, if we use viewer.display_image(), the output is correct there as seen below:

[superstar54]

Hi @asaboor-gh , thanks for the detailed description of the issue. It maybe fixed in this PR. I have released new versions of weas and weas-widget. Please upgrade weas-wdiget and try again.

[asaboor-gh]

Thanks again for the fix very quickly! It's working!

Here is the updated view. (I increased boundary to observe some additional things)

Below are the points I observed but I do not necessarily ask for a fix right now, just for future considerations when you will be adding features/fixing bugs at your own pace.

• with increased boundary the axes vectors on the left bottom get smaller and smaller.
• As you see the setting in second image, settings don't apply to extended boundary, like I changed the size and turned labels ON, which only take effect in base cell.
• Bonds are only going one way, e.g. from Ga to As, not As to next Ga atom. That is also in extended boundary situation, otherwise it works fine even in a supercell.
• In case of a supercell, labels could get cluttered, what if we have labels as legend on side?

I appreciate your great work both in Python and JavaScript. I will be adding weas-widget as a viewer in my package ipyvasp, it's very handy to view structure programmatically right inside Notebook instead of switching to other applications

[superstar54]

Hi @asaboor-gh , good to know that you are using the widget in your package ipyvasp. Nice work!

thanks for your suggestions! I will fix/implement them when I have time.

with increased boundary the axes vectors on the left bottom get smaller and smaller.

Could you give an example of this?

[asaboor-gh]

Sorry that was a confusion between previous and after fix of resolution. It looked very small after setting devicePixelRatio and I confused it with boundary settings. Also that axes legend does not export to PNG. And I just saw that atoms labels are also not exported to PNG.

[superstar54]

Hi @asaboor-gh , I have implemented some of your suggestions:

Atoms legend

One can see the legend in the bottom-right corner.

viewer.avr.show_atom_legend = True

Update the size of boundary atoms

Now, when the size of the atoms in the unit cell changes, the size of the boundary atoms should be updated.

[superstar54]

Bonds are only going one way, e.g. from Ga to As, not As to next Ga atom.

By default, one bond pair is enough to draw all the bonds; in your case, I think the distance between Ga, and As is longer than the bond max length; that's why there is no bond.

Could you share the file (e.g., cif) of your structure?

[asaboor-gh]

Nice work done!

I tested legend and it currently does not export to PNG file. Also, I have seen that it does not adopt to 'CPK' colors or if you set custom colors.

I was just testing. Here is the content of .cif file exported by ASE.

data_image0
_chemical_formula_structural       GaAs
_chemical_formula_sum              "Ga1 As1"
_cell_length_a       4.242640686307121
_cell_length_b       4.242640686307121
_cell_length_c       4.242640686307121
_cell_angle_alpha    59.99999999999999
_cell_angle_beta     59.99999999999999
_cell_angle_gamma    59.99999999999999

_space_group_name_H-M_alt    "P 1"
_space_group_IT_number       1

loop_
  _space_group_symop_operation_xyz
  'x, y, z'

loop_
  _atom_site_type_symbol
  _atom_site_label
  _atom_site_symmetry_multiplicity
  _atom_site_fract_x
  _atom_site_fract_y
  _atom_site_fract_z
  _atom_site_occupancy
  Ga  Ga1       1.0  0.0  0.0  0.0  1.0000
  As  As1       1.0  0.25  0.25  0.25  1.0000

[superstar54]

Hi @asaboor-gh , thanks for the feedback, I fixed the issues in the latest version (0.1.19),

from weas_widget import WeasWidget
from ase.io import read

atoms = read("GaAs.cif")
w = WeasWidget()
w.from_ase(atoms)
w.avr.species.settings["Ga"]["color"] = "red"
w.avr.species.settings["As"]["color"] = "blue"
w.avr.bond.settings["Ga-As"]["color1"] = "red"
w.avr.bond.settings["Ga-As"]["color2"] = "blue"
w.avr.bond.settings["Ga-As"]["max"] = 4.0
w.avr.boundary = [[-0.1, 1.1], [-0.1, 1.1], [-0.1, 1.1]]
# w.avr.show_bonded_atoms = True
w.avr.model_style = 1
w.avr.show_atom_legend=True
w.camera.setting = {"direction": [0, -1, 0.5], "zoom": 1.0}
w