-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (94 loc) · 4.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
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./lib/loglevel.min.js"></script>
<script src="./lib/solclient-debug.js"></script>
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<div id="dashboard-left">
<div id="solace-header" class="dashboard">
<img class="dash-line-item" width="250" src="./images/Solace_Logo_Green.png" />
<!-- below elements will be set by index.js
<p class="dash-title dash-line-item"></p>
<p class="dash-sub-title dash-line-item"></p>
<p class="dash-sub-title dash-line-item"></p>
-->
</div>
<div id="filtering" class="dashboard">
<p class="dash-title dash-line-item">Wildcard Filtering <button class="dash-input"
onclick='window.open("http://worldcomp-proceedings.com/proc/p2016/ICM3967.pdf", "_blank");'>See the
Algo</button>:</p>
<div id="geo-grid">
<button id="btn-circle" class="dash-input">Add <span style="font-weight: bolder;"
class="topic-lat">Circle</span></button>
<button id="btn-polygon" class="dash-input">Add <span style="font-weight: bolder;"
class="topic-lat">Polygon</span></button>
<button id="btn-rect" class="dash-input">Add <span style="font-weight: bolder;"
class="topic-lat">Rect</span></button>
<button id="btn-remove" class="dash-input">Remove <span style="font-weight: bolder;"
class="topic-lat">Shapes</span></button>
</div>
<form id="sub-form"
oninput="sub_max_output.value=sub_max_range.value;sub_accuracy_output.value=sub_accuracy.value">
<label for="sub_max_range">Max Subs:</label>
<input id="sub_max_range" type="range" min="10" max="1500" value="300">
<output name="sub_max_output" for="sub_max_range">300</output>
<label for="sub_accuracy">Accuracy:</label>
<input id="sub_accuracy" type="range" min="50" max="100" value="95">
<div><output name="sub_accuracy_output" for="sub_accuracy">95</output><span>%</span></div>
</form>
<form id="range-form">
<label for="show_ranges">Show all Subscription Rectangles:</label>
<input id="show_ranges" type="checkbox" checked="false">
</form>
<form id="filtering-form">
<label for="route">By <span class="topic-route">Route</span> Number</label>
<input class="dash-input topic-route" type="text" id="route" size="6" />
<label for="vehType">By <span class="topic-vehType">Vehicle Type</span></label>
<input class="dash-input topic-vehType" type="text" id="vehType" size="6" />
<label for="vehID">By <span class="topic-vehID">Vehicle ID</span> Number</label>
<input class="dash-input topic-vehID" type="text" id="vehID" size="6" />
<label for="status">By <span class="topic-status">Status</span></label>
<select class="dash-input topic-status" id="status">
<option id="topic-status-Any">Any</option>
<option value="OK">In Motion</option>
<option value="FAULT">Breakdown</option>
</select>
</form>
</div>
<div id="msg-stat" class="dashboard">
<p class="dash-title dash-line-item">Statistics:</p>
<div id="stat-grid">
<div class="stat-label">Recv'd Message Rate</div>
<div class="stat-value"><span id='msg_rate'>0</span> msg/s</div>
<div class="stat-label">Tracked Vehicles</div>
<div class="stat-value"><span id='total_vehicles'>0</span></div>
<div class="stat-label"># of Subscriptions</div>
<div class="stat-value"><span id='curt_subs'>0</span></div>
<div class="stat-label">Coverage Accuracy</div>
<div class="stat-value"><span id='cover_accuracy'>0</span>%</div>
</div>
</div>
</div>
<div id="real-time-topics" class="dashboard">
<div id="topic-pattern" class="topic-string"></div>
<div id="topic" class="topic-string"> </div>
<div id="sub-topic" class="topic-string"> </div>
</div>
<div id="range-rect" class="dashboard">
<div id="range-topic" class="topic-string"> </div>
</div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
<script
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap&libraries=marker,places&v=beta"
defer></script>
-->
</body>
</html>