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.
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.
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.
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.
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.
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.
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.
Copy Right © 2009 Raju Chiluvuri. All Rights Reserved.