Difference between revisions of "Jmol in Wikis and Blogs"

From Jmol
Jump to navigation Jump to search
(JSmol in Wordpress)
Line 29: Line 29:
 
Having in mind the instruction written in Henry Rzepa's blog for Wordpress, i put the javaapplet inside "wp-content" directory together with all pdb files, using the ftp connection. The Jmol.js is also in the same wp-content directory. 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 jmolInizialiaze the directory must be "/wp-content".  
 
Having in mind the instruction written in Henry Rzepa's blog for Wordpress, i put the javaapplet inside "wp-content" directory together with all pdb files, using the ftp connection. The Jmol.js is also in the same wp-content directory. 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 jmolInizialiaze the directory must be "/wp-content".  
 
In my blog, I used the <applet> tag, instead of jmolApllet, because i am having a persistent error appletclass not found. --[[User:Pinostriccoli]] 11:52, 15 October 2010
 
In my blog, I used the <applet> tag, instead of jmolApllet, because i am having a persistent error appletclass not found. --[[User:Pinostriccoli]] 11:52, 15 October 2010
 
=============== JSmol in Wordpress =========
 
 
To implement JSmol in Wordpress I inserted the folloqing code in HEADER
 
<script  type="text/javascript" src="http://pinostriccoli.altervista.org/wp-content/JSmol.min.nojq.js"></script>
 
<script  type="text/javascript" src="http://pinostriccoli.altervista.org/wp-content/Jmol2.js"></script>
 
wp-content is the directory where i put the two files js. I use the version of JSmol without its jquery and using the jquery coming with wordpress.
 
Jmol2.js is used so that i dont need to change the code of buttons and links. (I always used the applet tag of HTML). in wp-content file jsmol.php must be put 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 post or page.
 
<script>
 
var Info = {
 
    width: 350,
 
    height: 350,
 
    serverURL: "http://pinostriccoli.altervista.org/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 wordpress installation that in my case is called HTML5. I suppose that they can be placed in wp-content as well: in this case the j2spath must be changed accordingly.
 
The data files are placed in wp-content or in its subdirectory.
 
Inside the post then  I used the script to insert the applet JSmol
 
<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>.
 
 
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}
 
  
 
=== MicroJmol ===
 
=== MicroJmol ===
Line 124: Line 92:
  
 
=== WordPress ===
 
=== WordPress ===
...
+
 
 +
To implement JSmol in Wordpress I inserted the folloqing code in <code>HEADER</code>
 +
--[[User:Pinostriccoli]] 10:40, 11 October 2013
 +
 
 +
<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; }

Revision as of 09:01, 11 October 2013

Jmol and JSmol in Wikis and Blogs

Jmol in Wikis

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

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

JSmol in Wikis

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.

Details will follow soon...


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

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. Jan Jensen (Jhjensen), 17 November, 2009.

WordPress

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. --Rzepa 13:20, 16 November 2009 (UTC)

Having in mind the instruction written in Henry Rzepa's blog for Wordpress, i put the javaapplet inside "wp-content" directory together with all pdb files, using the ftp connection. The Jmol.js is also in the same wp-content directory. 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 jmolInizialiaze the directory must be "/wp-content". In my blog, I used the <applet> tag, instead of jmolApllet, because i am having a persistent error appletclass not found. --User:Pinostriccoli 11:52, 15 October 2010

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

To implement JSmol in Wordpress I inserted the folloqing code in HEADER --User:Pinostriccoli 10:40, 11 October 2013

<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; }