MozillaZine

[Solved] JSmol in Firefox?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
FoxBadgerWolf
 
Posts: 3
Joined: August 24th, 2015, 4:35 pm

Post Posted August 24th, 2015, 5:15 pm

I'm having some issue enabling JSmol functionality in Mozilla Firefox.

The Jmol function appears to be working fine (this example is rendering properly for me), but JSmol requests a plugin to be enabled (image). I find this somewhat odd as my Android device has no problem rendering it (browser: Chrome, system: Android KitKat 4.4.4) (image) and as Jmol does not need any plugins. I'll add that it's through the Android device I identified the functionality to be JSmol (it says so in every "box", if you look closely). I have attempted to search for instructions for enabling JSmol, and though I have located the files seemingly needed (this .zip contains both Jmol and JSmol) I do unfortunately not have the technical skill to properly make use of them. So far there doesn't seem to be much (dumbed down) info of how to 'install it', most guides appear to focus on implementing it when creating webpages (not simply viewing them).

I have tested the example page (http://www.mhhe.com/physsci/chemistry/carey5e/Ch07/ch7-1.html) in Chrome and Internet Explorer as well. In the former it attempts to download all the models as individual files, whereas for the latter it doesn't even request a plugin. I currently have the latest Firefox version (40.0.2) and Java version (8, update 60).

If anyone could provide some help in this matter I would be most grateful.
Last edited by FoxBadgerWolf on August 29th, 2015, 9:00 am, edited 1 time in total.

LoudNoise
Moderator

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted August 24th, 2015, 5:26 pm

Moving to Web Development.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

Frenzie

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted August 28th, 2015, 1:06 pm

So basically you're looking for a (GreaseMonkey) userscript? Sounds kind of interesting, so I wrote up a quick proof of concept:

Code: Select all
// ==UserScript==
// @name        JSMol replacement
// @namespace   http://example.com
// @include     *
// @version     1
// @grant       none
// ==/UserScript==
'use strict';

var embeds = document.querySelectorAll('embed[src$=".pdb"], embed[src$=".xyz"]');

if (embeds.length > 0) {
   var jsmol = document.createElement('script');
   jsmol.onload = (function() {
      var embed;
      for (var i = 0; i < embeds.length; i++) {
         embed = embeds[i];

         //Jmol._isAsync = true; // doesn't work out

         var jmolInfo = new Object();
         jmolInfo[i] = {
            width: embed.width,
            height: embed.height,
            j2sPath: 'http://chemapps.stolaf.edu/jmol/jsmol/j2s',
            serverURL: 'http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
            disableJ2SLoadMonitor: false,
            disableInitialConsole: true,
            use: 'HTML5',
            script: embed.getAttribute('script') + '; load ' + embed.src,
            debug: false,
         };

         var replace = Jmol.getAppletHtml('myJmol' + i, jmolInfo[i]);

         // only works with jQuery, not with outerHTML or DOM replacement???
         $(embed.parentNode).html(replace)
      }
   });
   jsmol.src = "http://chemapps.stolaf.edu/jmol/jsmol/JSmol.min.js";
   document.head.appendChild(jsmol);
}


Took me way too long to figure out that only jQuery.html() works to activate the thing somehow, and I'd still like to know why…
Intelligent alien life does exist, otherwise they would have contacted us.

FoxBadgerWolf
 
Posts: 3
Joined: August 24th, 2015, 4:35 pm

Post Posted August 29th, 2015, 8:58 am

Finally it is working! Odd that it doesn't require those files anyway... I guess they are likewise intended for developers rather than users. Goes to show what I know. Thank you so much for your help, Frenzie!! To make sure other people can use this thread to solve this problem I'll make a simplified guide:

Enabling JSmol in Mozilla Firefox by using Greasemonkey:
1. Install the Greasemonkey addon for Firefox.
2. Once Greasemonkey has been installed, enter the addon's settings (easily done through "Manage User Scripts..." in the drop-down menu (image)) and select "New User Script...". (image)
3. Add a fitting name, namespace, and description of what the new script does (image). In this example, namespace is simply called "X", though it should preferrably be something unique to the user (info). Afterwards, click "OK".
4. The script window should now open. Alternately one may click "Options" for the new JSmol script, then click "Edit this User Script" (image). In either case, copy-paste the code provided by Frenzie into it. If it is your first time running Greasemonkey you may receive a message that copy-pasting is disabled to prevent malicious scripts; enter "allow paste" in the first entry to unlock this (image).
5. The script will however not work if "allow paste" is the first entry, so delete this after unlocking. The first line should read "// ==UserScript==" (image).
6. Click "Save" and close the script window. Make sure both Greasemonkey and the script is enabled (image).
7. JSmol plugins on webpages should now display correctly. Note that it might take a few seconds before they appear.

Frenzie

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted August 29th, 2015, 10:28 am

Actually I did use those files, but I linked to those from the example link you posted. Note that like I said this is more of a proof of concept than a completely fleshed out script, and I only tested it on that one page. But it should be easy to expand from there if desired. For licensing shenanigans, let's say it's GPLv3.
Intelligent alien life does exist, otherwise they would have contacted us.

FoxBadgerWolf
 
Posts: 3
Joined: August 24th, 2015, 4:35 pm

Post Posted August 29th, 2015, 11:36 am

You mean you downloaded files automatically by viewing Jmol content? I reckon Jmol works like that (the first time, at least), but what I meant is that no additional files beyond those seems to be needed. I initially had the impression that to make JSmol work, some files (perhaps the ones described here?) from this had to be put somewhere in a way that Firefox would recognize it as a plugin. Please elaborate if I've misunderstood something.

Frenzie

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted August 29th, 2015, 11:48 am

For pages that use the HTML5 modality of JSmol, you just need JSmol.min.js and j2s (A total of 12.6 MB, but only those parts actually needed will be downloaded to the client computer).

From: http://wiki.jmol.org/index.php/Jmol_Jav ... stallation

Try looking for those terms (JSmol.min.js and j2s). You'll notice they're present. Indeed, in an extension you could bundle the whole thing.
Intelligent alien life does exist, otherwise they would have contacted us.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest