function airline_v1_1(flight_data_server_url, unique

Please Click here, if you wish to Download Zip file containing source code for:
Flight_test.svg, Flight_class.js and Flight.java

The following listing contains component code for interactive Flight-Image, which has three sections. The sections are shown in different color coded boxes to highlight each of the sections. Although, the Class definition code can be included in this file, I prefer to place the code in external-file and include it in the SVG-file as shown in the 'SECTION-1'. The 'SECTION-2' instantiates and initializes a JavaScript Object for the Flight and 'SECTION-3' contains SVG-Instructions to show the image.

This listing contains initialization code at the Top that initializes Global Objects, which can be used by any component in the webpage. This listing also contains test code to test few services of the Flight-component at the Bottom, which calls the service functions of the Flight.

Source Code Listing for File: Flight_test.svg

1. <svg width='1000' height='700' onload='svg_doc_onload_init(evt)'>

2. <script type='text/ecmascript'>

3. <![CDATA[

4. // Global variables available to all SVG-Components.

5. var SVG_Document = null; // Global Variable

6. var onload_init_list = new Array();

8. function svg_doc_onload_init (evt) { // Init Global Variables

9. SVG_Document = evt.getTarget().getOwnerDocument()

10.

11. for(var i = 0; i < onload_init_list.length; i++)

12. (onload_init_list[i])(evt);

13. }

14. ]]>

15. </script>

16.

17. // BEGIN: Flight Component Code

18. // SECTION-1: Include Component Class definition.

19. <script xlink:href='Flight_class.js' language='text/ecmascript'/>

20. // SECTION-2: Instantiation and Init the JavaScript Object for Flight

21. <script type='text/ecmascript'>

22. var airline_UNQID = new

23. airline_v1_1('TWA486','http://twa.com/Flight_info.jsp,'UNQID');

24.

25. // Register a function to call, upon user click on the Airliner-image

26. airline_UNQID.set_info_table_func(alert); // Call alert() to show data

26. </script>

27. // SECTION-3: SVG Instantiation to Show the Flight-Image

28. <g id='al_loc_UNQID' transform='translate(70.0, 90.0)'>

29. <g id='al_grp_UNQID' transform='scale(0.2)'

30. onmouseover='airline_UNQID.highlight(1)'

31. onmouseout='airline_UNQID.highlight(0)'

32. onclick='airline_UNQID.show_info()'>

33. <path id='al_img_UNQID' fill='blue' stroke='red'

34. stroke-width='.5pt' transform='rotate( 10.0)'

35. d = ' M 50 0 L 40 -4 L 35 -5 L -20 -5 L -38 -3

36. M -25 0 L -25 -3 L -41 -3 L -41 0

37. M -41 -2 L -44 0 L -32 -1 L -30 0

38. M -29 -4 L -38 -15 L -42 -15 L -38 -3

39. M 12 -5 L -15 -45 L -19 -45 L -8 -19 L -7 -5

40. M 7 -12 L 13 -12 L 13 -18 L 3 -18

41.

42. M 50 0 L 40 4 L 35 5 L -20 5 L -38 3

43. M -25 0 L -25 3 L -41 3 L -41 0

44. M -41 2 L -44 0 L -32 1 L -30 0

45. M -29 4 L -38 15 L -42 15 L -38 3

46. M 12 5 L -15 45 L -19 45 L -8 19 L -7 5

47. M 7 12 L 13 12 L 13 18 L 3 18 '>

48. </path>

49. <text x='15' y='0' font-size='24' fill='black'> TWA486 </text>

50. <text x='15' y='25' font-size='24' fill='black'> B737 </text>

51. <circle id='al_clue_UNQID' cx='0' cy='0' r='12'

52. style='fill:red;opacity:.75;stroke:black;visibility:hidden;'/>

53. </g>

54. </g>

55. // END: Flight Component Code

56.

57. // The following is just code to test the Features

58. <script type='text/ecmascript'>

59. <![CDATA[

60. var dir_ang = 10.0;

61. var loc_nx = 70.0;

62. var loc_ny = 90.0;

63. function set_new_lacation(nx, ny, nd) {

64.

65. if ( nd != 0)

66. dir_ang += nd;

67. else {

68. var tdir = dir_ang*22/(7*180)

69. loc_nx += nx*Math.cos(tdir);

70. loc_ny += ny*Math.sin(tdir);

71. }

72. //alert(' X: '+loc_nx+ ' Y: '+loc_ny+ ' DIR: '+dir_ang);

73. airline_UNQID.update_location(loc_nx, loc_ny, dir_ang);

74. }

75. var emerg_flag = 0;

76. function switch_atc_clue_state() {

77. if (emerg_flag == 0) emerg_flag = 1;

78. else emerg_flag = 0;

79. airline_UNQID.set_emergency_flag(emerg_flag);

80. }

81. ]]>

82. </script>

83.

84. <g transform='translate(20 500)'>

85. <g style='visibility:visible;' onclick='set_new_lacation(10,10,0)'>

86. <rect style='fill:white;stroke:black;' x='0' y='0' width='20' height='20'/>

87. <text style='fill:black;font-size:16pt' x='25' y='20'>Move</text>

88. </g>

89. <g style='visibility:visible;' onclick='set_new_lacation(0,0,10)'>

90. <rect style='fill:red;stroke:black;' x='100' y='0' width='20' height='20'/>

91. <text style='fill:black;font-size:16pt' x='125' y='20'>Rotate</text>

92. </g>

93. <g style='visibility:visible;' onclick='switch_atc_clue_state(1)'>

94. <rect style='fill:green;stroke:black;' x='210' y='0' width='20' height='20'/>

95. <text style='fill:black;font-size:16pt' x='235' y='20'> Show Emergency Flag </text>

96. </g>

97. </g>

98. </svg>