Skip to content

Commit 8b05dc7

Browse files
theZiztheZiz
committed
Added optional control buttons to example html interfaces
1 parent d45f966 commit 8b05dc7

File tree

3 files changed

+582
-97
lines changed

3 files changed

+582
-97
lines changed

‎client/interface.htm‎

Lines changed: 193 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,26 @@ <h3>Preview and camera setting</h3>
3434
<!--canvas id="video" width="512" height="512" style="border:1px solid #000000;"></canvas-->
3535
<div id="video_container_div" style="position: relative;">
3636
<div id="video_div" style="position: relative; top: 0; left: 0;">
37-
<canvas id="video" width="512" height="512"></canvas>
38-
<div id="url_div" style="display:none;"></div><br/>
37+
<table><tr>
38+
<td>
39+
<canvas id="video" width="512" height="512"></canvas>
40+
<div id="url_div" style="display:none;"></div>
41+
</td>
42+
<td align="center"><div id="controls" style="display:none;">
43+
<input type="button" value="+" id="zoom_in"> <input type="button" value="5 x" id="zoom_in_5"><br/>
44+
<input type="button" value="-" id="zoom_out"> <input type="button" value="5 x" id="zoom_out_5"><br/>
45+
<input type="button" value="X+" id="plus_x"> <input type="button" value="5 x" id="plus_x_5"><br/>
46+
<input type="button" value="X-" id="minus_x"> <input type="button" value="5 x" id="minus_x_5"><br/>
47+
<input type="button" value="Y+" id="plus_y"> <input type="button" value="5 x" id="plus_y_5"><br/>
48+
<input type="button" value="Y-" id="minus_y"> <input type="button" value="5 x" id="minus_y_5"><br/>
49+
<input type="button" value="Z+" id="plus_z"> <input type="button" value="5 x" id="plus_z_5"><br/>
50+
<input type="button" value="Z-" id="minus_z"> <input type="button" value="5 x" id="minus_z_5"><br/>
51+
<input type="button" value="←" id="ctl_left"> <input type="button" value="5 x" id="ctl_left_5"><br/>
52+
<input type="button" value="→" id="ctl_right"> <input type="button" value="5 x" id="ctl_right_5"><br/>
53+
<input type="button" value="↑" id="ctl_up"> <input type="button" value="5 x" id="ctl_up_5"><br/>
54+
<input type="button" value="↓" id="ctl_down"> <input type="button" value="5 x" id="ctl_down_5">
55+
</div></td>
56+
</tr></table>
3957
<form>
4058
<input type="button" value="Pause" id="pause">
4159
<input type="button" value="Stop observing" id="stop">
@@ -47,6 +65,7 @@ <h3>Preview and camera setting</h3>
4765
Interval: <input type="range" value="1" min="1" max="32" id="interval_range">
4866
<span id="interval_span">1</span>
4967
<input type="button" value="Set" id="interval_change">
68+
<input type="checkbox" id="controls_checkbox" onchange="controls_checkbox_click()"> Show controls
5069
</form>
5170
<div id="stereo_div"></div>
5271
<div id="functions_div"></div>
@@ -331,16 +350,20 @@ <h3 id="isaac_name"></h3>
331350
socket.send(JSON.stringify(obj));
332351
}
333352

334-
function mouseWheelHandler(e)
353+
function zoom(delta)
335354
{
336-
document.body.style.overflowY = "hidden";
337-
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) * 0.1;
338355
distance += delta;
339356
redraw();
340357
p_ctx.fillText("Delta: " + delta,1,10);
341358
sendFeedback("distance relative",delta);
342359
}
343360

361+
function mouseWheelHandler(e)
362+
{
363+
document.body.style.overflowY = "hidden";
364+
zoom(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) * 0.1);
365+
}
366+
344367
var mousedown = [0,0,0];
345368
var mousex = 0;
346369
var mousey = 0;
@@ -361,44 +384,54 @@ <h3 id="isaac_name"></h3>
361384
mousedown[2] = 0;
362385
}
363386

387+
function move(add)
388+
{
389+
var add_p = [
390+
rotation[0] * add[0] + rotation[1] * add[1] + rotation[2] * add[2],
391+
rotation[3] * add[0] + rotation[4] * add[1] + rotation[5] * add[2],
392+
rotation[6] * add[0] + rotation[7] * add[1] + rotation[8] * add[2]
393+
];
394+
position[0] += add_p[0];
395+
position[1] += add_p[1];
396+
position[2] += add_p[2];
397+
sendFeedback("position relative",add);
398+
redraw();
399+
}
400+
401+
function rotate(dx,dy,dz)
402+
{
403+
var l = Math.sqrt( dx * dx + dy * dy + dz * dz );
404+
if (l > 0)
405+
{
406+
dx /= l;
407+
dy /= l;
408+
dz /= l;
409+
var add = rotateMatrix(dy,dx,dz,l/2);
410+
var result = new Array(9);
411+
for (x = 0; x < 3; x++)
412+
for (y = 0; y < 3; y++)
413+
result[y+x*3] = add[y+0*3] * rotation[0+x*3]
414+
+ add[y+1*3] * rotation[1+x*3]
415+
+ add[y+2*3] * rotation[2+x*3];
416+
rotation = result;
417+
sendFeedback("rotation axis",[dy, dx, dz, l/2]);
418+
redraw();
419+
}
420+
}
421+
364422
function mouseMoveHandler(e)
365423
{
366424
var dx = e.clientX - mousex;
367425
var dy = e.clientY - mousey;
368426
var obj;
369427
if (mousedown[0])
370428
{
371-
var l = Math.sqrt( dx * dx + dy * dy );
372-
if (l > 0)
373-
{
374-
dx /= l;
375-
dy /= -l;
376-
var add = rotateMatrix(dy,dx,0,l/2);
377-
var result = new Array(9);
378-
for (x = 0; x < 3; x++)
379-
for (y = 0; y < 3; y++)
380-
result[y+x*3] = add[y+0*3] * rotation[0+x*3]
381-
+ add[y+1*3] * rotation[1+x*3]
382-
+ add[y+2*3] * rotation[2+x*3];
383-
rotation = result;
384-
//sendFeedback("rotation relative",add);
385-
sendFeedback("rotation axis",[dy, dx, 0, l/2]);
386-
}
429+
rotate(dx,-dy,0);
387430
}
388431
if (mousedown[2] || mousedown[1])
389432
{
390-
var add = [dx/100, dy/100, 0];
391-
var add_p = [
392-
rotation[0] * add[0] + rotation[1] * add[1] + rotation[2] * add[2],
393-
rotation[3] * add[0] + rotation[4] * add[1] + rotation[5] * add[2],
394-
rotation[6] * add[0] + rotation[7] * add[1] + rotation[8] * add[2]
395-
];
396-
position[0] += add_p[0];
397-
position[1] += add_p[1];
398-
position[2] += add_p[2];
399-
sendFeedback("position relative",add);
433+
move([dx/100, dy/100, 0]);
400434
}
401-
redraw();
402435
mousex = e.clientX;
403436
mousey = e.clientY;
404437
}
@@ -1298,5 +1331,133 @@ <h3 id="isaac_name"></h3>
12981331
sendFeedback( "iso surface", status );
12991332
};
13001333

1334+
document.getElementById("zoom_in").onclick = function()
1335+
{
1336+
zoom(+0.1);
1337+
}
1338+
1339+
document.getElementById("zoom_out").onclick = function()
1340+
{
1341+
zoom(-0.1);
1342+
}
1343+
1344+
document.getElementById("plus_x").onclick = function()
1345+
{
1346+
rotate(+5,0,0);
1347+
}
1348+
1349+
document.getElementById("minus_x").onclick = function()
1350+
{
1351+
rotate(-5,0,0);
1352+
}
1353+
1354+
document.getElementById("plus_y").onclick = function()
1355+
{
1356+
rotate(0,+5,0);
1357+
}
1358+
1359+
document.getElementById("minus_y").onclick = function()
1360+
{
1361+
rotate(0,-5,0);
1362+
}
1363+
1364+
document.getElementById("plus_z").onclick = function()
1365+
{
1366+
rotate(0,0,+5);
1367+
}
1368+
1369+
document.getElementById("minus_z").onclick = function()
1370+
{
1371+
rotate(0,0,-5);
1372+
}
1373+
1374+
document.getElementById("ctl_left").onclick = function()
1375+
{
1376+
move([-0.05,0,0]);
1377+
}
1378+
1379+
document.getElementById("ctl_right").onclick = function()
1380+
{
1381+
move([+0.05,0,0]);
1382+
}
1383+
1384+
document.getElementById("ctl_up").onclick = function()
1385+
{
1386+
move([0,-0.05,0]);
1387+
}
1388+
1389+
document.getElementById("ctl_down").onclick = function()
1390+
{
1391+
move([0,+0.05,0]);
1392+
}
1393+
1394+
1395+
document.getElementById("zoom_in_5").onclick = function()
1396+
{
1397+
zoom(+0.5);
1398+
}
1399+
1400+
document.getElementById("zoom_out_5").onclick = function()
1401+
{
1402+
zoom(-0.5);
1403+
}
1404+
1405+
document.getElementById("plus_x_5").onclick = function()
1406+
{
1407+
rotate(+25,0,0);
1408+
}
1409+
1410+
document.getElementById("minus_x_5").onclick = function()
1411+
{
1412+
rotate(-25,0,0);
1413+
}
1414+
1415+
document.getElementById("plus_y_5").onclick = function()
1416+
{
1417+
rotate(0,+25,0);
1418+
}
1419+
1420+
document.getElementById("minus_y_5").onclick = function()
1421+
{
1422+
rotate(0,-25,0);
1423+
}
1424+
1425+
document.getElementById("plus_z_5").onclick = function()
1426+
{
1427+
rotate(0,0,+25);
1428+
}
1429+
1430+
document.getElementById("minus_z_5").onclick = function()
1431+
{
1432+
rotate(0,0,-25);
1433+
}
1434+
1435+
document.getElementById("ctl_left_5").onclick = function()
1436+
{
1437+
move([-0.25,0,0]);
1438+
}
1439+
1440+
document.getElementById("ctl_right_5").onclick = function()
1441+
{
1442+
move([+0.25,0,0]);
1443+
}
1444+
1445+
document.getElementById("ctl_up_5").onclick = function()
1446+
{
1447+
move([0,-0.25,0]);
1448+
}
1449+
1450+
document.getElementById("ctl_down_5").onclick = function()
1451+
{
1452+
move([0,+0.25,0]);
1453+
}
1454+
1455+
function controls_checkbox_click()
1456+
{
1457+
if (document.getElementById("controls_checkbox").checked)
1458+
document.getElementById("controls").style.display = 'initial';
1459+
else
1460+
document.getElementById("controls").style.display = 'none';
1461+
}
13011462
</script>
13021463
</html>

0 commit comments

Comments
 (0)