Comment

01 July 2004

Drawing the line

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.

A graphics evolution

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.

Most critically, the assembly diagrams themselves do not exist until someone requests them. As a result, entire technical documents that can display a single component in hundreds of different illustrations can automatically update when a change occurs over time. Because the graphics are now managed at the same component level where the text is managed (through XML), the enterprise saves millions of dollars from a more efficient maintenance staff and from significantly streamlined documentation processes.

The key problems solved: how to dynamically build a schematic, how to bind the schematic to inventory and pricing data, and how to build links between the schematic and the text in the document.

Case analysis

Although the cases appear quite different, the reality is they use the same underlying technology. In the same way that HTML and bitmap images work across multiple industries for multiple purposes, SVG serves a similar purpose. It is simply a vector presentation of underlying standard-based data. The end users do not know or care that their graphics come to them in an XML framework, but the IT manager realizes significant time and cost savings by using this approach.

Digital cockpit

Data into SVG

XML formats can transform from one type (temperature data in Fahrenheit) to another type (rectangle height in pixels for SVG display) very easily using another XML format called XSLT.

XSLT is simply an XML description of how to relate the two types. Because XSLT can run on any application server, it can deploy at run time to generate data-driven graphics from live data sources.

A vector graphic format is a logical way to deliver information. Vector formats provide quality, scalability, and extensibility that you cannot obtain in a bitmap. This isn't to suggest bitmaps will not continue to play an important role in the delivery of information; it is just that vectors can better deliver data-driven components.

Building smart graphics

How does the user of an application visualize, interact, and respond to the data delivered via a Web service? If end users require a different time period than the service originally delivered, how can they make that request? If a user's preference is to always require that data in a certain form, then how is that distinguished from a different user's preferences? Perhaps most importantly, does the Web service even provide that functionality?

That is where smart graphics come in. Smart graphics enable visual interfaces to link with data and systems. Intelligence within the graphic can lie completely on the server side, completely within the client, or in some subset in between. Intelligence in this case is the ability of the graphic to present relevant information based on the underlying data. For example, the axis in a simple bar chart can have the intelligence to scale or round up according to the data presented. The environment depends on when and where delivery of that graphic occurs as well as the business purpose of that graphic.

The key is the same data source, intelligence, and interface characteristics remain regardless of how a user views the content. Where suitable, server-side scripting transforms the graphic to the relevant form, whether that form is a user preference or based on technology limitations of the viewing device (e.g., using SVG Tiny, Basic, or a raster transformation of the SVG). In this way, changes can occur to either the visual interface layer or the application logic layer independently.

SVG represents an ideal technology for the creation, delivery, and management of smart graphics. The case studies demonstrate the difference between static SVG and data-driven dynamic SVG. With dynamic SVG, the code base becomes significantly smaller and at the same time delivers more information. It also eliminates costly and time consuming design involvement when multiple outputs change based on one set of data.

Creating visuals

Creating a rich visual interface for one or more Web services is still a laborious task. The developer must request user interface (UI) mock-ups from a designer and then inspect the Web Service Definition Language (WSDL) carefully to determine how the information can map from the service to the UI.

In one case a simple UI element like a drop-down list needs populating. If the application needs to display current weather conditions, then how does "overcast" turn into an image of a cloud for the user? What device displays the cloud? Will a raster image work? Does the client have the processing power to interpret the data?

All of these questions take time to answer and thus cost the user money and effort. Such issues also increase the effort or may even prevent the solution from being reusable in another application.

Workflow issues

Often the design process either reaches beyond the capabilities of the underlying system or fails to recognize some required functionality that the system can provide. This is sometimes a limitation of the information collection phase of a development project; more often it is a result of a simple change in the business goals during development.

The developer returns to the designer (and vice versa) to explain that certain applications are or are not available and offers alternatives based on coding principles.

Compare this to the world of current desktops. Here, the answers are easy. Many good UI frameworks are available that include list boxes, check boxes, and any other UI controls imaginable. Many tools exist that allow you to lay out and customize your interface, with clear ties to the APIs set out by your DLLs or other coding modules.

Outside of the standard GUI controls, visual interface development needs are not in the Web service application development paradigm. In this environment, developers must create everything from scratch.

ASP, .NET, and JSP provide the language to do so, but the tools, the libraries, and the precedent aren't available. Many standards forums are attempting to address this problem, but the tools are still missing and the focus is still on traditional UI controls. A number of IDEs have emerged to solve this problem by providing attributes-based tools that build dynamic interfaces combining more than simple UI.

Take, for example, the creation of a simple dialog in a Web-based application that consumes Web services. The type of controls you use in your dialog should be completely dependent on the Web service interface. If the Web service is looking for Boolean parameters and returns a list of strings, then a check box may be the proper control to call the function—and a list box populates with the results. Because Web services provide an XML standard for their definition, you can clearly visualize the structures for these interfaces.

SVG integrated into Web services as a framework alone is a very compelling distributed application delivery system. The fact the major development tools vendors support environments for building Web applications only furthers the scope of the opportunity for the designer, the developer, and the consultant in the manufacturing enterprise.

SVG is a compelling technology for interfacing with Web services, because it provides richness and interactivity while keeping the application logic and the application interface layers separated. End users and software and hardware original equipment manufacturers are using SVG today to support their interface development either through completely new applications or through those that leverage existing HMI and technical documentation systems. IC

Behind the byline

Rob Williamson is product manager for smart graphics at Corel Corp. in Ottawa, Ontario. John Weber is president of Matthews, N.C.–based Software Toolbox Inc.