Skip to main content

HTML File Generation with view_ngl

  • Updated

This article introduces how to output 3D visualizations from view_ngl, which is implemented in pfcc-extras, to an HTML file. This method allows for offline, interactive 3D viewing, and by utilizing an add-in, the visualization can also be used as an embedded object in applications like PowerPoint.

We will be using view_ngl from the pfcc_extras package. Please ensure it is installed beforehand.

Please note: We do not provide support for PowerPoint add-ins used to embed HTML files.

 

Procedure:

  1. Display the ASE atoms object using view_ngl.

    例：

    from ase.build import molecule
atoms = molecule('H2O')
    from pfcc_extras import view_ngl 
view_ngl(atoms, representations=["ball+stick"], w=400,h=300)



     

  2. Change the filename extension to .html.


     
  3. Save the file using the "Save Image" button.



     

  4. Download the HTML file that was generated in the same location as your Notebook using the File Browser.

    ※ Note
    You cannot open the HTML file by double-clicking it on the Matlantis platform. Please download it to your local device and open it with a browser to confirm the display.


     

  5. Confirm the display on your local device by opening the HTML file in a browser. You can resize the viewable area by dragging the ▲ mark in the bottom-right corner. (The ▲ mark may be hard to find depending on your browser's zoom or window size settings. The border of the drawing area has been edited for clarity in the images.)


     

    Example of resizing the screen:

     

    Sample

     

 

 

 

Troubleshooting

Problem: "Click to show javascript error."

In some environments, opening the generated HTML file in a browser may result in the error message "Click to show javascript error." (as shown in the image below) and the content may not display. We are currently investigating the root cause.

 

When this problem occurs, please try this (Updated 11/11/2025)


**

Temporary Fix: Manual Version Correction
 

Open the HTML file with a text editor and manually change the "model_module_version" of "nglview-js-widgets" to "3.0.8". Since this target value exists multiple times in the file, please use a search-and-replace feature to change all occurrences.

Example: 

 

Before Change: 

    "model_module": "nglview-js-widgets",
    "model_module_version": "3.1.0",

 

After Change: 

    "model_module": "nglview-js-widgets",
    "model_module_version": "3.0.8",

 

Batch Conversion Script:

A script to perform batch conversion is provided below.

For convenience, you may run the following Python script to automatically perform the conversion on the file.

 

import re
import os

# --- Configuration ---
input_filename = "test5" 
output_filename = input_filename + "_fixed"
target_version = "3.0.8" 

# ---
# 1. Read the HTML file
with open(input_filename+".html", "r", encoding="utf-8") as f:
   html_content = f.read()
   
# 2. Logic to forcefully replace the version information with 3.0.8
# (Searches for "model_module_version": "[version]" and replaces the version part)
pattern_model_version = r'("model_module_version":\s*)"[\d\.]+"'
replacement_model_version = r'\1"' + target_version + '"'

# Execute the fix
corrected_html = re.sub(pattern_model_version, replacement_model_version, html_content)

# 3. Save the corrected HTML content to a new file
with open(output_filename+".html", "w", encoding="utf-8") as f:
   f.write(corrected_html)

 


 

Related to

Related articles