Commit fbddfc05cf87a5f70802e0a99847c8e3f8456ba0

  • avatar
  • Ajay kulkarni <ajaykools @gm…l.com>
  • Tue Jun 12 19:09:51 IST 2012
Replaced tree structure with form
  • openlayers.html 80 -------------------+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • tree.js 1313 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

openlayers.html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml"2<html xmlns="http://www.w3.org/1999/xhtml"
3 <head>3 <head>
4 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
4 <script type="text/javascript">5 <script type="text/javascript">
5 function annotationTree() {
6 tree_div = document.getElementById('annotation-tree');
7 tree_div.style.display = 'block';
6 function annotationTree() {
7 $('#annotation-tree').show();
8 }8 }
9
10 function closeForm() {
11 $('#annotation-tree').hide();
12 }
13
14 function faceOrnament() {
15 x = document.getElementsByClassName('annotate');
16 if(x[0].checked == true && x[0].value == 'face') {
17 $('face').show();
18 }
19 else if (x[1].checked == true && x[1].value == 'ornament') {
20 $('ornament').show();
21 }
22 else {
23 alert('Please select any one of the option')
24 }
25 }
9 </script>26 </script>
10 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
11 <script type="text/javascript" src="./jit.js"></script>
12 <script type="text/javascript" src="./tree.js"></script>
13 <style type='text/css'>27 <style type='text/css'>
14 #annotation-tree {28 #annotation-tree {
15 position:fixed;29 position:fixed;
……
35 display:none;35 display:none;
36 z-index:99999; 36 z-index:99999;
37 }37 }
38 #face, #ornament {
39 display:none;
40 }
38 </style>41 </style>
39 <title>Lepakshi Mural</title>42 <title>Lepakshi Mural</title>
40 <meta http-equiv='imagetoolbar' content='no'/>43 <meta http-equiv='imagetoolbar' content='no'/>
41 <link rel="stylesheet" type="text/css" href="./tree.css"></link>
44 <!-- <link rel="stylesheet" type="text/css" href="./tree.css"></link> -->
42 <style type="text/css"> v\:* {behavior:url(#default#VML);}45 <style type="text/css"> v\:* {behavior:url(#default#VML);}
43 html, body {padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }46 html, body {padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
44 body { margin: 10px; background: #fff; }47 body { margin: 10px; background: #fff; }
……
89 </div>89 </div>
90 <script type="text/javascript" >resize()</script>90 <script type="text/javascript" >resize()</script>
91 <div id="annotation-tree">91 <div id="annotation-tree">
92 <input type="button" value="close" onClick="treeClose();"/>
93 <input type="button" value="publish" onClick="publish();"/>
94 <div id="infovis">
95 <form>
96 <div>Character: <span id="character-value"></span></div>
97 <div>Ornament </div>
98 <div>Material: <span id="material-value"></span></div>
99 <div>Jewellery: <span id="jewellery-value"></span></div>
100 </form>
101 </div>
102 </div>
103</body>
92 <input id="close-form" type="submit" onClick="closeForm();" value="Close" title="Close this form" />
93 <div id="annotate" name="annotateForm" >
94 Choose a category for annotated part : <br />
95 <input type="radio" class="annotate" name="annotate" value="face" /> Face <br />
96 <input type="radio" class="annotate" name="annotate" value="ornament" /> Ornament <br />
97 <input type="submit" name="annotate" value="Next" onclick="faceOrnament();" />
98 </div>
99 <div id="face" name="faceForm">
100 Choose whose face is it : <br>
101 <input type="radio" name="face" value="Shiva" /> Shiva <br />
102 <input type="radio" name="face" value="Vishnu" /> Vishnu <br />
103 <input type="radio" name="face" value="Krishna" /> Krishna <br />
104 <input type="radio" name="face" value="Parvati" /> Parvati <br />
105 <input type="radio" name="face" value="Lakshmi" /> Lakshmi <br />
106 <input type="radio" name="face" value="Saraswati" /> Saraswati <br />
107 </div>
108
109 <div id="ornament" name="ornamentForm" >
110 Choose what jewellery is it : <br />
111 <input type="radio" name="jewellery" value="Neckless" /> Neckless <br />
112 <input type="radio" name="jewellery" value="Bangles" /> Bangles <br />
113 <input type="radio" name="jewellery" value="Ear-ring" /> Ear-ring <br />
114 <input type="radio" name="jewellery" value="Nose-ring" /> Nose-ring <br />
115 <input type="radio" name="jewellery" value="Waistlet" /> Waistlet <br />
116 <input type="radio" name="jewellery" value="Ankalet" /> Ankalet <br />
117 <br />
118 Choose what materal of an ornament : <br />
119 <input type="radio" name="material" value="Gold" /> Gold <br />
120 <input type="radio" name="material" value="Silver" /> Silver <br />
121 <input type="radio" name="material" value="Bronze" /> Bronze <br />
122 <input type="radio" name="material" value="Ruby" /> Ruby <br />
123 <input type="radio" name="material" value="Diamond" /> Diamond <br />
124 <input type="radio" name="material" value="Platinum" /> Platinum <br />
125 </div>
126
127 </div>
128 </body>
104</html>129</html>

tree.js

1var labelType, useGradients, nativeTextSupport, animate;1var labelType, useGradients, nativeTextSupport, animate;
22
3(function() {3(function() {
4 var ua = navigator.userAgent,
5 iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
6 typeOfCanvas = typeof HTMLCanvasElement,
7 nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
8 textSupport = nativeCanvasSupport
4 var ua = navigator.userAgent,
5 iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
6 typeOfCanvas = typeof HTMLCanvasElement,
7 nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
8 textSupport = nativeCanvasSupport
9 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');9 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
10 //I'm setting this based on the fact that ExCanvas provides text support for IE
11 //and that as of today iPhone/iPad current text support is lame
12 labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
10 //I'm setting this based on the fact that ExCanvas provides text support for IE
11 //and that as of today iPhone/iPad current text support is lame
12 labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
16})();16})();
1717
18var Log = {
19 elem: false,
20 write: function(text){
21 if (!this.elem)
22 this.elem = document.getElementById('log');
23 this.elem.innerHTML = text;
24 this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
25 }
26};
27
28
18function inits(){29function inits(){
19 //init data30 //init data
20 var json = {31 var json = {
21 "id": "characteristics",
22 "name": "Characteristics",
23 "children": [
24 // Location
25 {
26 "id": "character",
27 "name": "Character",
28 "data": {
29 "band": "Characteristics",
30 "relation": "coordinators.html"
31 },
32 "children": [{
33 "id": "shiva",
34 "name": "Shiva",
35 "data": {
36 "band": "Character",
37 "relation": "individual_ranganathan.html"
38 },
39 "children": []
40
41 }, {
42 "id": "parvathi",
43 "name": "Parvathi",
44 "data": {
45 "band": "Character",
46 "relation": "individual_sharat.html"
47 },
48 "children": []
49 }, {
50 "id": "ganesha",
51 "name": "Ganesha",
52 "data": {
53 "band": "Character",
54 "relation": "individual_sharat.html"
55 },
56 "children": []
57 }, {
58 "id": "bramha",
59 "name": "Bramha",
60 "data": {
61 "band": "Character",
62 "relation": "individual_sharat.html"
63 },
64 "children": []
65 }, {
66 "id": "vishnu",
67 "name": "Vishnu",
68 "data": {
69 "band": "Character",
70 "relation": "individual_sharat.html"
71 },
72 "children": []
73 }, {
74 "id": "krishna",
75 "name": "Krishna",
76 "data": {
77 "band": "Character",
78 "relation": "individual_muralimohan.html"
79 },
80 "children": []
81 }, {
82 "id": "radha",
83 "name": "Radha",
84 "data": {
85 "band": "Character",
86 "relation": "individual_muralimohan.html"
87 },
88 "children": []
89 }]
90 },
91 // Languages
92 {
93 "id": "ornament",
94 "name": "Ornament",
95 "data": {
96 "band": "Characteristics",
97 "relation": "cultural.html"
98 },
99 "children": [{
100 "id": "jewellery",
101 "name": "Jewellery",
102 "data": {
103 "band": "Ornament",
104 "relation": "project_murals.html"
105 },
106 "children": [{
107 "id": "ear-ring",
108 "name": "Ear-ring",
109 "data": {
110 "band": "Jewellery",
111 "relation": "project_murals.html"
112 },
113 "children": []
114 },{
115 "id": "ring",
116 "name": "Ring",
117 "data": {
118 "band": "Jewellery",
119 "relation": "project_murals.html"
120 },
121 "children": []
122 },{
123 "id": "nose-ring",
124 "name": "Nose-ring",
125 "data": {
126 "band": "Jewellery",
127 "relation": "project_murals.html"
128 },
129 "children": []
130 },{
131 "id": "pendent",
132 "name": "Pendent",
133 "data": {
134 "band": "Jewellery",
135 "relation": "project_murals.html"
136 },
137 "children": []
138 },{
139 "id": "ankelet",
140 "name": "Ankelet",
141 "data": {
142 "band": "Jewellery",
143 "relation": "project_murals.html"
144 },
145 "children": []
146 },{
147 "id": "bracelet",
148 "name": "Bracelet",
149 "data": {
150 "band": "Jewellery",
151 "relation": "project_murals.html"
152 },
153 "children": []
154 },{
155 "id": "bangles",
156 "name": "Bangles",
157 "data": {
158 "band": "Jewellery",
159 "relation": "project_murals.html"
160 },
161 "children": []
162 }]
163 }, {
164 "id": "material",
165 "name": "Material",
166 "data": {
167 "band": "Ornament",
168 "relation": "project_knowledge.html"
169 },
170 "children": [{
171 "id": "gold",
172 "name": "Gold",
173 "data": {
174 "band": "Material",
175 "relation": "project_murals.html"
176 },
177 "children": []
178 },{
179 "id": "silver",
180 "name": "Silver",
181 "data": {
182 "band": "Material",
183 "relation": "project_murals.html"
184 },
185 "children": []
186 },{
187 "id": "bronze",
188 "name": "Bronze",
189 "data": {
190 "band": "Material",
191 "relation": "project_murals.html"
192 },
193 "children": []
194 },{
195 "id": "ruby",
196 "name": "Ruby",
197 "data": {
198 "band": "Material",
199 "relation": "project_murals.html"
200 },
201 "children": []
202 },{
203 "id": "copper",
204 "name": "Copper",
205 "data": {
206 "band": "Material",
207 "relation": "project_murals.html"
208 },
209 "children": []
210 },{
211 "id": "diamond",
212 "name": "Diamond",
213 "data": {
214 "band": "Material",
215 "relation": "project_murals.html"
216 },
217 "children": []
218 },{
219 "id": "topaz",
220 "name": "Topaz",
221 "data": {
222 "band": "Material",
223 "relation": "project_murals.html"
224 },
225 "children": []
226 }]
227 }]
228 }],
229 "data": {
230 "relation": "index.html"
231 }
32 id: "node02",
33 name: "0.2",
34 data: {},
35 children: [{
36 id: "node13",
37 name: "1.3",
38 data: {},
39 children: [{
40 id: "node24",
41 name: "2.4",
42 data: {},
43 children: [{
44 id: "node35",
45 name: "3.5",
46 data: {},
47 children: [{
48 id: "node46",
49 name: "4.6",
50 data: {},
51 children: []
52 }]
53 }, {
54 id: "node37",
55 name: "3.7",
56 data: {},
57 children: [{
58 id: "node48",
59 name: "4.8",
60 data: {},
61 children: []
62 }, {
63 id: "node49",
64 name: "4.9",
65 data: {},
66 children: []
67 }, {
68 id: "node410",
69 name: "4.10",
70 data: {},
71 children: []
72 }, {
73 id: "node411",
74 name: "4.11",
75 data: {},
76 children: []
77 }]
78 }, {
79 id: "node312",
80 name: "3.12",
81 data: {},
82 children: [{
83 id: "node413",
84 name: "4.13",
85 data: {},
86 children: []
87 }]
88 }, {
89 id: "node314",
90 name: "3.14",
91 data: {},
92 children: [{
93 id: "node415",
94 name: "4.15",
95 data: {},
96 children: []
97 }, {
98 id: "node416",
99 name: "4.16",
100 data: {},
101 children: []
102 }, {
103 id: "node417",
104 name: "4.17",
105 data: {},
106 children: []
107 }, {
108 id: "node418",
109 name: "4.18",
110 data: {},
111 children: []
112 }]
113 }, {
114 id: "node319",
115 name: "3.19",
116 data: {},
117 children: [{
118 id: "node420",
119 name: "4.20",
120 data: {},
121 children: []
122 }, {
123 id: "node421",
124 name: "4.21",
125 data: {},
126 children: []
127 }]
128 }]
129 }, {
130 id: "node222",
131 name: "2.22",
132 data: {},
133 children: [{
134 id: "node323",
135 name: "3.23",
136 data: {},
137 children: [{
138 id: "node424",
139 name: "4.24",
140 data: {},
141 children: []
142 }]
143 }]
144 }]
145 }, {
146 id: "node125",
147 name: "1.25",
148 data: {},
149 children: [{
150 id: "node226",
151 name: "2.26",
152 data: {},
153 children: [{
154 id: "node327",
155 name: "3.27",
156 data: {},
157 children: [{
158 id: "node428",
159 name: "4.28",
160 data: {},
161 children: []
162 }, {
163 id: "node429",
164 name: "4.29",
165 data: {},
166 children: []
167 }]
168 }, {
169 id: "node330",
170 name: "3.30",
171 data: {},
172 children: [{
173 id: "node431",
174 name: "4.31",
175 data: {},
176 children: []
177 }]
178 }, {
179 id: "node332",
180 name: "3.32",
181 data: {},
182 children: [{
183 id: "node433",
184 name: "4.33",
185 data: {},
186 children: []
187 }, {
188 id: "node434",
189 name: "4.34",
190 data: {},
191 children: []
192 }, {
193 id: "node435",
194 name: "4.35",
195 data: {},
196 children: []
197 }, {
198 id: "node436",
199 name: "4.36",
200 data: {},
201 children: []
202 }]
203 }]
204 }, {
205 id: "node237",
206 name: "2.37",
207 data: {},
208 children: [{
209 id: "node338",
210 name: "3.38",
211 data: {},
212 children: [{
213 id: "node439",
214 name: "4.39",
215 data: {},
216 children: []
217 }, {
218 id: "node440",
219 name: "4.40",
220 data: {},
221 children: []
222 }, {
223 id: "node441",
224 name: "4.41",
225 data: {},
226 children: []
227 }]
228 }, {
229 id: "node342",
230 name: "3.42",
231 data: {},
232 children: [{
233 id: "node443",
234 name: "4.43",
235 data: {},
236 children: []
237 }]
238 }, {
239 id: "node344",
240 name: "3.44",
241 data: {},
242 children: [{
243 id: "node445",
244 name: "4.45",
245 data: {},
246 children: []
247 }, {
248 id: "node446",
249 name: "4.46",
250 data: {},
251 children: []
252 }, {
253 id: "node447",
254 name: "4.47",
255 data: {},
256 children: []
257 }]
258 }, {
259 id: "node348",
260 name: "3.48",
261 data: {},
262 children: [{
263 id: "node449",
264 name: "4.49",
265 data: {},
266 children: []
267 }, {
268 id: "node450",
269 name: "4.50",
270 data: {},
271 children: []
272 }, {
273 id: "node451",
274 name: "4.51",
275 data: {},
276 children: []
277 }, {
278 id: "node452",
279 name: "4.52",
280 data: {},
281 children: []
282 }, {
283 id: "node453",
284 name: "4.53",
285 data: {},
286 children: []
287 }]
288 }, {
289 id: "node354",
290 name: "3.54",
291 data: {},
292 children: [{
293 id: "node455",
294 name: "4.55",
295 data: {},
296 children: []
297 }, {
298 id: "node456",
299 name: "4.56",
300 data: {},
301 children: []
302 }, {
303 id: "node457",
304 name: "4.57",
305 data: {},
306 children: []
307 }]
308 }]
309 }, {
310 id: "node258",
311 name: "2.58",
312 data: {},
313 children: [{
314 id: "node359",
315 name: "3.59",
316 data: {},
317 children: [{
318 id: "node460",
319 name: "4.60",
320 data: {},
321 children: []
322 }, {
323 id: "node461",
324 name: "4.61",
325 data: {},
326 children: []
327 }, {
328 id: "node462",
329 name: "4.62",
330 data: {},
331 children: []
332 }, {
333 id: "node463",
334 name: "4.63",
335 data: {},
336 children: []
337 }, {
338 id: "node464",
339 name: "4.64",
340 data: {},
341 children: []
342 }]
343 }]
344 }]
345 }, {
346 id: "node165",
347 name: "1.65",
348 data: {},
349 children: [{
350 id: "node266",
351 name: "2.66",
352 data: {},
353 children: [{
354 id: "node367",
355 name: "3.67",
356 data: {},
357 children: [{
358 id: "node468",
359 name: "4.68",
360 data: {},
361 children: []
362 }, {
363 id: "node469",
364 name: "4.69",
365 data: {},
366 children: []
367 }, {
368 id: "node470",
369 name: "4.70",
370 data: {},
371 children: []
372 }, {
373 id: "node471",
374 name: "4.71",
375 data: {},
376 children: []
377 }]
378 }, {
379 id: "node372",
380 name: "3.72",
381 data: {},
382 children: [{
383 id: "node473",
384 name: "4.73",
385 data: {},
386 children: []
387 }, {
388 id: "node474",
389 name: "4.74",
390 data: {},
391 children: []
392 }, {
393 id: "node475",
394 name: "4.75",
395 data: {},
396 children: []
397 }, {
398 id: "node476",
399 name: "4.76",
400 data: {},
401 children: []
402 }]
403 }, {
404 id: "node377",
405 name: "3.77",
406 data: {},
407 children: [{
408 id: "node478",
409 name: "4.78",
410 data: {},
411 children: []
412 }, {
413 id: "node479",
414 name: "4.79",
415 data: {},
416 children: []
417 }]
418 }, {
419 id: "node380",
420 name: "3.80",
421 data: {},
422 children: [{
423 id: "node481",
424 name: "4.81",
425 data: {},
426 children: []
427 }, {
428 id: "node482",
429 name: "4.82",
430 data: {},
431 children: []
432 }]
433 }]
434 }, {
435 id: "node283",
436 name: "2.83",
437 data: {},
438 children: [{
439 id: "node384",
440 name: "3.84",
441 data: {},
442 children: [{
443 id: "node485",
444 name: "4.85",
445 data: {},
446 children: []
447 }]
448 }, {
449 id: "node386",
450 name: "3.86",
451 data: {},
452 children: [{
453 id: "node487",
454 name: "4.87",
455 data: {},
456 children: []
457 }, {
458 id: "node488",
459 name: "4.88",
460 data: {},
461 children: []
462 }, {
463 id: "node489",
464 name: "4.89",
465 data: {},
466 children: []
467 }, {
468 id: "node490",
469 name: "4.90",
470 data: {},
471 children: []
472 }, {
473 id: "node491",
474 name: "4.91",
475 data: {},
476 children: []
477 }]
478 }, {
479 id: "node392",
480 name: "3.92",
481 data: {},
482 children: [{
483 id: "node493",
484 name: "4.93",
485 data: {},
486 children: []
487 }, {
488 id: "node494",
489 name: "4.94",
490 data: {},
491 children: []
492 }, {
493 id: "node495",
494 name: "4.95",
495 data: {},
496 children: []
497 }, {
498 id: "node496",
499 name: "4.96",
500 data: {},
501 children: []
502 }]
503 }, {
504 id: "node397",
505 name: "3.97",
506 data: {},
507 children: [{
508 id: "node498",
509 name: "4.98",
510 data: {},
511 children: []
512 }]
513 }, {
514 id: "node399",
515 name: "3.99",
516 data: {},
517 children: [{
518 id: "node4100",
519 name: "4.100",
520 data: {},
521 children: []
522 }, {
523 id: "node4101",
524 name: "4.101",
525 data: {},
526 children: []
527 }, {
528 id: "node4102",
529 name: "4.102",
530 data: {},
531 children: []
532 }, {
533 id: "node4103",
534 name: "4.103",
535 data: {},
536 children: []
537 }]
538 }]
539 }, {
540 id: "node2104",
541 name: "2.104",
542 data: {},
543 children: [{
544 id: "node3105",
545 name: "3.105",
546 data: {},
547 children: [{
548 id: "node4106",
549 name: "4.106",
550 data: {},
551 children: []
552 }, {
553 id: "node4107",
554 name: "4.107",
555 data: {},
556 children: []
557 }, {
558 id: "node4108",
559 name: "4.108",
560 data: {},
561 children: []
562 }]
563 }]
564 }, {
565 id: "node2109",
566 name: "2.109",
567 data: {},
568 children: [{
569 id: "node3110",
570 name: "3.110",
571 data: {},
572 children: [{
573 id: "node4111",
574 name: "4.111",
575 data: {},
576 children: []
577 }, {
578 id: "node4112",
579 name: "4.112",
580 data: {},
581 children: []
582 }]
583 }, {
584 id: "node3113",
585 name: "3.113",
586 data: {},
587 children: [{
588 id: "node4114",
589 name: "4.114",
590 data: {},
591 children: []
592 }, {
593 id: "node4115",
594 name: "4.115",
595 data: {},
596 children: []
597 }, {
598 id: "node4116",
599 name: "4.116",
600 data: {},
601 children: []
602 }]
603 }, {
604 id: "node3117",
605 name: "3.117",
606 data: {},
607 children: [{
608 id: "node4118",
609 name: "4.118",
610 data: {},
611 children: []
612 }, {
613 id: "node4119",
614 name: "4.119",
615 data: {},
616 children: []
617 }, {
618 id: "node4120",
619 name: "4.120",
620 data: {},
621 children: []
622 }, {
623 id: "node4121",
624 name: "4.121",
625 data: {},
626 children: []
627 }]
628 }, {
629 id: "node3122",
630 name: "3.122",
631 data: {},
632 children: [{
633 id: "node4123",
634 name: "4.123",
635 data: {},
636 children: []
637 }, {
638 id: "node4124",
639 name: "4.124",
640 data: {},
641 children: []
642 }]
643 }]
644 }, {
645 id: "node2125",
646 name: "2.125",
647 data: {},
648 children: [{
649 id: "node3126",
650 name: "3.126",
651 data: {},
652 children: [{
653 id: "node4127",
654 name: "4.127",
655 data: {},
656 children: []
657 }, {
658 id: "node4128",
659 name: "4.128",
660 data: {},
661 children: []
662 }, {
663 id: "node4129",
664 name: "4.129",
665 data: {},
666 children: []
667 }]
668 }]
669 }]
670 }, {
671 id: "node1130",
672 name: "1.130",
673 data: {},
674 children: [{
675 id: "node2131",
676 name: "2.131",
677 data: {},
678 children: [{
679 id: "node3132",
680 name: "3.132",
681 data: {},
682 children: [{
683 id: "node4133",
684 name: "4.133",
685 data: {},
686 children: []
687 }, {
688 id: "node4134",
689 name: "4.134",
690 data: {},
691 children: []
692 }, {
693 id: "node4135",
694 name: "4.135",
695 data: {},
696 children: []
697 }, {
698 id: "node4136",
699 name: "4.136",
700 data: {},
701 children: []
702 }, {
703 id: "node4137",
704 name: "4.137",
705 data: {},
706 children: []
707 }]
708 }]
709 }, {
710 id: "node2138",
711 name: "2.138",
712 data: {},
713 children: [{
714 id: "node3139",
715 name: "3.139",
716 data: {},
717 children: [{
718 id: "node4140",
719 name: "4.140",
720 data: {},
721 children: []
722 }, {
723 id: "node4141",
724 name: "4.141",
725 data: {},
726 children: []
727 }]
728 }, {
729 id: "node3142",
730 name: "3.142",
731 data: {},
732 children: [{
733 id: "node4143",
734 name: "4.143",
735 data: {},
736 children: []
737 }, {
738 id: "node4144",
739 name: "4.144",
740 data: {},
741 children: []
742 }, {
743 id: "node4145",
744 name: "4.145",
745 data: {},
746 children: []
747 }, {
748 id: "node4146",
749 name: "4.146",
750 data: {},
751 children: []
752 }, {
753 id: "node4147",
754 name: "4.147",
755 data: {},
756 children: []
757 }]
758 }]
759 }]
760 }]
232 };761 };
233 //end762 //end
234 var infovis = document.getElementById('infovis');
235 var w = infovis.offsetWidth + 500; var h = infovis.offsetHeight + 385;
236
237 //init Hypertree
238 var ht = new $jit.Hypertree({
239 //id of the visualization container
240 injectInto: 'infovis',
241 //canvas width and height
242 width: w,
243 height: h,
244 //Change node and edge styles such as
245 //color, width and dimensions.
246 Node: {
247 dim: 2.5,
248 color: "#555"
249 },
250 Edge: {
251 lineWidth: 1,
252 color: "#222"
253 },
763 //init Spacetree
254764
255 // On hover
256 Tips: {
257 enable: false,
258
259 onShow: function(tip, node) {
260 ht.tips.config.offsetX = "10";
261 ht.tips.config.offsetY = "10";
262// tip.addEventListener("click", alert('hello'), false);
263 tip.innerHTML = "<div id=\"value\" class=\"tip-title\" style=\"text-align:center;\">" + node.name + "</div>";
264// + node.data.relation + " style=\"color:#fff;\">" + node.name + "</a></div>";
265 }
266 },
267
268 //Attach event handlers and add text to the
269 //labels. This method is only triggered on label
270 //creation
271 onCreateLabel: function(domElement, node){
272 domElement.innerHTML = node.name;
273 $jit.util.addEvent(domElement, 'click', function () {
274 ht.onClick(node.id, {
275 onComplete: function() {
276 ht.controller.onComplete();
277 }
278 });
279 });
280 },
281 //Change node styles when labels are placed
282 //or moved.
283 onPlaceLabel: function(domElement, node){
284 var style = domElement.style;
285 style.display = '';
765 //Create a new ST instance
766 var st = new $jit.ST({
767 //id of viz container element
768 injectInto: 'infovis',
769 //set duration for the animation
770 duration: 800,
771 //set animation transition type
772 transition: $jit.Trans.Quart.easeInOut,
773 //set distance between node and its children
774 levelDistance: 50,
775 //enable panning
776 Navigation: {
777 enable:true,
778 panning:true
779 },
780 //set node and edge styles
781 //set overridable=true for styling individual
782 //nodes or edges
783 Node: {
784 height: 20,
785 width: 60,
786 type: 'rectangle',
787 color: '#aaa',
788 overridable: true
789 },
790
791 Edge: {
792 type: 'bezier',
793 overridable: true
794 },
795
796 onBeforeCompute: function(node){
797 Log.write("loading " + node.name);
798 },
799
800 onAfterCompute: function(){
801 Log.write("done");
802 },
803
804 //This method is called on DOM label creation.
805 //Use this method to add event handlers and styles to
806 //your node.
807 onCreateLabel: function(label, node){
808 label.id = node.id;
809 label.innerHTML = node.name;
810 label.onclick = function(){
811 if(normal.checked) {
812 st.onClick(node.id);
813 } else {
814 st.setRoot(node.id, 'animate');
815 }
816 };
817 //set label styles
818 var style = label.style;
819 style.width = 60 + 'px';
820 style.height = 17 + 'px';
286 style.cursor = 'pointer';821 style.cursor = 'pointer';
287 ht.controller.Node.transform = false;
288 ht.controller.Edge.alpha = "0.3";
289 if (node._depth == 0) {
290 style.fontSize = "0.8em";
291 style.color = "#111";
292 } else if(node._depth == 1){
293 style.fontSize = "0.9em";
294 style.color = "#222";
295 } // else if(node._depth == 2){
296 // style.fontSize = "0.7em";
297 // style.color = "#444";
298 // }
299 else {
300 style.display = 'none';
822 style.color = '#333';
823 style.fontSize = '0.8em';
824 style.textAlign= 'center';
825 style.paddingTop = '3px';
826 },
827
828 //This method is called right before plotting
829 //a node. It's useful for changing an individual node
830 //style properties before plotting it.
831 //The data properties prefixed with a dollar
832 //sign will override the global node style properties.
833 onBeforePlotNode: function(node){
834 //add some color to the nodes in the path between the
835 //root node and the selected node.
836 if (node.selected) {
837 node.data.$color = "#ff7";
301 }838 }
302
303 var left = parseInt(style.left);
304 var w = domElement.offsetWidth;
305 style.left = (left - w / 2) + 'px';
306 },
839 else {
840 delete node.data.$color;
841 //if the node belongs to the last plotted level
842 if(!node.anySubnode("exist")) {
843 //count children number
844 var count = 0;
845 node.eachSubnode(function(n) { count++; });
846 //assign a node color based on
847 //how many children it has
848 node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
849 }
850 }
851 },
852
853 //This method is called right before plotting
854 //an edge. It's useful for changing an individual edge
855 //style properties before plotting it.
856 //Edge data proprties prefixed with a dollar sign will
857 //override the Edge global style properties.
858 onBeforePlotLine: function(adj){
859 if (adj.nodeFrom.selected && adj.nodeTo.selected) {
860 adj.data.$color = "#eed";
861 adj.data.$lineWidth = 3;
862 }
863 else {
864 delete adj.data.$color;
865 delete adj.data.$lineWidth;
866 }
867 }
307 });868 });
308 //load JSON data.
309 ht.loadJSON(json);
310 //compute positions and plot.
311 ht.refresh();
869 //load json data
870 st.loadJSON(json);
871 //compute node positions and layout
872 st.compute();
873 //optional: make a translation of the tree
874 st.geom.translate(new $jit.Complex(-200, 0), "current");
875 //emulate a click on the root node.
876 st.onClick(st.root);
312 //end877 //end
313 ht.controller.onComplete();
314}
315
316document.addEventListener("DOMContentLoaded", inits, false);
317
318 /* ****************************************************************************************************** */
319
320// function inits(){
321// //init data
322// var jsons = {
323// "id": "narrations",
324// "name": "Narrations",
325// "children": [{
326// "id": "kannada",
327// "name": "Kannada",
328// "data": {
329// "band": "Narrations"
330// },
331// "children": []
332// }, {
333// "id": "english",
334// "name": "English",
335// "data": {
336// "band": "Narrations"
337// },
338// "children": []
339// }, {
340// "id": "hindi",
341// "name": "Hindi",
342// "data": {
343// "band": "Narrations"
344// },
345// "children": []
346// }, {
347// "id": "tamil",
348// "name": "Tamil",
349// "data": {
350// "band": "Narrations"
351// },
352// "children": []
353// }, {
354// "id": "bengali",
355// "name": "Bengli",
356// "data": {
357// "band": "Narrations"
358// },
359// "children": []
360// }, {
361// "id": "marathi",
362// "name": "Marathi",
363// "data": {
364// "band": "Narrations"
365// },
366// "children": []
367// }],
368// "data": {
369// "relation": "index.html"
370// }
371// };
372// //end
373// var infonar = document.getElementById('infonar');
374// var w = infonar.offsetWidth - 0, h = infonar.offsetHeight - 0;
878 //Add event handlers to switch spacetree orientation.
879 var top = $jit.id('r-top'),
880 left = $jit.id('r-left'),
881 bottom = $jit.id('r-bottom'),
882 right = $jit.id('r-right'),
883 normal = $jit.id('s-normal');
884
375 885
376// //init Hypertree
377// var ht = new $jit.Hypertree({
378// //id of the visualization container
379// injectInto: 'infonar',
380// //canvas width and height
381// width: w,
382// height: h,
383// //Change node and edge styles such as
384// //color, width and dimensions.
385// Node: {
386// dim: 2.5,
387// color: "#555"
388// },
389// Edge: {
390// lineWidth: 1,
391// color: "#222"
392// },
393
394// // On hover
395// Tips: {
396// enable: false,
397// onShow: function(tip, node) {
398// ht.tips.config.offsetX = "10";
399// ht.tips.config.offsetY = "10";
400// tip.innerHTML = "<div id=\"value\" class=\"tip-title\" style=\"text-align:center;\">" + node.name + "</div>";
401// // + node.data.relation + " style=\"color:#fff;\">" + node.name + "</a></div>";
402// }
403// },
404
405// //Attach event handlers and add text to the
406// //labels. This method is only triggered on label
407// //creation
408// onCreateLabel: function(domElement, node){
409// domElement.innerHTML = node.name;
410// $jit.util.addEvent(domElement, 'click', function () {
411// ht.onClick(node.id, {
412// onComplete: function() {
413// ht.controller.onComplete();
414// }
415// });
416// });
417// },
418// //Change node styles when labels are placed
419// //or moved.
420// onPlaceLabel: function(domElement, node){
421// var style = domElement.style;
422// style.display = '';
423// style.cursor = 'pointer';
424// ht.controller.Node.transform = false;
425// ht.controller.Edge.alpha = "0.3";
426// if (node._depth == 0) {
427// style.fontSize = "0.8em";
428// style.color = "#111";
429// } else if(node._depth == 1){
430// style.fontSize = "0.9em";
431// style.color = "#222";
432// }
433// else {
434// style.display = 'none';
435// }
436
437// var left = parseInt(style.left);
438// var w = domElement.offsetWidth;
439// style.left = (left - w / 2) + 'px';
440// },
441// });
442// //load JSON data.
443// ht.loadJSON(jsons);
444// //compute positions and plot.
445// ht.refresh();
446// //end
447// ht.controller.onComplete();
448// }
886 function changeHandler() {
887 if(this.checked) {
888 top.disabled = bottom.disabled = right.disabled = left.disabled = true;
889 st.switchPosition(this.value, "animate", {
890 onComplete: function(){
891 top.disabled = bottom.disabled = right.disabled = left.disabled = false;
892 }
893 });
894 }
895 };
896
897 top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
898 //end
899}