-
Notifications
You must be signed in to change notification settings - Fork 1
/
excavator.html
85 lines (72 loc) · 4.13 KB
/
excavator.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Excavator</title>
<link rel="stylesheet" href="css/controller.css">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GQE06JN33T"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GQE06JN33T');
</script>
<!-- <script type="text/javascript" src="node_modules/nipplejs/dist/nipplejs.js"></script> -->
</head>
<body scroll="no" oncontextmenu="return false">
<video autoplay playsinline muted id="background-video"></video>
<div id="info"><div id="info-child">PLEASE ROTATE PHONE</div></div>
<!-- <div id="not-chrome"><div id="not-chrome-child">This app only works with <a href="https://www.google.com/intl/en_au/chrome/">Chrome</a></div></div> -->
<script src="node_modules/socket.io/client-dist/socket.io.js"></script>
<script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
<div class="wheels" id="left_wheels"></div>
<div class="wheels" id="right_wheels"></div>
<button id="arm_1_up"><i class="material-icons">north</i>Boom</button>
<button id="arm_1_down"><i class="material-icons">south</i>Boom</button>
<button id="arm_2_up"><i class="material-icons">north</i>Dipper</button>
<button id="arm_2_down"><i class="material-icons">south</i>Dipper</button>
<button id="exc_bucket_up"><i class="material-icons">north</i>Bucket</button>
<button id="exc_bucket_down"><i class="material-icons">south</i>Bucket</button>
<button id="slew_left"><i class="material-icons">rotate_left</i>Slew</button>
<button id="slew_right"><i class="material-icons">rotate_right</i>Slew</button>
<script type="module">
import * as controller from './js/controller.js';
var urlParams = new URLSearchParams(window.location.search);
if ( urlParams.has('token') ) { token = urlParams.get('token'); }
var team = urlParams.get('team').toUpperCase();
var vehicle = 'EXC';
var colors = ['rgba(0,0,255,0.8)','rgba(255,0,0,0.8)'];
var team_id = team.toUpperCase() === 'B' ? 1 : 0;
document.body.style.backgroundColor = colors[team_id];
var bucket_up = document.getElementById('exc_bucket_up');
var bucket_down = document.getElementById('exc_bucket_down');
var arm_1_up = document.getElementById('arm_1_up');
var arm_1_down = document.getElementById('arm_1_down');
var arm_2_up = document.getElementById('arm_2_up');
var arm_2_down = document.getElementById('arm_2_down');
var slew_left = document.getElementById('slew_left');
var slew_right = document.getElementById('slew_right');
// controller.add_two_nipples();
var left_wheels = document.querySelector("#left_wheels");
var right_wheels = document.querySelector("#right_wheels");
import * as joystick from './js/joystick.js';
joystick.add_joystick(left_wheels);
joystick.add_joystick(right_wheels);
controller.add_control_pair(bucket_up,bucket_down,'bucket');
controller.add_control_pair(arm_1_up,arm_1_down,'arm_1');
controller.add_control_pair(arm_2_up,arm_2_down,'arm_2');
controller.add_control_pair(slew_left,slew_right,'slew');
controller.run_servers(vehicle, team);
// Now add keyboard controls just in case
document.addEventListener('keydown', controller.actuateViaKeyboard);
document.addEventListener('keyup', controller.deactuateViaKeyboard);
</script>
</body>
</html>