Menu
▾
▴
Re: [Jmol-developers] JSmol in CMSs with existing JavaScript libraries (jQuery, YUI, MochiKit etc)
|
From: Geoffrey R. <row...@gm...> - 2013-04-13 14:58:01
|
Yes, Jmol.getApplet("jmol", Info); alone, works nicely!
Also, wondering whether a YUI module 'wrapper' for JSmol may be a general
way to avoid collisions with other, even non-YUI, JavaScript libraries.
I'll experiment as to whether it helps with Mahara (MochiKit using $ +
jQuery using j$).
Appreciate that performance is a key driver for JSmol development and that
a YUI module come with an 'overhead', though, AFAIK, using simpleyui-min.js
(rather than yui-min.js) and node-base (rather than node) should keep
things minimal. For the moment, I'm just pleased it works with YUI/Moodle
at all!
On 13 April 2013 14:41, Robert Hanson <ha...@st...> wrote:
> Super!
>
> btw, you no longer need
>
> jmol = "jmol"
> or
>
> jmol = Jmol.getApplet("jmol", Info);
>
>
> just the simple:
>
> Jmol.getApplet("jmol", Info);
>
>
> Could you try that and see if it works in Moodle?
>
>
>
> On Sat, Apr 13, 2013 at 6:52 AM, Geoffrey Rowland <row...@gm...
> > wrote:
>
>>
>> Actually, replacing jQuery's $(document).ready(function(){ } with YUI's
>> Y.on('load',function(){ }, as the wrapper for inserting JSmol into the
>> page, works consistently and reliably (Firefox, Chrome and Opera tested).
>>
>> Now, Moodle YUI features and JSmol work together *all* the time.
>> Irritating page refreshes no longer required! :-)
>>
>> Below is a simple example loading JSmol as a YUI module, in case it helps
>> others working alongside YUI 3. The YUI node-base module is required for
>> Y.on('load',function(){ } to work. At the risk of stating the obvious, the
>> JSmol-related filepaths may need to be 'tweaked' depending on the
>> particular local set-up.
>>
>> The Moodle filter code (which I am currently 'polishing') is similar
>> though somewhat 'polluted' by PHP stuff - and does not need to explicitly
>> load simpleyui-min.js, as its already loaded by Moodle pages.
>>
>>
>> <!DOCTYPE html>
>>
>> <head>
>>
>> <title>Loading JSmol as a YUI Module</title>
>>
>> </head>
>>
>> <body>
>>
>> <h4>JSmol Plugin</h4>
>>
>> <div id="jmoldiv"></div>
>> <script src="http://yui.yahooapis.com/3.5.0/build/simpleyui/simpleyui-min.js"></script>
>>
>>
>> <script type="text/javascript">
>> //<![CDATA[
>> YUI({
>> modules: {
>> "jsmol": {
>> fullpath: "http://chemapps.stolaf.edu/jmol/jsmol/JSmol.min.js"
>>
>>
>> }
>> }
>> }).use("jsmol", "node-base", function (Y) {
>>
>>
>> var Info = {
>> width: 300,
>> height: 300,
>> script: 'load ":ethanol"',
>> use: "HTML5",
>>
>>
>> j2sPath: "j2s",
>> addSelectionOptions: true,
>> serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php",
>>
>> readyFunction: null,
>>
>> console: "jmol_infodiv",
>> disableInitialConsole: false,
>> defaultModel: null,
>> debug: false
>> }
>>
>> var jmol = "jmol";
>> Y.on('load', function () {
>> Jmol.setDocument(0);
>>
>>
>> jmol = Jmol.getApplet(jmol, Info);
>> $("#jmoldiv").html(Jmol.getAppletHtml(jmol)); // Try jQuery in place of $, if $ conflicts with other JavaScript libraries
>> })
>> });
>> //]]>
>> </script>
>>
>>
>> </body>
>>
>>
>>
>>
>> On 11 April 2013 16:37, Geoffrey Rowland <row...@gm...> wrote:
>>
>>>
>>> > Of course, the real question is whether now MOODLE works.. :)
>>>
>>> Yes, Moodle (2.4.3 the latest stable version, and 2.5 beta) now works,
>>> in my hands.
>>>
>>> JSmol was breaking a few Moodle YUI features. In 'normal' mode the
>>> expanding navigation menus in side blocks (Moodle typically has a 3-panel
>>> layout with blocks in left and right columns and central main content)
>>> failed to work. In 'edit' mode, drag-and-drop upload of files,
>>> drag-and-drop repositioning of blocks, and 'the Add an activity or
>>> resource' link.
>>>
>>> With JSmol bundled inside a YUI module and $(document).ready(function(){
>>> }, these now all work. One minor irritation is that on first turning
>>> Editing on, with a JSmol embedded, a page refresh is required before the
>>> above Moodle YUI features start working again, though I can live with that.
>>>
>>> I have implemented unique IDs so that multiple independent JSmols can be
>>> inserted on a Moodle page. So far, working fine with a handful of JSmols
>>> inserted in various locations (side blocks and central section). Page load
>>> times, as expected, do increase with additional JSmol instances, though
>>> don't seem unreasonable. If lots of JSmols are required, they can be added
>>> to individual Pages within a Moodle course.
>>>
>>> This is all for 'vanilla' Moodle. The M in Moodle stands for Modular,
>>> and folks tend to add additional 3rd-party modules, including additional
>>> JavaScript, which may complicate things. Of course, the Jmol/JSmol filter
>>> is one such example of this. In this context, the decision by Moodle
>>> developers to base JavaScript implementation on the modular YUI 3 framework
>>> (there have been pretty 'heated' jQuery v YUI 3 discussions in the Moodle
>>> forums) may be a good one.
>>>
>>>
>>> >CDN in what sense, other than SourceForge and
>>> http://chemapps.stolaf.edu/jmol/jsmol ?
>>>
>>> Like, amongst many others, MathJax http://www.mathjax.org/download/. So
>>> that JSmol could be invoked without local installation but still load
>>> quickly.
>>>
>>> Although, whilst developing/testing things, I have directly linked to
>>> http://chemapps.stolaf.edu/jmol/jsmol, I had assumed you would not
>>> appreciate the traffic generated by doing this in production use ;-)
>>>
>>>
>>> >Absolutely. JSmol is set to do REST searches, which it does at RCSB,
>>> for example, for protein structures. (See the =caffeine? link at
>>> http://chemapps.stolaf.edu/jmol/jsmol/jsmol.htm). But I don't see a
>>> usable API at http://www.crystallography.net
>>> Do they have one?
>>>
>>> Not as such (as far as I am aware) though once you have the COD ID (e.g.
>>> from a manual search), you can easily get to the cif file
>>>
>>> e.g. for, one of the many, Halite structures COD ID: 9003308<http://www.crystallography.net/information_card.php?cif=9003308>
>>> The cif file is at:
>>> http://www.crystallography.net/cif/9/00/33/9003308.cif
>>>
>>> May be worth talking to the COD folks about something more sophisticated.
>>>
>>>
>>> On 11 April 2013 01:23, Robert Hanson <ha...@st...> wrote:
>>>
>>>>
>>>>
>>>>
>>>> On Wed, Apr 10, 2013 at 4:32 PM, Geoffrey Rowland <
>>>> row...@gm...> wrote:
>>>>
>>>>> After some trial-and-error and several rereads of Chapter 1 in the YUI
>>>>> 3 Cookbook (Evan Goer, 2012; O'Reilly), I think I have got JSmol playing
>>>>> nicely in Moodle. So far tested without problem on recent versions of
>>>>> Firefox, Chrome and Opera browsers.
>>>>>
>>>>> Seems to depend on, both of, two things:
>>>>>
>>>>> 1. JSmol loaded into a 'sandbox' as a YUI module (simple example in my
>>>>> previous post). Moodle uses YUI 3 as the core JavaScript library. The
>>>>> Moodle developers now recommend that any JavaScript is loaded via a YUI
>>>>> module rather than the 'traditional' <script src="..."></script> tags.
>>>>>
>>>>>
>>>> interesting.
>>>>
>>>>
>>>>
>>>>> 2. JSmol is rendered inside a $(document).ready(function(){ }. A
>>>>> simple example is also in the code in my previous post. Without this, JSmol
>>>>> still blocks the function of some Moodle JavaScript/YUI features (e.g.
>>>>> navigation lists and menus) positioned after JSmol on the page. The jQuery
>>>>> $(document).ready(function(){ } seems to result in JSmol being added to the
>>>>> page after everything else, including the other YUI stuff.
>>>>>
>>>>
>>>> That is correct -- at least, it is running its main methods after that.
>>>>
>>>>
>>>>>
>>>>> Hey presto, everything works! In edit mode, can even (YUI)
>>>>> drag-and-drop a block containing a spinning JSmol around a Moodle page. :-)
>>>>>
>>>>>
>>>> Of course, the real question is whether now MOODLE works.. :)
>>>>
>>>>
>>>>
>>>>> I hope to get all thisinto an updated JSmol Moodle filter in the
>>>>> near future. Also, add a few notes to the Jmol Wiki in case it helps anyone
>>>>> else working with JSmol in a YUI context.
>>>>>
>>>>> So, now have JSmol working alongside YUI3 in Moodle and MochiKit in
>>>>> Mahara (though a global swap of $ to $j may still help, if it doesn't break
>>>>> anything else)
>>>>>
>>>>> A couple of very loosely related questions
>>>>>
>>>>> 1. Is there any possibility of a JSmol CDN? Particularly useful given
>>>>> the incredibly rapid development of features over recent years. Its hard to
>>>>> keep up! Would be nice to be 'plumbed' into the latest stable (or
>>>>> development) version.
>>>>>
>>>>>
>>>> CDN in what sense, other than SourceForge and
>>>> http://chemapps.stolaf.edu/jmol/jsmol ?
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>> 2. In addition to the built-in interface to NCI/PubChem and RCSB,
>>>>> would it be possible to have a similar link to the Crystallography Open
>>>>> Database (COD) hosted at http://www.crystallography.net?. Would be
>>>>> nice for an easy showcase of crystal/mineral structures alongside the
>>>>> existing small molecules and biological macromolecules.
>>>>>
>>>>>
>>>> Absolutely. JSmol is set to do REST searches, which it does at RCSB,
>>>> for example, for protein structures. (See the =caffeine? link at
>>>> http://chemapps.stolaf.edu/jmol/jsmol/jsmol.htm). But I don't see a
>>>> usable API at http://www.crystallography.net Do they have one?
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>> I continue to be amazed as to what JSmol can do!
>>>>>
>>>>> Cheers
>>>>>
>>>>>
>>>>> On 8 April 2013 23:12, Geoffrey Rowland <row...@gm...>wrote:
>>>>>
>>>>>> Thanks Bob, that's useful.
>>>>>>
>>>>>> For Mahara, $ is the main (only?) problem. Mahara has both MochiKit
>>>>>> (main library for drag-n-drop editing etc) and jQuery (for a few features,
>>>>>> e.g. image gallery). Both of these (can) use $. By default, Mahara loads
>>>>>> jQuery first, then maps $j to the jQuery global, then loads Mochikit which
>>>>>> 'takes over' ownership of $.
>>>>>>
>>>>>> So, all other things being equal, a swap of $ to $j (or jQuery) in
>>>>>> JSmol (and associated jQuery) should fix things for Mahara. Not sure if
>>>>>> this is more widely useful, though the $ to $j swap is one of the
>>>>>> recommended strategies in
>>>>>> http://docs.jquery.com/Using_jQuery_with_Other_Libraries.
>>>>>>
>>>>>> Not yet been brave enough to tackle the global search-replace, and
>>>>>> not entirely sure which files I need to change! As indicated in my earlier
>>>>>> post, my current workaround is to load JSmol.min.js when MochiKit is not
>>>>>> required and switch to JSmol.min.nojq.js when MochiKit is required (in
>>>>>> Mahara edit mode). The only bug I have noticed, is that the right-click
>>>>>> menu does not display and throws up an error pop-up. I have suppressed this
>>>>>> with a 'set disablePopupMenu TRUE'. Since the menu is not essential in
>>>>>> (Mahara) edit view, this is a reasonable compromise, if a bit messy.
>>>>>>
>>>>>> Not made much further progress with Moodle which uses YUI3 as the
>>>>>> main JavaScript library. Have experimented a little with using a YUI module
>>>>>> to load JSmol. As far as I understand it, this should allow the JSMol (and
>>>>>> jQuery) objects to run in a local 'sandbox'. The simple YUI3 loading of
>>>>>> JSmol, listed below, certainly functions, though I have not yet got it all
>>>>>> working with Moodle.
>>>>>>
>>>>>> Hope that makes sense
>>>>>>
>>>>>> Cheers
>>>>>>
>>>>>> Geoff
>>>>>>
>>>>>>
>>>>>> <!DOCTYPE html>
>>>>>>
>>>>>> <head>
>>>>>>
>>>>>> <title>Loading JSmol as a YUI Module</title>
>>>>>>
>>>>>> </head>
>>>>>>
>>>>>> <body>
>>>>>>
>>>>>> <h4>JSmol Plugin</h4>
>>>>>> <div id="panel"></div>
>>>>>>
>>>>>> <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js
>>>>>> "></script>
>>>>>> <script>
>>>>>> YUI({
>>>>>> groups: {
>>>>>> "jmol": {
>>>>>> base: "http://...path.to.../jmol/jsmol/",
>>>>>> async: true,
>>>>>> modules: {
>>>>>> "jsmol": {
>>>>>> path: "JSmol.min.js"
>>>>>> }
>>>>>> }
>>>>>> }
>>>>>> }
>>>>>> }).use("jsmol", function (Y) {
>>>>>>
>>>>>> // Start of standard JSmol stuff
>>>>>>
>>>>>> var Info = {
>>>>>> width: 300,
>>>>>> height: 300,
>>>>>> script: 'load ":ethanol"',
>>>>>> use: "HTML5",
>>>>>> j2sPath: "j2s",
>>>>>> addSelectionOptions: true,
>>>>>> serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php",
>>>>>> readyFunction: null,
>>>>>> console: "jmol_infodiv",
>>>>>> disableInitialConsole: false,
>>>>>> defaultModel: null,
>>>>>> debug: false
>>>>>> }
>>>>>>
>>>>>> var jmol = "jmol"; // the JavaScript applet object
>>>>>>
>>>>>> $(document).ready(function(){
>>>>>> Jmol.setDocument(0);
>>>>>> jmol = Jmol.getApplet("jmol", Info);
>>>>>> $("#panel").html(Jmol.getAppletHtml(jmol));
>>>>>> })
>>>>>>
>>>>>> // End of standard JSmol stuff
>>>>>>
>>>>>> });
>>>>>> </script>
>>>>>> </body>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> ------------------------------------------------------------------------------
>>>>> Precog is a next-generation analytics platform capable of advanced
>>>>> analytics on semi-structured data. The platform includes APIs for
>>>>> building
>>>>> apps and a phenomenal toolset for data science. Developers can use
>>>>> our toolset for easy data analysis & visualization. Get a free account!
>>>>> http://www2.precog.com/precogplatform/slashdotnewsletter
>>>>> _______________________________________________
>>>>> Jmol-developers mailing list
>>>>> Jmo...@li...
>>>>> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Robert M. Hanson
>>>> Larson-Anderson Professor of Chemistry
>>>> Chair, Chemistry Department
>>>> St. Olaf College
>>>> Northfield, MN
>>>> http://www.stolaf.edu/people/hansonr
>>>>
>>>>
>>>> If nature does not answer first what we want,
>>>> it is better to take what answer we get.
>>>>
>>>> -- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900
>>>>
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>> Precog is a next-generation analytics platform capable of advanced
>>>> analytics on semi-structured data. The platform includes APIs for
>>>> building
>>>> apps and a phenomenal toolset for data science. Developers can use
>>>> our toolset for easy data analysis & visualization. Get a free account!
>>>> http://www2.precog.com/precogplatform/slashdotnewsletter
>>>> _______________________________________________
>>>> Jmol-developers mailing list
>>>> Jmo...@li...
>>>> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>>>>
>>>>
>>>
>>
>>
>> ------------------------------------------------------------------------------
>> Precog is a next-generation analytics platform capable of advanced
>> analytics on semi-structured data. The platform includes APIs for building
>> apps and a phenomenal toolset for data science. Developers can use
>> our toolset for easy data analysis & visualization. Get a free account!
>> http://www2.precog.com/precogplatform/slashdotnewsletter
>> _______________________________________________
>> Jmol-developers mailing list
>> Jmo...@li...
>> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>>
>>
>
>
> --
> Robert M. Hanson
> Larson-Anderson Professor of Chemistry
> Chair, Chemistry Department
> St. Olaf College
> Northfield, MN
> http://www.stolaf.edu/people/hansonr
>
>
> If nature does not answer first what we want,
> it is better to take what answer we get.
>
> -- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900
>
>
>
> ------------------------------------------------------------------------------
> Precog is a next-generation analytics platform capable of advanced
> analytics on semi-structured data. The platform includes APIs for building
> apps and a phenomenal toolset for data science. Developers can use
> our toolset for easy data analysis & visualization. Get a free account!
> http://www2.precog.com/precogplatform/slashdotnewsletter
> _______________________________________________
> Jmol-developers mailing list
> Jmo...@li...
> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>
>
|