Park And Go - An SVG Client Application

Paul Lynch Benjamin Jung
Department of Computer Science
Trinity College Dublin, Dublin/Ireland

screenshot map with login Recent developments show that Scalable Vector Graphics (SVG) is more than just another graphics format. The powerful combination of rich display functionality coupled with strong ECMA script support categorises SVG as a promising choice for designing interactive images and graphical user interfaces. More recently SVG is evaluated as a technology to build platform and system independent client and stand alone applications. Undoubtedly, flexible SVG user-interfaces will soon become an interesting alternative to application front-ends, which are often proprietary to operating systems.

Park and Go is a web-based client-server application (Figure 1). The prototype was designed to prove the viability of SVG for client applications. Initial functionality includes locating of free parking spaces, payment of the correct parking tariffs, verification and reimbursement of remaining parking time, renewal of payments, payment of a possible clamp removal fee and user management.

The project is built on an innovative architecture that combines the benefits of both thin browser based clients and traditional client-server architecture. Ease of installation by means of a browser plug-in subsequently combines simplicity with response times and richness of traditional client software. SVG provides the ability to create desired thick client functionality. An SVG application consists of a rich user interface that performs client side processing and interacts with the backend server via background calls to server side scripts. The ability to process the response from server side scripts rather than simply rendering the returned document is one of the features that makes SVG a powerful GUI framework.

The technologies of choice for this prototype were Java Server Pages (JSP) for the business logic on the server side and SVG together with ECMA script on the client. Server-side JSPs handle incoming client requests and interact with the underlying database system via the standard JDBC API. This includes all data access processes and static web page generation. Initial investigation has been undertaken to change all JSP code into web service components in order to build a library of reusable components. The entire SVG image is dynamically manipulated and much of the simple business logic is performed on the client side. This was achieved through the use of SVG's ECMA script functionality and particularly its ability for asynchronous background processing of JSP calls. The result is an independent and standalone image application, which offers great advantages compared to historically embedded images, surrounded by e.g. HTML code. A recursive getTimeout function call continuously reflects any status changes of dynamic elements by other users.

In order to compile the complete functionality of the system into a single SVG image, the system consists of a deck of different cards (layers), each representing a different screen. By navigating from screen to screen, the active card is made visible bringing it to the top of the deck while the previously active card is hidden and shuffled back into the deck.

Screens which take user input are created using design components well known from HTML forms. Most users are already familiar with these input items and will intuitively use e.g. input text boxes, checkboxes and option buttons. So far, the SVG specification does not include such controls. Instead, freely available control libraries were easily integrated to mimic operation and behaviour similar to those controls mentioned above.

A number of future developments will extend this application to a commercial standard. In a first step, all custom JSPs are being migrated to reusable Web Services. Multi-user functionality will be supported through concurrency control and transactional management which will be implemented in order to ensure the application complies with A.C.I.D. standards (Atomicity, Consistency, Isolation and Durability). Other areas of development include database and data transmission security. These will be addressed by the implementation of SSL and database encryption algorithms. Finally, real world maps with accurately drawn landmarks and parking spaces will conclude the project.

Paul Lynch is in his final year studying for a BSc degree in Computer Science at Trinity College Dublin. He has gained extensive experience in software engineering and is a senior technical consultant with an international consultancy. He has worked on a number of projects which incorporate XML but this is his first that uses SVG.

Benjamin Jung is a lecturer in Computer Science and Medical Informatics at Trinity College Dublin and supervises Paul Lynch's final year project. He is a regular speaker at XML conferences in Europe and the United States.

Valid XHTML 1.1!