SVG-Based GUIs as Web Services Front Ends: an Application for Intelligent Manufacturing Systems

Daniele Belloli, Daniele Riboni
Nazca ricerca
1, via Rezia
I-20135 Milan Italy
phone: +39 02 54 12 2921
fax: +39 02 55 12 946
{daniele.belloli, daniele.riboni}

In this paper we describe an advanced, web-based benchmarking infrastructure for the description and emulation of manufacturing systems, with particular regard to the Test Bench Assistant (TBA), its SVG-based Graphical User Interface which was developed in the Nazca ricerca laboratory ( The benchmark service is part of the Intelligent Manufacturing Systems - Network of Excellence (IMS-NoE) project (, whose main goal is to facilitate knowledge transfer and to set up a Technology Observatory to elaborate and update at regular intervals Technology Roadmaps and Expertise Maps within the Network's scope. Ongoing developments in scheduling and control of shop-floor systems are addressing increasingly complex problems -e.g. providing on-line control, reaction to disturbances, and adaptation to changes on the shop floor. Developers have difficulties communicating and cooperating between themselves.
To improve this situation emulations of shop-floor systems and their control systems will be brought together to execute performance tests through the web.

We implemented an open infrastructure, avoiding where possible any proprietary solution, in order to handle the different backgrounds of network members (belonging to industrial, academic organizations and research institutions) and the lack of a commonly accepted language for describing manufacturing system knowledge. Our system architecture reflects this choice, being based on open standards like XML and web services technologies. For this purpose, the choice of SVG technologies for the GUI was an obvious one.

Before entering into detail about our SVG solution, we would like to give an overview of the benchmarking infrastructure.

A key element of the system is the XML language for representing manufacturing systems. We coded a three-axis model developed at the Management Engineering Dept. of Politecnico di Milano university (, defining an appropriate XML Schema that allows the description of test-cases in terms of their Production System Model and Manufacturing Scenario plus additional information useful for the emulation phase.

Network members can produce the XML representation of their test-cases using the SVG-based GUI available at the IMS-NoE website. The description of this part of the architecture will be the main topic of this paper. The benchmark web service will provide members with the possibility to perform interactive emulations of their desired production system. Varying system components, as well as adding or dropping them, they will be able to control performance variations. Furthermore, network members will be able to analyze test-cases produced by other members, allowing for an exchange of information.

The core component of the infrastructure is the Test Bench Assistant (TBA), a fully graphical drag-and-drop web application for the description of a generic manufacturing system. This subsystem is composed of the following components:

Users can access TBA connecting with their browser to an asp authentication page. After this phase, they can modify their test-cases, delete them or create new ones. From the user's perspective, the interface is divided into three parts:

  1. a left-hand bar for the insertion of new system components (e.g. machines, transporters and subsystems);
  2. a bottom area for the modification of component attributes (e.g. transporter name and acceleration);
  3. a canvas for the modeling of the Manufacturing System.

Parts 1. and 2. of the interface are implemented in HTML. User interaction (for example the insertion of a new machine or the modification of an attribute) is captured by events that are handled by appropriate javascript functions. Such events imply a change in the XML and possibly in the SVG representation of the system, and we use javascript DOM functions to apply these modifications to their XML and SVG trees.
Part 3. is the core component of TBA, as it contains the SVG object displayed by the Adobe plug-in. We used various SVG elements to represent manufacturing system components. For example, we provided appropriate images for the machines and transporters, lines for component connections and labels for context information. By interacting with the visual representation of system components the user can automatically modify both the visual and structural representation of his test-case. The user's interaction is improved by the drag-and-drop functionality and by the introduction of new functions in the context menu.

In conclusion, the choice of adopting the SVG technology in conjunction with javascript and XML for our GUI proved to be successful. Specifically, the use of SVG and XML together eased the separation of presentational and structural content. The development of a GUI using javascript and SVG also proved to be faster than using other technologies (e.g. Java). Finally, these technologies allow the creation of interfaces as appealing as the ones built in Java, without the burden of downloading a large applet.