Building Interactive Image – A quick tutorial for Dummies

Building Interactive Image – A simple tutorial for a Newbie

An application such as Air traffic control system needs to present multiple flights at appropriate location on top of a city/airport-region's map.

So first step is to create an interactive Image to present each Flight (you need SVG plug-in to view this) using appropriate vector graphics instructions (e.g. SVG, XAML or Flash).

Note: Although you don't need SVG plug-in to understand this pattern, you must download Adobe's SVG viewer plug-in, If you wish to see the above interactive images or a real GUI application.

For example, the following SVG path statement draws an image for Boeing-737:

1.  <path

2.             fill='blue'

3.             stroke='red' stroke-width='.5pt'

4.             transform='rotate( 10.0)'

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

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

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

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

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

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

11.

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

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

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

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

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

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

18. </path>

Listing#1

Usually one creates this kind of image using drawing tools such as Adobe illustrator. Thanks to a SVG contributor, I found this SVG code by searching the Internet.

One may use color to indicate various states such as incoming or outgoing Flights. The “fill” attribute at line number 2 determines the color of the Flight. The “transform” attribute at line number 4 determines the direction of the Flight. The number 10.0 is clockwise angle of the flight from X-axis.

Usually one wants to display Flight number and flight model on the Flight-image. Also, in Air Traffic control system, each Flight-image must be displayed at given location on the map. So let me add few more SVG instructions to accomplish this.

SVG path statement draws an image for Boeing-737 and event listeners:

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

2.      <g id='al_id_UNQID' transform='scale(0.25)'

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

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

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

6.  <path id='al_img_UNQID'

7.             fill='blue'

8.             stroke='red' stroke-width='.5pt'

9.             transform='rotate( 10.0)'

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

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

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

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

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

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

16.

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

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

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

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

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

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

23. </path>

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

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

26. <circle id='atc_clue_UNQID' cx='0' cy='0' r='12'

27.      style='fill:red;opacity:.75;stroke:black;stroke-width:4;
28.      visibility:hidden;'/>

29.     </g>

30. </g>

Listing#2

The “text” statements at line numbers 24 and 25 displays Flight number and Airplane model respectively. The “transform” attribute at line number 1 determines the location of the Flight image. For example, “translate (70.0, 90.0)”, determines the X and Y location of the Flight-image at 70.0 and 90.0 respectively.

The Flights in the map must be moved to new location every few seconds. So we need to create JavaScript function to move the Flight image. This function can be called to move the flight image to a new location and change angular direction of the flight.

Listing#3: A Service function to move the Flight-Image

1. function update_location (nx, ny, dir) {

3. // Set new location of the Flight

4. var svgobj = SVG_Document.getElementById(‘al_loc_UNQID’);

5. var trans_str = 'translate(' +nx+ ',' +ny+')';

6. if (svgobj != null)

7. svgobj.setAttribute('transform', trans_str);

9. // Set new angular direction of the Flight.

10. var svgobj = SVG_Document.getElementById(‘al_img_UNQID’);

11. var trans_str = 'rotate('+dir+')';

12. if (svgobj != null)

13. svgobj.setAttribute('transform', trans_str);

14. }

If you like to make the Flight image interactive, you need to capture user events such as mouse-over and mouse-click etc. One way to capture the events is by including the image in a group and set event listeners. In listing#2, the code between the lines 2 and 5 does that.

Assume it is required to magnify the Image up on mouse-over, so that user can see the information clearly. At line number 3 and 4, it registers a function to call upon mouseover and mouseout respectively. The parameter is just a flag to indicate mouseover or mouseout.

Listing#4: A Service function to Zoom-In/Out the Flight-Image

1. function highlight( stat ) {

2. var svgobj = SVG_Document.getElementById(‘al_grp_UNQID’);

4. if (svgobj != null){

5. if (stat == 0) { // In case of mouse-out event.

6. // Decrees the scale to reduce the size

7. svgobj.setAttribute('transform', 'scale(0.25)');

8. }

9. else { // In case of mouse-over event.

10. // Increase the scale to magnify the Image size

11. svgobj.setAttribute('transform', 'scale(0.75)');

12. }

13. }

14. }

Finally let me show one example of how one may support an Ajax feature, which upon mouse-click requests server to get latest Flight-data from the Airline’s server (given by a URL). Then it calls an external service function to displays the data, (for example, in a table or in pop-up window). Mouse-click is registered at line number 5. Also, lets assume the SVG-page contains a Table that supports a service function, which can be called to display XML-data in the table.

Listing#5: An Ajax Service function to get Real-time Flight-Data

1. // The Ajax function that is called upon arrival of the XML-data

2. // This is just a companion function for the next Ajax function

3. function func_to_get_xml_data(data) {

4. if(data.success)

5. info_table_func ( data.content );

6. return;

7. }

8. // The following function makes an AJAX call to the server

9. function show_info ( ) {

11. // If Function to call the Table for displaying data is set

12. if(info_table_func != null) // Makes Ajax call to server

13. getURL(url_to_get_flight_data, func_to_get_xml_data);

14. // Note: In SVG, getURL() is equivalent to XMLHttpRequest()

15. }

We are registering onclick event-listener function (show_info) at line number 5, In the listing#2. Upon mouse-click, it calls show_info() which makes Ajax call. The response is captured by function func_to_get_xml_data(), which nay call a Table component to displays the data.

Upon mouse click, the Flight-image makes an Ajax call to appropriate Sever for getting latest data and displays the information in a Table-form, as shown on the right --->

To make it modular and easy to maintain lets consolidate all the JavaScript functions and data variables into a JScript class file. Please review the webpage containing code listing for the JavaScript class: Click here to view HTML page that contains listing of "Flight_class.js". This file can be included in the SVG document that contain the component code for the Flight.

Now lets include the SVG-Code for the Flight image in a test SVG file and test the services of the interactive Flight-component. Please click hire to see and to interact with the interactive SVG-Image. Please review HTML page containing code listing of the test SVG file: Flight_test.svg.

OK! We have created just one interactive Image, but typical Air Traffic system usually contains hundreds of Flights. Each Image needs to be custom build so that it supports unique set of options such as color-coding (e.g. incoming/outgoing) and shape (e.g. Boeing747/Airbus340) etc.

To accomplish this, we invented a unique server-side reusable GUI Class, which can be used to create multiple custom Flight-images. Once component code for a test interactive SVG-image is created, the process to create GUI Class is simple and straightforward. It takes about an hour to create a reusable Java GUI-Class, if we do it manually. I am hoping to create a tool that takes the sample SVG-image code and generate basic GUI Class, which can cut the development time for the reusable GUI Class to minutes. Please click here to learn, how one can manually create the reusable Java GUI-Class , which can be used to include multiple Flight-images in a SVG-page.