/[pdpsoft]/trunk/nl.nikhef.ndpf.tools/network-stats-mashup/index.php
ViewVC logotype

Contents of /trunk/nl.nikhef.ndpf.tools/network-stats-mashup/index.php

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1657 - (show annotations) (download) (as text)
Thu Apr 29 16:00:54 2010 UTC (12 years ago) by aramv
File MIME type: text/x-php
File size: 5439 byte(s)
Added feature to navigate constituents of trunks.
1 <?php
2 $title = "Grid network summary";
3 include('includes/class.cricket_spider.php');
4 include('includes/class.trunk.php');
5 include('includes/ui_code.php');
6 ?>
7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
8 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
9 <head>
10 <title><?=$title?></title>
11 <link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" charset="utf-8"/>
12 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
13 <script type="text/javascript" src="javascripts/wz_jsgraphics.js"></script>
14 <script type="text/javascript" src="javascripts/mapper.js"></script>
15 <script type="text/javascript" src="javascripts/mapper_hacks.js"></script>
16 <script type="text/javascript">
17 <!-- javascript start
18 /* associative arrays.
19 daily_images_by_url : url -> image_link
20 daily_images_pre_cache : url -> image object
21
22 weekly_images_by_url : url -> image_link
23 weekly_images_pre_cache : url -> image object
24
25 names_by_url : url -> name
26 */
27 var snippets_by_url = Array();
28 var images_pre_cache = Array();
29 var images = Array();
30 var constituent_images = Array();
31
32 <?php
33 $cs = new CricketSpider('image_map.html');
34 //print_r($cs->trunks);
35 foreach($cs->trunks as $index => $trunk){
36 ?>
37 snippets_by_url["<?=$trunk->trunk_page_url?>"] = '<?=$trunk->to_html()?>';
38 <?php
39 if($trunk->weekly_image_url()){
40 ?>
41 images.push('<?=$trunk->weekly_image_url() ?>');
42 <?php
43 }
44 if($trunk->daily_image_url()){
45 ?>
46 images.push('<?=$trunk->daily_image_url() ?>');
47 <?php
48 }
49 if(!empty($trunk->constituents)){
50 foreach($trunk->constituents as $trunk => $constituent){
51 if($constituent){
52 ?>
53 constituent_images["<?=$constituent->trunk_page_url?>"] = ['<?=$constituent->daily_image_url() ?>', '<?=$constituent->weekly_image_url()?>'];
54 <?php
55 }
56 }
57 }
58 }
59 ?>
60
61 /* pre-loads all the graphs into an array that we can use to splice them back into the DOM */
62 function pre_cache_images(){
63 var id;
64 for(id in images){
65 images_pre_cache[id] = new Image();
66 images_pre_cache[id].src = images[id];
67 }
68
69 for(id in constituent_images){
70 daily_img = constituent_images[id][0];
71 weekly_img = constituent_images[id][1];
72 images_pre_cache[weekly_img] = new Image();
73 images_pre_cache[weekly_img].src = daily_img;
74 images_pre_cache[daily_img] = new Image();
75 images_pre_cache[daily_img].src = weekly_img;
76 }
77 }
78
79 /* callback for onmouseover event of areas */
80 function show_graph(url){
81 snippet = document.getElementById('info_div');
82 snippet.innerHTML = snippets_by_url[url];
83 }
84
85 function switch_graphs(url){
86 dga = document.getElementById('daily_graph_a');
87 wga = document.getElementById('weekly_graph_a');
88 dgi = document.getElementById('daily_graph_i');
89 wgi = document.getElementById('weekly_graph_i');
90 dga.href = url;
91 wga.href = url;
92 dgi.src = constituent_images[url][0];
93 wgi.src = constituent_images[url][1];
94 <?php
95 if(is_mobile()){
96 ?>
97 switch_clicks('a');
98 <?php
99 }
100 ?>
101 }
102
103
104 function switch_clicks(type){
105 var areas = document.getElementsByTagName(type);
106 for(idx in areas){
107 areas[idx].onclick = new Function('return false;');
108 areas[idx].ondblclick = new Function('window.location = "' + areas[idx].href+'";');
109 }
110 }
111
112 // javascript end -->
113 </script>
114 </head>
115 <body>
116 <div id="wrapper">
117 <div class="header">
118 <h1><?=$title?></h1>
119 </div>
120 <div class="image_div">
121 <p>
122 <?php
123 /* read in GIMP output and set class attributes to enable fancy javascript features */
124 $image_map = preg_replace('/<img (.+) border="0" (.+)\/>/', '<img \1 \2 id="network_graph" class="mapper noborder" alt="" />', file_get_contents('image_map.html'));
125 /* xhtml fix - map needs an id attribute but GIMP can't edit imagemaps that have it */
126 $image_map = preg_replace('/<map(.*)>/','<map\1 id="map">', $image_map);
127 /* add some more info to the areas, based on their status */
128 /* I tried referencing the mathces[2] twice to get a prober alt tag using the name_from_url() function. However, this doesn't seem to work :( */
129 $image_map = preg_replace_callback('/<area (.+) href="(.+)" \/>/', create_function('$matches', 'return "<area ". preg_replace("/alt=\".*\"/", "", $matches[1]) . " href=\"" . $matches[2] . "\" alt=\"\" onmouseover=\"show_graph(this.href);\" class=\"icolor" . highlight_color($matches[1]) . " iborder" . border_color($matches[1]) . "\" />";'), $image_map);
130 echo $image_map;
131 ?>
132 </p>
133 </div>
134 <div id="info_div">
135 <noscript>
136 <p>
137 Please enable javascript to see graphs when hovering over trunks.
138 </p>
139 </noscript>
140 </div>
141 <div class="clear">&nbsp;</div>
142 <div class="links_div">
143 <h4>Trunks listed: </h4>
144 <ul>
145 <?php
146 foreach($cs->trunks as $index => $trunk){
147 ?>
148 <li><a href="<?=$trunk->trunk_page_url?>"><?=$trunk->name?></a></li>
149 <?php
150 }
151 ?>
152 </ul>
153 </div>
154 </div>
155 <script type="text/javascript">
156 pre_cache_images();
157 <?php
158 /* make double clicks work as clicks for mobile browsers and disable regular clicks*/
159 if(is_mobile()){
160 ?>
161 var loader_chain = window.onload;
162 window.onload = function(){
163 switch_clicks('area');
164 loader_chain();
165 }
166 <?php
167 }
168 ?>
169 </script>
170 </body>
171 </html>

grid.support@nikhef.nl
ViewVC Help
Powered by ViewVC 1.1.28