-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
185 lines (155 loc) · 8.01 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<title>3D Modelling using three.js</title>
<!-- CSS Stylesheets-->
<!-- Custom stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Main body START -->
<!-- Title Bar -->
<div class="row" style="position:absolute; opacity: 0.6; filter: alpha(opacity=60); background-color: white; width:100%;">
<div class="column">
<img src="models/Ingersoll_Rand_logo.svg.png" align='left' style="width:auto;height:50px;">
</div>
<div class="column">
<div style="margin:0; height: 10px; vertical-align: middle;" align="center"><font face="Calibri" size="7" color="red">3D Modelling</font></div>
</div>
<div class="column">
<img src="models/logo-2.jpg" align="right" style="width:auto; height:50px;" >
</div>
</div>
<!-- Menu Panel-->
<div class="navigation" style="position: absolute; top: 80px; left: 5px;">
<h3 style="margin-left: 30px;">Generic Compressor</h3>
<hr>
<ul class="mainmenu">
<li>Cylinder 1
<ul class="submenu"><li>Left end temperature: <span id="aComp1LT"></span>%<br>Right end temperature: <span id="aComp1RT"></span>% </li>
</ul></li>
<br>
<li>Cylinder 2
<ul class="submenu"><li>Left end temperature: <span id="aComp2LT"></span>%<br>Right end temperature: <span id="aComp2RT"></span>%</li>
</ul></li>
<br>
<li>Cylinder 3
<ul class="submenu"><li>Left end temperature: <span id="aComp3LT"></span>%<br>Right end temperature: <span id="aComp3RT"></span>%</li>
</ul></li>
<br>
<li>Cylinder 4
<ul class="submenu"><li>Left end temperature: <span id="aComp4LT"></span>%<br>Right end temperature: <span id="aComp4RT"></span>%</li>
</ul></li>
<br>
<li>Pipe 1
<ul class="submenu"><li>Left end temperature: <span id="aComp8LT"></span>%<br>Right end temperature: <span id="aComp5RT"></span>%</li>
</ul></li>
<br>
<li>Pipe 2
<ul class="submenu"><li>Left end temperature: <span id="aComp9LT"></span>%<br>Right end temperature: <span id="aComp6RT"></span>%</li>
</ul></li>
<br>
<li>Component 7
<ul class="submenu"><li>Left end temperature: <span id="aComp7LT"></span>%<br>Right end temperature: <span id="aComp7RT"></span>%</li>
</ul></li>
<br>
<li>Component 8
<ul class="submenu"><li>Left end temperature: <span id="aComp5LT"></span>%<br>Right end temperature: <span id="aComp8RT"></span>%</li>
</ul></li>
<br>
<li>Component 9
<ul class="submenu"><li>Left end temperature: <span id="aComp6LT"></span>%<br>Right end temperature: <span id="aComp9RT"></span>%</li>
</ul></li>
</ul>
</div>
<!-- Buttons for history -->
<div style="position: absolute; top: 80%; left:30%">
<button class="button1" style="vertical-align:middle" onclick="updatePastValues()"><span>Back </span></button>
<button id="dt" class="button2" style="vertical-align:middle"><span>Loading...</span></button>
<button class="button" style="vertical-align:middle" onclick="updateFutureValues()"><span> Next </span></button>
</div>
<!-- Annotation for comp1-->
<div class="annotation" hidden="true" id="anComp1">
<p><strong>Cylinder 1</strong></p>
<p>Left end temperature: <span id="anComp1LT"></span>%<br>Right end temperature: <span id="anComp1RT"></span>%</p>
</div>
<!-- Annotation for comp2-->
<div class="annotation" hidden="true" id="anComp2">
<p><strong>Cylinder 2</strong></p>
<p>Left end temperature: <span id="anComp2LT"></span>%<br>Right end temperature: <span id="anComp2RT"></span>%</p>
</div>
<!-- Annotation for comp3-->
<div class="annotation" hidden="true" id="anComp3">
<p><strong>Cylinder 3</strong></p>
<p>Left end temperature: <span id="anComp3LT"></span>%<br>Right end temperature: <span id="anComp3RT"></span>%</p>
</div>
<!-- Annotation for comp4-->
<div class="annotation" hidden="true" id="anComp4">
<p><strong>Cylinder 4</strong></p>
<p>Bottom temperature: <span id="anComp4LT"></span>%<br>Top temperature: <span id="anComp4RT"></span>%</p>
</div>
<!-- Annotation for comp5-->
<div class="annotation" hidden="true" id="anComp5">
<p><strong>Comp Mesh5</strong></p>
<p>Bottom temperature: <span id="anComp5LT"></span>%<br>Top temperature: <span id="anComp5RT"></span>%</p>
</div>
<!-- Annotation for comp6-->
<div class="annotation" hidden="true" id="anComp6">
<p><strong>Comp Mesh6</strong></p>
<p>Bottom temperature: <span id="anComp6LT"></span>%<br>Top temperature: <span id="anComp6RT"></span>%</p>
</div>
<!-- Annotation for comp7-->
<div class="annotation" hidden="true" id="anComp7">
<p><strong>Comp Mesh7</strong></p>
<p>Right end temperature: <span id="anComp7LT"></span>%<br>Left end temperature: <span id="anComp7RT"></span>%</p>
</div>
<!-- Annotation for comp8-->
<div class="annotation" hidden="true" id="anComp8">
<p><strong>Pipe 1</strong></p>
<p>Right end temperature: <span id="anComp8LT"></span>%<br>Left end temperature: <span id="anComp8RT"></span>%</p>
</div>
<!-- Annotation for comp9-->
<div class="annotation" hidden="true" id="anComp9">
<p><strong>Pipe 2</strong></p>
<p>Right end temperature: <span id="anComp9LT"></span>%<br>Left end temperature: <span id="anComp9RT"></span>%</p>
</div>
<!-- Main canvas where -->
<canvas id="mainCanvas"></canvas>
<!-- Main body END-->
<!-- JavaScript scripts -->
<!-- Three.js r106 -->
<script src="js/three.js" type="text/JavaScript"></script>
<!-- Orbit Controls -->
<script src="js/OrbitControls.js" type="text/JavaScript"></script>
<!-- GLTF Loader -->
<script src="js/GLTFLoader.js" type="text/JavaScript"></script>
<!-- Vertex Shaders -->
<script src="js/vertexShaders.js" type="text/JavaScript"></script>
<!-- Fragment Shaders -->
<script src="js/fragmentShaders.js" type="text/JavaScript"></script>
<!-- Google Firebase -->
<script src="js/firebase-app.js" type="text/JavaScript"></script>
<script src="js/firebase-auth.js" type="text/JavaScript"></script>
<script src="js/firebase-database.js" type="text/JavaScript"></script>
<!-- Firebase Config file-->
<script src="js/firebaseConfig.js" type="text/JavaScript"></script>
<!-- Gradient -->
<script src="js/gradient.js" type="text/JavaScript"></script>
<!-- Fetches realtime values from firbase and sends to gradient -->
<script src="js/realtimeValues.js" type="text/JavaScript"></script>
<!-- Custom JS script -->
<script src="js/script.js" type="text/JavaScript"></script>
<!-- Component Selector -->
<script src="js/ComponentSelector.js" type="text/JavaScript"></script>
<!-- Inline js-->
<script type="text/JavaScript">
// run() function
function run() {
init();
animate();
}
// Calls run() function when window is loaded.
window.addEventListener('load', run());
</script>
</body>
</html>