-
Notifications
You must be signed in to change notification settings - Fork 3
/
openhuman.html
169 lines (157 loc) · 7.86 KB
/
openhuman.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!--/*
* Copyright 2009 Rohit Pidaparthi
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
* Author: Rohit Pidaparthi <[email protected]>
*
*/ -->
<html>
<head>
<title>Open Human o3d</title>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen"></style>
<!-- Set the path to the c3dl library and load the script -->
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="application/javascript" src="js/jquery-1.3.2.min.js" ></script>
<script type="application/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<script type="application/javascript" src="interface1.2/interface.js"></script>
<script type="application/javascript" src="js/ohjs/o3d_main.js"></script>
<script type="application/javascript" src="js/ohjs/uielements.js"></script>
<script type="application/javascript" src="js/ohjs/camera_functions.js"></script>
<script type="application/javascript" src="js/ohjs/hud.js"></script>
<script type="application/javascript" src="js/ohjs/interaction_functions.js"></script>
<script type="application/javascript" src="js/ohjs/labels.js"></script>
<script type="application/javascript" src="js/ohjs/model_functions.js"></script>
<script type="application/javascript" src="js/ohjs/model_highlighting.js"></script>
<script type="application/javascript" src="js/ohjs/picking_functions.js"></script>
<script type="application/javascript" src="js/ohjs/visibility.js"></script>
</head>
<body oncontextmenu="return false;" onload="init();" onunload="uninit();">
<!--
oH embeds the code for some effects(shaders) inside this hidden textarea.
Effects contain the functions that define
the vertex and pixel shaders used by shapes in oH.
-->
<!-- Don't render the textarea -->
<div style="display:none">
<textarea id="fx" name="fx" cols="80" rows="20">
// The 4x4 world view projection matrix.
float4x4 viewProjection : WorldViewProjection;
sampler texSampler0;
// input parameters for our vertex shader
struct VertexShaderInput {
float4 position : POSITION;
float2 texcoord : TEXCOORD0;
};
// input parameters for our pixel shader
// also the output parameters for our vertex shader
struct PixelShaderInput {
float4 position : POSITION;
float2 texcoord : TEXCOORD0;
};
/**
* Vertex Shader performing basic viewing transformation.
*/
PixelShaderInput vertexShaderFunction(VertexShaderInput input) {
/**
* We transform each vertex by the view projection matrix to bring
* it from world space to projection space.
*
* We return its color unchanged.
*/
PixelShaderInput output;
output.position = mul(input.position, viewProjection);
output.texcoord = input.texcoord;
return output;
}
/**
* Pixel Shader
*/
float4 pixelShaderFunction(PixelShaderInput input): COLOR {
return tex2D(texSampler0, input.texcoord) + float4(0.2, 0.2, 0.0, 1.0);
}
// Here we tell our effect file the functions which specify our vertex
// and pixel shaders.
// #o3d VertexShaderEntryPoint vertexShaderFunction
// #o3d PixelShaderEntryPoint pixelShaderFunction
// #o3d MatrixLoadOrder RowMajor
</textarea>
</div>
<div id="container">
<div id="top" class="ui-widget-header ui-corner-all" align=center>
<h1 class="serif">
<img src="assets/images/openhumanlogo_white.png" style="display: inline-block; height: 25px; width: 30px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);;"></img>
Open Human
<img src="assets/images/openhumanlogo_white.png" style="display: inline-block; height: 25px; width: 30px;"></img>
</h1>
</div>
<div id="leftnav">
<!-- <br><br>
<a href="#" id="dialog_hotkeys" class="fg-button-icon-left fg-button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-comment"></span>Instructions</a>
<br>
<div id="instructions_box">Use the Controls above to zoom,scale,rotate and pan around the body<br></br>Other Features: <br>-- Right click on an object to select organ<br>-- Info button opens wikipedia article about organ<br>-- Hide button hides selected organ <br>-- Hide All button hides all organs<br>-- Show All button shows all organs</div>-->
</div>
<div id="content">
<div id="o3d""></div>
<br>
<div class="fg-toolbar ui-widget-content ui-helper-clearfix ui-corner-all">
<!--<div style="color: red;" id="loading"></div> -->
<div class="fg-buttonset">
<button id="hide" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-minusthick"></span>Hide</button>
<button id="show" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plusthick"></span>Show</button>
<button id="hideall" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-minus"></span>Hide All</button>
<button id="showall" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Show All</button>
<button id="reset" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh"></span>Reset View</button>
<button id="instructions" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-comment"></span>Instructions</button>
<button id="label_toggle" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-comment"></span>Labels On/Off</button>
<button id="debug_toggle" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-comment"></span>Debug</button>
</div>
</div>
</div>
<div id="rightnav">
<div id="buttons">
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:1em;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Navigation Controls
</p>
<div>
<div id="zoomscroller"></div>
<div id="scalingscroller"></div>
<div id="rotatebutton"></div>
<div id="panbutton"></div>
</div>
<a href="#" id="rot_up"><span class="invisible">UR</span></a>
<a href="#" id="rot_down"><span class="invisible">DR</span></a>
<a href="#" id="rot_left"><span class="invisible">LR<span></a>
<a href="#" id="rot_right"><span class="invisible">RR</span></a>
<a href="#" id="pan_up"><span class="invisible">UP</span></a>
<a href="#" id="pan_down"><span class="invisible">DP<span></a>
<a href="#" id="pan_left"><span class="invisible">LP</span></a>
<a href="#" id="pan_right"><span class="invisible">RP</span></a>
<div id="indicator"></div>
<div id="zoom_label">Zoom</div>
<div id="scale_label">Scale</div>
<div id="rotate_label">Rotate</div>
<div id="pan_label">Pan</div>
</div>
<br>
<div id="information" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Information</h3>
<p id="info_text"></p>
<p id="debug"></p>
</div>
</div>
</div>
<div id="push"><div>
<div id="footer" class="sansserif ui-widget-header ui-corner-all" style="color:white;">
<a href="credits.html">Credits</a> <span id="amolink"><a href="requirements.html" id="link to o3d plugin">This content requires the o3d plugin.</a></span>
</div>
</body>
</html>