UI Components of Embedded 3Dmol Viewer

Q

What functions are supported by UI components on the Embedded 3Dmol Viewer?

✍: FYIcenter.com

A

UI components on the Embedded 3Dmol Viewer support the following functions:

1. Model Data Input: Accessible through the first icon on the left. You can load PDB protein data from the online PDB database, or molecule compound data from PubMed CID database.

2. Selections and Associated Styles: Accessible through the second icon on the left. You can add different substructure selections and apply different styles.

3. Surfaces and Their Selections: Accessible through the icon on the right. You can build Van der Waals on different substructure selections.

⇒ 3Dmol.js Classes and API

⇐ Load Data from Another HTML Element

⇑ Using Embedded 3Dmol Viewer

⇑⇑ 3Dmol.js FAQ

2023-09-10, 882🔥, 0💬

addModel() - Add Model from Data
How to create a model from a molecule data string with 3Dmol.js addModel() methods? viewer.addModel() method in the $3Dmol.GLViewer class allows you to create a model from molecule data string: {$3Dmol.GLViewer} addModel(data, format, options) -> {$3Dmol.GLModel} Here is an HTML code example,... 2022-12-26, 1328🔥, 0💬

$3Dmol.download('cid:...', ...) - Download CID Molecule
How to download molecule by CID with the $3Dmol.download() method? The syntax to download molecule by CID with the $3Dmol.download() method is shown below: $3Dmol.download("cid:{CID}", viewer, options, callback) -> {$3Dmol.GLModel} viewer - The $3Dmol.GLViewer instance where the downloaded pr... 2023-09-10, 1198🔥, 0💬

$3Dmol Namespace and Static Methods
What is the GLViewer Class? $3Dmol is the top namespace of the $3Dmol.js library. It contains a sub-namespace, several classes and some static methods as listed below. Sub-namespaces : $3Dmol.GLDraw - Lower level utilities for creating WebGL shape geometries Classes : $3Dmol.GLModel - A group of rel... 2023-09-10, 1098🔥, 0💬

3Dmol.js Bug - data-ui=true Impacts on Selection
Why is the default style done after removing data-ui="true" in the embedded 3Dmol viewer? There seems to be code bug in the 3Dmol.js library. Here is an HTML code example, Embedded-Viewer-data-ui-Bug.ht ml,that contains 2 embedded viewers: one with data-ui="true" and the other without data-ui="true"... 2023-09-10, 1070🔥, 0💬

UI Components of Embedded 3Dmol Viewer
What functions are supported by UI components on the Embedded 3Dmol Viewer? UI components on the Embedded 3Dmol Viewer support the following functions: 1. Model Data Input: Accessible through the first icon on the left. You can load PDB protein data from the online PDB database, or molecule compound... 2023-09-10, 883🔥, 0💬

Assign Embedded 3Dmol Viewer to DIV
How to assign Embedded 3Dmol Viewer to a "div" element? Here is an HTML code example, Embedded-Viewer-PDB.html, that assigns the Embedded 3Dmol Viewer to in "div" element. It also uses "data-*" attributes to load a protein from the PDB Websites, creates a selection from chain A and displays it in ca... 2023-01-30, 837🔥, 0💬

Multiple Selections with Embedded 3Dmol Viewer
How to create multiple selections apply different styles with Embedded 3Dmol Viewer? In order to create a separate selection, you need add a suffix code to the "data-select" attribute name as "data-select{code}". Then other selection related attributes can use the same suffix code to refer to the se... 2023-01-30, 798🔥, 0💬

$3Dmol.download('pdb:...', ...) - Download PDB Protein
How to download PDB Protein Data with the $3Dmol.download() method? The syntax to download PDB Protein Data with the $3Dmol.download() method is shown below: $3Dmol.download("pdb:{PDB_ID}" ,viewer, options, callback) -> {$3Dmol.GLModel} viewer - The $3Dmol.GLViewer instance where the download... 2023-09-10, 788🔥, 0💬

Load Data from Another HTML Element
How to load molecule data from another HTML element into the Embedded 3Dmol Viewer? You can use "data-element" and "data-type" attributes on the DIV element to load molecule data another HTML element into the Embedded 3Dmol Viewer. Here is an HTML code example, Embedded-Viewer-data-element.h tml,tha... 2023-09-10, 698🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.