Учебная страница курса биоинформатики,
год поступления 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. Отображения молекул :
Консоль для ввода команд можно вызвать следующим образом: RMB -> Console
- Для остановки выполнения скрипта можно воспользоваться командой ‘pause’
- Для продолжения выполнения скрипта можно воспользоваться командой ‘resume’
Кнопку с произвольными командами можно добавить способом, аналогичным размещению апплета. Для этого необходимо в функцию загрузки апплета (после строчки <!-- Сustom commands goes here -->) добавить свои команды в формате
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:
- Чтобы узнать, как называется лиганд можно посмотреть содержимое PDB-файла или ознакомиться с его записью на странице PDB. Атомы лиганда записаны в записях HETATM.Отображение в шаро-стержневой модели можно получить, например, комбинацие команд ‘wireframe 80’ и ‘cpk 120’.
- Выделить атомы остова можно командой ‘select backbone’. Водородные связи расчитать командой ‘hbonds calculate’ и затем ‘hbonds 20’. Чтобы узнать номера остатков, которые надо выделить, создайте изображение в виде ‘backbone 0.3’, нажмите правой кнопкой мыши на окне апплета, выберите Консоль (Console) и кликайте на соответствующих остатках.
- Чтобы выделить диапазон остатков, можно воспользоваться командой ‘restrict’, например, так: ‘restrict 20-30:a or 45-55:a’, где a – имя цепочки, а 20--30 – номера остатков
3. Параметры водородных связей между остовными атомами во вторичной структуре.
Для того, чтобы измерить эти параметры, щелкните правой кнопкой мыши на окне с апплетом, выберите пункт Console, а потом –- Измерения (Measurements).