forked from tedsluis/dump1090-tools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (116 loc) · 6.88 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
<!--
http://ip-address/collectd
This page displays 9 graphs.
Based on https://github.com/mutability/dump1090-tools, Copyright (c) 2015, Oliver Jowett <[email protected]> and Xforce30164
//-->
<html>
<!-- Stylesheet for buttons //-->
<link rel="stylesheet" href="default.css" type="text/css" />
<link rel="stylesheet" href="lightbox.min.css" type="text/css" />
<head>
<title> Collectd Dump1090 Graphs</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lightbox.min.js"></script>
<script type="text/javascript">
var base_name = "dump1090-rpi";
function switchView(time_name){
<!-- Compose preview picture names //-->
$("#rate").attr("src", base_name + "-rate-preview-" + time_name + ".png");
$("#acs").attr("src", base_name + "-acs-preview-" + time_name + ".png");
$("#cpu").attr("src", base_name + "-cpu-preview-" + time_name + ".png");
$("#tracks").attr("src", base_name + "-tracks-preview-" + time_name + ".png");
$("#range").attr("src", base_name + "-range-preview-" + time_name + ".png");
$("#mem").attr("src", base_name + "-memory-preview-" + time_name + ".png");
$("#signal").attr("src", base_name + "-signal-preview-" + time_name + ".png");
$("#net").attr("src", base_name +"-eth0-preview-" + time_name + ".png");
/*$("#net").attr("src", base_name +"-wlan0-preview-" + time_name + ".png");*/
$("#disk").attr("src", base_name +"-disk-preview-" + time_name + ".png");
<!-- Compose lightbox picture names //-->
$("#lb-rate").attr("href", base_name + "-rate-" + time_name + ".png");
$("#lb-acs").attr("href", base_name + "-acs-" + time_name + ".png");
$("#lb-cpu").attr("href", base_name + "-cpu-" + time_name + ".png");
$("#lb-tracks").attr("href", base_name + "-tracks-" + time_name + ".png");
$("#lb-range").attr("href", base_name + "-range-" + time_name + ".png");
$("#lb-mem").attr("href", base_name + "-memory-" + time_name + ".png");
$("#lb-signal").attr("href", base_name + "-signal-" + time_name + ".png");
$("#lb-net").attr("href", base_name +"-eth0-" + time_name + ".png");
/*$("#lb-net").attr("href", base_name +"-wlan0-" + time_name + ".png");*/
$("#lb-disk").attr("href", base_name +"-disk-" + time_name + ".png");
}
<!-- Refresh page every minute //-->
setInterval(function(){
$('img').each(function() {
var jqt = $(this);
var src = jqt.attr('src');
if (~src.indexOf('?')) {
src = src.substr(0,src.indexOf('?'));
}
src += '?_ts=' + new Date().getTime();
jqt.attr('src',src);
});
},60000);
</script>
</head>
<body>
<!-- Button bar //-->
<p>
<!-- Select period, button image created with https://dabuttonfactory.com/ //-->
<table>
<tr>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('1h')" id="orange-button">hour</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('6h')" id="orange-button">6 hour</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('24h')" id="orange-button">day</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('2d')" id="orange-button">2 days</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('3d')" id="orange-button">3 days</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('7d')" id="orange-button">week</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('14d')" id="orange-button">2 weeks</a></div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('30d')" id="orange-button">month</a> </div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('90d')" id="orange-button">quarter</a></div></th>
<th><div class="orange-button-container"> <a href="#" onclick="switchView('365d')" id="orange-button">year</a> </div></th>
<!-- START SECTION Links to other dump1090 instances //-->
<th><div class="red-button-container"> <a href="http://ted1090-1/collectd" title="http://ted1090-1/collectd (192.168.11.37)" id="red-button" >ted1090-1-collectd</a></div></th>
<th><div class="blue-button-container"> <a href="http://ted1090-1/dump1090" title="http://ted1090-1/dump1090 (192.168.11.37)" id="blue-button">ted1090-1-dump</a> </div></th>
<!-- END SECTION
- Links to other dump1090 instances (leave the END SECTION commentline as it is to be sure the insert-hosts.sh script can delete and insert dump1090 hosts!) //-->
</tr>
</table>
</p>
<!-- Display picures, auto scaling//-->
<div style="width: 100%; height: 32%;">
<a id="lb-cpu" href="dump1090-rpi-cpu-24h.png" data-lightbox="collectd" data-title="CPU usage statistics">
<img id="cpu" width="33%" height="100%" src="dump1090-rpi-cpu-24h.png">
</a>
<a id="lb-rate" href="dump1090-rpi-rate-24h.png" data-lightbox="collectd" data-title="ADS-B message rate">
<img id="rate" width="33%" height="100%" src="dump1090-rpi-rate-24h.png">
</a>
<a id="lb-signal" href="dump1090-rpi-signal-24h.png" data-lightbox="collectd" data-title="ADS-B signal">
<img id="signal" width="33%" height="100%" src="dump1090-rpi-signal-24h.png">
</a>
</div>
<div style="width: 100%; height: 32%;">
<a id="lb-mem" href="dump1090-rpi-memory-24h.png" data-lightbox="collectd" data-title="ADS-B memory & disk space">
<img id="mem" width="33%" height="100%" src="dump1090-rpi-memory-24h.png">
</a>
<a id="lb-acs" href="dump1090-rpi-acs-24h.png" data-lightbox="collectd" data-title="ADS-B aircraft seen">
<img id="acs" width="33%" height="100%" src="dump1090-rpi-acs-24h.png">
</a>
<a id="lb-range" href="dump1090-rpi-range-24h.png" data-lightbox="collectd" data-title="Max range">
<img id="range" width="33%" height="100%" src="dump1090-rpi-range-24h.png">
</a>
</div>
<div style="width: 100%; height: 32%;">
<a id="lb-net" href="dump1090-rpi-eth0-24h.png" data-lightbox="collectd" data-title="ADS-B bandwidth">
<!--<a id="lb-net" href="dump1090-rpi-wlan0-24h.png" data-lightbox="collectd" data-title="ADS-B bandwidth">//-->
<img id="net" width="33%" height="100%" src="dump1090-rpi-eth0-24h.png">
<!--<img id="net" width="33%" height="100%" src="dump1090-rpi-wlan0-24h.png">//-->
</a>
<a id="lb-tracks" href="dump1090-rpi-tracks-24h.png" data-lightbox="collectd" data-title="ADS-B tracks seen">
<img id="tracks" width="33%" height="100%" src="dump1090-rpi-tracks-24h.png">
</a>
<a id="lb-disk" href="dump1090-rpi-disk-24h.png" data-lightbox="collectd" data-title="ADS-B IOPS / bandwidth">
<img id="disk" width="33%" height="100%" src="dump1090-rpi-disk-24h.png">
</a>
</div>
</body>
</html>