-
Notifications
You must be signed in to change notification settings - Fork 2
/
smartphone.html
123 lines (117 loc) · 18.5 KB
/
smartphone.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
<!--
*********************Information*********************
ROS Joystick is a Joystick Application for remote operation of robot developed with ROS.
The main functions are angular and linear velocity publishing,
live video stream from robot, battery and network statistics,
error code displaying, etc.
*********************Instructions*********************
ROS Joystick have to connect to the same network as the ROS master to establish the connection. For
this purpose, rosbridge is used to the robot side.
*********************Libraries*********************
The libraries which are used are:
1. bootstrap - UI
2. fontawesome - Icons
3. nipplejs - Joysticks
4. roslibjs - ROS connection
5. jqueryjs - Modal functionality
6. popperjs - Modal functionality
-->
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="ROS Joystick">
<meta name="author" content="George Alexakis">
<title>ROS Joystick for Robot - Smartphone</title>
<link rel="icon" type="image/png"
href="data:image/png;base64,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">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="css/smartphone.css">
</head>
<body class="d-flex flex-column h-100">
<header></header>
<main role="main" class="flex-shrink-0">
<div class="container-fluid">
<img class="rounded img-fluid" id="robotMessage"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/4gKwSUNDX1BST0ZJTEUAAQEAAAKgbGNtcwQwAABtbnRyUkdCIFhZWiAH4wALAAwAFwABAA1hY3NwTVNGVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1kZXNjAAABIAAAAEBjcHJ0AAABYAAAADZ3dHB0AAABmAAAABRjaGFkAAABrAAAACxyWFlaAAAB2AAAABRiWFlaAAAB7AAAABRnWFlaAAACAAAAABRyVFJDAAACFAAAACBnVFJDAAACFAAAACBiVFJDAAACFAAAACBjaHJtAAACNAAAACRkbW5kAAACWAAAACRkbWRkAAACfAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAEcASQBNAFAAIABiAHUAaQBsAHQALQBpAG4AIABzAFIARwBCbWx1YwAAAAAAAAABAAAADGVuVVMAAAAaAAAAHABQAHUAYgBsAGkAYwAgAEQAbwBtAGEAaQBuAABYWVogAAAAAAAA9tYAAQAAAADTLXNmMzIAAAAAAAEMQgAABd7///MlAAAHkwAA/ZD///uh///9ogAAA9wAAMBuWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAJJ8AAA+EAAC2xFhZWiAAAAAAAABilwAAt4cAABjZcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltjaHJtAAAAAAADAAAAAKPXAABUfAAATM0AAJmaAAAmZwAAD1xtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAEcASQBNAFBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEL/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAH0ArwDAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAG4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8QAFBABAAAAAAAAAAAAAAAAAAAAwP/aAAgBAQABBQItR//EABQRAQAAAAAAAAAAAAAAAAAAAMD/2gAIAQMBAT8BLUf/xAAUEQEAAAAAAAAAAAAAAAAAAADA/9oACAECAQE/AS1H/8QAFBABAAAAAAAAAAAAAAAAAAAAwP/aAAgBAQAGPwItR//EABQQAQAAAAAAAAAAAAAAAAAAAMD/2gAIAQEAAT8hLUf/2gAMAwEAAgADAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAMD/2gAIAQMBAT8QLUf/xAAUEQEAAAAAAAAAAAAAAAAAAADA/9oACAECAQE/EC1H/8QAFBABAAAAAAAAAAAAAAAAAAAAwP/aAAgBAQABPxAtR//Z"
alt="Live Feed">
<div class="row">
<div class="col text-center"></div>
<div class="col text-center">
<p>
<i id="battery" class="fas fa-ban"></i>
</p>
</div>
<div class="col text-center">
<p>
<small id="status"></small>
</p>
</div>
<div class="col text-center">
<p>
<i id="signal" class="fas fa-ban"></i>
</p>
</div>
<div class="col text-center"></div>
</div>
<div class="row fixed-bottom" id="joysticks">
<div class="col-sm">
<div id="left"></div>
</div>
<div class="col-sm">
<div id="right"></div>
</div>
</div>
</div>
</main>
<div class="modal fade" id="connectModal" tabindex="-1" role="dialog" aria-labelledby="robotInformationLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="robotInformationLabel">Robot Settings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="robotIP" class="col-form-label">Robot IP:</label>
<input type="text" class="form-control" id="robotIP" value="192.168.0.100">
</div>
<div class="form-group">
<label for="maxLinearSpeed" class="col-form-label">Max Linear Speed:</label>
<input type="number" class="form-control" id="maxLinearSpeed" value="1">
</div>
<div class="form-group">
<label for="maxAngularSpeed" class="col-form-label">Max Angular Speed:</label>
<input type="number" class="form-control" id="maxAngularSpeed" value="2">
</div>
<div class="form-group">
<label for="fpv" class="col-form-label">FPV:</label>
<br>
<label class="switch">
<input type="checkbox" id="fpv" checked>
<span class="slider"></span>
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="setSettings()">Connect</button>
</div>
</div>
</div>
</div>
<script src="node_modules/roslib/build/roslib.min.js"></script>
<script src="node_modules/nipplejs/dist/nipplejs.js"></script>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/smartphone.js"></script>
</body>
</html>