Kodomo

User

Учебная страница курса биоинформатики,
год поступления 2017

Подсказки к практикуму "Визуализация молекул"

1. Создайте web-страницу с Jmol-апплетом по следующему шаблону:

Для того, чтобы разместить HTML5 апплет JSMol в составе вашей веб-страницы, поместите следующие фрагменты кода на языке JavaScript:

В секцию <HEAD></HEAD>:

   1 <!-- Load JSMol minimal suit from external server -->
   2 <script type="text/javascript"
   3 src="https://vsb.fbb.msu.ru/share/jmol/jsmol/JSmol.min.js">
   4 </script>
   5 
   6 
   7 <script type="text/javascript">
   8 <!-- Define basic settings for JSMol applet -->
   9 var Info = {
  10     <!-- Use external resources for JSMol execution -->
  11     serverURL: "https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
  12     j2sPath: "https://vsb.fbb.msu.ru/share/jmol/jsmol/j2s/",
  13     <!-- Activate HTML5 mode -->
  14     use: "HTML5",
  15 
  16     <!-- Basic visual settings -->
  17     width: 600,
  18     height: 600,
  19     color: "#eeffff",
  20     script: "load =1xyz"
  21     };
  22 
  23 <!-- After full page will be loaded -->
  24 $(document).ready(function(){
  25   <!-- Create JSMol applet with name 'JSMol' and settings from Info -->
  26   <!-- And put in element with id='jmol' -->
  27   $("#jmol").html(Jmol.getAppletHtml("JSMol", Info));
  28   <!-- Сustom commands goes here -->
  29   });
  30 </script>

PDB код 1xyz в строке defaultModel надо заменить на ваш.

В строках width: 600, height: 600, color: "#eeffff" можно регулировать размер окна апплета и цвет фона.

В секции <BODY></BODY> необходимо разместить элемент в id='jmol' (окно апплета). Например так:

   1 <table border = 2pt> <tr> <td id='jmol'> </td> </tr> </table>

или так:

   1 <div id='jmol'></div>

Список других настроек апплета можно прочитать в документации. Особенно вас может заинтересовать секция Model loading

PDB - банк структур биомолекул.

2. Отображения молекул :

   1 $("#<button_id>").html(Jmol.jmolButton(JSMol, '<comand>', '<text on button>'));

а в секции <BODY></BODY> добавить элементы с соответствующими <button_id>.

   1 <div id='<button_id>'></div>

Например, чтобы добавить кнопки "Start script" и "Pause", соответственно запускающие и продолжающие выполнение скрипта, нужно модифицировать фукнцию загрузки апплета следующим образом:

   1 <!-- After full page will be loaded -->
   2 $(document).ready(function(){
   3   <!-- Create JSMol applet with name 'JSMol' and settings from Info -->
   4   <!-- And put in element with id='jmol' -->
   5   $("#jmol").html(Jmol.getAppletHtml("JSMol", Info));
   6   <!-- Сustom commands goes here -->
   7   <!-- Add button executing script located on your webpage-->
   8   <!-- JSMol is name of your JSMol applet from previous function -->
   9   $("#jmolStart").html(Jmol.jmolButton(JSMol, 'script http://kodomo.fbb.msu.ru/~<user>/<termX>/<prX>/<script.spt>', 'Start script'));
  10   <!-- Add button executing command "resume" -->
  11   <!-- And put in element with id='jmolResume' -->
  12   $("#jmolResume").html(Jmol.jmolButton(JSMol, 'resume', 'Resume'));
  13   });

а в секцию <BODY></BODY> добавить элементы с соответствующим id:

   1 <div id='jmolStart'></div>
   2 <div id='jmolResume'></div>

3. Параметры водородных связей между остовными атомами во вторичной структуре.

Для того, чтобы измерить эти параметры, щелкните правой кнопкой мыши на окне с апплетом, выберите пункт Console, а потом –- Измерения (Measurements).