1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 7<meta HTTP-EQUIV="Expires" CONTENT="-1"> 8<link rel="shortcut icon" href="images/favicon.png"> 9<link rel="icon" href="images/favicon.png"> 10<title></title> 11<link href="/NM_style.css" rel="stylesheet" type="text/css" /> 12<link href="/form_style.css" rel="stylesheet" type="text/css" /> 13<script type="text/javascript" src="/general.js"></script> 14<script type="text/javascript" src="/state.js"></script> 15<script type="text/javascript" src="/js/jquery.js"></script> 16<style type="text/css"> 17.title{ 18 font-size:16px; 19 text-align:center; 20 font-weight:bolder; 21 margin-bottom:5px; 22} 23 24.line_image{ 25 margin:5px 0px 0px 10px; 26 *margin-top:-10px; 27} 28 29.ram_table{ 30 height:30px; 31 text-align:center; 32} 33 34.ram_table td{ 35 width:33%; 36} 37 38.loading_bar{ 39 width:150px; 40} 41 42.loading_bar > div{ 43 margin-left:5px; 44 background-color:black; 45 border-radius:15px; 46 padding:2px; 47} 48 49.status_bar{ 50 height:12px; 51 border-radius:15px; 52} 53 54#ram_bar{ 55 background-color:#0096FF; 56} 57 58#cpu0_bar{ 59 background-color:#FF9000; 60} 61 62#cpu1_bar{ 63 background-color:#3CF; 64} 65 66#cpu2_bar{ 67 background-color:#FC0; 68} 69 70#cpu3_bar{ 71 background-color:#FF44FF; 72} 73 74.percentage_bar{ 75 width:60px; 76 text-align:center; 77} 78 79.cpu_div{ 80 margin-top:-5px; 81} 82 83.status_bar{ 84 -webkit-transition: all 0.5s ease-in-out; 85 -moz-transition: all 0.5s ease-in-out; 86 -o-transition: all 0.5s ease-in-out; 87 transition: all 0.5s ease-in-out; 88 89} 90</style> 91<script> 92if(parent.location.pathname.search("index") === -1) top.location.href = "../index.asp"; 93 94/*Initialize array*/ 95var cpu_info_old = new Array(); 96var core_num = '<%cpu_core_num();%>'; 97var cpu_usage_array = new Array(); 98var array_size = 46; 99for(i=0;i<core_num;i++){ 100 cpu_info_old[i] = { 101 total:0, 102 usage:0 103 } 104 105 cpu_usage_array[i] = new Array(); 106 for(j=0;j<array_size;j++){ 107 cpu_usage_array[i][j] = 101; 108 } 109} 110var ram_usage_array = new Array(array_size); 111for(i=0;i<array_size;i++){ 112 ram_usage_array[i] = 101; 113} 114/*End*/ 115 116function initial(){ 117 generate_cpu_field(); 118 if((parent.sw_mode == 2 || parent.sw_mode == 4) && '<% nvram_get("wlc_band"); %>' == '<% nvram_get("wl_unit"); %>') 119 document.form.wl_subunit.value = 1; 120 else 121 document.form.wl_subunit.value = -1; 122 123 if(band5g_support){ 124 document.getElementById("t0").style.display = ""; 125 document.getElementById("t1").style.display = ""; 126 127 if(wl_info.band5g_2_support) 128 tab_reset(0); 129 130 if(smart_connect_support && parent.sw_mode != 4) 131 change_smart_connect('<% nvram_get("smart_connect_x"); %>'); 132 133 // disallow to use the other band as a wireless AP 134 if(parent.sw_mode == 4 && !localAP_support){ 135 for(var x=0; x<wl_info.wl_if_total;x++){ 136 if(x != '<% nvram_get("wlc_band"); %>') 137 document.getElementById('t'+parseInt(x)).style.display = 'none'; 138 } 139 } 140 } 141 else{ 142 document.getElementById("t0").style.display = ""; 143 } 144 145 if(parent.wlc_express == '1' && parent.sw_mode == '2'){ 146 document.getElementById("t0").style.display = "none"; 147 } 148 else if(parent.wlc_express == '2' && parent.sw_mode == '2'){ 149 document.getElementById("t1").style.display = "none"; 150 } 151 152 detect_CPU_RAM(); 153} 154 155function tabclickhandler(wl_unit){ 156 if(wl_unit == 3){ 157 location.href = "router_status.asp"; 158 } 159 else{ 160 if((parent.sw_mode == 2 || parent.sw_mode == 4) && '<% nvram_get("wlc_band"); %>' == wl_unit) 161 document.form.wl_subunit.value = 1; 162 else 163 document.form.wl_subunit.value = -1; 164 165 if(parent.wlc_express != '0') 166 document.form.wl_subunit.value = 1; 167 168 document.form.wl_unit.value = wl_unit; 169 document.form.current_page.value = "device-map/router.asp"; 170 FormActions("/apply.cgi", "change_wl_unit", "", ""); 171 document.form.target = "hidden_frame"; 172 document.form.submit(); 173 } 174} 175 176function render_RAM(total, free, used){ 177 var pt = ""; 178 var used_percentage = 0; 179 var total_MB = 0, free_MB = 0, used_MB =0; 180 181 total_MB = Math.round(total/1024); 182 free_MB = Math.round(free/1024); 183 used_MB = Math.round(used/1024); 184 185 document.getElementById('ram_total_info').innerHTML = total_MB + "MB"; 186 document.getElementById('ram_free_info').innerHTML = free_MB + "MB"; 187 document.getElementById('ram_used_info').innerHTML = used_MB + "MB"; 188 189 used_percentage = Math.round((used/total)*100); 190 document.getElementById('ram_bar').style.width = used_percentage +"%"; 191 document.getElementById('ram_bar').style.width = used_percentage +"%"; 192 document.getElementById('ram_quantification').innerHTML = used_percentage +"%"; 193 194 ram_usage_array.push(100 - used_percentage); 195 ram_usage_array.splice(0,1); 196 197 for(i=0;i<array_size;i++){ 198 pt += i*6 +","+ ram_usage_array[i] + " "; 199 } 200 201 document.getElementById('ram_graph').setAttribute('points', pt); 202} 203 204function render_CPU(cpu_info_new){ 205 var pt; 206 var percentage = 0; 207 var total_diff = 0; 208 var usage_diff = 0; 209 210 for(i=0;i<core_num;i++){ 211 pt = ""; 212 total_diff = (cpu_info_old[i].total == 0)? 0 : (cpu_info_new[i].total - cpu_info_old[i].total); 213 usage_diff = (cpu_info_old[i].usage == 0)? 0 : (cpu_info_new[i].usage - cpu_info_old[i].usage); 214 215 if(total_diff == 0) 216 percentage = 0; 217 else 218 percentage = parseInt(100*usage_diff/total_diff); 219 220 document.getElementById('cpu'+i+'_bar').style.width = percentage +"%"; 221 document.getElementById('cpu'+i+'_quantification').innerHTML = percentage +"%" 222 cpu_usage_array[i].push(100 - percentage); 223 cpu_usage_array[i].splice(0,1); 224 for(j=0;j<array_size;j++){ 225 pt += j*6 +","+ cpu_usage_array[i][j] + " "; 226 } 227 228 document.getElementById('cpu'+i+'_graph').setAttribute('points', pt); 229 cpu_info_old[i].total = cpu_info_new[i].total; 230 cpu_info_old[i].usage = cpu_info_new[i].usage; 231 } 232} 233 234 235function detect_CPU_RAM(){ 236 $.ajax({ 237 url: '/cpu_ram_status.xml', 238 dataType: 'xml', 239 error: function(xhr){ 240 detect_CPU_RAM(); 241 }, 242 success: function(response){ 243 var cpu_info_new = new Array(); 244 data = response; 245 cpu_object = data.getElementsByTagName('cpu'); 246 for(i=0;i<core_num;i++){ 247 cpu_info_new[i] = { 248 total: cpu_object[i].childNodes[1].textContent, 249 usage: cpu_object[i].childNodes[3].textContent 250 }; 251 } 252 253 mem_info = data.getElementsByTagName('mem_info')[0]; 254 mem_object = { 255 total: mem_info.getElementsByTagName('total')[0].textContent, 256 free: mem_info.getElementsByTagName('free')[0].textContent, 257 used: mem_info.getElementsByTagName('used')[0].textContent, 258 } 259 260 render_CPU(cpu_info_new); 261 render_RAM(mem_object.total, mem_object.free, mem_object.used); 262 setTimeout("detect_CPU_RAM();", 2000); 263 } 264 }); 265} 266 267function tab_reset(v){ 268 var tab_array1 = document.getElementsByClassName("tab_NW"); 269 var tab_array2 = document.getElementsByClassName("tabclick_NW"); 270 var tab_width = Math.floor(270/(wl_info.wl_if_total+1)); 271 var i = 0; 272 while(i < tab_array1.length){ 273 tab_array1[i].style.width=tab_width+'px'; 274 tab_array1[i].style.display = ""; 275 i++; 276 } 277 278 if(typeof tab_array2[0] != "undefined"){ 279 tab_array2[0].style.width=tab_width+'px'; 280 tab_array2[0].style.display = ""; 281 } 282 283 if(v == 0){ 284 document.getElementById("span0").innerHTML = "2.4GHz"; 285 if(wl_info.band5g_2_support){ 286 document.getElementById("span1").innerHTML = "5GHz-1"; 287 document.getElementById("span2").innerHTML = "5GHz-2"; 288 }else{ 289 document.getElementById("span1").innerHTML = "5GHz"; 290 document.getElementById("t2").style.display = "none"; 291 } 292 }else if(v == 1){ //Smart Connect 293 if(based_modelid == "RT-AC5300") 294 document.getElementById("span0").innerHTML = "2.4GHz, 5GHz-1 and 5GHz-2"; 295 else 296 document.getElementById("span0").innerHTML = "Tri-band Smart Connect"; 297 document.getElementById("t1").style.display = "none"; 298 document.getElementById("t2").style.display = "none"; 299 document.getElementById("t0").style.width = (tab_width*wl_info.wl_if_total+10) +'px'; 300 } 301 else if(v == 2){ //5GHz Smart Connect 302 document.getElementById("span0").innerHTML = "2.4GHz"; 303 document.getElementById("span1").innerHTML = "5GHz-1 and 5GHz-2"; 304 document.getElementById("t2").style.display = "none"; 305 document.getElementById("t1").style.width = "143px"; 306 document.getElementById("span1").style.padding = "5px 4px 5px 7px"; 307 } 308} 309 310function change_smart_connect(v){ 311 switch(v){ 312 case '0': 313 tab_reset(0); 314 break; 315 case '1': 316 tab_reset(1); 317 break; 318 case '2': 319 tab_reset(2); 320 break; 321 } 322} 323 324function generate_cpu_field(){ 325 var code = ""; 326 for(i=0;i<core_num;i++){ 327 code += "<tr><td><div class='cpu_div'><table>"; 328 code += "<tr><td><div><table>"; 329 code += "<tr>"; 330 code += "<td class='loading_bar' colspan='2'>"; 331 code += "<div>"; 332 code += "<div id='cpu"+i+"_bar' class='status_bar'></div>"; 333 code += "</div>"; 334 code += "</td>"; 335 code += "<td>"; 336 code += "<div>Core "+parseInt(i+1)+"</div>"; 337 code += "</td>"; 338 code += "<td class='percentage_bar'>"; 339 code += "<div id='cpu"+i+"_quantification'>0%</div>"; 340 code += "</td>"; 341 code += "</tr>"; 342 code += "</table></div></td></tr>"; 343 code += "</table></div></td></tr>"; 344 345 document.getElementById('cpu'+i+'_graph').style.display = ""; 346 } 347 348 if(getBrowser_info().ie == "9.0") 349 document.getElementById('cpu_field').outerHTML = code; 350 else 351 document.getElementById('cpu_field').innerHTML = code; 352} 353 354</script> 355</head> 356<body class="statusbody" onload="initial();"> 357<iframe name="hidden_frame" id="hidden_frame" width="0" height="0" frameborder="0"></iframe> 358<form method="post" name="form" id="form" action="/start_apply2.htm"> 359<input type="hidden" name="current_page" value="device-map/router_status.asp"> 360<input type="hidden" name="next_page" value=""> 361<input type="hidden" name="action_mode" value=""> 362<input type="hidden" name="action_script" value=""> 363<input type="hidden" name="action_wait" value=""> 364<input type="hidden" name="productid" value="<% nvram_get("productid"); %>"> 365<input type="hidden" name="wl_unit" value="<% nvram_get("wl_unit"); %>"> 366<input type="hidden" name="wl_subunit" value="-1"> 367 368<table border="0" cellpadding="0" cellspacing="0" style="padding-left:5px"> 369<tr> 370 <td> 371 <table width="100px" border="0" align="left" style="margin-left:8px;" cellpadding="0" cellspacing="0"> 372 <td> 373 <div id="t0" class="tab_NW" align="center" style="font-weight: bolder;display:none; margin-right:2px; width:90px;" onclick="tabclickhandler(0)"> 374 <span id="span0" style="cursor:pointer;font-weight: bolder;">2.4GHz</span> 375 </div> 376 </td> 377 <td> 378 <div id="t1" class="tab_NW" align="center" style="font-weight: bolder;display:none; margin-right:2px; width:90px;" onclick="tabclickhandler(1)"> 379 <span id="span1" style="cursor:pointer;font-weight: bolder;">5GHz</span> 380 </div> 381 </td> 382 <td> 383 <div id="t2" class="tab_NW" align="center" style="font-weight: bolder;display:none; margin-right:2px; width:90px;" onclick="tabclickhandler(2)"> 384 <span id="span2" style="cursor:pointer;font-weight: bolder;">5GHz-2</span> 385 </div> 386 </td> 387 <td> 388 <div id="t3" class="tabclick_NW" align="center" style="font-weight: bolder; margin-right:2px; width:90px;" onclick="tabclickhandler(3)"> 389 <span id="span3" style="cursor:pointer;font-weight: bolder;">Status</span> 390 </div> 391 </td> 392 </table> 393 </td> 394</tr> 395 396<tr> 397 <td> 398 <div> 399 <table width="98%" border="1" align="center" cellpadding="4" cellspacing="0" class="table1px" id="cpu"> 400 <tr> 401 <td > 402 <div class="title">CPU</div> 403 <img class="line_image" src="/images/New_ui/networkmap/linetwo2.png"> 404 </td> 405 </tr > 406 <tr> 407 <td> 408 <table id="cpu_field"></table> 409 </td> 410 </tr> 411 412 <tr style="height:100px;"> 413 <td colspan="3"> 414 <div style="margin:0px 11px 0px 11px;background-color:black;"> 415 <svg width="270px" height="100px"> 416 <g> 417 <line stroke-width="1" stroke-opacity="1" stroke="rgb(255,255,255)" x1="0" y1="0%" x2="100%" y2="0%" /> 418 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="25%" x2="100%" y2="25%" /> 419 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="50%" x2="100%" y2="50%" /> 420 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="75%" x2="100%" y2="75%" /> 421 <line stroke-width="1" stroke-opacity="1" stroke="rgb(255,255,255)" x1="0" y1="100%" x2="100%" y2="100%" /> 422 </g> 423 <g> 424 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="98%">0%</text> 425 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="55%">50%</text> 426 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="11%">100%</text> 427 </g> 428 <line stroke-width="1" stroke-opacity="1" stroke="rgb(0,0,121)" x1="0" y1="0%" x2="0" y2="100%" id="tick1" /> 429 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="30" y1="0%" x2="30" y2="100%" id="tick2" /> 430 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="60" y1="0%" x2="60" y2="100%" id="tick3" /> 431 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="90" y1="0%" x2="90" y2="100%" id="tick4" /> 432 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="120" y1="0%" x2="120" y2="100%" id="tick5" /> 433 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="150" y1="0%" x2="150" y2="100%" id="tick6" /> 434 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="180" y1="0%" x2="180" y2="100%" id="tick7" /> 435 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="210" y1="0%" x2="210" y2="100%" id="tick8" /> 436 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="240" y1="0%" x2="240" y2="100%" id="tick9" /> 437 <line stroke-width="1" stroke-opacity="1" stroke="rgb(0,0,121)" x1="270" y1="0%" x2="270" y2="100%" id="tick10" /> 438 439 <polyline id="cpu0_graph" style="fill:none;stroke:#FF9000;stroke-width:1;width:200px;" points=""></polyline> 440 <polyline id="cpu1_graph" style="fill:none;stroke:#3CF;stroke-width:1;width:200px;display:none;" points=""></polyline> 441 <polyline id="cpu2_graph" style="fill:none;stroke:#FC0;stroke-width:1;width:200px;display:none;" points=""></polyline> 442 <polyline id="cpu3_graph" style="fill:none;stroke:#FF44FF;stroke-width:1;width:200px;display:none;" points=""></polyline> 443 </svg> 444 </div> 445 </td> 446 </tr> 447 <tr> 448 <td style="border-bottom:5px #2A3539 solid;padding:0px 10px 5px 10px;"></td> 449 </tr> 450 </table> 451 </div> 452 </td> 453</tr> 454 455<tr> 456 <td> 457 <div> 458 <table width="98%" border="1" align="center" cellpadding="4" cellspacing="0" class="table1px"> 459 <tr> 460 <td colspan="3"> 461 <div class="title">RAM</div> 462 <img class="line_image" src="/images/New_ui/networkmap/linetwo2.png"> 463 </td> 464 </tr> 465 <tr class="ram_table"> 466 <td> 467 <div>Used</div> 468 <div id="ram_used_info"></div> 469 </td> 470 <td> 471 <div>Free</div> 472 <div id="ram_free_info"></div> 473 </td> 474 <td> 475 <div>Total</div> 476 <div id="ram_total_info"></div> 477 </td> 478 </tr> 479 <tr> 480 <td colspan="3"> 481 <div> 482 <table> 483 <tr> 484 <td class="loading_bar" colspan="2"> 485 <div> 486 <div id="ram_bar" class="status_bar"></div> 487 </div> 488 </td> 489 <td> 490 <div style="width:39px;"></div> 491 </td> 492 <td class="percentage_bar"> 493 <div id="ram_quantification">0%</div> 494 </td> 495 </tr> 496 </table> 497 </div> 498 </td> 499 </tr> 500 <tr style="height:100px;"> 501 <td colspan="3"> 502 <div style="margin:0px 11px 0px 11px;background-color:black;"> 503 <svg width="270px" height="100px"> 504 <g> 505 <line stroke-width="1" stroke-opacity="1" stroke="rgb(255,255,255)" x1="0" y1="0%" x2="100%" y2="0%" /> 506 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="25%" x2="100%" y2="25%" /> 507 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="50%" x2="100%" y2="50%" /> 508 <line stroke-width="1" stroke-opacity="0.2" stroke="rgb(255,255,255)" x1="0" y1="75%" x2="100%" y2="75%" /> 509 <line stroke-width="1" stroke-opacity="1" stroke="rgb(255,255,255)" x1="0" y1="100%" x2="100%" y2="100%" /> 510 </g> 511 512 <g> 513 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="98%">0%</text> 514 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="55%">50%</text> 515 <text font-family="Verdana" fill="#FFFFFF" font-size="8" x="0" y="11%">100%</text> 516 </g> 517 518 <line stroke-width="1" stroke-opacity="1" stroke="rgb(0,0,121)" x1="0" y1="0%" x2="0" y2="100%" id="tick1" /> 519 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="30" y1="0%" x2="30" y2="100%" id="tick2" /> 520 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="60" y1="0%" x2="60" y2="100%" id="tick3" /> 521 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="90" y1="0%" x2="90" y2="100%" id="tick4" /> 522 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="120" y1="0%" x2="120" y2="100%" id="tick5" /> 523 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="150" y1="0%" x2="150" y2="100%" id="tick6" /> 524 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="180" y1="0%" x2="180" y2="100%" id="tick7" /> 525 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="210" y1="0%" x2="210" y2="100%" id="tick8" /> 526 <line stroke-width="1" stroke-opacity="0.3" stroke="rgb(40,255,40)" x1="240" y1="0%" x2="240" y2="100%" id="tick9" /> 527 <line stroke-width="1" stroke-opacity="1" stroke="rgb(0,0,121)" x1="270" y1="0%" x2="270" y2="100%" id="tick10" /> 528 529 <polyline id="ram_graph" style="fill:none;stroke:#0096FF;stroke-width:1;width:200px;" points=""> 530 </svg> 531 </div> 532 </td> 533 </tr> 534 535 </table> 536 </div> 537 </td> 538</tr> 539</table> 540</form> 541</body> 542</html> 543
