Webgl and HTML5 Interactive Protein Structure Tutorial WHIPST
Total Page:16
File Type:pdf, Size:1020Kb
Generating Interactive Protein Structure Tutorial Using WebGL and HTML5 _______________________________________ ________________________________________________________________________ Elizabeth Montes April 25, 2014 CS 698 – Master’s Project in Computer Science California State University San Marcos (CSUSM) Master’s Project Committee Members: Dr. Xiaoyu Zhang, CSUSM Department of Computer Science Dr. Ahmad Hadaegh, CSUSM Department of Computer Science Dr. Sajith Jayasinghe, CSUSM Department of Chemistry and Biochemistry ii DEDICATIONS I dedicate this project to the memory of my mother who has been an inspirational human being and a great example of strength, courage, passion and love; to my father who is a great example of hard work and loyalty to his family; and to my siblings who are always there for me and who have become my strength in these past years; and to my nieces and nephews who always fill me with joy. iii ACKNOWLEDGEMENTS I would like to thank each and every committee member for their dedication of time, advice, supervision, feedback and encouragement required for the completion of this project. This project would not be possible if not were for their guidance, encouragement and expertise. iv ABSTRACT Proteins are large biological molecules of long polymers of amino acid residues, typically containing thousands of atoms and consisting of a uniform repetitive backbone and variable side chains attached to each residue. They fold into complex 3D structures to perform a vast array of functions within living organisms. In order to help students to better understand the protein structures, it is important that the student can visualize the details of 3D structures, and manipulate them interactively to focus on aspects of interest. Recent developments in web technologies such as WebGL and HTML5, available in a wide range of browser on different platforms, made them the perfect choice to build cross-platform interactive tutorials for learning protein structures. This project, WebGL and HTML5 Interactive Protein Structure Tutorial Generator (WHIPSTG: http://montes.co.nf/whipst.html), made it possible for biochemistry or biology professors to easily generate web tutorials that can facilitate students’ learning of protein structures. The generated tutorials allow the user to interact with protein visualization in 3D, answer true/false questions and multiple- choice questions, and read text. WHIPSTG uses GLmol – a 3D molecular viewer based on WebGL and JavaScript – to visualize and interactively manipulate the 3D protein. For the scope of this project, GLmol has been modified to include functionality for highlighting amino acids and highlighting a part of a protein sequence. I developed a web interface that provides the user with a short introduction about the project, the ability to easily generate an interactive tutorial and various examples of generated tutorials. v Table of Contents DEDICATIONS .................................................................................................................iii ACKNOWLEDGEMENTS .............................................................................................. iv ABSTRACT ......................................................................................................................... v 1. INTRODUCTION........................................................................................................ 1 2. BACKGROUND .......................................................................................................... 3 2.1 WebGL ............................................................................................................................ 3 2.2 HTML5 ........................................................................................................................... 3 2.3 JavaScript ....................................................................................................................... 4 2.3.1 Three.js ........................................................................................................................ 4 2.3.2 jQuery .......................................................................................................................... 4 2.3.3 jQuery UI ..................................................................................................................... 5 2.4 Related Work ................................................................................................................. 6 3. DESIGN ........................................................................................................................ 7 3.1 Web Interface Description ............................................................................................ 7 3.2 Tutorial Description ....................................................................................................... 8 3.3 Web Interface View ..................................................................................................... 11 3.3.1 Web Interface Mapping Diagram .............................................................................. 11 3.3.2 Web Interface Website Flow ..................................................................................... 12 3.3.3 WHIPSTG Interaction with the User ......................................................................... 25 3.3.4 WHIPSTG Data Flow ................................................................................................ 29 3.3.5 Widget Information ................................................................................................... 31 3.4 Tutorial View ................................................................................................................ 36 3.4.1 Tutorial Mapping Diagram ........................................................................................ 36 3.4.2 Tutorial Website Flow ............................................................................................... 37 4. IMPLEMENTATION ............................................................................................... 39 4.1 Web Interface Implementation ................................................................................... 39 4.2 Tutorial Implementation ............................................................................................. 50 5. TEST CASES ............................................................................................................. 65 5.1 Test Case Create a WHIPSTG Tutorial .................................................................... 65 5.2 Test Case GLmol Highlight Amino Acids PDB ID 2POR ........................................ 74 5.3 Test Case GLmol Highlight Sequence PDB ID 2POR .............................................. 79 5.4 Negative Test Case WHIPSTG Missing Information ............................................... 82 5.5 Negative Test Case GLmol Highlight Amino acids PDB ID 1111 ........................... 85 6. CONCLUSION AND FUTURE WORK ................................................................. 88 7. REFERENCES ........................................................................................................... 89 APPENDICES.................................................................................................................... 92 1. whipst.html ................................................................................................................. 92 2. file.html ....................................................................................................................... 99 3. whipst.js .................................................................................................................... 103 4. GLmol.js ................................................................................................................... 118 5. widgetFunctionality.js ............................................................................................. 131 vi 6. whipst.css .................................................................................................................. 133 7. simple.css................................................................................................................... 141 8. left.css ........................................................................................................................ 145 9. right.css ..................................................................................................................... 151 vii List of Figures Figure 1 Web Interface ......................................................................................................... 8 Figure 2 WHIPSTG Simple Layout ...................................................................................... 9 Figure 3 WHIPSTG Left Layout ........................................................................................ 10 Figure 4 WHIPSTG Right Layout ...................................................................................... 11 Figure 5 WHIPSTG Web Interface Mapping Diagram ...................................................... 12 Figure 6 Web Interface Welcome Tab ................................................................................ 13 Figure 7 WHIPSTG Tab ..................................................................................................... 14 Figure 8 Fill Out True False Question Widget ................................................................... 16 Figure 9 Adding GLmol Widgets ......................................................................................