-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
155 lines (120 loc) · 4.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<html>
<head>
<title>WEB Mol</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="resources/style.css"/>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 color;
uniform bool enableLights;
uniform vec3 ambientColor;
uniform bool enablePicking;
uniform vec3 directionalColor;
uniform vec3 lightingDirection;
varying vec4 transformedNormal;
void main(){
if(!enableLights){
gl_FragColor = vec4(color.rgb, color.a);
}
else{
float directionalLightWeighting = max(dot(transformedNormal.xyz, lightingDirection), 0.0);
vec3 light = directionalColor*directionalLightWeighting + ambientColor;
gl_FragColor = vec4(color.rgb * light, color.a);
}
if(enablePicking) {
gl_FragColor = vec4(gl_FragColor.x+0.2, gl_FragColor.y+0.2, gl_FragColor.z+0.3, 0.8);
}
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 normal;
uniform mat4 worldMatrix;
//uniform mat4 matrixRotation;
uniform mat4 projectionMatrix;
uniform mat4 worldInverseTransposeMatrix;
uniform vec3 translateVertex;
uniform vec3 scaleVertex;
varying vec4 transformedNormal;
void main(void) {
transformedNormal = worldInverseTransposeMatrix * vec4(normal, 1.0);
vec4 transformedPosition = vec4(position * scaleVertex + translateVertex, 1.0);
//transformedPosition = matrixRotation * transformedPosition;
gl_Position = projectionMatrix * worldMatrix * transformedPosition;
}
</script>
<script type="text/javascript" src="js/PhiloGL.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript" src="js/frustumCulling.js"></script>
<script type="text/javascript" src="js/atom.js"></script>
<script type="text/javascript" src="js/protein.js"></script>
<script type="text/javascript" src="js/proteinReader.js"></script>
<script type="text/javascript" src="js/jsonAminoAcids.js"></script>
<script type="text/javascript" src="js/renderizer.js"></script>
<script type="text/javascript" src="js/eventHandler.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/colorpicker/colorPicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
});
</script>
<script type="text/javascript">
window.onresize = resizeWindow;
</script>
<body onload="webGLStart();" bgcolor="black">
<div id="selectOption">
<p class="centeredImage">
<img src="resources/logoscritta.png" alt="WebMol logo" height="65%"/>
</p>
<input type="text" id="idProtein" />
<button type="button" onclick="downloadProtein()">Get Protein</button>
Visualization:
<select id="renderizerType" onChange="renderizerTypeChanged()">
<option value="ballandstick">Ball and Stick</option>
<option value="vanderwaals">Van der Waals</option>
<option value="stick">Stick</option>
<option value="lines">Lines</option>
<option value="backBone">BackBone</option>
</select>
Amino Acids:
<select id="proteinSelected" onChange="proteinChanged()">
<option value="Alanine">Alanine</option>
<option value="Arginine">Arginine</option>
<option value="Cysteine">Cysteine</option>
</select>
Models:
<select id="modelSelected" onChange="modelChanged()">
</select>
<input type="checkbox" id="viewBackBone"name="backbone" value="BackBone" onChange="backboneChanged()"/> View backbone<br />
<!--
<div id="info">
Objects: <span id="objects"></span> | FPS: <span id="fps"></span>
</div>
-->
<input type="text" id="colorId" value="#000000" onclick="colorPicker(event)" style="margin-top:5px;"/>
<input type="button" value="Change color" onclick="changeBackColor();">
</div>
<div id="divCanvas" style="float:left;">
<canvas id="webMolCanvas"></canvas>
</div>
<div id="infoAtom" style="visibility: hidden;" draggable="true">
</div>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="resources/loading.gif" alt="Loading"/>
</div>
</body>
<footer>
</footer>
</html>