Difference between revisions of "CMS Using Jmol"

From Jmol
Jump to navigation Jump to search
(Drupal)
(Moodle)
 
(29 intermediate revisions by 4 users not shown)
Line 2: Line 2:
  
 
This page is devoted to Content Management Systems, Learning Management Systems, Virtual Learning Environments, e-Learning Platforms..., that have been set-up to use Jmol as part of their contents.
 
This page is devoted to Content Management Systems, Learning Management Systems, Virtual Learning Environments, e-Learning Platforms..., that have been set-up to use Jmol as part of their contents.
 +
 +
== OpenOChem ==
 +
[http://openochem.org/ooc/ OpenOChem] is an advanced homework/quizzing system that plugs in existing Learning Management Systems via Learning Tools Interoperability® (LTI) specification. There is a [http://openochem.org/tsugi/store/details/jsmolmodels 3D model kit based on JSmol]
  
 
== Moodle ==
 
== Moodle ==
=== Moodle sites using Jmol ===
+
[http://moodle.org/ Moodle] is an open-source course management system.  
[http://moodle.org/ Moodle] is an open-source course management system. A third-party '''Jmol filter''' ([http://docs.moodle.org/en/Jmol_filter info]) automatically converts links to molecular model files (.mol, .csmol, .pdb, .xyz, .cml) in Moodle documents into embedded Jmol models. Jmol models can also be added as [http://moodle.org/mod/data/view.php?d=13&rid=87 resources], or placed in searchable databases that students can edit.
+
 
 +
Molecular model files may be displayed in Moodle pages using a ''filter'', a ''resource'', or placed in searchable databases that students can edit.
 +
 
 +
Compatibility with recent Moodle versions is uncertain; if you have installed this filter or resource in your Moodle, please contact us<ref name="DevList">Send an email to mol-developers AT lists DOT sourceforge DOT net</ref> with information that might be added here.
 +
 
 +
=== The Jmol filter for Moodle ===
 +
A third-party '''Jmol filter'''<ref name="MoodleDocs">[https://docs.moodle.org/36/en/Jmol_filter Official page for the Jmol filter at MoodleDocs]</ref> detects links to molecular model files (.mol, .pdb, .xyz, .cml, ...) in Moodle pages and converts them into embedded JSmol models.  
 +
 
 +
Current version of the filter uses by default [[Jmol_JavaScript_Object|'''JSmol_HTML5''']] (i.e. Java is not used). The user can also opt for the [[Jmol_JavaScript_Object/WebGL|'''JSmol_WebGL''' modality]].
 +
 
 +
{| class="wikitable"
 +
|-
 +
! Moodle version !! 
 +
|-
 +
| Moodle 4.5 || Needs a new architecture for the filter. [https://github.com/geoffrowland/moodle-filter_jmol/issues/40 Discussion]
 +
|-
 +
| Moodle 4.1 || [https://github.com/jpahullo/moodle-filter_jmol Code and download] v.6.4, build 2024012000
 +
|-
 +
| Moodle 3.6 to 3.8 || [https://edugit.org/nik/moodle-filter_jmol Code and download] v.6.4, Build 2016050100 (modified 20161118)
 +
|-
 +
| Moodle 2.x and 3.x || [https://github.com/geoffrowland/moodle-filter_jmol Code and download] v.6.4, Build 2016050100
 +
|-
 +
| Moodle 1.8 and 1.9 || [https://github.com/geoffrowland/moodle-filter_jmol/tree/MOODLE_19_STABLE Code and download] older versions of the Jmol filter
 +
|}
  
If you know a Moodle which uses Jmol, and which is not in the list below, please add it.
+
Example:[[File:Moodle Filter.png|frame|center|This is a snapshot of a model inserted in a page using this filter (Moodle v.3.5.2, Jmol Filter v.6.1)]]
<!--
 
* [http://www.reviseguys.com/moodle/course/view.php?id=2 reviseguys Chemistry revision]
 
-->
 
* [http://moodle.yeovil.ac.uk/course/view.php?id=63 Yeovil College]
 
* [http://montenet.monte.nsw.edu.au/ Monte Sant' Angelo Mercy College]
 
* [http://confchem.frostburgchemistry.org Frostburg State University]
 
* [http://moodle.fp.tul.cz/course/view.php?id=208 Technical University of Liberec (in Czech)]
 
  
=== Molecular structures in Moodle ===
+
==== How to insert molecular models in a Moodle page ====
 
<!--
 
<!--
 
[http://marie.frostburg.edu/101/mod/wiki/view.php?id=787&page=Index Moodle FAQ at  Frostburg State University] explains briefly
 
[http://marie.frostburg.edu/101/mod/wiki/view.php?id=787&page=Index Moodle FAQ at  Frostburg State University] explains briefly
Line 22: Line 41:
 
-->
 
-->
 
* How does the Jmol filter work?
 
* How does the Jmol filter work?
: Like the other text filters in Moodle, the Jmol filter expands a simple, shorthand code typed by an author into more complex code the browser can display. Specifically, this filter removes a link to a molecular file (with recognized file extension) and inserts a JmolApplet that loads the model. It can optionally insert controls too (e.g. for changing the rendering style).
+
: Like the other text filters in Moodle, the Jmol filter expands a simple, shorthand code typed by an author converting it into more complex code that is displayed by the browser. Specifically, this filter removes a link to a file (with molecular structure data, recognized by its extension) and inserts a JSmol panel that loads the model. It can optionally insert controls too (e.g. for changing the rendering style).
 +
:: ''Note for wiki administrators: authorization to upload those types of files may be needed in the wiki configuration.''
 
* How do I embed molecules into Moodle pages?
 
* How do I embed molecules into Moodle pages?
: First, make sure that the administrators of your Moodle site have installed the Jmol filter. Then, simply upload a <code>.pdb</code> file to your course, and make a link to it using Moodle's HTML editor.
+
# '''Config:''' First, make sure that the administrators of your Moodle site have installed the Jmol filter and authorized upload of such file extensions.
: Note that the server must be the same for the uploaded file and the Moodle system files, since Jmol will not display remote pdb files.
+
# '''Upload file:''' Then, simply upload to your course a molecular structure file and make a link to it using Moodle's HTML editor.
<a href="path/aspartic.pdb">Aspartic acid</a>
+
::  Formats of molecular structure that are recognized as such, based on the file extension (variable <code>$jmolfiletypes</code> in the filter source code), are:
:The default size of the display is 350 pixels. You can set the size of the display to ''n'' pixels by appending <code>?s=n</code> to the URL. For example:
+
::{| class="wikitable"
<a href="path/aspartic.pdb?s=200">Aspartic acid</a>
+
|-
:You can turn the default controls off by appending <code>?c=0</code> to the URL. If you combine this with the sizing option, separate the parameters with an ampersand (&).
+
| mol || sdf || mol2 || xyz || cml || cif || mcif || pdb || csmol || jmol || pse
<a href="path/aspartic.pdb?s=200&c=0">Aspartic acid</a>
+
|-
:For even greater control, pass a Jmol script to the view by typing <code>JMOLSCRIPT{}</code> after the link. The script goes between the braces.
+
| mol.png || sdf.png || mol2.png || xyz.png || cml.png || cif.png || mcif.png || pdb.png || csmol.png || jmol.png || pse.png
: For example, to set the background to white, zoom in to 150%, and spin the molecule around its x and y axes, you could type:
+
|-
<a href="path/aspartic.pdb?s=200&c=0">Aspartic acid</a>JMOLSCRIPT{color background white; zoom 150; set spin x 10; set spin y 10; spin;}
+
|  ||  ||  ||  ||  ||  ||  || pdb.gz ||  ||  ||
 +
|}
 +
:: (png files must be [[File_formats/Compressed|PNGJ]] files generated by Jmol, containing both a snapshot image and the structural data)
 +
:: ''Note that the server must be the same for the uploaded file and the Moodle system files; JSmol will not display remote files.''
 +
# <li value="3">'''Link:''' Use the Moodle text editor (inside a course topic, label, HTML block, forum posting, quiz question, etc.) to add the text for a link, e.g. 'Aspartic acid'. Click and drag to select the text link. Use the ''Insert Web Link'' button and enter the URL of the structure file. Note that the editor may 'scramble' things, particularly if you use additional parameters (explained in 'Options' below), so you may find it best to use ''HTML Source view'' ([<>] button). The result could be like this: <code><a title="Jmol" href="http://someserver.edu/moodle/file.php/7/Asp.mol">Aspartic acid</a></code>. '''Important:''' the link must have <code>title="Jmol"</code> for it to work properly.
 +
# '''Options:'''
 +
#* The default size of the display is 350 pixels. You can set it to ''n'' pixels by appending <code>?s=n</code> to the URL: <code><a href="path/Asp.mol?s=200">Aspartic acid</a></code>  The user can anyway resize the viewer dragging the bottom-right corner, or click a toggle button to display the viewer full-screen.  When more than one parameter is used in the URL, they are separated with an ampersand (&).
 +
#* You can specify whether the controls under the viewer are included by appending <code>?c=n</code> to the URL: <code><a href="path/Asp.mol?s=200&c=0">Aspartic acid</a></code>:
 +
#** <code>?c=0</code> to hide the controls.
 +
#** <code>?c=1</code> to display controls suitable for small inorganic or organic chemical structures.
 +
#** <code>?c=2</code> to display instead crystallographic controls for display of unit cells, crystal packing and polyhedra (for data files that support these).
 +
#** <code>?c=3</code> to use controls suitable for biological macromolecules such as proteins or nucleic acids.
 +
#** The default is to show controls according to the type of file loaded (c=3 for pdb, c=2 for cif).
 +
#* You can also specify whether the initial display is the interactive structure (<code>?i=0</code>) (default) or it is a cover image, replaced by the interactive object upon user click (<code>?i=1</code>), giving faster page load.
 +
#* For even greater control, pass a Jmol script to the view by typing <code>JMOLSCRIPT{}</code> right after the link. The script goes between the braces. <code><a href="path/Asp.mol?s=200&c=0">Aspartic acid</a>JMOLSCRIPT{color background white; zoom 150; set spin x 10; set spin y 10; spin on;}</code> will set the background to white, zoom in to 150%, and spin the molecule around its X and Y axes at 10 degrees per second.
 +
 
 +
:''Credits: A good part of this explanation was copied from the Moodle FAQ at Frostburg State University<ref>[https://web.archive.org/web/20250000000000*/http://marie.frostburg.edu/101/mod/wiki/view.php?id=787&page=Index Archived copy of http://marie.frostburg.edu/101/mod/wiki/view.php?id=787&page=Index] </ref>'' combined with MoodleDocs<ref name="MoodleDocs"></ref>
 +
 
 +
=== The Jmol resource for Moodle ===
 +
Jmol models can also be added as ''Moodle resources''<ref>[https://docs.moodle.org/20/en/Jmol_resource_type Jmol resource type]</ref>.
  
 +
<!--
 +
=== Moodle sites using Jmol ===
 +
If you know a Moodle which uses Jmol, and which is not in the list below, please add it.
 +
    * [http://www.reviseguys.com/moodle/course/view.php?id=2 reviseguys Chemistry revision]
 +
* [https://moodle.yeovil.ac.uk/ Yeovil College]
 +
* [https://www.monte.nsw.edu.au/ Monte Sant' Angelo Mercy College]
 +
* [https://confchem.ccce.divched.org/2006SpringConfChemP8B Frostburg State University]
 +
* [https://nanoed.tul.cz/course/view.php?id=86 Study (nano)materials at Technical University of Liberec (in Czech)]
 +
-->
 
=== Internationalization ===
 
=== Internationalization ===
The Jmol filter for Moodle is being internationalized (Jan 2008) [http://code.google.com/p/google-highly-open-participation-moodle/issues/detail?id=78]
+
A project to internationalize the Jmol filter for Moodle was started on Jan 2008.<ref>http://code.google.com/p/google-highly-open-participation-moodle/issues/detail?id=78</ref>
 
+
A more recent update is including localization, i.e. translated text strings for different languages.
 +
Both are apparently included in the latest versions of the filter (<code>lang</code> folder), although some languages may need an update to fully match the collection of text strings in English.
  
 
== WebAssign ==
 
== WebAssign ==
[http://webassign.net/index.html WebAssign®] is a Course Management System offered as a service and done by North Carolina State University and Advanced Instructional Systems, Inc.  
+
[http://webassign.net/index.html WebAssign®] is a Course Management System offered as a service and done by North Carolina State University and Advanced Instructional Systems, Inc.  
 
* [http://webassign.net/info/announcements/2005_7_8.html Notice] announcing Jmol functionality.
 
* [http://webassign.net/info/announcements/2005_7_8.html Notice] announcing Jmol functionality.
 
  
 
== LON-CAPA ==
 
== LON-CAPA ==
Line 56: Line 104:
 
[http://drupal.org/ Drupal] is an open source content management platform.
 
[http://drupal.org/ Drupal] is an open source content management platform.
  
;Drupal 6
+
=== Drupal Jmol ===
:Jmol whas been tried and tested on the Drupal 6 platform and works as expected. A Drupal 6 module is available for download to get you started and customize your own Jmol pages in Drupal. Below is a guide on how to install the module and get Jmol working on your Drupal site
+
A Drupal 7 and 8 module is available to display uploaded molecular structure files as a Jmol applet. The module can be found at [http://drupal.org/project/jmol http://drupal.org/project/jmol].
:*Download the [http://swi-srv-01.gbiomed.kuleuven.be/service/jmol.tar.gz module] and uncompress it in your module folder so you have a module folder called '''jmol'''
 
:*Activate the module from your Drupal site by going to ''Site building > modules > Other > Jmol''
 
:*Download Jmol and place the content in the Jmol module folder so you have e.g. <modules folder>/jmol/jmol-12.2.11/
 
:*Edit the ''jmol.module'' file in the jmol module folder and adjust paths where necessary, see the comments in the file
 
:*You should then be able to see the Jmol applet at <pre>http://example.com/jmol</pre> where you have to replace example.com with your base url
 
:*In case the link to the module goes down, here is the code for the module:
 
<pre>
 
<?php
 
  
/* Originally created by Joost Van Durme, University of Leuven, Belgium /*
+
=== Drupal Molecule ===
/* joost.vandurme@switch.vib-kuleuven.be */
+
Another Drupal module, called '''Molecule''', enables to easily integrate JSmol and JSpecView objects into Drupal sites without technical knowledge. More information at the [http://www.drupal.org/project/molecule Molecule site]. It is only development version, last updated in 2015.  
  
/*
+
The Molecule module defines three types of display options for displaying
* Add Jmol.js to the html header section, adjust paths where needed
+
JCAMP-DX files:
* Here, I have placed the jmol package folder as a subfolder of the jmol module folder
+
* Spectrum: Show the spectrum contained in the JCAMP-DX file
*/
+
* Molecule: Show the molecule contained in the JCAMP-DX file
 +
* Spectrum with molecule: Show both the molecule and the spectrum in the JCAMP-DX file and link them.
  
function jmol_init() {
 
  drupal_add_js(drupal_get_path('module', 'jmol') .'/jmol-12.2.11/Jmol.js');
 
}
 
  
/*
+
== Mahara ==
* Menu callback entry for the Jmol page, this creates a landing URL to view the Jmol applet e.g. http://example.com/jmol
+
The Mahara e-Portfolio system includes the
*/
+
'Mahara artefact file blocktype jmol/jsmol plugin', which provides the interactive 3D display of chemical structure files, uploaded to Mahara, using Jmol/JSmol.
 +
* [https://wiki.mahara.org/wiki/Plugins/Blocktype/Jmol Documentation]
 +
* [https://github.com/geoffrowland/mahara-artefact_file_blocktype_jmol Source code repository] (GitHub)
  
function jmol_menu() {
+
== WordPress ==
  $items['jmol'] = array(
+
For open source content management system [https://wordpress.org/ WordPress] there is a [https://wordpress.org/plugins/jsmol2wp/ jsmol2wp plugin], that has been closed as of January 7, 2019 and is not available for download for security issue.
  'title' => 'Jmol structure view',
 
  'page callback' => 'jmol_page',
 
  'access callback' => TRUE,
 
  'type' => MENU_CALLBACK,
 
  );
 
  return $items;
 
}
 
 
 
/**
 
* Page callback for Jmol page, this tells Drupal what to display on the landing page
 
*/
 
 
 
function jmol_page() {
 
  $base_url = "http://example.com/"; # change this to your base url
 
  $pathToJmol = $base_url.drupal_get_path("module", "jmol")."/jmol-12.2.11"; # when Clean URLs is enabled, we have to provide absolute urls for Java applets. see http://drupal.org/node/312642#comment-1053077
 
  $pathToPdb = $base_url.drupal_get_path("module", "jmol")."/1crn.pdb"; # this will load 1crn.pdb if it is placed in the jmol module folder
 
  $initCommand = 'spacefill off;wireframe off;backbone off;trace on;';
 
  $output  = '<script type="text/javascript">';
 
  $output .= 'jmolInitialize("'.$pathToJmol.'");';
 
  $output .= 'jmolApplet(400, "load '.$pathToPdb.';'.$initCommand.'");';
 
  $output .= 'jmolBr();';
 
  $output .= 'jmolHtml("Style ");';
 
  $output .= 'jmolRadioGroup([["'.$initCommand.'", "cartoon","checked"],["select all;spacefill off;trace off;backbone off;wireframe on;", "wireframe"],["select all;spacefill off;trace off;wireframe off;backbone on", "C-alpha trace"]]);';
 
  $output .= '</script>';
 
  return $output;
 
}
 
?>
 
</pre>
 
 
 
;Drupal 7
 
:Not tested yet, but should work. Will follow.
 
  
 
== Others ==
 
== Others ==
 
...?
 
...?
 +
 +
== References ==
 +
<references />

Latest revision as of 12:44, 27 January 2025

Jmol / JSmol Applications

This page is devoted to Content Management Systems, Learning Management Systems, Virtual Learning Environments, e-Learning Platforms..., that have been set-up to use Jmol as part of their contents.

OpenOChem

OpenOChem is an advanced homework/quizzing system that plugs in existing Learning Management Systems via Learning Tools Interoperability® (LTI) specification. There is a 3D model kit based on JSmol

Moodle

Moodle is an open-source course management system.

Molecular model files may be displayed in Moodle pages using a filter, a resource, or placed in searchable databases that students can edit.

Compatibility with recent Moodle versions is uncertain; if you have installed this filter or resource in your Moodle, please contact us[1] with information that might be added here.

The Jmol filter for Moodle

A third-party Jmol filter[2] detects links to molecular model files (.mol, .pdb, .xyz, .cml, ...) in Moodle pages and converts them into embedded JSmol models.

Current version of the filter uses by default JSmol_HTML5 (i.e. Java is not used). The user can also opt for the JSmol_WebGL modality.

Moodle version
Moodle 4.5 Needs a new architecture for the filter. Discussion
Moodle 4.1 Code and download v.6.4, build 2024012000
Moodle 3.6 to 3.8 Code and download v.6.4, Build 2016050100 (modified 20161118)
Moodle 2.x and 3.x Code and download v.6.4, Build 2016050100
Moodle 1.8 and 1.9 Code and download older versions of the Jmol filter

Example:

This is a snapshot of a model inserted in a page using this filter (Moodle v.3.5.2, Jmol Filter v.6.1)

How to insert molecular models in a Moodle page

  • How does the Jmol filter work?
Like the other text filters in Moodle, the Jmol filter expands a simple, shorthand code typed by an author converting it into more complex code that is displayed by the browser. Specifically, this filter removes a link to a file (with molecular structure data, recognized by its extension) and inserts a JSmol panel that loads the model. It can optionally insert controls too (e.g. for changing the rendering style).
Note for wiki administrators: authorization to upload those types of files may be needed in the wiki configuration.
  • How do I embed molecules into Moodle pages?
  1. Config: First, make sure that the administrators of your Moodle site have installed the Jmol filter and authorized upload of such file extensions.
  2. Upload file: Then, simply upload to your course a molecular structure file and make a link to it using Moodle's HTML editor.
Formats of molecular structure that are recognized as such, based on the file extension (variable $jmolfiletypes in the filter source code), are:
mol sdf mol2 xyz cml cif mcif pdb csmol jmol pse
mol.png sdf.png mol2.png xyz.png cml.png cif.png mcif.png pdb.png csmol.png jmol.png pse.png
pdb.gz
(png files must be PNGJ files generated by Jmol, containing both a snapshot image and the structural data)
Note that the server must be the same for the uploaded file and the Moodle system files; JSmol will not display remote files.
  1. Link: Use the Moodle text editor (inside a course topic, label, HTML block, forum posting, quiz question, etc.) to add the text for a link, e.g. 'Aspartic acid'. Click and drag to select the text link. Use the Insert Web Link button and enter the URL of the structure file. Note that the editor may 'scramble' things, particularly if you use additional parameters (explained in 'Options' below), so you may find it best to use HTML Source view ([<>] button). The result could be like this: <a title="Jmol" href="http://someserver.edu/moodle/file.php/7/Asp.mol">Aspartic acid</a>. Important: the link must have title="Jmol" for it to work properly.
  2. Options:
    • The default size of the display is 350 pixels. You can set it to n pixels by appending ?s=n to the URL: <a href="path/Asp.mol?s=200">Aspartic acid</a> The user can anyway resize the viewer dragging the bottom-right corner, or click a toggle button to display the viewer full-screen. When more than one parameter is used in the URL, they are separated with an ampersand (&).
    • You can specify whether the controls under the viewer are included by appending ?c=n to the URL: <a href="path/Asp.mol?s=200&c=0">Aspartic acid</a>:
      • ?c=0 to hide the controls.
      • ?c=1 to display controls suitable for small inorganic or organic chemical structures.
      • ?c=2 to display instead crystallographic controls for display of unit cells, crystal packing and polyhedra (for data files that support these).
      • ?c=3 to use controls suitable for biological macromolecules such as proteins or nucleic acids.
      • The default is to show controls according to the type of file loaded (c=3 for pdb, c=2 for cif).
    • You can also specify whether the initial display is the interactive structure (?i=0) (default) or it is a cover image, replaced by the interactive object upon user click (?i=1), giving faster page load.
    • For even greater control, pass a Jmol script to the view by typing JMOLSCRIPT{} right after the link. The script goes between the braces. <a href="path/Asp.mol?s=200&c=0">Aspartic acid</a>JMOLSCRIPT{color background white; zoom 150; set spin x 10; set spin y 10; spin on;} will set the background to white, zoom in to 150%, and spin the molecule around its X and Y axes at 10 degrees per second.
Credits: A good part of this explanation was copied from the Moodle FAQ at Frostburg State University[3] combined with MoodleDocs[2]

The Jmol resource for Moodle

Jmol models can also be added as Moodle resources[4].

Internationalization

A project to internationalize the Jmol filter for Moodle was started on Jan 2008.[5] A more recent update is including localization, i.e. translated text strings for different languages. Both are apparently included in the latest versions of the filter (lang folder), although some languages may need an update to fully match the collection of text strings in English.

WebAssign

WebAssign® is a Course Management System offered as a service and done by North Carolina State University and Advanced Instructional Systems, Inc.

  • Notice announcing Jmol functionality.

LON-CAPA

LON-CAPA is a "Free Open-Source Distributed Learning Content Management and Assessment System" under continuing development at Michigan State University. There are many exercises in the growing database of shared resources that use Jmol. Most require an account on the system to access the exercises, but a few are published "publicly" and do not require log-in for access. For example:


Drupal

Drupal is an open source content management platform.

Drupal Jmol

A Drupal 7 and 8 module is available to display uploaded molecular structure files as a Jmol applet. The module can be found at http://drupal.org/project/jmol.

Drupal Molecule

Another Drupal module, called Molecule, enables to easily integrate JSmol and JSpecView objects into Drupal sites without technical knowledge. More information at the Molecule site. It is only development version, last updated in 2015.

The Molecule module defines three types of display options for displaying JCAMP-DX files:

  • Spectrum: Show the spectrum contained in the JCAMP-DX file
  • Molecule: Show the molecule contained in the JCAMP-DX file
  • Spectrum with molecule: Show both the molecule and the spectrum in the JCAMP-DX file and link them.


Mahara

The Mahara e-Portfolio system includes the 'Mahara artefact file blocktype jmol/jsmol plugin', which provides the interactive 3D display of chemical structure files, uploaded to Mahara, using Jmol/JSmol.

WordPress

For open source content management system WordPress there is a jsmol2wp plugin, that has been closed as of January 7, 2019 and is not available for download for security issue.

Others

...?

References