1 | 1 | unreal | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
2 | | | "DTD/xhtml1-transitional.dtd"> |
3 | | | |
4 | | | <html> |
5 | | | <head> |
6 | | | <title>Mapstats v3.0 AJAX</title> |
7 | | | <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> |
8 | | | <meta http-equiv="Content-Script-Type" content="text/javascript" /> |
9 | | | <meta http-equiv="cache-control" content="no-cache" /> |
10 | | | <meta http-equiv="pragma" content="no-cache" /> |
11 | | | <link href="mapstats.css" rel="stylesheet" type="text/css" /> |
12 | | | |
13 | | | <!--[if IE]><script type="text/javascript" src="excanvas-compressed.js"></script><![endif]--> |
14 | | | <script type="text/javascript" src="mapstats.js"></script> |
15 | | | |
16 | | | </head> |
17 | | | |
18 | | | <body> |
19 | | | |
20 | | | <script type="text/javascript"> |
21 | | | <!-- |
22 | | | |
23 | | | // set full resolution (100%) of map (width and height) |
24 | | | var full_x = 3100; |
25 | | | var full_y = 2230; |
26 | | | |
27 | | | // set outerDiv resolution (width and height) |
28 | | | var inres_x = 700; |
29 | | | var inres_y = 500; |
30 | | | |
31 | | | // set magnifier resolution (width and height) |
32 | | | var magres_x = 150; |
33 | | | var magres_y = parseInt(full_y / (full_x / magres_x)); |
34 | | | |
35 | | | // set start position (from left and top) |
36 | | | var start_left = 110; |
37 | | | var start_top = 50; |
38 | | | |
39 | | | // set zoom multiple |
40 | | | var eq_mini = 0.33; // 33% |
41 | | | var eq_medi = 0.5; // 50% |
42 | | | var eq_high = 0.66; // 66% |
43 | | | var eq_orig = 1; // 100% |
44 | | | |
45 | | | // set start multiple |
46 | | | var start_mul = eq_mini; |
47 | | | |
48 | | | // set displayed functions |
49 | | | var ch_ap = true; |
50 | | | var ch_router = true; |
51 | | | var ch_node = true; |
52 | | | var ch_infopoint = true; |
53 | | | var ch_noping = true; |
54 | | | var ch_legend = true; |
55 | | | var ch_name = true; |
56 | | | var ch_ip = true; |
57 | | | var ch_status = true; |
58 | | | var ch_backbone = true; |
59 | | | var ch_client = true; |
60 | | | var ch_inp = true; |
61 | | | |
62 | | | // set source data |
63 | | | var nodes = 'name.nodes'; |
64 | | | var noping = 'name.noping'; |
65 | | | var links = 'name.links'; |
66 | | | var infopoints = 'name.infopoints'; |
67 | | | var state = 'name.state'; |
68 | | | |
69 | | | // set colors of links |
70 | | | var wifi_client = "rgb(0, 200, 0)"; |
71 | | | var wifi_backbone = "rgb(250, 250, 0)"; |
72 | | | var eth_100 = "rgb(173, 216, 230)"; |
73 | | | var fso = "rgb(190, 0, 0)"; |
74 | | | var fso_backup = "rgb(255, 80, 80)"; |
75 | | | var ghz5 = "rgb(200, 200, 200)"; |
76 | | | var ghz10 = "rgb(255, 255, 255)"; |
77 | | | var fiber = "rgb(220, 0, 220)"; |
78 | | | var other = "rgb(0, 0, 250)"; |
79 | | | |
80 | | | // set alpha colors of links |
81 | | | var wifi_client_a = "rgba(0, 200, 0, 0.6)"; |
82 | | | var wifi_backbone_a = "rgba(250, 250, 0, 0.6)"; |
83 | | | var eth_100_a = "rgba(173, 216, 230, 0.6)"; |
84 | | | var fso_a = "rgba(190, 0, 0, 0.6)"; |
85 | | | var fso_backup_a = "rgba(255, 80, 80, 0.6)"; |
86 | | | var ghz5_a = "rgba(200, 200, 200, 0.6)"; |
87 | | | var ghz10_a = "rgba(255, 255, 255, 0.6)"; |
88 | | | var fiber_a = "rgba(220, 0, 220, 0.6)"; |
89 | | | var other_a = "rgba(0, 0, 250, 0.6)"; |
90 | | | |
91 | | | // set names of links |
92 | | | var name1 = "Wifi Client"; |
93 | | | var name2 = "Wifi Backbone"; |
94 | | | var name3 = "Ethernet"; |
95 | | | var name4 = "FSO"; |
96 | | | var name5 = "FSO + Backup"; |
97 | | | var name6 = "5 GHz"; |
98 | | | var name7 = "10 GHz"; |
99 | | | var name8 = "Fiber"; |
100 | | | var name9 = "Other"; |
101 | | | |
102 | | | // set name for link in planning (for legend) |
103 | | | var inp = "(InP)"; |
104 | | | |
105 | | | // Let's start it |
106 | | | window.onload = function() { |
107 | | | nactiSoubory(); |
108 | | | mapInit(start_mul); |
109 | | | nastavCheck(); |
110 | | | canvasInit(start_mul); |
111 | | | timerMe(); |
112 | | | } |
113 | | | |
114 | | | // --> |
115 | | | </script> |
116 | | | |
117 | | | <!-- main map --> |
118 | | | <div> |
119 | | | <div style="float:left;"> |
120 | | | <div id="outerDiv"> |
121 | | | <div id="zoomPanel"> |
122 | | | <div id="opaque"> |
123 | | | <!-- zoom 0 --> |
124 | | | <div style="position:absolute;top:5px;left:5px;width:20px; height:5px;font-size: 0px;border:solid 1px black;background: #c5eec5;" onclick="mainMap.setZoom(0)"></div> |
125 | | | <!-- zoom 1 --> |
126 | | | <div style="position:absolute;top:17px;left:5px;width:20px; height:5px;font-size: 0px;border:solid 1px black;background: #c5eec5;" onclick="mainMap.setZoom(1)"></div> |
127 | | | <!-- zoom 2 --> |
128 | | | <div style="position:absolute;top:29px;left:5px;width:20px; height:5px;font-size: 0px;border:solid 1px black;background: #c5eec5;" onclick="mainMap.setZoom(2)"></div> |
129 | | | <!-- zoom 3 --> |
130 | | | <div style="position:absolute;top:41px;left:5px;width:20px; height:5px;font-size: 0px;border:solid 1px black;background: #c5eec5;" onclick="mainMap.setZoom(3)"></div> |
131 | | | </div> |
132 | | | <div id="translucent"> |
133 | | | </div> |
134 | | | </div> |
135 | | | <div id="legend"> |
136 | | | <div id="legendcanvas"> |
137 | | | <canvas id="paintlegend" width="25" height="0"></canvas> |
138 | | | </div> |
139 | | | <div id="mapstats_legend"> |
140 | | | </div> |
141 | | | </div> |
142 | | | <div id="innerDiv"> |
143 | | | <div id="mapstats"> |
144 | | | <canvas id="paint"></canvas> |
145 | | | <div id="mapstats_infopoint"></div> |
146 | | | <div id="mapstats_ip"></div> |
147 | | | <div id="mapstats_status"></div> |
148 | | | <div id="mapstats_name"></div> |
149 | | | </div> |
150 | | | <div id="mapstats2"> |
151 | | | <canvas id="paint2"></canvas> |
152 | | | </div> |
153 | | | </div> |
154 | | | </div> |
155 | | | <div style="clear:both;"></div> |
156 | | | <div id="underMap"> |
157 | | | <div id="resolutionInfo"></div> |
158 | | | <div id="version"><a href="http://www.jklir.net/" target="jklir">Mapstats v3.0 AJAX </a></div> |
159 | | | </div> |
160 | | | </div> |
161 | | | <div id="menuset"> |
162 | | | <!-- mini map --> |
163 | | | <div class="miniMap"> |
164 | | | <div id="miniMapInner"> |
165 | | | <img src="mini/mini_map.jpg" alt="mini map" border="0" /> |
166 | | | </div> |
167 | | | <div id="magnifier"> |
168 | | | </div> |
169 | | | </div> |
170 | | | <div id="infoDiv"> |
171 | | | |
172 | | | </div> |
173 | | | <div id="checkboxes"> |
174 | | | <form action="#" name="form_map"> |
175 | | | <br> |
176 | | | <input type="checkbox" name="ch_ap"> AP<br/> |
177 | | | <input type="checkbox" id="ch_router"> Router<br/> |
178 | | | <input type="checkbox" id="ch_node"> Node<br/> |
179 | | | <input type="checkbox" id="ch_infopoint"> Infopoint<br/> |
180 | | | <input type="checkbox" id="ch_noping"> Client & Switch<br/> |
181 | | | <input type="checkbox" id="ch_legend"> Legend<br/><br/> |
182 | | | |
183 | | | <input type="checkbox" id="ch_name"> Name<br/> |
184 | | | <input type="checkbox" id="ch_ip"> IP<br/> |
185 | | | <input type="checkbox" id="ch_status"> Status<br/><br/> |
186 | | | |
187 | | | <input type="checkbox" id="ch_backbone"> Backbone links<br/> |
188 | | | <input type="checkbox" id="ch_client"> Client links<br/> |
189 | | | <input type="checkbox" id="ch_inp"> In Planning links<br/><br/> |
190 | | | |
191 | | | <input type="button" id="apply" value="Apply" onClick="reDraw();"><br/> |
192 | | | </form> |
193 | | | </div> |
194 | | | </div> |
195 | | | <div style="clear:both"> |
196 | | | <br/><strong>Last Update: </strong><span id="mapstats_update" style="_width: 100%;"></span> |
197 | | | </div> |
198 | | | |
199 | | | </body> |
200 | | | </html> |