Difference between revisions of "Jmol Applet"
(→Tools for Authoring Jmol Web Pages) |
AngelHerraez (talk | contribs) (→Testing different JSmol versions) |
||
(44 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
+ | ''Note: although the title of this page remains the same, there is no longer any implication of Java applets involved in running Jmol'' | ||
+ | |||
+ | {{Lang:Jmol Applet}} | ||
+ | |||
{{Running_Jmol_Sections}} | {{Running_Jmol_Sections}} | ||
− | |||
− | + | == Jmol HTML5 Object (JSmol) == | |
+ | |||
+ | This allows Jmol to be embedded in web pages. Like with the application, commands can be applied to the model using the [[Scripting]] language. For some demonstration pages see {{Website}}demo/. To see the HTML source use your web browser {{MenuItem|View}} → {{MenuItem|Page Source}}. | ||
+ | Starting with version 13.1, Jmol may also be inserted into web pages using the non-Java alternative, called JSmol. This allows to use an HTML5 object that only requires JavaScript and has the same set of features as Jmol applet. See [[Jmol JavaScript Object]] for more details. | ||
− | == Installing Jmol | + | == Installing Jmol objects == |
{{Installing_Jmol_Sections}} | {{Installing_Jmol_Sections}} | ||
− | Download Jmol package (either <code>.zip</code> or <code>tar.gz</code> format) and extract/uncompress '''only the | + | If you only wish to create a web page(s) containing molecular scenes in Jmol, there are easier ways than starting from scratch: see [[#Tools for Authoring Jmol Web Pages]]. If you wish to learn how to create web pages containing Jmol from scratch, read on. |
+ | |||
+ | Download the Jmol package (either <code>.zip</code> or <code>tar.gz</code> format) and extract/uncompress '''only the necessary files''' to the folder of your choice. | ||
− | Which are those | + | Which are those necessary files? Read subsections below. |
− | |||
− | |||
− | |||
− | To use | + | To use the Jmol object within local web pages, e.g. on the hard disk or on CD, see [[Jmol Applet Deployment Local]] for some precautions needed. |
For some specific needs, you must use other files; read the sections below about the signed applet. | For some specific needs, you must use other files; read the sections below about the signed applet. | ||
− | + | If you distribute your web page files, you should also include the copyright, license and information files: {{File|COPYRIGHT.txt}}, {{File|LICENSE.txt}} and {{File|README.txt}} | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | === Inserting Jmol objects into web pages === | |
+ | Inclusion of Jmol objects and interaction with them are managed easily using a JavaScript-based solution: | ||
− | + | ==== Jmol JavaScript Object (Jmol-JSO) ==== | |
+ | '''Jmol-JSO''' (new in Jmol v.13) provides a clean, efficient way to interact with the Jmol applet from JavaScript and, in addition, allows extension to Java- and applet-challenged platforms such as the iPad, the iPhone, and Android mobile devices, and adds easy access to public databases such as [http://rcsb.org the RCSB PDB database], [http://cactus.nci.nih.gov/ the National Cancer Institute CACTVS server], and [http://pubchem.ncbi.nlm.nih.gov/ PubChem], even when the Jmol Java applet is not available because of a user's platform. Basic high-level scripting for these non-Java alternatives is included. In addition, '''Jmol-JSO''' adds synchronization with the [http://jspecview.sourceforge.net JSpecView applet] and 2D-to-3D model building and interconversion using the [https://peter-ertl.com/jsme/ JSME Molecule Editor]. See more details on [[Jmol JavaScript Object]]. | ||
− | : | + | ==== Forcing the JSmol object to open in a certain language ==== |
+ | The JSmol object includes [[Internationalisation/Current_Status|several languages]] (technically called localizations) for the user interface (pop-up menu). JSmol will open by default with the interface using the language of your operating system | ||
+ | ([http://java.sun.com/j2se/corejava/intl/reference/faqs/index.html#set-default-locale ref.]). However, if you need to change this: | ||
− | :: | + | # The language in JSmol can be switched anytime, from the pop-up menu, "Language" item near the bottom. |
+ | # Or, using the scripting language: <code> language = "de" </code> (you must use the keyword "language" and the two-letter language code: ca, cs, de, en, es, et, fr, nl, pt, tr, etc.). In a few cases, the language code has 2+2 letters: en_GB, en_US, pt_BR, zh_CN, zh_TW | ||
+ | # To set the language just when the JSmol object is created as the web page loads, use the [[Jmol_JavaScript_Object/Info#Customization_or_extras|language]] parameter of the <code>Info</code> variable. | ||
− | + | === Testing different JSmol versions === | |
+ | ''(This is an advanced feature)'' | ||
− | + | You can force the use of a certain version of JSmol object in any web page (even if that page is not yours), as long as the page was written using the standard, recommended code for inserting JSmol objects. The way to do so is: | |
− | |||
− | |||
− | + | On the URL line of the browser, add the following: | |
− | = | + | <code>?_J2S=</code> followed by the url of the {{folder|j2s}} folder your intend to use. |
− | + | Note: uppercase is needed for the part before = | |
− | |||
− | |||
− | + | If there is already a <code>?</code> in the URL, then use <code>&</code> for your addition, to preserve the logic of a url. | |
− | |||
− | |||
− | < | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ''This may work or not, depending on the page code and on the JSmol versions.'' | |
== Jmol in Wikis == | == Jmol in Wikis == | ||
Line 78: | Line 56: | ||
The applet can be embedded in [[wikipedia:HTML|HTML]] (or XHTML) pages (examples are listed on [[Websites Using Jmol]]), but also, with some extra technologies, in Wiki pages (see [[Jmol Processor]]). | The applet can be embedded in [[wikipedia:HTML|HTML]] (or XHTML) pages (examples are listed on [[Websites Using Jmol]]), but also, with some extra technologies, in Wiki pages (see [[Jmol Processor]]). | ||
− | == | + | == Tools for Authoring Jmol Web Pages == |
+ | ===Jmol.php: easy Jmol insertion into a web page=== | ||
+ | You can insert a Jmol object into a web page with nothing more than a simple <code><script></code> or <code><a></code> tag. | ||
+ | You don't have to install any Jmol files in your computer or web server. | ||
+ | You don't even need a file with the 3D model; it will be automatically obtained from an appropriate web server. | ||
+ | |||
+ | Note that this way of using Jmol is easily compatible with any environment where you do not control the full source code, like forums, blogs, wikis, content management systems, e-learning environments... | ||
+ | In fact, you can email the address and the recipient will see the Jmol object by clicking on the received link. | ||
− | + | See [[Jmol_PHP]] for details. | |
− | The | + | ===Proteopedia's Scene Authoring Tools=== |
− | + | The easiest way to create, and share, a web page containing customized molecular scenes in Jmol, is to build the page in [http://proteopedia.org Proteopedia.Org]. Proteopedia's ''Molecular Scene-Authoring Tools'' free you from learning any Jmol commands, HTML, or javascript. You will only need to learn a tiny bit of wikitext markup, for which convenience buttons and help are provided. On the other hand, if you already know some Jmol commands, you may use them in creating your scene (via the Jmol console). Regardless of how your scene is created, it will be saved as a Jmol state script. You may upload atomic coordinate files, or use published PDB files. Proteopedia automatically saves a frozen copy of each PDB file that you use, to protect your scripts from breaking e.g. after remediation of files by the Protein Data Bank. You may created pages that are protected from editing by others. | |
− | |||
− | == | + | ===Jmol's ''Export to Web''=== |
− | If you are not comfortable writing html/xhtml and javascript code or would just like to quickly put together some simple pages look at the export to web function of Jmol | + | If you are not comfortable writing html/xhtml and javascript code, or would just like to quickly put together some simple pages, then look at the '''export to web function of Jmol'''. This allows you to export all the necessary files to make simple pages that have a number of live Jmol displays or a single Jmol display that can be changed by clicking buttons. You select the views you want the user to see by setting them up in Jmol. You then add any desired text or comments to the .html file created by the export function in your favorite web editor (Some open source suggestions: [http://www.seamonkey-project.org/ SeaMonkey] is simple and works very well, [http://www.kompozer.net/ Kompozer] is more sophisticated and works pretty well, [http://www.w3.org/Amaya/ Amaya] is the most sophisticated but is harder to use). Instructions for using the export function are accessible in the export to web dialog within the Jmol application. A more detailed tutorial and some older packages are available at [http://www.uwosh.edu/faculty_staff/gutow/Jmol_Web_Page_Maker/Jmol_Web_Page_Maker.shtml Jmol Web Page Maker]. |
+ | <!--[[User:Gutow|Gutow]] 21:48, 25 July 2008 (CEST)--> | ||
− | == Saving Files from the | + | == Saving Files from the Jmol Object == |
− | Although this isn't obvious, the molecule that is being shown in | + | Although this isn't obvious, the molecule that is being shown in JSmol can be saved to local disk unless the model was loaded inline, in which case this technique fails. To do so: |
− | # Open applet's menu (right-click, Ctrl+click, or click on bottom-right "Jmol" logo). | + | # Open the applet's menu (right-click, Ctrl+click, or click on bottom-right "Jmol" logo). |
− | # Click on | + | # Click on the last entry (<code>About...</code>). |
− | # On the submenu that appears, | + | # On the submenu that appears, the first entry is the name of the first model loaded. If it says "string" then the model was loaded inline and continuing will result in a "404" resource not found error. If the entry is a file name, then you can continue. If more than one file has been loaded, there will be a line for each on this submenu. Click on the one that you want to open or save. This will bring up another layer of menu options |
+ | # Click on the last entry (<code>View</code> + name of file) | ||
# Depending on your browser's configuration, the file will be opened in the associated program ("helper application") or you will get an "Open or Save" dialog; choose Save and location in your disk. | # Depending on your browser's configuration, the file will be opened in the associated program ("helper application") or you will get an "Open or Save" dialog; choose Save and location in your disk. | ||
:''Warning'': At least in Windows, modern browsers may detect this action as opening a pop-up window, so it's likely that the pop-up blocker will prevent you from seeing the "Open or Save" dialog. Pay attention to messages and options in your browser to allow pop-ups for the current page. (Such messages often appear as yellow bars at the top of the page, warnings in a toolbar, or hints in the status line at the bottom of the browser window.) | :''Warning'': At least in Windows, modern browsers may detect this action as opening a pop-up window, so it's likely that the pop-up blocker will prevent you from seeing the "Open or Save" dialog. Pay attention to messages and options in your browser to allow pop-ups for the current page. (Such messages often appear as yellow bars at the top of the page, warnings in a toolbar, or hints in the status line at the bottom of the browser window.) | ||
− | + | In addition to saving the full model, a '''part of the molecule''' can be extracted and saved into MOL format. This is not so straightforward as the former, and is described in the "interactive scripting documentation" (see [{{Website}} Jmol home page]). | |
− | |||
− | |||
− | |||
− | |||
− | + | It is also possible to save the '''state of the molecule''' (rendering style, coloring, visibility, orientation, etc.). See [http://www.stolaf.edu/academics/chemapps/jmol/docs/?ver=11.0#save <code>save state</code>] and [http://www.stolaf.edu/academics/chemapps/jmol/docs/?ver=11.0#write <code>write state</code>] in the Jmol scripting documentation. |
Latest revision as of 00:54, 30 November 2024
Note: although the title of this page remains the same, there is no longer any implication of Java applets involved in running Jmol
- Jmol as a standalone application.
- J(S)mol as a web applet or HTML5 object.
- compatibility with JavaScript frameworks or libraries.
- J(S)mol embedded in wikis or blogs.
- Borrowed JSmol, or running JSmol without your own server.
- Running Jmol using Java Web Start.
- JSmol in a Jupyter notebook.
- Jmol in an Android tablet.
- Troubleshooting.
Contents
Jmol HTML5 Object (JSmol)
This allows Jmol to be embedded in web pages. Like with the application, commands can be applied to the model using the Scripting language. For some demonstration pages see http://jmol.sourceforge.net/demo/. To see the HTML source use your web browser View → Page Source. Starting with version 13.1, Jmol may also be inserted into web pages using the non-Java alternative, called JSmol. This allows to use an HTML5 object that only requires JavaScript and has the same set of features as Jmol applet. See Jmol JavaScript Object for more details.
Installing Jmol objects
- Get the files from SourceForge.
- Support and operating systems.
- Users: how to install Jmol application for local, standalone use.
- Web page authors: how to install Jmol objects (Jmol / JSmol) embedded within your web pages.
- Installing and Enabling Java (Proteopedia wiki). Has step by step instructions for both Windows and Mac OS X, and for the 5 most popular web browsers.
- Increasing java memory for the applet.
- Web site administrators:
- How to install the application on a web server to be delivered using Java Web Start.
- How to configure a wiki so that it uses the Jmol applet.
- Developers: compile the latest Jmol source code via subversion access.
If you only wish to create a web page(s) containing molecular scenes in Jmol, there are easier ways than starting from scratch: see #Tools for Authoring Jmol Web Pages. If you wish to learn how to create web pages containing Jmol from scratch, read on.
Download the Jmol package (either .zip
or tar.gz
format) and extract/uncompress only the necessary files to the folder of your choice.
Which are those necessary files? Read subsections below.
To use the Jmol object within local web pages, e.g. on the hard disk or on CD, see Jmol Applet Deployment Local for some precautions needed.
For some specific needs, you must use other files; read the sections below about the signed applet.
If you distribute your web page files, you should also include the copyright, license and information files: COPYRIGHT.txt, LICENSE.txt and README.txt
Inserting Jmol objects into web pages
Inclusion of Jmol objects and interaction with them are managed easily using a JavaScript-based solution:
Jmol JavaScript Object (Jmol-JSO)
Jmol-JSO (new in Jmol v.13) provides a clean, efficient way to interact with the Jmol applet from JavaScript and, in addition, allows extension to Java- and applet-challenged platforms such as the iPad, the iPhone, and Android mobile devices, and adds easy access to public databases such as the RCSB PDB database, the National Cancer Institute CACTVS server, and PubChem, even when the Jmol Java applet is not available because of a user's platform. Basic high-level scripting for these non-Java alternatives is included. In addition, Jmol-JSO adds synchronization with the JSpecView applet and 2D-to-3D model building and interconversion using the JSME Molecule Editor. See more details on Jmol JavaScript Object.
Forcing the JSmol object to open in a certain language
The JSmol object includes several languages (technically called localizations) for the user interface (pop-up menu). JSmol will open by default with the interface using the language of your operating system (ref.). However, if you need to change this:
- The language in JSmol can be switched anytime, from the pop-up menu, "Language" item near the bottom.
- Or, using the scripting language:
language = "de"
(you must use the keyword "language" and the two-letter language code: ca, cs, de, en, es, et, fr, nl, pt, tr, etc.). In a few cases, the language code has 2+2 letters: en_GB, en_US, pt_BR, zh_CN, zh_TW - To set the language just when the JSmol object is created as the web page loads, use the language parameter of the
Info
variable.
Testing different JSmol versions
(This is an advanced feature)
You can force the use of a certain version of JSmol object in any web page (even if that page is not yours), as long as the page was written using the standard, recommended code for inserting JSmol objects. The way to do so is:
On the URL line of the browser, add the following:
?_J2S=
followed by the url of the j2s folder your intend to use.
Note: uppercase is needed for the part before =
If there is already a ?
in the URL, then use &
for your addition, to preserve the logic of a url.
This may work or not, depending on the page code and on the JSmol versions.
Jmol in Wikis
The applet can be embedded in HTML (or XHTML) pages (examples are listed on Websites Using Jmol), but also, with some extra technologies, in Wiki pages (see Jmol Processor).
Tools for Authoring Jmol Web Pages
Jmol.php: easy Jmol insertion into a web page
You can insert a Jmol object into a web page with nothing more than a simple <script>
or <a>
tag.
You don't have to install any Jmol files in your computer or web server.
You don't even need a file with the 3D model; it will be automatically obtained from an appropriate web server.
Note that this way of using Jmol is easily compatible with any environment where you do not control the full source code, like forums, blogs, wikis, content management systems, e-learning environments... In fact, you can email the address and the recipient will see the Jmol object by clicking on the received link.
See Jmol_PHP for details.
Proteopedia's Scene Authoring Tools
The easiest way to create, and share, a web page containing customized molecular scenes in Jmol, is to build the page in Proteopedia.Org. Proteopedia's Molecular Scene-Authoring Tools free you from learning any Jmol commands, HTML, or javascript. You will only need to learn a tiny bit of wikitext markup, for which convenience buttons and help are provided. On the other hand, if you already know some Jmol commands, you may use them in creating your scene (via the Jmol console). Regardless of how your scene is created, it will be saved as a Jmol state script. You may upload atomic coordinate files, or use published PDB files. Proteopedia automatically saves a frozen copy of each PDB file that you use, to protect your scripts from breaking e.g. after remediation of files by the Protein Data Bank. You may created pages that are protected from editing by others.
Jmol's Export to Web
If you are not comfortable writing html/xhtml and javascript code, or would just like to quickly put together some simple pages, then look at the export to web function of Jmol. This allows you to export all the necessary files to make simple pages that have a number of live Jmol displays or a single Jmol display that can be changed by clicking buttons. You select the views you want the user to see by setting them up in Jmol. You then add any desired text or comments to the .html file created by the export function in your favorite web editor (Some open source suggestions: SeaMonkey is simple and works very well, Kompozer is more sophisticated and works pretty well, Amaya is the most sophisticated but is harder to use). Instructions for using the export function are accessible in the export to web dialog within the Jmol application. A more detailed tutorial and some older packages are available at Jmol Web Page Maker.
Saving Files from the Jmol Object
Although this isn't obvious, the molecule that is being shown in JSmol can be saved to local disk unless the model was loaded inline, in which case this technique fails. To do so:
- Open the applet's menu (right-click, Ctrl+click, or click on bottom-right "Jmol" logo).
- Click on the last entry (
About...
). - On the submenu that appears, the first entry is the name of the first model loaded. If it says "string" then the model was loaded inline and continuing will result in a "404" resource not found error. If the entry is a file name, then you can continue. If more than one file has been loaded, there will be a line for each on this submenu. Click on the one that you want to open or save. This will bring up another layer of menu options
- Click on the last entry (
View
+ name of file) - Depending on your browser's configuration, the file will be opened in the associated program ("helper application") or you will get an "Open or Save" dialog; choose Save and location in your disk.
- Warning: At least in Windows, modern browsers may detect this action as opening a pop-up window, so it's likely that the pop-up blocker will prevent you from seeing the "Open or Save" dialog. Pay attention to messages and options in your browser to allow pop-ups for the current page. (Such messages often appear as yellow bars at the top of the page, warnings in a toolbar, or hints in the status line at the bottom of the browser window.)
In addition to saving the full model, a part of the molecule can be extracted and saved into MOL format. This is not so straightforward as the former, and is described in the "interactive scripting documentation" (see Jmol home page).
It is also possible to save the state of the molecule (rendering style, coloring, visibility, orientation, etc.). See save state
and write state
in the Jmol scripting documentation.
Contributors
AngelHerraez, GregE, EricMartz, Hansonrstolaf, Igor, NicolasVervelle, Gutow, Ted, Pimpim, Cudo29, Green