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, 357🔥, 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, 508🔥, 0💬

GLViewer Class and Instance Methods
What is the GLViewer Class? GLViewer, or $3Dmol.GLViewer, is a class in the $3Dmol namespace, that defines a WebGL-based viewer. There are 2 ways to instantiate a GLViewer instance: new $3Dmol.GLViewer(element, config) -> $3Dmol.GLViewer $3Dmol.createViewer(element, config) -> $3Dmol.G... 2023-09-10, 478🔥, 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, 462🔥, 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, 444🔥, 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, 426🔥, 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, 419🔥, 0💬

Load Data by URL into Embedded 3Dmol Viewer
How to load data by URL into the Embedded 3Dmol Viewer? You can use "data-href" and "data-type" attributes on the DIV element to load molecule data from a URL into the Embedded 3Dmol Viewer. Here is an HTML code example, Embedded-Viewer-data-href.html ,that loads a Benzene molecule in SDF format wit... 2023-09-10, 369🔥, 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, 364🔥, 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, 358🔥, 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.