CheMarkup Slides and Notes: A Presentation Container for the Virtual Molecular Model Kit

The Virtual Molecular Model Kit (VMK) was designed as a classroom presentation tool that could provide greater versatility than a classic wooden or plastic model kit. During the development phase of the VMK, the authors of this paper have focused on the technical aspects of the kit, including a recent conversion from Java Jmol to HTML5/JavaScript Jmol (JSmol). In this current paper, the authors get back to VMK basics. The VMK is a communication tool for discussing molecules. This paper describes CheMarkup, a presentation container for the VMK that allows the VMK to become a more complete communication tool. CheMarkup makes use of HTML5 Local Storage to allow the creation of presentations that contain editable slides, VMK models, JME structures, images, and more. Entire presentations can be distributed to students in text format that comes to life when loaded into browser memory via the CheMarkup browser application. The editable presentations are retained in local browser memory until deleted by the browser user.

The Jmol Virtual Molecular Model Kit (VMK) was introduced to this Newsletter in 2011 (1). Following the introduction of a JavaScript/HTML5 version of Jmol (JSmol) in 2013 (2), the VMK was rewritten as an HTML5 Web application. Although the VMK is a stand alone application, the transition to HTML5 has encourage the authors of this paper to seek ways of using HTML5 to improve VMK as a communication tool. This current paper introduces the CheMarkup application. CheMarkup is a Web browser application that merges slide based discussion, note taking, and the VMK into a single application.

CheMarkup Overview

CheMarkup is a tool for discussing molecules. It is the communication container for the VMK. Although CheMarkup has a slideshow component, it does not represent an attempt to compete with PowerPoint and other slide presentation applications! In the context of discussions that focus on molecules, here is what CheMarkup can do on a Web browser platform:

1) It provides a primitive but reasonable WYSIWYG editor for the preparation of slides related to the VMK.2) It provides a Web based mechanism for instructors to give these slides to students prior to a class meeting.3) It puts these slides into the local editable persistent memory (local storage) of students’ browsers.4) It gives students the opportunity to annotate slides rather than copy slides into their notes. The annotated slides are retained in local storage of the student’s browser.5) It provides easy access to the VMK at any point during this communication process.6) I allows VMK Jmol models, JME structures, and VMK data to be rapidly incorporated into slides, notes, and local storage.7) It provides a pathway for student VMK input to be shared with an entire class in real time.

While CheMarkup is not as powerful as standard slide presentation applications, it is designed for discussions related to molecules. Standard slide applications cannot bring molecular intelligence to class room discussions. CheMarkup can.

Since the VMK is part of CheMarkup, it should be noted that CheMarkup uses the following HTML5 applications:

CheMarkup and the VMK are feature rich applications. In an attempt to make the details of this paper a bit easier to follow, a video overview is being appended to this text overview. The authors hope that this video lays a foundation for the body of the paper

CheMarkup’s power is its ability to remember - slides, notes, annotations, models, drawings, and images. HTML5 local storage (6,7) is CheMarkup’s memory.

Author’s Note: Reference 6 is a good HTML5 local storage primer. Reference 7 is an extensively referenced discussion.

HTML5 browser local storage is similar to browser cookie storage. Web page data is stored in local browser memory as database key/value pairs. There are several important differences, however.

Local storage is more secure than cookie storage. In the case of local storage, no information can be sent from the page to the server. Local storage also provides much more memory space - at least 5MB per page origin with total of 500MB for multiple page origins. Finally, the use of the data on this page will not affect website performance.

It is important to note that local storage is browser/computer specific. On a given computer, each browser will store information for a given page as storage for that browser only. Likewise, information stored for a given page by Safari on MyMac1 will not be available in Safari on MyMac2. Transferring information from one computer to another will be discussed in a separate section of this paper.

There is an important caveat associated with the expression “per page origin” above. The authors are attempting to make most of the features of CheMarkup accessible by running the application locally via html file double-click (url file:///) as well as by running the application via the domain url (htp://chemagic.com). In the latter case, chemagic.com would be the page origin that gets up to 5MB of space. When pages are run locally by file double-click, all applications that a user might be running locally share the same page origin - i.e. the same 5 MB of maximum local storage space per page origin.

Browsers

Local storage is now an HTML5 standard. It is supported by all major browsers. When using HTML5 applications in general, it is generally a good idea to use the latest browser version. CheMarkup makes use of multiple HTML5 applications and browsers can be fussy. At this point, the authors see the best CheMarkup performance with Safari, Firefox, and Chrome.

To Be Continued via in CheMarkup

The authors feel that the best way to present the body of this paper is to use a slide presentation in CheMarkup itself. The process of viewing this slide presentation will follow the same path that a student would follow in downloading and viewing a slide presentation prepared by an instructor or another student. Two URLs are provided to cover the possibility of server down issues during this Newsletter presentation:

Consistent with the intent of running through the full student experience, the links above will load CheMarkup with a blank slide set, unless, of course, the user has played with the application previously. In that case, the link will load that last slide set used:

Figure 1

Figure 1 shows the initial CheMarkup view if the page has not been loaded previously. Normally, a user would click the Load button to load a text file supplied by the slideshow author. For the purpose of this Newsletter presentation, the Help button will be used to load a special CCCE slideshow directly from the CheMagic server. During normal usage, a user's experience with the Load button would be similar with the exception that the Load button produces a dialog box that asks for a local slide set text file. So click the chemagic.com/vmknotebook.htm link, give the page time to finish its initial load, and click the Help button. After you do that, we’ll see you in the slide show.

Possible Problems

If you have problems meeting us inside the slide show, here are some possible reasons:

1) You must have cookies and local storage turned on.2) You may have problems with your browser and HTML5. Use the most recent version of a given browser.3) Consider using Chrome, Firefox, or Safari as your browser for this exercise.

Is there a way to site/reference a specific slide in the slide show? For example, even a slide number (so you could tell the class to go to slide "x"). It would be nice to be able to "jump to a slide", can we do that? Now, I am on the slide that say's "CheMagic CheMarkup - Local Storage 2", and my question deals with model1. You state "A model of phenol has been put in VMK memory location model1 Click either model1 link to go to this model in the VMK."

The first of your's has slide title "blank", the second I think is the "help" screen. When I go from slide show to the VMK (Virtual Model Kit), click edit and "review", I see "model storage is empty" in the first, and there are ones in the second. So the local memory is different for each tab?

I can then edit a molecule, and save it with a number, 1-50. How do I check to be sure there is not already a molecule with that number? I can toggle through one at a time with the "review" option, but how can I get a quick big picture?

HTML5 local storage can be confusing at first - no question about it! The best overall rule that I can offer is this: HTML5 local storage is browser/domain/computer specific. By way of example, I'm currently working on my MacBook Pro with Safari set to chemagic.com/vmknotebook.htm. Any work I do will only be saved for and reloadable in that specific combination - Safari/CheMagic.com/MyMacBookPro.

Clicking the Help button actually loads a special help slide-set. Once you load a slide-set, then any changes that you make will be saved to the specific combination referenced above. All of this means that backup and transfer operations are an important part of the work/sharing process.

Answers to Specific Questions (Hopefully in Order Asked):

1) The Slide## button in the upper right is a 2-fer button. It marks the current slide number. Clicking the button allows jumping to any slide.
2) CheMagic CheMarkup - Local Storage 2: Per above, you might note that this is slide 06. As to your question it's an excellent example of the above "overall rule." If your tabs were all set to CheMagic.com, then all tabs would be working with the same local storage. The list.edu domain, however will be using different storage. From your description, it sounds like you have not clicked Help on ilstu.edu yet.
3) At pressent, the only big picture for drawings and models is the Review options. A snapshot big picture is an excellent idea. I have to think about a way to implement that.
4) Though your final point is not a question, I appreciate the compliment. HTML5 local storage is a fairly new concept. I'm excited to have a platform to discuss its educational possibilities as well as to discuss our specific creation - VMK/CheMarkup. The idea of an instructional Web page of any type having a 5MB memory is, in my opinion, flat out exciting.

Questions:
I can't tell you how much I enjoyed reading your paper, I can already see how this can change teaching chemistry in classrooms around the globe. I have a few questions about the notebook on CheMagic if the notebook is browser domain and computer specific, if I have a gmail will I be able to pull up my recently edited slides if I sign into my account on another computer? Also will the load option on the notebook work with any kind of formatted document or will it only work for .txt for a text document?

Suggestions:
As a fellow web editor/developer myself I understand the importance of making the website very user friendly. I noticed in the first part of your video demo while going through the usage of all toggle functions like L, C and R which represents the left, center and right alignment. I would recommend doing what Microsoft word does and use pictures to represent the different options because until I saw the video I wasn't aware of of L, C and R buttons. The same with the subscript and superscript it would be much easier for users if they saw a picture of the action, such as an A^a with the little a above or below the A, so it can better improve navigation of the website.

With regard to your first question, because of the domain/browser/computer specificity, backup is essential. The bad news is that I need to find a way to make this easier. As it stands, the back-up is handled by copy/paste. I'd like to work out some kind of save option. The good news is that backup is pure unadulterated text. For those who want the technical details it's a JSON file of the information stored in a simple key/data-item text database. While it must be handed by copy/paste, once it's in a .txt file, it's pretty easy to load. Scenario:

1) Instructor creates a slide-set. Remember a slide-set is slides, images, drawings, and models - all encoded in a simple .txt file.
2) Instructor emails the .txt file to students as an attachment (also dropbox, gDrive, etc).
3) Once students have the .txt file on the computer, all they need to do is click the Load button in CheMarkup

As a point of information, the Help button is a special "Load" button that loads a .txt file from my server.

I think the above answer covers your second question also. The backup must be the JSON text created by CheMarkup (HTML button screen). The neat thing about this is that .txt is probably the single most common file that computers can agree on.

Your interface points are well taken, and I know that I need to go with graphic icons. My problem is that every time I try to create them, they look so tacky! I was one of those kids who could not keep the crayons inside the lines. Point well taken, however. I need to do something about the interface.

I am a bit unclear on how an instructor and their student's would use the text file, of a slideshow. Especially if they are disconnected from the web. Could you send me a sample of a text file an instructor could email to their students. I can then post it as an attachment to this paper. That would give us something to play around with after the discussion is over.

One of the things that is confusing me is if we can use this without internet connection, how do we load it into CheMagic, when we are accessing CheMagic over the internet. Also, if an instructor went through an exercise and for example downloaded 3 spectra for 3 different compounds, is that stored in the text file, and are they available without internet connectivity? Or are they only available on the computer that was used when they are downloaded. I guess I am asking if that text file pulls stuff from local memory. Finally, could you provide some instructions on how to generate the text file?

Running CheMarkup while not connected to the Internet requires the CheMarkup folder on the local computer. The folder contains all supporting files, including the Jmol package. It's ~30 MB zipped down to 11 MB. I'm not ready to provide this yet, but I will be ready in early January.

As to the specifics of distribution and running locally, I think I'd like to make a video to show this. I can, of course, run this on my computer without the Internet to illustrate the entire procedure in the video.

Including spectra in a local storage slide-set is an idea that came to me during this discussion. I'll try to get that ready for the video. During the video, I'll make a 5 slide-set presentation and run trough the entire create/save/distribution/reload process.

Obviously, this paper will close before I complete this. Can I still post the reference to the video after the paper closes?

I am sort of asking you two different types of questions here.
First, could you give us a bit on what is going on behind the scenes with respect to the "Append On" feature that allows me to type the name of a molecule and populate it the display with it, and then how you are getting IR, MS and NMR spectra.

The second, is that you only seem able to get spectra for one compound at a time. It would be nice if we could take a molecule, duplicate it, change a feature, and then see how the spectra changed. That is, compare the spectra of the two molecules, on the same slide. I see how we can do that with the presentation slides and notes, by making two slides, but it would be nice if it could be done on one.

Also, last night, while at home, I managed to get this working within a PowerPoint presentation, and thought I had dropped the slides into a dropbox, so I could test it on a different computer before sharing it. But this morning it was not there. At home I have Office 2010 and it was easy, at work I have Office 2013, and have spent 2 hours this morning trying to do what took me 10 minutes last night. Does anyone on the list know how to embed a webpage into Powerpoint 2013? I have tried doing this through the Microsoft webpage option in the "developer", and with the "LiveWeb" add-on, but both failed. Many people lecture with PowerPoint, and it would be great if we could embed the VMK into our slides.

But it was cool. I was able to show a molecule, pull up IR and MS spectra, edit the molecule, and get the new spectra, all from within my PowerPoint slideshow. Sort of a slideshow within a slideshow.

Jmol can load multiple models into the same window (frame in Jmol jargon). At a technical level, Jmol is simply appending the molfile of the second model to the molfile of this first. The VMK sets this up so that the atoms of the appended model are outside of bonding range of the atoms in the original model - i.e. two separate models appear in the window. This process can be repeated, and the VMK is set up to manipulate each model separately using the Move button.

At an application operational level, my poor users are at the mercy of my interface writing shortcomings! Consequently, I'm always open to suggestions. With respect to the Append On/Off button, here are the important functional points:

1) Like all of our toggle buttons, the display on the button shows what the next click will do. Now that I think about it, that may be counter intuitive. A light switch (the quintessential toggle) says ON when it's ON!
2) When append is ON (Switch says Append OFF - Yikes!), the next model will be appended. This is true even if the next model is drawn using the Draw button.
3) It seems to me that I seriously need to rethink point 1!

You can see why I wanted to segregate this response from the other questions you asked. On to Response to Bob 2.

The VMK makes data connections to a number of data resources. From inside Jmol and the VMK, these data queries must start with the SMILES of the model in the window. Thanks to Bob Hanson (Jmol project director), Jmol is a master of SMILES creation and manipulation. Here is how VMK talks to the major data resources it uses using chemical identifiers like SMILES:

Item 4 is extremely important. It translates Jmol SMILES into other important chemical compound query identifiers - e.g. InChI for NIST. As far as NIST is concerned, NIST is a limited database. After SMILES to InChI conversion by Resolver, VMK says to NIST, "May we please have the spectrum image for InChI-OfCompound." NIST says yes of no.

OK, I'm going to brag a bit here. NIST does not have much in the way of query application interfaces. What VMK really does is snoop around through NIST webpage HTML until it finds a page where asking the question is worthwhile. We are not talking normal search procedures here.

NMRDB.ORG is marked with an asterisk because this is an ongoing addition to VMK. The conversion of NMRDB.ORG from Java to HTML5 was a multi-nation project initiated by Bob Hanson. NMRDB.ORG computes the HNMR directly from a SMILES. This (HTML5 version) is fairly recent stuff, and I'm still having problems making the best connections. When I get this fixed you will see that NMRDB.ORG is wonderful!

As to the comparison of IRs, right on! This is exactly what I want to do with these spectra, and this is on my todo list. I think I will ultimately do this inside CheMarkup. I see CheMarkup and VMK becoming a single application. The reason for this is that VMK has a lot to say. It just needs a place to say it - CheMarkup.

Otis,
instead of pulling GIF's from NIST why not the spectra in JCAMP-DX format?
JSmol/JSpecView have merged in the HTML5/JavaScript version and so it is possible to display the actual spectrum rather than show a picture.
For NMR with NMRDB it is possible to return the simulated H-NMR with annotations from JSME/JSmol/JSpecView so that clicking on an H shows the peak or clicking on a peak highlights the H.

I'll take care of the easy question first - NMRDB: Once I get my data connection issues worked out, the full NMRDB capability will be in place. Currently, I'm having some problems with my SMILES query string that is sent to the new HTML5 NMRDB page. Having said this, the communication process here involves numerous servers in different parts of the world. It could take some time for this all to work smoothly.

Your spectrum data/display suggestion is a good one, and I've considered using the NIST JCAMP-DX files. There are advantages to both approaches, and for now the "images" win out in my mind. Here's my thinking:

1) By not exposing the Jmol "in house" JSpecView, I am not inserting another interface learning curve into the VMK interface.
2) I'm not sure of this, but it may be that JSpecView has a display-only mode. This would negate the advantage of item 1 if VMK was displaying a GIF or JPEG. It's not. It's displaying SVG files, and they have all the point data of JCAMP files. I'm reducing size, but the data is all there.
3) These SVG files are text files that browsers know how to render. Want to have some fun? Try this:

OK, I being more than a bit glib here, but if we use the full name, Scalable Vector Graphics, it's interesting to note that browsers really have JSpecView like capabilities.

For me, the real fun here is going to be the next several weeks. CheMarkup can hold these SVG text files in local storage. This means that CheMarkup can remember and render NIST spectra - MS and IR. And this means...

That I'm going to be able to deliver on Bob's suggestion about providing spectra comparisons.

While all of this has been on my mind, it never quite came together the way it's coming together in my mind now as I write this note. I elected the SVG over the NIST offered GIF files for exactly the reasons that I expressed above. But it was the questions expressed in this discussion that made this all come together in a useful way, an "of course" moment if you will. Bob, your baby is not just an information exchange. It's a catalyst to innovation. I suspect other participants already knew this.

Otis,
some confusion here, since SVG files are not used in the display of JCAMP-DX data files in JSMol/JSpecView
There is an EXPORT available for an SVG document but that is the extent of SVG coverage.
A typical GIF file is generally much larger than a JDX file, especially when it is expected to be able to be expanded without significant pixelation.
Having live data means it is possible to do Trans-Abs conversions or get peak lists etc., features built in to JSpecView.

I agree completely with your views here. While the point data is in the SVG file, you cannot manipulate or summarize it in a browser - just display it or resize it. For manipulation you would need an application like JSpecView using JCAMP files.

Inside VMK, I think I'm inclined to keep the quick SVG display only. However, providing a link on that VMK display screen to open a separate tab with JSpecView displaying the JCAMP data is doable and a good idea. This would be consistent with the way I handle NMRDB.ORG analytic display in a separate tab.

I'm interested in anything you and other ccce participants know about embedding VMK in anything. At the webpage level, I'm using iFrames to do this, and there are cross domain issues. I'm not a ppt user, so I'm not sure what type of security issues you might encounter with ppt.

At the level of webpage embedding, putting VMK into a blog is fairly straight forward with iFrames:

Finally, CheMarkup/VMK will run locally by html file double click. I am working on wrapping this all into a zip file application package. Some browsers must be set properly to do this, but it's doable. This means that you do not need an Internet connection to run this. Without internet connection, you cannot contact databases, but that's where CheMarkup comes in. The data that a user might want during a presentation is all stored in Local Storage. file:/// is just another domain.

Without going into technical details, there are some advantages to running CheMarkup/VMK locally.