-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathriot_threejs_example.html
338 lines (310 loc) · 13.4 KB
/
riot_threejs_example.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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!-- Code taken from AdaFruit example for bmo055 orientation:
https://github.com/adafruit/Adafruit_BNO055
Adapted for BITalino R-IoT with riot-serverbit -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>R-IoT three.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href= 'css/bootstrap.min.css' rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="https://github.com/adafruit/Adafruit_BNO055">original code</a>
<h1 class="text-center">BITalino R-IoT orientation demo</h1>
<h3 id="connecting">Waiting for WebSocket connection...</h3>
<div class="col-sm-12" id="renderer">
</div>
</div>
</div>
<div class="row" id="controls">
<div class="col-sm-4">
<h3>Orientation (degrees):</h3>
<h4>Heading = <span id="heading">0</span></h4>
<h4>Roll = <span id="roll">0</span></h4>
<h4>Pitch = <span id="pitch">0</span></h4>
</div>
<!-- <div class="col-sm-4">
<h3>Calibration:</h3>
<h4>(0=uncalibrated, 3=fully calibrated)</h4>
<h4>System = <span id="calSys">0</span></h4>
<h4>Gyro = <span id="calGyro">0</span></h4>
<h4>Accelerometer = <span id="calAccel">0</span></h4>
<h4>Magnetometer = <span id="calMag">0</span></h4>
</div> -->
<div class="col-sm-4">
<h3>Actions:</h3>
<form>
<div class="form-group">
<label for="model">Model:
<select class="form-control" id="model">
</select>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="straighten">Straighten</button>
</div>
<!-- <div class="form-group">
<button type="button" class="btn btn-primary" id="saveCalibration">Save Calibration</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="loadCalibration">Load Calibration</button>
</div> -->
</form>
</div>
</div>
</div>
<script src="js/three.min.js"></script>
<!-- <script src="riot-serverbit/jquery.js"></script> -->
<!-- <script src="riot-serverbit/jquery.flot.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
<script src="js/loaders/DDSLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJMTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/loaders/STLLoader.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
$(document).ready(function() {
// Configuration
// Set size of the WebGL renderer scene.
var sceneWidth = 640;
var sceneHeight = 480;
// Define list of 3D models. Each item should have a name property that
// will be rendered in the drop down, and a load function that is called
// with the model instance and should add a model property with a Three.js
// scene graph object that will be rendered.
var models = [
// {
// name: 'Bunny',
// load: function(model) {
// // objMTLLoader.load(
// // 'models/bunny.obj',
// // 'model/bunny.mtl',
// function(object) {
// var geom = new THREE.BoxGeometry( 200, 200, 200 );
//
// for ( var i = 0; i < geometry.faces.length; i += 2 ) {
//
// var hex = Math.random() * 0xffffff;
// geom.faces[ i ].color.setHex( hex );
// geom.faces[ i + 1 ].color.setHex( hex );
//
// }
//
// var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
// model.model = new THREE.Mesh(geom, material);
// // Move the bunny so it's roughly in the center of the screen.
// model.model.position.y = -4;
// }
// );
// }
// },
{
name: 'XYZ Axes',
load: function(model) {
// Build some cylinders and rotate them to form a cross of the XYZ axes.
model.model = new THREE.Group();
var xAxis = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 7, 32, 32),
material);
xAxis.rotation.z = 90.0*(Math.PI/180.0);
model.model.add(xAxis);
var yAxis = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 7, 32, 32),
material);
model.model.add(yAxis);
var zAxis = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 7, 32, 32),
material);
zAxis.rotation.x = 90.0*(Math.PI/180.0);
model.model.add(zAxis);
}
},
{
name: 'Cat Statue',
load: function(model) {
stlLoader.load(
'models/cat-top.stl',
function(geometry) {
// Regenerate normals because they aren't loaded properly.
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// Load the model and build mesh.
model.model = new THREE.Mesh(geometry, material);
// Rotate, scale, and move so the cat is facing out the screen.
model.model.rotation.x = -90 * (Math.PI / 180.0);
model.model.scale.set(0.15, 0.15, 0.15);
model.model.position.y = -4;
}
);
}
},
{
name: 'Cat Statue',
load: function(model) {
stlLoader.load(
'models/BioPulse_v1.0.stl',
function(geometry) {
// Regenerate normals because they aren't loaded properly.
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// Load the model and build mesh.
model.model = new THREE.Mesh(geometry, material);
// Rotate, scale, and move so the cat is facing out the screen.
model.model.rotation.x = -90 * (Math.PI / 180.0);
model.model.scale.set(0.15, 0.15, 0.15);
model.model.position.y = -4;
}
);
}
}
];
// Global state.
var imuData = null;
var offset = null;
var orientation = null;
var objMTLLoader = new THREE.OBJMTLLoader();
var stlLoader = new THREE.STLLoader();
var currentModel = null;
var imu_data = {}
// Start with main controls hidden until connected.
$('#controls').hide();
// Setup Three.js scene and camera.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, sceneWidth / sceneHeight, 0.1, 1000);
// Start with the camera moved back a bit to look directly at the origin.
camera.position.z = 10;
// Setup Three.js WebGL renderer and add it to the page.
var renderer = new THREE.WebGLRenderer();
renderer.setSize(sceneWidth, sceneHeight);
renderer.setClearColor(0xff0000, 0);
$('#renderer').append(renderer.domElement);
$('#renderer canvas').addClass('center-block'); // Center the renderer.
// Create white material for the models.
var material = new THREE.MeshPhongMaterial({ color: 0xffffff });
// Setup 3 point lighting with a red and blue point light in upper left
// and right corners, plus a bit of backlight from the rear forward.
var pointLight1 = new THREE.PointLight(0xffbbbb, 0.6);
pointLight1.position.set(40, 15, 40);
scene.add(pointLight1);
var pointLight2 = new THREE.PointLight(0xbbbbff, 0.6);
pointLight2.position.set(-40, 15, 40);
scene.add(pointLight2);
var backLight = new THREE.DirectionalLight(0xffff, 0.3);
backLight.position.set(0, -0.25, -1);
scene.add(backLight);
//Taken from adafruit example
// Create a couple groups to apply rotations to the 3D model at different
// stages. The outer group called offset is set to the reverse rotation
// of the current BNO orientation when the 'Straighten' button is clicked.
// This will force the model to center itself staring directly out of
// the screen. The inner group called orientation will be rotated with
// the current BNO sensor orientation and cause the model to rotate.
offset = new THREE.Group();
orientation = new THREE.Group();
offset.add(orientation);
scene.add(offset);
// Main rendering function.
function render() {
requestAnimationFrame(render);
// Switch to the first model once it's loaded.
if (currentModel === null) {
if (models[0].hasOwnProperty('model')) {
currentModel = 0;
orientation.add(models[0].model);
}
}
// Update the orientation with the last BNO sensor reading quaternion.
if (imuData !== null) {
orientation.quaternion.set(imuData.Q1, imuData.Q2, imuData.Q3, imuData.Q4);
}
renderer.render(scene, camera);
}
render();
// Populate drop-down of 3D models and load all the models..
$.each(models, function(index, model) {
// Populate drop-down.
$('#model').append($("<option />").val(index).text(model.name));
// Kick off loading the model.
model.load(model);
});
// Model list changed event.
$('#model').change(function() {
// Remove the old model.
orientation.remove(models[currentModel].model);
// Update the current model and add it to the scene.
currentModel = $('#model')[0].selectedIndex;
orientation.add(models[currentModel].model);
});
// Straighten button click handler.
$('#straighten').click(function() {
// Get the current orientation of the BNO sensor and compute its
// conjugate or reverse rotation and apply it to the offset group.
// This will reset the 3D model so that it faces directly forward based
// on the current BNO sensor orientation.
var currentQuat = new THREE.Quaternion(imuData.Q1, imuData.Q2, imuData.Q3, imuData.Q4);
offset.quaternion.copy(currentQuat.conjugate());
});
// // Save calibration click handler calls the /save_calibration API.
// $('#saveCalibration').click(function() {
// $.post("{{ url_for('save_calibration') }}");
// });
//
// // Load calibration click handler calls the /load_calibration API.
// $('#loadCalibration').click(function() {
// $.post("{{ url_for('load_calibration') }}");
// });
// Function called when a new sensor reading is received.
function updateSensorData(data) {
// Save the reading then update the UI.
imuData = data;
$('#heading').text(data.HEAD);
$('#roll').text(data.ROLL);
$('#pitch').text(data.PITCH);
}
// Establish a connection to the ServerBIT
var ws = new WebSocket("ws://localhost:9001/");
ws.onopen = function() {
};
// Detect when the page is unloaded or close
window.onbeforeunload = function() {
ws.onclose = function () {};
ws.close()
};
// Create server sent event connection to receive riot sensor data.
ws.onmessage = function(e) {
// Update riot sensor values.
data = JSON.parse(e.data)
var d1 = [];
orientation_labels = ["Q1", "Q2", "Q3", "Q4"]
var test_data_stream = ""
for (var i = 0; i < orientation_labels.length; i += 1){
ch = orientation_labels[i]
test_data_stream += ch + ": " + data[ch] + "<br />"
}
// console.log(test_data_stream)
updateSensorData(data);
};
ws.onopen = function(e) {
// Hide connecting status and show controls when connection is made.
$('#connecting').hide();
$('#controls').show();
};
ws.onerror = function(e) {
// Hide controls and show connecting status if connection closes.
$('#controls').hide();
$('#connecting').show();
};
});
</script>
</body>
</html>