-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
127 lines (122 loc) · 4.29 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
<html>
<head>
<title>Mobile Driving Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css">
<script src="/static/jquery-1.11.3.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/webscripthook.js"></script>
<script>
var enable = false;
var gas = false;
var brake = false;
$(document).ready(function(){
$("#btnEnable").click(function() {
enable = true;
sendToPlugin("on");
});
$("#btnDisable").click(function() {
enable = false;
sendToPlugin("off");
});
$("#btnBrake").bind("touchstart", function(e){
brake = true;
});
$("#btnBrake").bind("touchend", function(e){
brake = false;
});
$("#btnGas").bind("touchstart", function(e){
gas = true;
});
$("#btnGas").bind("touchend", function(e){
gas = false;
});
$("#btnRadioPrev").click(function() {
sendInput("radio", "-1");
});
$("#btnRadioNext").click(function() {
sendInput("radio", "1");
});
update();
});
function update() {
if (enable) {
if (gas) {
sendToPlugin("gas");
}
if (brake) {
sendToPlugin("brake");
}
$.get("/pull", function(data) {
if (data && data != "NO_DATA") {
var json = JSON.parse(data);
if (json["VehicleName"]) {
$("#speed").html((json["VehicleSpeed"] / 1000 * 3600).toFixed() + " km/h" +
" " + (json["VehicleSpeed"] * 2.2369363).toFixed() + " mph");
}
}
});
}
setTimeout(update, 20);
}
window.ondevicemotion = function(event) {
if (enable) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
bias = Math.min(Math.max(accelerationY, -5.2), 5.2) / 5.2;
//$("#bias").text(accelerationY);
var progressValue = 50 + 50*bias;
$('#biasProgress').css('left', progressValue.toFixed(0)+'%');
sendToPlugin(bias.toFixed(3), null, null);
}
}
function sendToPlugin(arg) {
/*
WebScriptHook input requests follow this format: { "Cmd", "Arg", "Args" }.
When sending requests to a specific extension, "Cmd" should be the extension dispatcher, "extension"
"Arg" is the argument sent to the extension dispatcher, in this case "extension-examples.ExtensionExamples.DrivingPlugin"
"Args" is an array of arguments sent to the plugin.
We put the only argument in args array, which could be "on", "off", "gas", "break", or a float (the steering bias).
*/
sendInput("extension", "extension-examples.ExtensionExamples.DrivingPlugin", [arg]);
}
</script>
<style>
#biasProgress {
position: relative;
left: 50%;
margin-left: -5%;
width: 10%;
}
</style>
</head>
<body>
<div class="container">
<h1>Mobile Driving Plugin</h1>
<h3 style="display:inline">by libertylocked</h3>
<button type="button" class="btn btn-default" id="btnEnable">Enable</button>
<button type="button" class="btn btn-default" id="btnDisable">Disable</button>
</div>
<div class="container">
</div>
<div class="container">
<!--h3 id="bias"></h3-->
<p>Tilt your phone to steer!</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" id="biasProgress">
</div>
</div>
</div>
<div class="container">
<button type="button" class="btn btn-default" id="btnRadioPrev">Radio Previous</button>
<button type="button" class="btn btn-default" id="btnRadioNext">Radio Next</button>
<span id="speed"></span>
</div>
<div class="container">
<button type="button" class="btn btn-lg btn-primary" id="btnBrake" style="float:left; width:30vw; position:fixed; bottom:0; left:0;">BRAKE<br>_</button>
<button type="button" class="btn btn-lg btn-primary" id="btnGas" style="float:right; width:30vw; position:fixed; bottom:0; right:0;">GAS<br>_</button>
<h4 id="touchState"></h4>
</div>
</body>