User:Wayne Decatur/Converting Exported Proteopedia Pages from Jmol to JSmol
From Proteopedia
Java security has made working offline with Proteopedia pages more difficult. Macs running the current operating system have no options for even running Proteopedia pages offline at present because Jmol is based on Java and Java cannot access the Mac's local files at this time.
The process below provides a work around by converting the exported pages to run on a Javascript-based version of Jmol, called JSmol.
Note: at the moment the option to export pages from Proteopedia has been disabled because of the Java issues. Wayne Decatur 21:47, 10 September 2013 (IST)
Note: I have yet to look into making the popup button work. Presently that will not work in the resulting converted form, even if you turn Java on. I think it should be easy to fix at least for the Java version. Wayne Decatur 16:33, 11 September 2013 (IST)
Contents |
PREPARING
Need:
- The exported page from Proteopedia you want to convert.
- Currently, the ability to export pages is disabled in the Proteopedia toolbox and so you cannot produce this if you don't already have a set. Wayne Decatur 22:03, 10 September 2013 (IST)
- The exported page has to be from 2010 or later as I found this process doesn't work for pages created in 2009. It seems you need the pages made with Jaime Prilusky's exportPage version 1.80 or later. This information is noted in the 'index.html' file within the main folder of the exported page folder. Search for 'exportPage' within the HTML of the page. Those generated in 2009 do not list the version of the generator.
- Duplicate the folder containing the exported pages and add '_JSmol' to the end to distinguish it. If you skip this step you may destroy your exported pages and they may not ever work again. Plus you may need the original files as a source for making some of the 'extras' work.
- The current version of Jmol that includes JSmol.
- You can find that here.
- These directions were done with the current version available there and thus mileage may vary. Wayne Decatur 21:56, 10 September 2013 (IST)
- Download and unzip and then unzip the 'jsmol.zip' file within that.
CONVERTING: PART 1 - CONVERTING MOST OF PAGE
- Open the folder with the exported Proteopedia page and delete the 'Jmol' folder. (Actually, if you plan to restore the popup button to work as well, you should move 'Jmolpopup.html' up to the main folder before you delete the 'Jmol' folder. Then you can skip step 1 of restoring the Popup view below.)
- The exact details of thus step depend upon what version of the ExportPage utility generated your exported page.
If you don't have a 'java' folder in the folder with the exported Proteopedia page, then copy (hold down 'ctrl' as you drag on a Windows machine or the 'option' button on a Mac machine) the 'java' folder from within the 'jsmol' folder of the collection of Jmol files you have.
If you have one, open the 'java' folder in the folder with the exported Proteopedia page. All that should be in there is 'MageJava.jar'. Then open the 'java' folder in the 'jsmol' folder in the Jmol files you have and copy (hold down 'ctrl' as you drag on a Windows machine or the 'option' button on a Mac machine) all the contents from this 'java' folder to the one into the 'java' folder in the folder with the exported Proteopedia page. This should add a lot of files along with 'MageJava.jar' now. - Go back up to the 'jsmol' folder in your downloaded Jmol set of files and go back up to the main folder in your exported Proteopedia page set of files. Copy the entire 'j2s' folder in the Jmol file set into the main folder of the exported Proteopedia page
- Open the 'jsmol' in the Jmol files you have and copy 'Jmol2.js' into the main folder of the exported Proteopedia page.
- Rename the 'Jmol2.js' file to 'Jmol.js'
- Copy the 'JSmol.min.js' file from the Jmol set of files into the the main folder of the exported Proteopedia page.
- Open in a text editor 'index.html' from the main folder of the exported Proteopedia page.
- Before the javascript calls at the top 'index.html', which depending on the version of the ExportPage utility that generated the page is after the line
<link rel="stylesheet" type="text/css" href="Files/main.css" />
or
<link rel="stylesheet" type="text/css" href="Files/main.css" /> <link rel="stylesheet" type="text/css" href="Files/Common.css" />
, you should paste the following text
<script type="text/javascript" src="JSmol.min.js"></script>
- 9. Scroll down a few lines to
<script type="text/javascript" src="Jmol/Jmol.js"></script>
and change that by removing 'Jmol/' to read
<script type="text/javascript" src="Jmol.js"></script>
- 10. Scroll down a few more lines to
jmolInitialize("Jmol/", window.location.protocol == "file:");
and change that by replacing 'Jmol' with a period to read
jmolInitialize(".", window.location.protocol == "file:");
- 11. Save the 'index.html' file.
- 12. Now open the 'index.html' file in your browser, preferably Firefox. Firefox is the only browser that will work on a Mac running the Mountain Lion operating system. The structure windows should be active and you should be able to click on scenes.
- Even if you did the process correctly, if your Proteopedia exported files are too old (before 2010 it seems; see note under Preparing), you'll get the error
jmolAppletInline not implemented
CONVERTING: PART 2 - THE EXTRAS
Part 1 above may be enough for what you need to do. But you may want to continue on so everything works without the need for Java.
RESTORING THE POPUP VIEW
Converting the exported Proteopedia page so that the popup button below the structure window works again without Java requires a few extra steps.
This guide was written based on a version of the export from 2012 and so the process may not be exact for all versions.
- You will need the original folder of the exported Proteopedia and you will need to locate the 'Jmolpopup.html' file. In the set of files generated in 2012 with Jaime Prilusky's exportPage version 1.86, I found it in the 'Jmol' folder that is within the main folder. Copy the 'Jmolpopup.html' file to the main folder of the files you are converting to work with JSmol. (The folder you want to copy to ends in _JSmol if you followed my suggestion.)
- In a text editor open the 'Jmolpopup.html' you just copied into the main folder of the files you are converting to work with JSmol. (This folder ends in _JSmol if you followed my suggestion.) You need to edit that similar to the manner you edited the 'index.html' above following steps 3-5 that are next..
- Add the line
<script type="text/javascript" src="JSmol.min.js"></script>
below the title reference at the top of the html so that it reads
<title>Jmol Popup Model</title> <script type="text/javascript" src="JSmol.min.js"></script> <script type="text/javascript" src="Jmol.js"></script> <script type="text/javascript">
- 4. Next change
jmolInitialize("../Jmol/", window.location.protocol == "file:");
(should be around line 47) so that it reads
jmolInitialize(".", window.location.protocol == "file:");
- 5. Save the edited 'Jmolpopup.html' file.
- 6. Now in a text editor open, 'Support.js' that is found within the 'Files' folder, and change line 16 from
var url = "Jmol/JmolPopup.html";
so that it reads
var url = "JmolPopup.html";
That way it will point to the new location of the 'Jmolpopup.html' file.
- 7. Save the edited Support.js' file.
- 8. Go back up a level to the main folder and open the 'index.html' file with Firefox. Click on the 'Popup' button below the structure window and it should work now.
RELATED
If you take what you made and serve it online, it will be locked into running with the Javascript-based JSmol. If you want put this up online to run only with Java-based Jmol or run it offline with Java (which is not a possibility of a modern Mac), then you would edit the 39th line in the 'Jmol.js' file from
use: "HTML5", // could be JAVA or HTML5
to read
use: "JAVA", // could be JAVA or HTML5
