-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (130 loc) · 10.6 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
128
129
130
131
132
133
134
135
136
137
138
<!-- https://webrtc.org/getting-started/peer-connections -->
<!-- https://codelabs.developers.google.com/codelabs/webrtc-web/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
<title>WebSocket Client</title>
</head>
<body class="bg-gray-100 text-gray-900 h-screen flex flex-col">
<header class="bg-gray-700 text-white p-4 flex items-center">
<h1 class="text-2xl font-bold mr-8">WebSocket Client</h1>
<div class="flex items-center">
<input type="text" id="ipAndroid" placeholder="Enter Android IP" class="p-2 rounded border border-gray-400 mr-2 text-black">
<input type="text" id="ipROS" placeholder="Enter ROS IP" class="p-2 rounded border border-gray-400 mr-2 text-black">
<input type="text" id="ipApi" placeholder="Enter API server IP" class="p-2 rounded border border-gray-400 mr-2 text-black">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" id="connectBtn" onclick="initConnection()">Connect</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" style="display: none" id="disconnectBtn" onclick="disconnect()">Disconnect</button>
</div>
</header>
<main class="relative h-full">
<div class="grid grid-cols-1 md:grid-cols-4 h-full">
<div class="col-span-1 md:col-span-3 py-4 pl-4 h-full">
<div class="flex items-center justify-center bg-white h-full rounded shadow">
<video id="remoteVideo" tabindex="0" autoplay playsinline controls class="w-full max-h-full outline-none"></video>
</div>
</div>
<div class="grid grid-cols-1 gap-4 p-4 content-start">
<div id="mapOverlay" class="bg-white p-4 rounded shadow">
<h2 class="text-lg font-bold mb-4">Map</h2>
<p class="text-gray-500">Click and hold on a map position to set the coordinate & orientation for your navigation goal. Current goal can be cancelled at any time from the button.</p>
<div id="nav" class="w-full my-3"></div>
<div class="flex">
<button class="transition bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded m-1 flex items-center" id="cancelBtn">
<i class="fa-solid fa-xmark mr-2"></i> Cancel
</button>
</div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-lg font-bold mb-4">Goals</h2>
<p class="text-gray-500">Potential navigation goals detected from spoken dialogue are displayed below.</p>
<div id="goalSkeleton" class="mt-4 hidden">
<div class="flex items-center justify-between px-2 py-2 rounded shadow border border-gray-200 animate-pulse my-2">
<span class="h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></span>
<div class="flex space-x-2">
<div class="bg-gray-200 rounded h-7 w-7"></div>
<div class="bg-gray-200 rounded h-7 w-7"></div>
</div>
</div>
<div class="flex items-center justify-between px-2 py-2 rounded shadow border border-gray-200 animate-pulse my-2">
<span class="h-3 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></span>
<div class="flex space-x-2">
<div class="bg-gray-200 rounded h-7 w-7"></div>
<div class="bg-gray-200 rounded h-7 w-7"></div>
</div>
</div>
</div>
<div id="goalsList" class="mt-4"></div>
</div>
<div class="bg-white p-4 rounded shadow">
<h2 class="text-lg font-bold mb-4">Testing</h2>
<textarea id="speechText" class="w-full max-w-lg p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="8"></textarea>
</div>
</div>
</div>
<div id="toast-success" class="transition fixed bottom-5 mx-auto inset-x-0 flex items-center w-full max-w-xs p-3 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 transition-opacity duration-300 ease-out opacity-0 hidden" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ms-3 text-sm font-normal">Navigation goal selected.</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>
<div id="toast-clear" class="transition fixed bottom-5 mx-auto inset-x-0 flex items-center w-full max-w-xs p-3 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 transition-opacity duration-300 ease-out opacity-0 hidden" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ms-3 text-sm font-normal">Dialogue history cleared.</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-clear" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>
<div id="toast-delete" class="transition fixed bottom-5 mx-auto inset-x-0 flex items-center w-full max-w-xs p-3 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 transition-opacity duration-300 ease-out opacity-0 hidden" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
</svg>
<span class="sr-only">Error icon</span>
</div>
<div class="ms-3 text-sm font-normal">Navigation goal deleted.</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-delete" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>
</main>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="scripts/easeljs.min.js"></script>
<script src="scripts/eventemitter2.min.js"></script>
<script src="scripts/roslib.min.js"></script>
<script src="scripts/ros2d.min.js"></script>
<script src="scripts/nav2d.min.js"></script>
<script type="text/javascript" src="scripts/toast.js"></script>
<script type="text/javascript" src="scripts/dialogue.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="scripts/navigation.js"></script>
<script type="text/javascript" src="scripts/joystick.js"></script>
</html>