Drawing the line

InTech, Jul 2004 by Williamson, Rob, Weber, John

Scalable Vector Graphics draws on data to get users' information.

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML) description of how to draw a graphical interface from data. This makes SVG a compelling technology for applications that rely on the display of complex and/or rapidly changing information.

In manufacturing, there are two main uses for a standards-based vector presentation layer. The first is systems control applications such as human-machine interface (HMI), supervisory control and data acquisition, or facilities management; the second is complex interactive electronic technical manuals connected to underlying enterprise resource planning systems. SVG's positives include the fact that it is lightweight; it is a human readable XML for cost-effective building and maintenance of business solutions; and it has a published object model making it possible to program change attributes of the graphic.

Getting technical

The graphics evolution occurred in response to the underlying infrastructure capability to get more and complex information to end users.

As a part of this evolution there are Web services, which define a standard framework for accessing and delivering applications over networks. In delivering information over networks they provide nothing new to the manufacturer. However, in delivering that information according to published standards they significantly reduce the application, and data delivery costs. A key advantage of a Web services framework is the separation of the application logic, the standard communication layer, and the interface. SVG comes about through a Web browser, which eliminates the need for expensive fat clients or delivering complete applications over the network (i.e., Java applications). The SVG image can have small fragments updated as the underlying data changes form. This improves the user experience and reduces bandwidth dependencies by updating only small amounts of information. This capability is critical in delivering HMI applications.

Because SVG is a simple graphics format, you can pre-render or convert it to raster on the server for mobile or other thin-client applications.

Business drivers

Applications built using XML frameworks have human readable, completely reusable code. SVG affords the same advantages as Hypertext Markup Language (HTML) insofar as you can borrow SVG from other sources and easily edit it to meet the needs of the specific application.

Additionally, SVG applications can grow over time as needs change, without requiring a complete rearchitecture of the application. This significantly saves the internal and outsourced information technology (IT) budget.

Applications are compatible across operating systems, devices, and user preferences. However, they are all manageable centrally from the server or servers. The combination of SVG and Web services also allows multiple servers or databases to feed into a single interface, so you can deploy powerful enterprise dashboards.

In one case, a manufacturer wanted to access plant floor machine data from any computer. The data changes frequently and is proprietary in nature. However, the manufacturer, who wished to remain anonymous, put in place a server environment that converts proprietary data into an XML Web service at run time so employees can gain access to the information from any machine.

The key problems to solve were how to deliver complex information over multiple bandwidths (including 28.8), how to integrate information from multiple machines at once, and how to reduce costs for maintaining an application with an expected useful life of more than five years.

Connection to the machine state of an interface uses existing OLE for process control (OPC) standards, which at run time can parse into a usable XML format. This delivers information in real time while also storing information for later analysis of enterprise systems. The advantages of the connected machine using an SVG interface significantly outweigh a simple programmable logic controller (PLC) to a stand-alone machine.

The solution uses a visual interface in SVG. Layers and transparency effectively communicate large amounts of data in one interface, while behaviors control what data you can view. On the server, Web services deliver the data and application intelligence from multiple sources.

Most importantly, the IT department can reuse the components used to visualize this interface in multiple connected applications. By using simple tools, they can also easily change that range from full integrated development environments (IDE) to notepad. Combined this saves significant cost in initial development and in maintenance.

In another example, a different manufacturer of complex equipment such as airplanes and steam turbines needs to produce a custom technical document for every instance of the machinery because the equipment changes over time, is customized by end-user demands, and is technically very complex.

The manufacturer also sees the potential to add value to the documentation by tying it to a parts catalogue, so the end user becomes a captive audience of its after-market parts.