-
Notifications
You must be signed in to change notification settings - Fork 1
/
unnamed.html
292 lines (287 loc) · 13.3 KB
/
unnamed.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
<!DOCTYPE html>
<?php
session_start();
if($_SESSION['userLogin'] != 'loggato'){
header("Location: login.html");
}
?>
<html lang="en">
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<script src="https://kit.fontawesome.com/d21c2ccf9a.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.flightindicators.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<head>
<title>Unnamed Ground Vehicle</title>
<!--inline CSS styling-->
<style>
#map {
height: 400px;
width: 540px;
margin: 0;
margin-top: -40px;
border-radius: 2%;
border: 2px solid #812535;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
</style>
<!--function called in form buttons, change the roverStatus and which buttons are enabled and which not-->
<script>
function manualButton() {
window.localStorage.setItem('rover01status', 'Running (manual)');
document.getElementById('rover01status').innerText = window.localStorage.getItem('rover01status');
document.getElementById("autoRover01").disabled = false;
}
</script>
<script>
function autoButton() {
window.localStorage.setItem("rover01status", "Running (auto)");
document.getElementById("rover01status").innerText = window.localStorage.getItem("rover01status");
document.getElementById("autoRover01").disabled = true;
}
</script>
<script>
function stopButton() {
window.localStorage.setItem('rover01status', 'Idle');
document.getElementById('rover01status').innerText = window.localStorage.getItem('rover01status');
document.getElementById("autoRover01").disabled = false;
}
</script>
</head>
<body>
<!--topnav bar div-->
<nav class="navbar navbar-dark navbar-expand-md bg-dark justify-content-md-center justify-content-start">
<a class="navbar-brand d-md-none d-inline" href=""></a>
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<a class="nav-link" href="index.html" onclick="roverAuto(0);"><i class="fa fa-home mr-1"></i></a>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link digital-clock"> 00:00:00</a>
</li>
<li class="nav-item">
<a class="nav-link" id="weather" target="_blank"> weather not available </a>
</li>
<li class="nav-item2">
<img id="weather_icon"></img>
</li>
<li class="nav-item">
<a class="nav-link" href="unnamedDataHistory.html"> Data history </a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
<a class="nav-link" href="https://www.facebook.com/SapienzaAerospaceStudentAssociation" target="_blank"><i
class="fa fa-facebook-square mr-1"></i></a>
<a class="nav-link" href="https://www.instagram.com/sapienza_technology_team/" target="_blank"><i
class="fa fa-instagram mr-1"></i></a>
<a class="nav-link" href="https://github.com/Syro98/ground_station" target="_blank"><i
class="fa fa-github mr-1"></i></a>
</ul>
<!--topnav bar scripts-->
<script src="js/weather.js"></script>
<script src="js/clock.js"></script>
<script src="js/map.js"></script>
<!--async function for Google Maps JavaScript API-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbYZOtMzWFR_9TrZ7lH_CFMgJJdHn2oZ0&libraries=places&callback=initMap">
</script>
</div>
</nav>
<br><br><br><br>
<!--here starts the actual page content-->
<div class="container">
<!--rover information div-->
<div class="jumbotron">
<div class="infoRover">
<h2>Info about Unnamed</h2>
<div class="row">
<div class="col-md-6">
<h4>Components</h4>
<small>
<ul>
<li>Adafruit 10-DOF IMU</li>
<li>NA219 High Side DC Current Sensor</li>
<li>Adafruit 0.56; 4-Digit 7-Segment Display w/I2C</li>
<li>Raspberry Pi Zero W Kit (MZ2)</li>
<li>Lithium polimers battery 3,7V 5000 MAH</li>
<li>USB / DC / Solar Lithium Ion/Polymer charger - v2</li>
<li>2W Solar Panel 80X180</li>
</ul>
</small>
</div>
<div class="col-md-6">
<h4 class="hidden">Components</h4>
<small>
<ul>
<li>Pololu 5V Step-Up/Step-Down Voltage Regulator S18V20F5</li>
<li>Adafruit 16-Channel 12-bit PWM/Servo Driver - I2C</li>
<li>Adafruit DC Stepper Motor HAT for Raspberry Pi</li>
<li>Raspberry Pi Camera Module V2</li>
<li>Raspberry Pi 4 - 4GB RAM </li>
<li>UBEC DC/DC Step-Down (Buck) Converter - 5V 3°</li>
<li>Dagu - Rover 5 Robot Platform</li>
<a name="realTime">
</ul></a>
</small>
</div>
</div>
</div>
</div>
<!--rover real time information div-->
<div class="container2">
<h1>Real-time info</h1>
<div class="row">
<div class="col-md-6">
<br>
<i style="margin-left: 4px;" class="fa fa-power-off mr-1"></i>
<!--if speed >0 Running else Stopped or if not online Power Off-->
<label class="contact-form__label" for="velocity">Rover status: </label>
<span style="margin-left: 10px;" id="rover01status" name="roverStatus"></span>
<br>
<i class="fa fa-battery-three-quarters mr-1"></i>
<label class="contact-form__label" for="velocity">Battery level: </label>
<span style="margin-left: 10px;" id="batteryRT" name="batteryData">0%</span>
<br>
<i style="margin-left: 7px;" class="fa fa-angle-double-right mr-1"></i>
<label class="contact-form__label" for="velocity"> Speed: </label>
<span style="margin-left: 10px;" id="speedRT" name="speedData">0.00</span>
<br>
<i style="margin-left: 9px;" class="fa fa-map-marker-alt mr-1"></i>
<label class="contact-form__label" for="velocity">X-coords:</label>
<span style="margin-left: 10px;" id="xCoordsRT" name="xData">0.000000</span>
<br>
<i style="margin-left: 9px; visibility: hidden;" class="fa fa-map-marker-alt mr-1"></i>
<label class="contact-form__label" for="velocity">Y-coords:</label>
<span style="margin-left: 10px;" id="yCoordsRT" name="yData">0.000000</span>
<br>
<i style="margin-left: 4px;" class="fa fa-crop-alt mr-1"></i>
<label class="contact-form__label" for="velocity">Camera tilt:</label>
<span style="margin-left: 10px;" id="cameraTiltRT" name="camTiltData">0°</span>
<br>
<i style="margin-left: 5px;" class="fa fa-rocket mr-1"></i>
<label class="contact-form__label" for="velocity">Rover mode: </label>
<span style="margin-left: 10px;" id="modeRT" name="modeData">Standard</span>
<br>
<div><span class="attitute" id="attitude"></span></div>
<!--local storage listener for rover status-->
<script>
document.getElementById("rover01status").innerText = window.localStorage.getItem('rover01status');
window.addEventListener("storage", function (e) {
document.getElementById("rover01status").innerText = window.localStorage.getItem('rover01status');
}, true);
</script>
</div>
<!--Google Map generation div as in Map.js-->
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<br><br>
<!--rover stream camera div-->
<div class="row">
<iframe class="stream" src="http://192.168.86.25:8080/video" frameborder="0" scrolling="no">
</iframe>
</div>
<br>
<!--rover commands div-->
<div id="commands01" class="row">
<p style="display: none;">Rover ID: unn-03</p>
<div class="col-md-6">
<section class="content">
<h1 class="results__heading"><a name="commands">Commands:</a></h1>
<!--rover commands form div-->
<form class="content__form contact-form" method="post" action="php/queryunnamed.php">
<input class="contact-form__input contact-form__input--text" style="display: none;" id="roverID"
name="roverID" type="text" value="1" />
<div class="contact-form__input-group">
<label class="contact-form__label" for="velocity">Speed</label>
<input class="contact-form__input contact-form__input--text" id="speed" name="speed"
placeholder=" default: 5" value="5" type="text" />
<label class="contact-form__label" for="velocity">km/h</label>
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="coords">X-Coordinates</label>
<input class="contact-form__input contact-form__input--text" id="coordsx" name="coordsx" type="text"
value=" 12.4932009" />
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="coords">Y-Coordinates</label>
<input class="contact-form__input contact-form__input--text" id="coordsy" name="coordsy" type="text"
value=" 41.8933181" />
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="velocity">Camera tilt</label>
<input class="contact-form__input contact-form__input--text" id="cameraTilt" name="cameraTilt"
placeholder=" default: 0°" value=" 0" type="text" />
</div>
<!--rover commands form select-->
<div class="contact-form__input-group">
<label class="contact-form__label" for="mode">Rover Mode</label>
<select class="contact-form__input contact-form__input--select" id="mode" name="mode">
<option>Standard</option>
<option>Eco-mode</option>
<option>Performance</option>
</select>
</div>
<!--rover commands form buttons-->
<!--Running (Manual) button-->
<button class="contact-form__button" type="submit" name="subtodb"
onclick="manualButton()" id="manualRover01"> Send data </button>
<!--Running (Auto) button-->
<a href="#realTime"><button class="contact-form__button" type="button" name="auto"
onClick="autoButton(); roverAuto(1);" id="autoRover01"> Auto </button></a>
<!--Stop button-->
<button class="contact-form__button" type="submit" name="stop"
onClick="stopButton(); roverAuto(0); " id="stopRover01"> Stop </button>
</form>
<br>
<br>
</section>
</div>
<!--rover commands results div-->
<div class="col-md-6">
<div class="results">
<h2 class="results__heading">Result:</h2>
<pre class="results__display-wrapper"><code id="command" class="results__display"></code></pre>
<span id="command" class="results__display"></span>
</div>
</div>
</div>
<!--JavaScript for generating real time informations-->
<script src="js/roverDataUnnamed.js"></script>
<!--script for generating output of the commands-->
<script>
$(document).ready(function () {
commandUpdate();
setInterval(commandUpdate, 1000);
})
function commandUpdate() {
var command = document.getElementById("command");
command.innerHTML = "Velocity: " + document.getElementById("speed").value + " km/h\n\nX coords: " + document
.getElementById("coordsx").value + "\n\nY coords: " + document.getElementById("coordsy").value +
"\n\nCamera tilt: " +
document.getElementById("cameraTilt").value + "\n\nRover Mode: " + document.getElementById("mode").value;
$('.command').text(command.innerHTML);
}
</script>
<!--local storage listener script for hiding commands section if the rover is offline and set buttons basend on rover status-->
<script>
document.getElementById("commands01").style.display = window.localStorage.getItem('commands01');
window.addEventListener("storage", function (e) {
document.getElementById("commands01").style.display = window.localStorage.getItem('commands01');
}, true);
</script>
</div>
</div>
</body>
</html>