-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
184 lines (176 loc) · 14.5 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
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
<!DOCTYPE html>
<html color-mode="dark">
<head>
<title>Plane/Sailing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#2C2C25" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="description" content="A completely unnecessary military situational awareness display for your home." />
<meta property="og:description" content="A completely unnecessary military situational awareness display for your home." />
<meta property="og:image" content="https://planesailing.ianrenton.com/banner.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://planesailing.ianrenton.com/banner.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.contextmenu.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/milsymbol.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/leaflet-providers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.contextmenu.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/leaflet.edgebuffer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/MovingMarker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/leaflet.geometryutil.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Leaflet.GridLayer.FadeOut.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bin/leaflet-arc.min.js"></script>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="alternate icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="alternate icon" type="image/png" href="favicon-192.png">
<link rel="alternate icon" type="image/png" href="favicon-512.png">
<link rel="manifest" href="manifest.webmanifest">
</head>
<body>
<div id="top">
<div id="menu">
<button id="loading" class="loading"><span class="menubuttonicon"><img src="icons/loading.png"/></span>​<span class="menubuttontext"><span class="hideonmobile"> Loading...</span></span></button>
<button id="serverOffline" class="problem"><span class="menubuttonicon"><img src="icons/offline.png"/></span>​<span class="menubuttontext"><span class="hideonmobile"> SERVER OFFLINE</span></span></button>
<button id="infoButton"><span class="menubuttonicon"><img src="icons/info.png"/></span> <span class="menubuttontext">Info</span></button>
<button id="configButton"><span class="menubuttonicon"><img src="icons/config.png"/></span> <span class="menubuttontext">Conf<span class="hideonmobile">ig</span></span></button>
<button id="trackTableButton"><span class="menubuttonicon"><img src="icons/tracktable.png"/></span> <span class="menubuttontext"><span class="hideonmobile">Track</span> Table</span></button>
</div>
<h1 id="appname">PLANE / SAILING</h1>
</div>
<div id="map"></div>
<div id="infoPanel" class="rightbox">
<h2>PLANE / SAILING</h2>
<p>The home situational awareness display nobody wanted or needed!</p>
<p>This software displays what's currently being tracked by ADS-B, AIS, APRS, Radiosonde and Meshtastic radio packet receivers at the base station.</p>
<p>Made by <a href="https://ianrenton.com" target='_blank'>Ian Renton</a></p>
<p><a href="https://ianrenton.com/hardware/planesailing" target='_blank'>Project Info</a> <a href="https://github.com/ianrenton/planesailing" target='_blank'>Client Source Code</a> <a href="https://github.com/ianrenton/planesailing-server" target='_blank'>Server Source Code</a></p>
<p>Client version: <span id="clientVersion" class="highlight">Unknown</span> Server version: <span id="serverVersion" class="highlight">Unknown</span></p>
<p>This instance is currently tracking <span id="aircraftCount" class="highlight">0</span> aircraft, <span id="shipCount" class="highlight">0</span> ships, <span id="aprsMobileCount" class="highlight">0</span> mobile APRS contacts, and <span id="radiosondeCount" class="highlight">0</span> radiosondes. It has also received data for <span id="aisShoreCount" class="highlight">0</span> AIS shore stations, <span id="aprsBaseCount" class="highlight">0</span> APRS base stations, and <span id="meshtasticCount" class="highlight">0</span> Meshtastic nodes.</p>
<div id="telemetry">
<p>Last queried the server at: <span id="lastQueryTime" class="highlight">Never</span></p>
<p>Server uptime: <span id="uptime" class="highlight">Unknown</span></p>
<p>Server CPU: <span id="cpuLoad" class="highlight">Unknown</span> Memory: <span id="memUsed" class="highlight">Unknown</span> Disk: <span id="diskUsed" class="highlight">Unknown</span> Temp: <span id="temp" class="highlight">Unknown</span></p>
<div id="feederStatusWrapper"><div id="feederStatus">
Feeder Telemetry: <span class="highlight">Waiting...</span>
</div></div>
</div>
</div>
<div id="configPanel" class="rightbox">
<h2>CONFIGURATION</h2>
<div class="configPanelSection" style="line-height: 2.5em;">
<div style="display: inline-block;">UI Theme:<button class="configButton" id="lightUIButton">☀️ Light</button><button class="configButton" id="darkUIButton">🌙 Dark</button></div>
<span style="padding-left: 3em;"></span>
<div style="display: inline-block;">Symbols:<button class="configButton" id="lightSymbolButton">☀️ Light</button><button class="configButton" id="darkSymbolButton">🌙 Dark</button></div>
</div>
<div class="configPanelSection" style="line-height: 2.5em;">
<div style="display: inline-block;">
<label for="basemap">Basemap:</label>
<select id="basemap" class="configSelect">
<option value="CartoDB.DarkMatter" selected="selected">CartoDB DarkMatter</option>
<option value="CartoDB.Voyager">CartoDB Voyager</option>
<option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
<option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
<option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
<option value="Esri.WorldImagery">ESRI World Imagery</option>
<option value="OpenStreetMap.Mapnik">OpenStreetMap Mapnik</option>
</select>
</div>
<span style="padding-left: 1em;"></span>
<div style="display: inline-block;">
<label for="basemapOpacity">Opacity:</label>
<select id="basemapOpacity" class="configSelect">
<option value="1" selected="selected">100%</option>
<option value="0.75">75%</option>
<option value="0.5">50%</option>
</select>
</div>
</div>
<div class="configPanelSection">
<p>Overlays:</p>
<label for="showAirspaceLayer" class="configLabel"><input type="checkbox" id="showAirspaceLayer" name="showAirspaceLayer"> Airspace (OpenAIP)</label>
<label for="showMaritimeLayer" class="configLabel"><input type="checkbox" id="showMaritimeLayer" name="showMaritimeLayer"> Maritime (OpenSeaMap)</label>
</div>
<div class="configPanelSection">
<p>Show Track Types:</p>
<label for="showAircraft" class="configLabel"><input type="checkbox" id="showAircraft" name="showAircraft" checked="true"> Aircraft</label>
<label for="showShips" class="configLabel"><input type="checkbox" id="showShips" name="showShips" checked="true"> Ships</label>
<label for="showAISShoreStations" class="configLabel"><input type="checkbox" id="showAISShoreStations" name="showAISShoreStations" checked="true"> AIS Shore Stations</label>
<label for="showATONs" class="configLabel"><input type="checkbox" id="showATONs" name="showATONs" checked="true"> AIS Aids to Navigation</label>
<label for="showAPRSMobile" class="configLabel"><input type="checkbox" id="showAPRSMobile" name="showAPRSMobile" checked="true"> APRS Mobile</label>
<label for="showAPRSBase" class="configLabel"><input type="checkbox" id="showAPRSBase" name="showAPRSBase" checked="true"> APRS Base Stations</label>
<label for="showRadiosondes" class="configLabel"><input type="checkbox" id="showRadiosondes" name="showRadiosondes" checked="true"> Radiosondes</label>
<label for="showMeshtastic" class="configLabel"><input type="checkbox" id="showMeshtastic" name="showMeshtastic" checked="true"> Meshtastic Nodes</label>
<label for="showAirports" class="configLabel"><input type="checkbox" id="showAirports" name="showAirports" checked="true"> Airports</label>
<label for="showSeaPorts" class="configLabel"><input type="checkbox" id="showSeaPorts" name="showSeaPorts" checked="true"> Sea Ports</label>
<label for="showBase" class="configLabel"><input type="checkbox" id="showBase" name="showBase" checked="true"> Base Station</label>
</div>
<div class="configPanelSection">
<label for="queryInterval">Query server every</label>
<select id="queryInterval" class="configSelect">
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="60">60</option>
</select>
<label for="queryInterval"> seconds</label>
</div>
<div class="configPanelSection">
<label for="onlyShowLive" class="configLabel"><input type="checkbox" id="onlyShowLive" name="onlyShowLive"> Only show live tracks</label>
<label for="enableDR" class="configLabel"><input type="checkbox" id="enableDR" name="enableDR" checked="true"> Enable Dead Reckoning</label>
</div>
<div class="configPanelSection">
<label for="names">Display names:</label>
<select id="names" class="configSelect">
<option value="0">None</option>
<option value="1" selected="selected">Zoom dependent</option>
<option value="2">All</option>
</select>
</div>
<div class="configPanelSection">
<label for="snailTrails">Snail Trails:</label>
<select id="snailTrails" class="configSelect">
<option value="0">None</option>
<option value="1" selected="selected">Only Selected</option>
<option value="2">All Tracks</option>
</select>
<select id="snailTrailLength" class="configSelect">
<option value="10">10 points</option>
<option value="20">20 points</option>
<option value="50">50 points</option>
<option value="100">100 points</option>
<option value="200">200 points</option>
<option value="500" selected="selected">500 points</option>
<option value="999999">Forever</option>
</select>
<button class="configButton" id="clearTrailsButton">Clear</button>
</div>
<div id="configPanelExtras" class="configPanelSection">
<label for="lanMode" class="configLabel"><input type="checkbox" id="lanMode" name="lanMode"> Connect via LAN</label>
<label for="showTelemetry" class="configLabel"><input type="checkbox" id="showTelemetry" name="showTelemetry"> Show Server Telemetry</label>
</div>
</div>
<div id="trackTablePanel" class="rightbox">
<div id="tracktablearea"><table id="trackTable"></table></div>
</div>
<script src="code.js"></script>
<script src="eastereggs/eastereggs.js"></script> <!-- Remove me if you don't want easter eggs in your copy of Plane/Sailing -->
<script>
if ((window.location.protocol == "http:" || window.location.protocol == "https:") && 'serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>
</body>
</html>