Difference between revisions of "Jmol in Wikis and Blogs"

From Jmol
Jump to navigation Jump to search
(MicroJmol)
(JSmol in Wikis)
 
(21 intermediate revisions by 7 users not shown)
Line 1: Line 1:
== Wikis ==
+
= Jmol and JSmol in Wikis and Blogs =
Jmol can be embedded in wiki pages using special '''processors'''.
 
  
* For wikis based on MediaWiki, there is the [[MediaWiki | Jmol Mediawiki Extension]].  
+
== Jmol in Wikis ==
 +
Jmol (Java applet) can be embedded in wiki pages using special '''processors'''.
 +
 
 +
* For wikis based on MediaWiki, there is the [[MediaWiki | Jmol Mediawiki Extension]].
 +
* For wikis based on Wikia, there is concern among Wikia staff about the security risk posed by hosting .jar files and, hence, Jmol cannot be embedded into Wikia-based websites.  
 
* For other wikis (MoinMoin, MoniWiki, UniWakka), [[Jmol Processor]]s are available.
 
* For other wikis (MoinMoin, MoniWiki, UniWakka), [[Jmol Processor]]s are available.
  
 
You can see a list of wikis that already use Jmol: [[Wikis Using Jmol]].
 
You can see a list of wikis that already use Jmol: [[Wikis Using Jmol]].
  
== Blogs ==
+
== JSmol in Wikis ==
Jmol can be used in blogs, discussion boards and similar environments:
+
An JSmolExtension for MediaWiki is available at [https://proteopedia.org/support/JSmolExtension/JSmolExtension.zip JSmolExtension.zip], with [https://proteopedia.org/support/JSmolExtension/ instructions] on how to install it on your Wiki. Also available working [https://proteopedia.org/w/User:Jaime_Prilusky/JSmolExtension examples] on the use of JSmolExtension.
 +
 
 +
JSmol (HTML5 modality) is being used at least in [http://www.proteopedia.org Proteopedia]. It is used by default when you access Proteopedia pages from a mobile device (tablet). [http://www.weizmann.ac.il/home/joel/papers/2013_Hanson_Prilusky_IJC.pdf Reference article in Israel J. Chem.]
 +
 
 +
== Jmol in Blogs ==
 +
Jmol (Java applet) can be used in blogs, discussion boards and similar environments.
 +
<br>You can see a list of blogs that already use Jmol: [[Blogs Using Jmol]].
 +
 
 +
=== Google Blogger ===
 +
:''Reported by [[User:Jhjensen|Jan Jensen]], 17 November, 2009:''
 +
 
 +
I have blogged some instructions for [http://molecularmodelingbasics.blogspot.com/2009/06/jmol-test.html using Jmol in Google Blogger].  I have found two ways of doing it (besides he widget described below).  I think the best way is the one I describe in the comments.  Note that Jmol doesn't show up in Preview, so you have to publish the post to see how it looks.
  
 
=== WordPress ===
 
=== WordPress ===
 +
:''Reported by [[User:Rzepa|Henry Rzepa]], 16 November 2009:''
 +
 +
I have blogged some instructions for [http://www.ch.ic.ac.uk/rzepa/blog/?m=200804 using  Jmol in  Wordpress].  There are various ways of doing so, but the one I used enables running fully functional scripts etc. There is one issue however, and that is the need to insert <nowiki><script src="../Jmol/Jmol.js" type="text/javascript" /></nowiki>  into the style header.  This gets over-written every time the instance of  WordPress is updated.
 +
 +
:''Reported by [[User:Pinostriccoli|Pino Striccoli]], 15 October 2010:''
 +
 +
Having in mind the instruction written in Henry Rzepa's blog for Wordpress, I put the Jmol Applet inside {{folder|wp-content}} directory together with all pdb files, using the ftp connection. The {{file|Jmol.js}} is also in the same {{folder|wp-content}}. The link to Jmol, <code><script src="wp-content/Jmol.js" type="text/javascript" /></code> has to inserted in the header so that it is available in posts and pages too. When putting <code>jmolInitialize()</code> the directory must be <code>/wp-content</code>.
 +
In my blog, I used the <code><applet></code> tag, instead of <code>jmolApplet</code>, because I am having a persistent error <code>appletclass not found</code>.
  
I have blogged some instructions for [http://www.ch.ic.ac.uk/rzepa/blog/?m=200804 using  Jmol in  Wordpress].  There are various ways of doing so, but the one I used enables running fully functional scripts etc. There is one issue however, and that is the need to insert <nowiki><script src="../Jmol/Jmol.js" type="text/javascript" /></nowiki>  into the style header.  This gets over-written every time the instance of  WordPress is updated.  --[[User:Rzepa|Rzepa]] 13:20, 16 November 2009 (UTC)
 
 
=== MicroJmol ===
 
=== MicroJmol ===
 
[http://www.widgetbox.com/widget/microjmol MicroJmol widget] by Jeff Moore (Dept. Chemistry, University of Illinois at Urbana-Champaign):  
 
[http://www.widgetbox.com/widget/microjmol MicroJmol widget] by Jeff Moore (Dept. Chemistry, University of Illinois at Urbana-Champaign):  
Line 70: Line 91:
 
</iframe>
 
</iframe>
 
</pre>
 
</pre>
 +
 +
== JSmol in Blogs ==
 +
JSmol (HTML5 modality) used in blogs:
 +
 +
=== WordPress ===
 +
 +
:''Reported by [[User:JimHu|Jim Hu]], 8 June 2014:''
 +
I created a wordpress plugin, JSmol2wp to place JSmol applets in Wordpress posts or pages using a shortcode.  I will eventually release it on wordpress.org, but as of June 2014 the files are available at GitHub. The files are at
 +
 +
https://github.com/jimhu-tamu/wordpress/tree/master/plugins/jsmol2wp
 +
 +
To obtain the files,
 +
* if you have a GitHub account you can use Git to clone the entire jimhu-tamu/Wordpress repository or do a [http://briancoyner.github.io/blog/2013/06/05/git-sparse-checkout/ sparse checkout]
 +
* download a zip file of all my wordpress development by clicking  "Download ZIP" in the lower right corner of https://github.com/jimhu-tamu/wordpress
 +
To install the plugin:
 +
* If you have file or ftp access to your wordpress directory, move/copy the directory into wp-content/plugins, and then activate the plugin from the plugins pane of the dashboard.
 +
* Some shared hosting installations allow you to install plugins via uploading a zip file. You will need to rezip just the jsmol2wp directory.
 +
 +
The plugin currently only works with .pdb files, which can be either fetched from the PDB or uploaded locally. To place an applet in a page, put a shortcode in the text:
 +
 +
[jsmol pdb='xxxx']
 +
 +
where xxxx is the PDB id or the name of the uploaded attachment, which should be a .pdb file. Optional parameters:
 +
* caption: places a caption over the applet
 +
* commands: this creates one or more buttons that will run custom JMol scripts.  The syntax is label = script, with multiple buttons delimited by three pipe characters e.g.
 +
<pre>
 +
commands = 'arm = select 1-6:3, 1-6:4; color yellow;|||
 +
helix-turn-helix = select 33-52:3, 33-52:4; color yellow; hide hoh;|||
 +
helix 5 = select *:3,*:4; spacefill off; cartoon; select 84,87; color yellow;
 +
</pre>
 +
It's OK for the script to go over multiple lines.
 +
 +
The plugin works with multiple applets on the same page, but will get confused if they use the same pdb accession.
 +
 +
 +
:''Reported by [[User:Pinostriccoli|Pino Striccoli]], 11 October 2013:''
 +
 +
To implement JSmol in Wordpress ([http://pinostriccoli.altervista.org/?p=6434 sample page]) I inserted the folloqing code in <code>HEADER</code>
 +
<pre>
 +
<script type="text/javascript" src="http://myserver.com/wp-content/JSmol.min.nojq.js"></script>
 +
<script type="text/javascript" src="http://myserver.com/wp-content/Jmol2.js"></script>
 +
</pre>
 +
{{folder|wp-content}} is the directory where I put the two {{file|js}} files.
 +
 +
I use the version of JSmol without its jQuery and using the jQuery coming with Wordpress.
 +
 +
{{file|Jmol2.js}} is used so that I don't need to change the code of buttons and links. (I always used the applet tag of HTML).
 +
 +
{{file|jsmol.php}} must be put in {{folder|wp-content}} for a total functionality of JSmol with different files.
 +
 +
The following script has been placed always in <code>HEADER</code> because it is widely used in blog, but it can be put also in single post or page.
 +
<pre>
 +
<script>
 +
var Info = {
 +
    width: 350,
 +
    height: 350,
 +
    serverURL: "http://myserver.com/wp-content/jsmol.php",
 +
    use: "HTML5",
 +
    j2sPath: "html5/j2s",
 +
    console: "jmolApplet0_infodiv",
 +
    script: "load wp-content/alpha.pdb; background black"
 +
}
 +
</script>
 +
</pre>
 +
The files needed to have JSmol working are placed in a directory outside the Wordpress installation that in my case is called {{folder|html5}}. I suppose that they can be placed in {{folder|wp-content}} as well: in this case the <code>j2spath</code> must be changed accordingly.
 +
 +
The data files are placed in {{folder|wp-content}} or in its subdirectory.
 +
 +
Inside the post then I used the script to insert the JSmol object:
 +
<pre>
 +
<script type="text/javascript">// <![CDATA[
 +
// note that the variable name MUST match the first parameter in quotes
 +
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)
 +
// note that now scripts can be sent immediately after the _Applet object is created
 +
// ]]&gt;</script>.
 +
</pre>
 +
When I wanted to format the applet I had to use a custom css piece applied to <nowiki><canvas></nowiki> tag. In my case I put
 +
#jmolApplet0_appletinfotablediv{ float:left; }
 +
Another issue when using wordpress is the editor used. Use always editor in text format and do not switch to visual editor.
 +
The visual editor seems not to see the code in the script in correct way. Be sure that the lines of the code included in script tag are not jammed together on the same line.
 +
 +
=== Tumblr ===
 +
 +
:''Reported by [[User:tothsa|Sandor Toth]], 16 April 2014:''
 +
 +
I use JSmol to post my crystal structures on Tumblr. I have the following extra lines in the header:
 +
<script type="text/javascript" src="http://www.proteopedia.org/wiki/extensions/jsmol/JSmol.min.js">
 +
</script>
 +
This loads JSmol from the proteopedia wiki, since I don't want to host JSmol myself. For the blog post I change to html editing mode and insert the following code:
 +
<script type="text/javascript">
 +
var myJmol;
 +
var Info = {
 +
    width: 600,
 +
height: 600,
 +
debug: false,
 +
color: "#eeffff",
 +
serverURL: "http://www.proteopedia.org/wiki/extensions/jsmol/php/jsmol.php",
 +
jarFile: "JmolApplet.jar",
 +
jarPath: '..',
 +
j2sPath: "http://www.proteopedia.org/wiki/extensions/jsmol/j2s",
 +
use: "HTML5",
 +
script: "script http://myserver/jmol_script_file",
 +
 +
disableJ2SLoadMonitor: true,
 +
disableInitialConsole: true,
 +
allowJavaScript: true,
 +
console: "none",
 +
}
 +
myJmol = Jmol.getApplet("myJmol", Info);
 +
</script>
 +
The most important line is the one that begins with the "script:", here you have to give the link to the JSmol script file. And voila it works. You can find the blog here: spinw dot tumblr doc com (unfortunately spam filter doesn't allow to give a direct link).

Latest revision as of 05:19, 21 August 2023

Jmol and JSmol in Wikis and Blogs

Jmol in Wikis

Jmol (Java applet) can be embedded in wiki pages using special processors.

  • For wikis based on MediaWiki, there is the Jmol Mediawiki Extension.
  • For wikis based on Wikia, there is concern among Wikia staff about the security risk posed by hosting .jar files and, hence, Jmol cannot be embedded into Wikia-based websites.
  • For other wikis (MoinMoin, MoniWiki, UniWakka), Jmol Processors are available.

You can see a list of wikis that already use Jmol: Wikis Using Jmol.

JSmol in Wikis

An JSmolExtension for MediaWiki is available at JSmolExtension.zip, with instructions on how to install it on your Wiki. Also available working examples on the use of JSmolExtension.

JSmol (HTML5 modality) is being used at least in Proteopedia. It is used by default when you access Proteopedia pages from a mobile device (tablet). Reference article in Israel J. Chem.

Jmol in Blogs

Jmol (Java applet) can be used in blogs, discussion boards and similar environments.
You can see a list of blogs that already use Jmol: Blogs Using Jmol.

Google Blogger

Reported by Jan Jensen, 17 November, 2009:

I have blogged some instructions for using Jmol in Google Blogger. I have found two ways of doing it (besides he widget described below). I think the best way is the one I describe in the comments. Note that Jmol doesn't show up in Preview, so you have to publish the post to see how it looks.

WordPress

Reported by Henry Rzepa, 16 November 2009:

I have blogged some instructions for using Jmol in Wordpress. There are various ways of doing so, but the one I used enables running fully functional scripts etc. There is one issue however, and that is the need to insert <script src="../Jmol/Jmol.js" type="text/javascript" /> into the style header. This gets over-written every time the instance of WordPress is updated.

Reported by Pino Striccoli, 15 October 2010:

Having in mind the instruction written in Henry Rzepa's blog for Wordpress, I put the Jmol Applet inside Folder icon.gifwp-content directory together with all pdb files, using the ftp connection. The File icon.gifJmol.js is also in the same Folder icon.gifwp-content. The link to Jmol, <script src="wp-content/Jmol.js" type="text/javascript" /> has to inserted in the header so that it is available in posts and pages too. When putting jmolInitialize() the directory must be /wp-content. In my blog, I used the <applet> tag, instead of jmolApplet, because I am having a persistent error appletclass not found.

MicroJmol

MicroJmol widget by Jeff Moore (Dept. Chemistry, University of Illinois at Urbana-Champaign): A portable version of Jmol viewer that loads the user-provided Jmol-readable file at startup. Used to share 3D structures on blogs, discussion boards and inside of other widgets that use the widgetbox. Instructions or comments can be added to the text field.

Uses this code:

<script src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"
type="text/javascript">
</script>
<script>
if (WIDGETBOX) WIDGETBOX.renderWidget('ec6af128-5436-4d7b-97c9-7f2f4b528859');
</script>
<noscript>
Get the <a href="http://www.widgetbox.com/widget/microjmol">MicroJmol</a> widget 
and many other <a href="http://www.widgetbox.com/">great free widgets</a> 
at <a href="http://www.widgetbox.com">Widgetbox</a>! 
Not seeing a widget? 
(<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)
</noscript>

And, as a result, this kind of code gets inserted in the page:

<iframe hspace="0" vspace="0" marginheight="0" marginwidth="0" 
src="http://markup.widgetserver.com/syndication/get_widget.html?
  instructions=One%20of%20my%20favorite%20molecules...
  &bgcolor=%2366FFCC
  &Jmol_file=http%3A%2%2Fnetfiles.uiuc.edu%2Fjsmoore%2Fwww%2FJmolpages%2Fcaffeine.xyz
  &widget.appId=4e4d1afb-565c-4d70-9c6e-8c1c8b2894b3
  &widget.regId=56b796d2-1b71-42ae-bcc1-ccc14fab461d
  &widget.friendlyId=microjmol
  &widget.name=MicroJmol
  &widget.token=4ea9b00c1b2c22e17a88ba756153e71526921144000001246889ecdf
  &widget.id=0
  &widget.location=http%3A%2F%2Fwww.widgetbox.com%2Fwidget%2Fmicrojmol
  &widget.timestamp=1255889032432
  &widget.serviceLevel=0
  &widget.provServiceLevel=0
  &widget.instServiceLevel=0
  &widget.width=150
  &widget.height=150
  &widget.wrapper=JAVASCRIPT
  &widget.isAdFriendly=true
  &widget.isAdEnabled=true
  &widget.adChannels=137%3D125x125
  &widget.adPlacement=
  &widget.output=htmlcontent
  " 
border="0" 
id="widgetbox_widget_iframe_0" 
name="widgetbox_widget_iframe_0" 
frameborder="0" 
height="150" 
width="150"
scrolling="no" 
>
</iframe>

JSmol in Blogs

JSmol (HTML5 modality) used in blogs:

WordPress

Reported by Jim Hu, 8 June 2014:

I created a wordpress plugin, JSmol2wp to place JSmol applets in Wordpress posts or pages using a shortcode. I will eventually release it on wordpress.org, but as of June 2014 the files are available at GitHub. The files are at

https://github.com/jimhu-tamu/wordpress/tree/master/plugins/jsmol2wp

To obtain the files,

To install the plugin:

  • If you have file or ftp access to your wordpress directory, move/copy the directory into wp-content/plugins, and then activate the plugin from the plugins pane of the dashboard.
  • Some shared hosting installations allow you to install plugins via uploading a zip file. You will need to rezip just the jsmol2wp directory.

The plugin currently only works with .pdb files, which can be either fetched from the PDB or uploaded locally. To place an applet in a page, put a shortcode in the text:

[jsmol pdb='xxxx']

where xxxx is the PDB id or the name of the uploaded attachment, which should be a .pdb file. Optional parameters:

  • caption: places a caption over the applet
  • commands: this creates one or more buttons that will run custom JMol scripts. The syntax is label = script, with multiple buttons delimited by three pipe characters e.g.
commands = 'arm = select 1-6:3, 1-6:4; color yellow;|||
helix-turn-helix = select 33-52:3, 33-52:4; color yellow; hide hoh;|||
helix 5 = select *:3,*:4; spacefill off; cartoon; select 84,87; color yellow;

It's OK for the script to go over multiple lines.

The plugin works with multiple applets on the same page, but will get confused if they use the same pdb accession.


Reported by Pino Striccoli, 11 October 2013:

To implement JSmol in Wordpress (sample page) I inserted the folloqing code in HEADER

<script type="text/javascript" src="http://myserver.com/wp-content/JSmol.min.nojq.js"></script>
<script type="text/javascript" src="http://myserver.com/wp-content/Jmol2.js"></script>

Folder icon.gifwp-content is the directory where I put the two File icon.gifjs files.

I use the version of JSmol without its jQuery and using the jQuery coming with Wordpress.

File icon.gifJmol2.js is used so that I don't need to change the code of buttons and links. (I always used the applet tag of HTML).

File icon.gifjsmol.php must be put in Folder icon.gifwp-content for a total functionality of JSmol with different files.

The following script has been placed always in HEADER because it is widely used in blog, but it can be put also in single post or page.

<script>
var Info = {
    width: 350,
    height: 350,
    serverURL: "http://myserver.com/wp-content/jsmol.php",
    use: "HTML5",
    j2sPath: "html5/j2s",
    console: "jmolApplet0_infodiv",
    script: "load wp-content/alpha.pdb; background black"
}
</script>

The files needed to have JSmol working are placed in a directory outside the Wordpress installation that in my case is called Folder icon.gifhtml5. I suppose that they can be placed in Folder icon.gifwp-content as well: in this case the j2spath must be changed accordingly.

The data files are placed in Folder icon.gifwp-content or in its subdirectory.

Inside the post then I used the script to insert the JSmol object:

<script type="text/javascript">// <![CDATA[
// note that the variable name MUST match the first parameter in quotes
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)
// note that now scripts can be sent immediately after the _Applet object is created
// ]]></script>. 

When I wanted to format the applet I had to use a custom css piece applied to <canvas> tag. In my case I put

#jmolApplet0_appletinfotablediv{ float:left; }

Another issue when using wordpress is the editor used. Use always editor in text format and do not switch to visual editor. The visual editor seems not to see the code in the script in correct way. Be sure that the lines of the code included in script tag are not jammed together on the same line.

Tumblr

Reported by Sandor Toth, 16 April 2014:

I use JSmol to post my crystal structures on Tumblr. I have the following extra lines in the header:

<script type="text/javascript" src="http://www.proteopedia.org/wiki/extensions/jsmol/JSmol.min.js">
</script>

This loads JSmol from the proteopedia wiki, since I don't want to host JSmol myself. For the blog post I change to html editing mode and insert the following code:

<script type="text/javascript">
var myJmol;
var Info = {
    width: 600,
	height: 600,
	debug: false,
	color: "#eeffff",
	serverURL: "http://www.proteopedia.org/wiki/extensions/jsmol/php/jsmol.php",
	jarFile: "JmolApplet.jar",
	jarPath: '..',
	j2sPath: "http://www.proteopedia.org/wiki/extensions/jsmol/j2s",
	use: "HTML5",
	script: "script http://myserver/jmol_script_file",
	
	disableJ2SLoadMonitor: true,
	disableInitialConsole: true,
	allowJavaScript: true,
	console: "none",
}
myJmol = Jmol.getApplet("myJmol", Info);
</script>

The most important line is the one that begins with the "script:", here you have to give the link to the JSmol script file. And voila it works. You can find the blog here: spinw dot tumblr doc com (unfortunately spam filter doesn't allow to give a direct link).