ChemDoodleWebComponent 문서 한글 번역

업데이트: 2020-03-15 Link

이 문서는 원본 문서의 원문과 함께 번역을 서술한 글입니다.

Installation

Installation > Download

To ensure the continued success of ChemDoodle Web Components, iChemLabs is dedicated to funding and developing this project. Please also help us by mentioning it to your colleagues and friends and placing a link to us on your webpage. If you really like ChemDoodle Web Components, you may also enjoy ChemDoodle, our advanced and affordable chemical structure environment that works on all operating systems.

ChemDoodle 웹 구성 요소의 지속적인 성공을 보장하기 위해 iChemLabs는 이 프로젝트의 자금 지원 및 개발에 전념하고 있습니다. 또한 동료 및 친구에게 언급하고 웹 페이지에 링크를 제공하여 우리를 도와주십시오. ChemDoodle 웹 구성 요소를 정말로 좋아한다면, 모든 운영 체제에서 작동하는 고급스럽고 저렴한 ChemDoodle도 즐길 수 있습니다.

DOWNLOAD CHEMDOODLE WEB COMPONENTS V9.1.0
SHA256 checksum: 20664ccaf2faa336ebf3a8296a655d3239410d15a05e38ddc2af18121d7b9aca
ChemDoodleWeb.js is only 397 KB!

Setup

Setting up ChemDoodle Web Components for use on your website is very simple and consists of 3 easy steps:

웹 사이트에서 사용하기위한 ChemDoodle 웹 구성 요소 설정은 매우 간단하며 다음 3 가지 단계로 구성됩니다.

Download the ChemDoodle Web Components library above.
Install the following files on your website. This can be done by simply copying the files to your server so they are accessible by your webpages.
1. ChemDoodleWeb.css
2. ChemDoodleWeb.js
Link to the essential files as URI resources in the <head> section of all the pages in which you would like to use the components. [path] is a placeholder and should be the path to the installation files on your web server.

위의 ChemDoodle 웹 구성 요소 라이브러리를 다운로드하세요.

웹 사이트에 다음 파일을 설치하십시오. 웹 페이지에서 파일에 액세스 할 수 있도록 파일을 서버에 복사하기 만하면됩니다.

ChemDoodleWeb.css

ChemDoodleWeb.js

구성 요소를 사용하려는 모든 페이지의 <head> 섹션에서 필수 파일을 URI 자원으로 링크하십시오. [경로] 는 웹 서버의 설치 파일 경로 여야합니다.

<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>

Congratulations! ChemDoodle Web Components is now installed and ready for you to use!

축하합니다! ChemDoodle 웹 구성 요소가 설치되어 사용할 준비가되었습니다!

Getting Started

Please refer to the Tutorial menu on the top of this website to begin using the ChemDoodle Web Components.

ChemDoodle 웹 구성 요소 사용을 시작하려면이 웹 사이트 상단의 자습서 메뉴를 참조하십시오.

The ChemDoodleWeb/samples directory in the download contains various sample HTML files for different components. Just open these files in a web browser to see them work, and view their source to learn how they work.

다운로드의 ChemDoodleWeb/samples 디렉토리에는 다양한 구성 요소에 대한 다양한 샘플 HTML 파일이 포함되어 있습니다. 웹 브라우저에서 이러한 파일을 열어 작동하는지 확인하고 소스를보고 작동 방식을 익히십시오.

We also recommend reading the following two reviews in the Journal of Cheminformatics:

또한 Journal of Cheminformatics에서 다음 두 가지 리뷰를 읽는 것이 좋습니다.

3rd Party Libraries

ChemDoodle uses the following 3rd party libraries, which are embedded in the ChemDoodle scope (ChemDoodle.lib):

ChemDoodle은 ChemDoodle 범위 (ChemDoodle.lib)에 포함 된 다음 타사 라이브러리를 사용합니다.

canvas2svg - Convert content on the canvas into SVG. MIT license.
glMatrix - A high performance matrix maths library by Brandon Jones. MIT license.
jQuery - Very thorough and helpful JavaScript utility library. MIT license.
jQuery mousewheel - A jQuery plugin to handle mousewheel events. MIT license.
jQuery Simple Color - A jQuery plugin to display a visual color picker. MIT license. (uis extension only)
jQuery Touch Punch - A jQuery extension to improve jQuery UI interactivity on mobile devices. MIT license. (uis extension only)
jQuery UI - A jQuery extension for creating web based interfaces. MIT license. (uis extension only)
jsBezier - Mathematical functions for working with bezier curves. MIT license.
isosurface - Marching cubes support. MIT license.

Because they are embedded in the ChemDoodle scope, they will not interfere with any other versions of these libraries linked on your page. For instance, you can link another version of jQuery on your page and it will not interfere with ChemDoodle Web Components or vice versa.

ChemDoodle 범위에 포함되어 있기 때문에 페이지에 링크 된 다른 버전의 라이브러리를 방해하지 않습니다. 예를 들어, 페이지에서 다른 버전의 jQuery를 링크 할 수 있으며 ChemDoodle 웹 구성 요소를 방해하지 않으며 그 반대도 마찬가지입니다.

You may find that you need to update to a newer version or use an older version of one of the libraries used by ChemDoodle Web Components (if you are customizing the ChemDoodle Web Components for instance). In this case, you will need to replace the appropriate library in the source and properly update the third party library to reference the ChemDoodle.lib scope. There is no guarantee that ChemDoodle Web Components will continue to work if there are major differences between the provided version of these libraries and the ones you are replacing it with. More information about these libraries can be found in the ChemDoodle Web Components download.

ChemDoodle 웹 구성 요소에서 사용하는 라이브러리 중 하나의 최신 버전으로 업데이트하거나 이전 버전을 사용해야 할 수도 있습니다 (예 : ChemDoodle 웹 구성 요소를 사용자 정의하는 경우). 이 경우 소스에서 적절한 라이브러리를 교체하고 ChemDoodle.lib 범위를 참조하도록 타사 라이브러리를 올바르게 업데이트해야합니다. 제공된 라이브러리 버전과 해당 라이브러리 버전간에 큰 차이가있는 경우 ChemDoodle 웹 구성 요소가 계속 작동한다고 보장 할 수 없습니다. 이 라이브러리에 대한 자세한 정보는 ChemDoodle 웹 구성 요소 다운로드에서 찾을 수 있습니다.

Tutorial

Tutorial > Introduction

The ChemDoodle Web Components library is a JavaScript library and runs in the browser. To begin, please download and install ChemDoodle Web Components. The rest of this page will cover some introductory material.

ChemDoodle 웹 구성요소 라이브러리는 *JavaScript 라이브러리이며 브라우저에서 실행됩니다. 먼저 ChemDoodle Web Components를 다운로드하여 설치하세요. 이 페이지의 나머지 부분은 몇 가지 소개 자료를 다룹니다.

We will not cover the basics of JavaScript here, but the following resources will provide more instruction:

여기서는 JavaScript 의 기본 사항에 대해서는 다루지 않지만, 다음 리소스는 더 많은 지침을 제공합니다.

For those that know the basics, we also recommend reading Programming languages in chemistry: a review of HTML5/JavaScript, written by Kevin Theisen of iChemLabs and published in the Journal of Cheminformatics.

기본을 알고 있는 분들을 위해, 화학에서의 프로그래밍 언어: HTML5/JavaScript 리뷰(아이켐랩스의 케빈 티이센이 작성하고 체민포그래픽 저널에 게재)를 읽는 것도 추천합니다.

Hello ChemDoodle!

To start, let’s just write a simple script that displays a popup with the current version of the ChemDoodle Web Components library installed. To use JavaScript in HTML web pages, all code must be encapsulated in <script> tags. We will use a function called alert() to popup the message “Hello ChemDoodle!”. Write the function as follows in the <body> tag of your HTML file:

시작하려면 현재 버전의 ChemDoodle Web Components 라이브러리가 설치된 팝업을 표시하는 간단한 스크립트를 작성해 보겠습니다. HTML 웹 페이지에서 JavaScript를 사용하려면 모든 코드가 <script> 태그에 캡슐화되어야 합니다. alert()이라는 기능을 사용하여 “Hello ChemDoodle!”이라는 메시지를 팝업할 것입니다. HTML 파일의 <body> 태그에 다음과 같이 기능을 기록합니다.

<script>
    let message = 'Hello ChemDoodle!';
    alert(message);
</script>

RUN

When you load your webpage in a browser, the message “Hello ChemDoodle!” should appear. You can click on the Run button above to see this in action right now. Now that you can see the message, let’s see how to access the ChemDoodle Web Components library.

웹 페이지를 브라우저에 로드하면 “Hello ChemDoodle!” 메시지가 나타납니다. 위의 Run 버튼을 클릭하면 현재 작동 중인 것을 볼 수 있습니다. 이제 메시지를 볼 수 있게 되었으니 ChemDoodle Web Components 라이브러리에 액세스하는 방법을 알아보겠습니다.

When you link the ChemDoodleWeb.js file as a URI resource in your webpage, a single variable, ChemDoodle, is placed into the global JavaScript namespace for that page. All functions in this library can be accessed through this single ChemDoodle variable. So let’s just make sure that ChemDoodle Web Components was properly installed by viewing its version. We can obtain the version by calling the ChemDoodle.getVersion() function. So let’s modify our script to display this as follows:

웹 페이지에서 ChemDoodleWeb.js 파일을 URI 리소스로 연결하면 단일 변수인 ChemDoodle 이 해당 페이지의 글로벌 JavaScript 네임스페이스에 저장됩니다. 이 라이브러리의 모든 기능은 이 단일 ChemDoodle 변수를 통해 액세스할 수 있습니다. 따라서 ChemDoodle Web Components가 버전을 확인하여 올바르게 설치되었는지 확인합니다. ChemDoodle.getVersion() 함수를 호출하여 버전을 가져올 수 있습니다. 따라서 스크립트를 수정하여 다음과 같이 표시합니다.

<script>
    let message = 'The version of ChemDoodle installed is: ' + ChemDoodle.getVersion();
    alert(message);
</script>

RUN

Again, reload the page and the new message with the version number of the library will be displayed. You can click on the Run button above to see this behavior now. If you do not see the message or the version number, then an error has occured. Your browser of choice has JavaScript developer tools to help you with debugging.

페이지를 다시 로드하면 라이브러리의 버전 번호가 포함된 새 메시지가 표시됩니다. 위의 Run 버튼을 클릭하면 이 동작을 볼 수 있습니다. 메시지나 버전 번호가 표시되지 않으면 오류가 발생했습니다. 선택한 브라우저에는 디버깅을 도와주는 JavaScript 개발 도구가 있습니다.

Debugging JavaScript

Every programmer will have to debug code at some point. Unfortunately, the debugging process for JavaScript is a bit more cryptic than for other programming languages. Every major browser has tools and strengths for JavaScript development. Our team prefers to debug JavaScript in Google Chrome. The following lists a few JavaScript debugging resources:

모든 프로그래머들은 언젠가는 코드를 디버깅해야 할 것입니다. 안타깝게도 JavaScript의 디버깅 프로세스는 다른 프로그래밍 언어에 비해 약간 더 복잡합니다. 모든 주요 브라우저에는 JavaScript 개발을 위한 도구와 강점이 있습니다. 저희 팀은 Google Chrome의 JavaScript 디버깅을 선호합니다. 다음은 몇 가지 JavaScript 디버깅 리소스 목록입니다.

Tutorial > Loading Data

Somehow you will need to get chemical data to these JavaScript functions. There are a few ways to do this, some more convenient than others. To begin, let’s discuss the data structures that are in play here, the Molecule and Spectrum data structures. These are the data structures that the components in ChemDoodle Web Components take as input. All data structures defined by the ChemDoodle Web Components library reside in the ChemDoodle.structures package.

화학 데이터를 이러한 JavaScript 함수로 가져와야 합니다. 이것을 할 수 있는 몇 가지 방법이 있고, 다른 것보다 더 편리합니다. 우선, 여기서 현재 진행 중인 데이터 구조, 즉 분자 및 연속체 데이터 구조에 대해 살펴보겠습니다. ChemDoodle Web Components의 구성 요소가 입력으로 사용하는 데이터 구조입니다. ChemDoodle Web Components 라이브러리에 정의된 모든 데이터 구조는 ChemDoodle.structures 패키지에 있습니다.

Before we continue, let’s write a small function in JavaScript that takes a Molecule data structure and displays the number of atoms and the number of bonds it contains. This way we can test our progress through the following examples. Remembering the alert() function that we used on the previous page, we are going to create a JavaScript function, named alertMessage(). This function simply pops up the message, “You ran a function!”:

계속하기 전에, 분자 데이터 구조를 가져다가 원자 수와 결합 수를 표시하는 작은 함수를 JavaScript로 작성해 보겠습니다. 이렇게 하면 다음 예제를 통해 진행 상황을 테스트할 수 있습니다. 이전 페이지에서 사용했던 alert() 함수를 기억하면서 alertMessage()라는 JavaScript 함수를 만들겠습니다. 이 기능은 “You ran a function!” 이라는 메시지 보여주는 간단한 팝업기능 입니다.:

<script>
    function alertMessage() {
        let message = 'You ran a function!';
        alert(message);
    }
    alertMessage();
</script>

RUN

Note that after we created the function, we then call it. We can call it at anytime and anywhere to execute its function. Click on the Run button above to see the function in action. Now we will extend this function to display information about a Molecule object that is sent to it. We need to add a Molecule object as an incoming parameter (named mol), and we will also change the function name to alertMolecule() to make it more understandable. The Molecule data structure is quite complex, but for now, just know that it contains two arrays, atoms and bonds, that hold its constituent Atom and Bond data structures respectively. The function is written as follows:

이 기능을 생성한 후 이를 호출합니다. 언제 어디서나 전화를 걸어 기능을 실행할 수 있습니다. 위의 Run 버튼을 클릭하여 작동 중인 기능을 확인합니다. 이제 이 기능을 확장하여 Molecule 개체로 전송된 개체에 대한 정보를 표시합니다. molecule 개체를 수신 매개 변수(변수명 mol)로 추가해야 하며, 함수 이름도 alertMolecule()로 변경하여 보다 쉽게 이해할 수 있도록 할 것입니다. Molecule 데이터 구조는 상당히 복잡하지만, 현재로서는 atoms와 bonds라는 두 개의 어레이가 각각 구성 요소인 Atom과 Bond 데이터 구조를 보유하고 있다는 것만 알고 있습니다. 이 기능은 다음과 같이 기록됩니다.

<script>
    function alertMolecule(mol) {
        let message = 'This molecule contains ' + mol.atoms.length + ' atoms and ' + mol.bonds.length + ' bonds.';
        alert(message);
    }
    alertMolecule(new ChemDoodle.structures.Molecule());
</script>

RUN

Note that when calling the function, we sent in a newly created Molecule object by writing new ChemDoodle.structures.Molecule(). This created a new Molecule from the ChemDoodle Web Components library by correctly finding the Molecule class in the ChemDoodle.structures package. You can click on the Run button above to see this function in action; the new Molecule should have 0 atoms and 0 bonds. Ok, we are ready to load data!

이 기능을 호출할 때 new ChemDoodle.structures.Molecule()를 써서 새로 만든 molecule 객체를 보냈습니다. 이로 인해 ChemDoodle.structures 패키지에서 molecule 클래스를 올바르게 찾음으로써 ChemDoodle Web Components 라이브러리에서 새로운 Molecule 객체가 생성되었습니다. 위의 Run 버튼을 클릭하면 이 기능이 작동하는 것을 볼 수 있습니다. 새 Molecule 객체에는 0개의 원자와 0개의 결합이 있어야 합니다. 좋습니다. 데이터를 로드할 준비가 되었습니다!

Manually Creating Data

By far, the most tedious and inconvenient method of loading chemical data is by manually creating the data structures. But, this will give us a nice overview of the Molecule data structure, and advanced users of ChemDoodle Web Components will automate this process for powerful functions. The following code creates a hydrogen-depleted methanol molecule:

지금까지 화학 데이터를 로드하는 가장 지루하고 불편한 방법은 데이터 구조를 수동으로 생성하는 것입니다. 그러나 이렇게 하면 Molecule 데이터 구조에 대한 간략한 개요가 제공되며, ChemDoodle Web Component의 고급 사용자는 강력한 기능을 위해 이 프로세스를 자동화할 수 있습니다. 다음 코드는 수소 배출 메탄올 분자를 생성합니다.

<script>
    let mol = new ChemDoodle.structures.Molecule();
    let carbon = new ChemDoodle.structures.Atom('C');
    let oxygen = new ChemDoodle.structures.Atom('O');
    let bond = new ChemDoodle.structures.Bond(carbon, oxygen, 1);
    mol.atoms[0] = carbon;
    mol.atoms[1] = oxygen;
    mol.bonds[0] = bond;
    alertMolecule(mol);
</script>

RUN

See how tedious that was? Imagine doing this for a Molecule with 10 atoms, or 100!!! Anyway, when you run this script, you will see that the Molecule has 2 atoms and 1 bond. Click the Run button above to validate. There are a couple other downsides to this method as well:

얼마나 지루했는지 알겠죠? 10개의 원자, 즉 100개의 원자가 있는 _분자_를 위해 이것을 한다고 상상해 보세요. 어쨌든 이 스크립트를 실행하면 _분자_가 2개의 원자와 1개의 결합을 가지고 있음을 알 수 있습니다. 위의 Run 버튼을 클릭하여 확인합니다. 이 방법에는 몇 가지 다른 단점도 있습니다.

You will need to fully understand the entire Molecule API to adequately create them.
There are no coordinates associated with the atoms, and that would make for pretty useless images. You can certainly also set coordinate data this way, but you definitely don’t want to be assigning coordinates yourself.
Molecules are only one type of data structure that you may need to use or visualize.

Molecule API 전체를 충분히 이해해야 제대로 만들 수 있습니다.

원자와 관련된 좌표는 전혀 없고, 그렇게 되면 꽤 쓸모없는 이미지가 될 것입니다. 이런 식으로 좌표 데이터를 설정할 수도 있지만, 사용자가 직접 좌표를 지정하고 싶지는 않을 것입니다.

Molecule 객체는 사용하거나 시각화해야 할 수 있는 하나의 데이터 구조입니다.

Loading Chemical Files

A better way to load chemical data is by importing chemical files. JavaScript is run on the client side, so the chemical data will need to be downloaded to the user. There are two common ways to do this, by printing the file content into a JavaScript string or by using the ChemDoodle.io.file package to retrieve the file content from a local url.

화학 데이터를 로드하는 더 좋은 방법은 화학 파일을 가져오는 것입니다. JavaScript는 클라이언트 측에서 실행되므로 화학 데이터를 사용자에게 다운로드해야 합니다. 파일 내용을 JavaScript 문자열로 인쇄하거나 ChemDoodle.io.file을 사용하는 두 가지 일반적인 방법이 있습니다. 패키지로 로컬 URL에서 파일 내용을 검색합니다.

After the file content has been defined to a JavaScript string, the ChemDoodle Web Components library can parse the data and generate the corresponding data structure. ChemDoodle Web Components read the following formats natively (iChemLabs cloud services allow all of the chemical formats handled by ChemDoodle desktop to be read and written):

파일 내용이 JavaScript 문자열에 정의되면 ChemDoodle Web Components 라이브러리가 데이터를 구문 분석하여 해당 데이터 구조를 생성할 수 있습니다. ChemDoodle 웹 구성요소는 기본적으로 다음 형식을 읽습니다(iChemLabs 클라우드 서비스에서는 ChemDoodle 데스크톱에서 처리되는 모든 화학적 형식을 읽고 쓸 수 있습니다).

MDL MOLFiles - have become a standard for basic molecular data. They end with a .mol extension. Use the ChemDoodle.readMOL() function to parse this data and return a Molecule data structure.
MDL RXNFiles - are in the same family of CT files as the MOLFile and stores reaction data. They end with a .rxn extension. Use the ChemDoodle.readRXN() function to parse this data and return an object containing two arrays, molecules and shapes, for loading into Canvases with the Canvas.loadContent() function.
CML (Chemical Markup Language) - is an open, XML based format for chemistry. They end with a .cml extension. Use the ChemDoodle.readCML() function to parse this data and return an array of molecules for loading into Canvases with the Canvas.loadContent() function.
XYZ Files - are a common format for storing cartesian coordinates for atoms. There are no bonds in this file format, but the ChemDoodle Web Components will automatically deduce covalent bonds. Use the ChemDoodle.readXYZ() function to parse this data and return a Molecule data structure.
RCSB PDB Files - contain structural data for molecules, but usually store large proteins and macromolecular structures. They end with a .pdb extension. Use the ChemDoodle.readPDB() function to parse this data and return a Molecule data structure.
IUPAC JCAMP-DX Files - contain spectral data for mass spectrometry, NMR spectroscopy and IR spectroscopy. They end with a .jcamp or .jdx extension. Use the ChemDoodle.readJCAMP() function to parse this data and return a Spectrum data structure.
Crystallographic Information Files - contain crystallographic data. They end with a .cif extension. Use the ChemDoodle.readCIF() function to parse this data and return a Molecule data structure and unit cell shape as an object. This function also allows you to create supercells.

MDL MOLFiles - 기본 분자 데이터의 표준이 되었습니다. .mol 확장명으로 끝납니다. ChemDoodle.readMOL() 함수를 사용하여 이 데이터를 구문 분석하여 Molecule 데이터 구조를 반환합니다.

MDL RXNFiles - MOLFile과 동일한 CT 파일군에 있으며 반응 데이터를 저장합니다. .rxn 확장으로 끝납니다. ChemDoodle.readRXN() 함수를 사용하여 이 데이터를 구문 분석하여 molecules와 scapes라는 두 개의 배열이 포함된 개체를 반환하여 Canvas.loadContent() 함수를 사용하여 Canvases에 로드합니다.

CML(화학 마크업 언어)입니다. - 화학을 위한 XML 기반의 개방형 형식입니다. .cml 확장으로 끝납니다. ChemDoodle.readCML() 함수를 사용하여 이 데이터를 구문 분석하고 Canvas.loadContent() 함수를 사용하여 Canvases에 로드하기 위한 molecules를 반환합니다.

XYZ 파일 - 원자 카트리안 좌표를 저장하기 위한 일반적인 형식입니다. 이 파일 형식에는 본드가 없지만 ChemDoodle Web Components는 자동으로 공유 본드를 추론합니다. ChemDoodle.readXYZ() 함수를 사용하여 이 데이터를 구문 분석하여 Molecule 데이터 구조를 반환합니다.

RCSB PDB 파일 - 분자에 대한 구조 데이터를 포함하지만 일반적으로 큰 단백질과 대분자 구조를 저장합니다. .pdb 확장으로 끝납니다. ChemDoodle.readPDB() 함수를 사용하여 이 데이터를 구문 분석하여 Molecule 데이터 구조를 반환합니다.

IUPAC JCAMP-DX 파일 - 질량 분광법, NMR 분광법 및 IR 분광법에 대한 분광 데이터가 포함되어 있습니다. .jcamp 또는 .jdx 확장으로 끝납니다. ChemDoodle.readJCAMP() 기능은 이 데이터를 구문 분석하여 Spectrum 데이터 구조를 반환합니다.

Crystallographic Information Files - 결정 데이터가 포함되어 있습니다. .cif 확장명으로 끝납니다. ChemDoodle.readCIF() 함수를 사용하여 이 데이터를 구문 분석하여 Molecule 데이터 구조와 단위 셀 모양을 개체로 반환합니다. 이 기능을 사용하면 슈퍼셀을 만들 수도 있습니다.

Printing Data to a JavaScript String

There are several ways to print file data to the HTML page. The first is to manually copy and paste the data in. If you need to create the chemical data, then ChemDoodle can help you draw structures and export them to formats that ChemDoodle Web Components understand. ChemDoodle also has additional functionality to compress structure data to JSON protocol for efficiency. You can also use server-side scripts like PHP or JSP to programmatically print chemical data stored on your server to HTML pages before they are sent to the client. This method will download your website and the data to the user during the initial page load.

파일 데이터를 HTML 페이지에 인쇄하는 방법은 여러 가지가 있습니다. 첫 번째는 데이터를 수동으로 복사하여 붙여넣는 것입니다. 화학 데이터를 생성해야 하는 경우 ChemDoodle을 통해 구조를 그려 ChemDoodle Web Component가 이해하는 형식으로 내보낼 수 있습니다. ChemDoodle에는 효율성을 위해 구조 데이터를 JSON 프로토콜로 압축하는 추가 기능도 있습니다. 또한 PHP 또는 JSP와 같은 서버측 스크립트를 사용하여 서버에 저장된 화학 데이터를 클라이언트로 전송하기 전에 HTML 페이지로 프로그래밍 방식으로 인쇄할 수 있습니다. 이 방법은 초기 페이지 로드 중에 웹 사이트와 데이터를 사용자에게 다운로드합니다.

In the HTML file, a JavaScript string cannot contain new lines, so ChemDoodle Web Components will understand file data where all new lines are replaced with backslash and n character pairs, “\n”. This is not a carriage return character, it is two separate characters, a backslash and an n, together in that order.

HTML 파일에서 JavaScript 문자열은 줄 바꾸기를 포함 할 수 없으므로 ChemDoodle Web Components는 모든 줄 바꾸기가 back-slash 및 n 문자 쌍 “\n”으로 대체되는 파일 데이터를 이해합니다. 이 문자는 carriage return 문자가 아니며 backslash 및 _n_의 두 가지 분리된 문자열 데이터입니다.

In the following example, the MOLFile for hydrogen-depleted pyridine has been pasted into the JavaScript source as the pyridineMolFile variable. It is then parsed by the ChemDoodle.readMOL() function and the corresponding Molecule data structure is returned:

다음 예에서 수소가 고갈 된 피리딘의 MOLFile은 pyridineMolFile 변수로 JavaScript 소스에 붙여 넣었습니다. 그런 다음 ChemDoodle.readMOL() 함수에 의해 구문 분석되고 해당 Molecule 데이터 구조가 리턴됩니다.

<script>
    let pyridineMolFile = 'Molecule Name\n  CHEMDOOD01011121543D 0   0.00000     0.00000     0\n[Insert Comment Here]\n  6  6  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000   N 0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.8660    0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\nM  END';
    let mol = ChemDoodle.readMOL(pyridineMolFile);
    alertMolecule(mol);
</script>

RUN

When running this script, you will be alerted that the molecule contains 6 atoms and 6 bonds. Notice that the file data in the source code is quite messy, but it is simple, synchronous and straightforward.

이 스크립트를 실행하면 분자에 6 개의 원자와 6 개의 결합이 포함되어 있다는 경고가 표시됩니다. 소스 코드의 파일 데이터는 매우 복잡하지만 간단하고 동기적이며 정직합니다.

Obtain File Content via AJAX

In the ChemDoodle.io.file package, there is a function called content(url, callback). This function works via AJAX (more on AJAX in the next section), so you will only be able to access local files from your website’s origin. Each call to this function will also be a separate HTTP connection, which may or may not be appropriate for your website. Regardless, it provides a very convenient method for obtaining file content without messing with server side scripts or string formatting.

ChemDoodle.io.file 패키지에는 content (url, callback) 이라는 함수가 있습니다. 이 기능은 AJAX (다음 섹션의 AJAX에서 자세히 설명)를 통해 작동하므로 웹 사이트의 원본에서만 로컬 파일에 액세스 할 수 있습니다. 이 기능을 호출 할 때마다 별도의 HTTP 연결이되어 웹 사이트에 적합하지 않을 수도 있습니다. 그럼에도 불구하고 서버 측 스크립트 나 문자열 형식을 망칠 필요없이 파일 내용을 얻을 수있는 매우 편리한 방법을 제공합니다.

In the following example, the ChemDoodle.io.file.content() function is used to retrieve a local MOLFile of pyridine from our server (click on the link to obtain the file). Once downloaded, the string (named fileContent in the code) is sent to the callback function, which is then parsed by the ChemDoodle.readMOL() function to generate the corresponding Molecule data structure.

다음 예에서 ChemDoodle.io.file.content() 함수는 chemdoodle 서버에 있는 피리딘 (파일을 다운로드하려면 링크를 클릭하십시오) 의 로컬 MOLFile을 검색하는 데 사용됩니다. 다운로드 된 문자열 (코드에서 fileContent)은 콜백 함수로 전송 된 다음 ChemDoodle.readMOL() 함수로 구문 분석되어 해당 Molecule 데이터 구조를 생성합니다.

<script>
    // the url is the local path to the chemical file
    // url은 화학 물질 파일의 로컬 경로입니다.
    ChemDoodle.io.file.content('/data/molecules/pyridine.mol', function(fileContent) {
        let mol = ChemDoodle.readMOL(fileContent);
        alertMolecule(mol);
    });
</script>

RUN

It is important to note, that while less messy that the above method, AJAX is asynchronous, and data will have to be downloaded every time the ChemDoodle.io.file.content() function is called. However, it is much more convenient if you want to simply access files on your server without using server side scripts.

위의 방법 인 AJAX는 비동기식이므로 ChemDoodle.io.file.content() 함수가 호출 될 때마다 데이터를 다운로드해야한다는 점은 덜 혼란 스럽습니다. 그러나 서버 측 스크립트를 사용하지 않고 단순히 서버의 파일에 액세스하려는 경우 훨씬 편리합니다.

So using these two methods, you can load chemical data from standard files into ChemDoodle Web Components. This method is much less tedious than manually creating the data structures. Other data, such as atom coordinates will also be provided by these files. Of course, you will need access to data files to use them, but you can obtain the files in many ways, one being ChemDoodle.

따라서이 두 가지 방법을 사용하면 표준 파일의 화학 데이터를 ChemDoodle 웹 구성 요소에로드 할 수 있습니다. 이 방법은 수동으로 데이터 구조를 작성하는 것보다 훨씬 지루하지 않습니다. 원자 좌표와 같은 다른 데이터도 이 파일에서 제공됩니다. 물론 데이터 파일을 사용하려면 데이터 파일에 액세스해야하지만 ChemDoodle은 여러 가지 방법으로 파일을 얻을 수 있습니다.

ChemDoodle JSON

In addition to the 3rd party text based formats that can be read as shown in the previous section, you can also load data in via JSON. JSON is the native JavaScript object notation, and the ChemDoodle JSON format describes how to represent chemical data for the ChemDoodle Web Components in JSON. Please see the ChemDoodle JSON documentation for instruction.

이전 섹션에 표시된대로 읽을 수있는 타사 텍스트 기반 형식 외에도 JSON을 통해 데이터를로드 할 수도 있습니다. JSON은 기본 JavaScript 객체 표기법이며 ChemDoodle JSON 형식은 JSON의 ChemDoodle Web Components 지침은 ChemDoodle JSON 문서를 참조하십시오.

Using iChemLabs Cloud Services

By far, the most convenient way to load chemical data is by using iChemLabs cloud services. ChemDoodle Web Components has built in access to the entire ChemDoodle desktop API through AJAX XMLHttpRequest Level 2 (XHR2) calls to our server. XHR2 requires that our server recognize your origins (domains). Access to our services from academic organizations is free. Otherwise, our rates are very reasonable, please contact us for options.

화학 데이터를로드하는 가장 편리한 방법은 iChemLabs 클라우드 서비스를 사용하는 것입니다. ChemDoodle 웹 구성 요소는 서버에 대한 AJAX XMLHttpRequest Level 2 (XHR2) 호출을 통해 전체 ChemDoodle 데스크탑 API에 대한 액세스를 내장했습니다. XHR2는 당사 서버가 귀하의 출발지 (도메인)를 인식해야합니다. 학술 기관의 서비스 이용은 무료입니다. 아니면, 매우 합리적인 요금제도가 있습니다. 옵션 문의.

All iChemLabs cloud services are accessed through the ChemDoodle.iChemLabs package. There are a lot of goodies in that package, but the functions of immediate interest to us are readSMILES() and getMoleculeFromDatabase(). Before we continue, a little background in AJAX is required. AJAX allows a browser to contact a server and update the JavaScript state without reloading the current webpage. This is a very powerful technology. Most AJAX calls will be instantaneous, but it is important to note that this is an additional connection to the internet, and lag can occur for any reason. In the case of lag, we don’t want an AJAX call to hold up the loading of a webpage or to prevent responsiveness while the request is being handled, so these calls are made to be asynchronous. This is done by providing a callback function. When the server has finished handling the request, the response is returned to the callback function, which then executes. The following examples will demonstrate this technique.

모든 iChemLabs 클라우드 서비스는 ChemDoodle.iChemLabs 패키지 을 통해 액세스할 수 있습니다. 입니다. 그 소포에는 여러 가지 좋은 점들이 있지만, 우리에게 즉각적인 관심의 기능은 readSMILES() 및 getMoleculeFromDatabase()입니다. 계속 진행하기 전에 AJAX에 대한 약간의 배경이 필요합니다. AJAX를 사용하면 브라우저에서 현재 웹 페이지를 다시 로드하지 않고도 서버에 연결하여 JavaScript 상태를 업데이트할 수 있습니다. 이것은 매우 강력한 기술입니다. 대부분의 AJAX 연결은 즉시 이루어지지만, 이 연결은 인터넷에 대한 추가 연결이며, 어떤 이유로든 지연이 발생할 수 있습니다. 지연될 경우, 웹 페이지 로드를 보류하거나 요청을 처리하는 동안 응답성을 방지하기 위해 AJAX 호출을 원하지 않으므로 이러한 호출을 비동기식으로 처리합니다. 이 작업은 콜백 기능을 제공하여 수행됩니다. 서버가 요청 처리를 마치면 응답이 콜백 기능으로 반환되고, 콜백 기능이 실행됩니다. 다음 예에서는 이 기술을 시연합니다.

The readSMILES() function takes a SMILES string and a callback function. You will also notice a blank object as the second parameter ({}). This is the options object, and is used to modify the functionality of the call. We won’t be using it for readSMILES(), but we will use it in the subsequent example when we contact a database. There is also full documentation on iChemLabs Cloud services.

readSMILES() 함수는 ** SMILES ** 문자열과 콜백 함수를 사용합니다. 또한 빈 개체가 두 번째 매개 변수 ({})로 표시됩니다. 옵션 개체이며 통화 기능을 수정하는 데 사용됩니다. readSMILES()에는 사용하지 않지만 데이터베이스에 연결할 때 다음 예제에서 사용합니다. iChemLabs Cloud 서비스에 대한 전체 설명서도 있습니다.

When our server finishes parsing the SMILES string, the generated Molecule is returned to the callback function, which then executes its functionality. The following source shows the SMILES string for caffeine being handled:

서버가 SMILES 문자열 구문 분석을 마치면 생성 된 Molecule이 콜백 함수로 반환되어 해당 기능을 실행합니다. 다음 소스는 처리중인 카페인에 대한 SMILES 문자열을 보여줍니다.

<script>
    ChemDoodle.iChemLabs.readSMILES('N1(C)C(=O)N(C)C(C(=C1N1)N(C=1)C)=O', {}, function(mol) {
        alertMolecule(mol);
    });
</script>

RUN

The getMoleculeFromDatabase() function takes a query string as parameter as well as options and a callback function. In the options parameter, we will specify the database provider, in this example, PubChem. PubChem (‘pubchem’), and our partners ChemExper (‘chemexper’) and ChemSpider (‘chemspider’) are supported. When our server finishes retrieving the requested data, the Molecule is returned to the callback function, which then executes its functionality. The following source retrieves the structure of morphine from PubChem:

getMoleculeFromDatabase() 함수는 쿼리 문자열뿐만 아니라 옵션 및 콜백 함수를 매개 변수로 사용합니다. options 매개 변수에서 데이터베이스 제공자 (이 예에서는 PubChem)를 지정합니다. PubChem ( ‘pubchem’) 및 파트너 ChemExper ( ‘chemexper’) 및 ChemSpider ( ‘chemspider’)가 지원됩니다. 서버가 요청 된 데이터 검색을 마치면 Molecule이 콜백 함수로 반환되고 기능이 실행됩니다. 다음 소스는 PubChem에서 모르핀 구조를 검색합니다.

<script>
    ChemDoodle.iChemLabs.getMoleculeFromDatabase('morphine', {
        'database': 'pubchem'
    }, function(mol) {
        alertMolecule(mol);
    });
</script>

RUN

These callback functions merely use the alertMolecule() function. You can make the callback function do much more advanced tasks, including setting the data to other variables which can then be used on the webpage. Both of these functions are much neater and simpler than the previous methods. Make sure to take advantage of them!

이 콜백 함수는 alertMolecule() 함수 만 사용합니다. 콜백 함수를 사용하여 웹 페이지에서 사용할 수있는 다른 변수로 데이터를 설정하는 등 훨씬 고급 작업을 수행 할 수 있습니다. 이 두 기능은 이전 방법보다 훨씬 깔끔하고 단순합니다. 그것들을 활용하십시오!

Tutorial > Initializing Canvases

All canvases can be initialized by following three general steps:

모든 캔버스는 다음 세 가지 일반적인 단계를 수행하여 초기화할 수 있습니다.

Construction
Load Data
Specify Settings

1. Construction

All canvases in the ChemDoodle Web Components library are children of the abstract Canvas class. Abstract means that the class is not instantiable and should never be called, its children should be used instead. Let’s briefly go over the class hierarchy for Canvas. Classes in red are abstract. This is only a brief overview, the instantiable canvases are individually covered in the following links.

ChemDoodle Web Components 라이브러리의 모든 캔버스는 추상 Canvas 클래스의 자식입니다. 추상적인 것은 그 수업이 즉각적이지 않고 결코 불려서는 안 되며, 대신 그 아이들을 이용해야 한다는 것을 의미합니다. Canvas의 클래스 계층에 대해 간단히 살펴보겠습니다. 빨간색으로 표시된 수업은 추상적입니다. 간략한 개요에 불과하며, 인스턴트 캔버스는 다음 링크에서 개별적으로 다루어집니다.

Canvas - parent class for all canvases, provides generic functionality for displaying chemical data.
- ViewerCanvas - simply displays an image of a molecule.
- HyperlinkCanvas - displays an image of a molecule and provides “button” functionality for users.
- TransformCanvas - displays an interactive molecule that can be rotated, translated and scaled.
- MolGrabberCanvas - a more complex canvas that has an associated search field for accessing databases.
- SketcherCanvas - a full-featured chemical sketcher.
- AnimatorCanvas - parent class for all canvases that show animations; provides a framework for high-quality animations.
  - RotatorCanvas - shows a rotating animation of a molecule.
  - SlideshowCanvas - shows any number of molecules, one at a time, with animated transitions in between.
- Canvas3D - parent class for all canvases that render 3D graphics using WebGL.
  - ViewerCanvas3D - simply displays a 3D rendering of a molecule.
  - RotatorCanvas3D - shows a rotating animation of a 3D rendering of a molecule.
  - TransformCanvas3D - displays an interactive 3D rendering of a molecule that can be rotated, translated and scaled.
  - MolGrabberCanvas3D - a more complex canvas that has an associated search field for accessing databases. Works like the TransformCanvas3D.
  - MovieCanvas3D - a component to display, animate and interact with molecular movies.
  - EditorCanvas3D - a complete interface for interacting with 3D data.
- SpectrumCanvas - parent class for all canvases that render spectra.
  - ObserverCanvas - simply displays an image of a spectrum.
  - OverlayCanvas - displays several spectra overlaid on the same domain.
  - PerspectiveCanvas - displays an interactive spectrum where a user can zoom in and scale peaks.
  - SeekerCanvas - provides interactive tools for investigating spectrum coordinates.

In addition to the structure and spectrum Canvas classes, the parent Canvas class provides functionality that can be applied to any kind of interface. The PeriodicTableCanvas is included in the ChemDoodle Web Components and is a good example of making use of the features in this library for other types of information.

구조 및 스펙트럼 캔버스 클래스 외에도 상위 캔버스 클래스는 모든 종류의 인터페이스에 적용할 수 있는 기능을 제공합니다. PeriodicTableCanvas 는 ChemDoodle Web Components에 포함되어 있으며 다른 유형의 정보에 이 라이브러리의 기능을 사용하는 좋은 예 입니다.

For this example, we will be initializing the simplest Canvas, the ViewerCanvas. The ViewerCanvas constructor is the most basic and takes only 3 parameters: id, width and height in that order. The id is a string corresponding to the id of the <canvas> element that is used to generate the component. The constructor will automatically create the <canvas> tag in your HTML page with the name and dimensions you give it.

For this example, we will be initializing the simplest Canvas, the ViewerCanvas. The ViewerCanvas constructor is the most basic and takes only 3 parameters: id, width and height in that order. The id is a string corresponding to the id of the <canvas> element that is used to generate the component. The constructor will automatically create the <canvas> tag in your HTML page with the name and dimensions you give it.

In some cases, it may be convenient to explicitly create the <canvas> element in the DOM, instead of having the ChemDoodle Web Components generate it for you. This is possible. Just create the <canvas> element and give it the same id you pass to the future Canvas constructor. The component will then be created from the existing <canvas>

This method is a bit more powerful, as you can create ChemDoodle Web Components after the DOM has been closed. For thorough instruction on this, see the advanced tutorial: Initializing Components after Closing the DOM.

Finally, all canvas classes are accessed at the top level of the ChemDoodle variable. The ViewerCanvas is initialized by the following code:

<script>
    let myCanvas = new ChemDoodle.ViewerCanvas('id', 150, 150);
    myCanvas.emptyMessage = 'No Data Loaded!';
    myCanvas.repaint();
</script>

You should see the empty ViewerCanvas displayed above. Note that we set a variable for the canvas called emptyMessage. When emptyMessage is set to a non-_undefined_ string, the canvas will render that message if no data is loaded. We will just add that for debugging purposes and to show something in this example. Lastly, we called the Canvas.repaint() function at the end, this function redraws the canvas on the page and is very useful when you want the Canvas to change after updating it.

As an optional note, notice that there is a 1 pixel thick, black border around the component. This is defined in the ChemDoodleWeb.css file that you installed on your website. Because all ChemDoodle Web Components are just HTML objects, their styles can be controlled by CSS. You may change this border, remove it, or add other styling by changing that file.

2. Load Data

Now that we have created our component, we can load data into it. The Canvas.loadMolecule() function takes a Molecule object that is derived from any of the methods described on the previous page (The SpectrumCanvas class has an analogous loadSpectrum() function). The Canvas.loadMolecule() function will then set the molecule, center it, scale it (if necessary to fit), and finish with the necessary cheminformatics algorithms (such as finding rings, etc.). This function also automatically repaints the canvas, so there is no need to use the Canvas.repaint() function at this time, so we will remove it. Our script from above should now be changed to look like this:

<script>
    let myCanvas = new ChemDoodle.ViewerCanvas('id', 150, 150);
    myCanvas.emptyMessage = 'No Data Loaded!';
    let caffeineMolFile =
        'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
    let caffeine = ChemDoodle.readMOL(caffeineMolFile);
    myCanvas.loadMolecule(caffeine);
</script>

You should now see caffeine drawn in the canvas. We used the print method from the previous page to define the data for caffeine from a MDL MOLFile. Notice that we kept the emptyMessage variable set, but the message is no longer displayed because data has been loaded.

3. Specify Settings

We have now created a component and rendered a molecule in it. This is the default style of the rendering. For your own website, you may wish to customize how the molecule appears. Every last detail of how graphics are rendered in the ChemDoodle Web Components library is customizable. These graphics are affected by defining settings for the Canvas.styles object, and in ChemDoodle products are called styles.

To illustrate this point, we will conform the rendering of caffeine to ACS Document 1996 style. We will also render element labels with JMol colors for a little pizzaz. Complete information on all styles is provided in the API for the Styles object. Our script should now be updated to define the Canvas.styles options before we load the molecule (lines that begin with “//” are comments and will be ignored in JavaScript):

<script>
    let myCanvas = new ChemDoodle.ViewerCanvas('id', 150, 150);
    //the width of the bonds should be .6 pixels
    myCanvas.styles.bonds_width_2D = .6;
    //the spacing between higher order bond lines should be 18% of the length of the bond
    myCanvas.styles.bonds_saturationWidthAbs_2D = 2.6;
    //the hashed wedge spacing should be 2.5 pixels
    myCanvas.styles.bonds_hashSpacing_2D = 2.5;
    //the atom label font size should be 10
    myCanvas.styles.atoms_font_size_2D = 10;
    //we define a cascade of acceptable font families
    //if Helvetica is not found, Arial will be used
    myCanvas.styles.atoms_font_families_2D = ['Helvetica', 'Arial', 'sans-serif'];
    //display carbons labels if they are terminal
    myCanvas.styles.atoms_displayTerminalCarbonLabels_2D = true;
    //add some color by using JMol colors for elements
    myCanvas.styles.atoms_useJMOLColors = true;
    myCanvas.emptyMessage = 'No Data Loaded!';
    let caffeineMolFile =
        'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
    let caffeine = ChemDoodle.readMOL(caffeineMolFile);
    //the bond lengths should be 14.4 pixels
    caffeine.scaleToAverageBondLength(14.4);
    myCanvas.loadMolecule(caffeine);
</script>

The code is getting quite long, but luckily we are finished. Using this procedure, you can add any graphics to your websites with ease. The other canvases provide more functionality and they are described in the links at the top of this page.

To summarize, we set up the Canvas.styles object to render the molecule according to our preference. Also note that we used the Molecule.scaleToAverageBondLength() function to scale the coordinates so that the average bond length is 14.4 pixels, as defined by ACS Document 1996. If you have many canvases on a page, you may find it convenient to set the default styles so you do not need to do this for each canvas. To set the defaults to the settings defined in this example, use the following code on your HTML page before any canvases are initialized:

<script>
    ChemDoodle.DEFAULT_STYLES.bondLength_2D = 14.4;
    ChemDoodle.DEFAULT_STYLES.bonds_width_2D = .6;
    ChemDoodle.DEFAULT_STYLES.bonds_saturationWidthAbs_2D = 2.6;
    ChemDoodle.DEFAULT_STYLES.bonds_hashSpacing_2D = 2.5;
    ChemDoodle.DEFAULT_STYLES.atoms_font_size_2D = 10;
    ChemDoodle.DEFAULT_STYLES.atoms_font_families_2D = ['Helvetica', 'Arial', 'sans-serif'];
    ChemDoodle.DEFAULT_STYLES.atoms_displayTerminalCarbonLabels_2D = true;
    ChemDoodle.DEFAULT_STYLES.atoms_useJMOLColors = true;
</script>

And that is it, you now know all you need to know to become productive using the ChemDoodle Web Components library. Continue reading to learn how to use more advanced features. And of course, if you need anything, feel free to contact us.

Twitter Facebook LinkedIn

영어 못하는 개발자