Home | AJAX Demos | Java Demos | AJAX Graphics Server | Products

GLG Graphics Server: AJAX Process Control Demo

Update Interval:
Selected Object: Click on tanks or valves to select and display values, hover over for a tooltip

Loading Image...

Servlet's Source Code        Servlet's Image URL

Demo Overview
Ultimate Flexibility and Performance
Image Generation
The Simplest Image Generation Example
AJAX-Based User Interaction
Dynamic Data Supply
Customizing GLG Servlet

Image URL with the Servlet Source Code
Full Source Code of the Servlet with User Interaction and Drill-Down Dialogs

Overview

This AJAX demo demonstrates the thin-client server-side solution for displaying dynamic real-time graphics on a web page using the GLG Graphics Server. It is an alternative to the thick client version of the demo that uses a client-side Java applet.

The demo uses a servlet-based Graphics Server deployed with JSP on the server side using any compliant Java2EE Application Server. The browser part of the demo uses the industry-standard HTML and JavaScript, without requiring Java or proprietary plug-ins to be installed on the client.

While the thick client deployment using a Java applet provides more interactive options, the thin client AJAX option may be used in cases with limited bandwidth or when Java Applet option is not available, such as browsers on embedded devices or mobile phones.

Ultimate Flexibility and Performance

With the help of the GLG Graphics Builder, not just simple dashboards with graphs and meters, but complex visualizations and custom HMI screens may be created interactively, presented on the application's web pages and updated with real-time data. A vast collection of graphs, meters and dials, avionics gauges and process control widgets are provided in addition to the custom graphics.

The custom visualizations are created interactively using the GLG Graphics Builder and saved as a GLG drawing. The drawing contains definitions of all graphical objects as well as their dynamic properties and resources. The Graphics Server loads the drawing and uses it to generate dynamic images, updating the drawing with the current data before processing each image request. Once the drawing is loaded, it is used to generate web images over and over without the overhead of recreating the graphics on every request, resulting in a superior server performance.

The graphics displayed on the web page may be changed by editing the drawing using the Graphics Builder and reloading the drawing into the Graphics Server, with no programming required.

The GLG Graphics Server utilizes the power of the GLG Toolkit for ultimate performance. When the data changes, the highly optimized GLG Object Engine ensures that only the graphical elements that are affected by the new data get updated, lowering the server load.

Image Generation

The server-side GLG Servlet generates an image of the monitored process updated with the up-to-date data. The image is periodically reloaded by a JavaScript with a user-defined update interval.

The servlet generates an image by loading a GLG drawing and then invoking the drawing's CreateImage() method. The drawing is created using the Toolkit's Graphics Builder, which allows a developer to draw graphical objects, attach dynamic actions, define selection events and tooltips, as well as define object resources to animate the drawing with data. With the help of the Builder, dynamic drawing may be created and modified interactively without tedious graphics programming.

GLG drawings are screen-resolution independent. When a drawing is loaded into the GLG Servlet, it may be scaled to generate images of arbitrary sizes. Before generating an image, the servlet updates the drawing with the current data by simply setting the drawing's resources using GLG's SetResource methods.

The drawing is loaded just once and reused between all servlet instances and threads, so that all generated images display the same state of the monitored process as demonstrated in the demo. Alternately, each servlet session might create its own instance of the drawing, showing different session-specific data.

The demo displays the generated process image in an HTML page with JavaScript that handles user interaction. Since the servlet is self-contained, it may be used as a component in multiple web pages.

The Simplest Image Generation Example

Click here to load the servlet's image output directly, as a URL.

Reload the page to see new data or change the width/height parameters of the URL to change image size. A "&show_pipes=1" parameter may be appended to the URL to activate pipes display.

Such a dynamic URL may be inserted as an image in any web page, with a timer to periodically reload the image to show new data.

Click here to see the source code of the simplest GLG Servlet for generating the image.

AJAX-Based User Interaction

The demo shows examples of handling user interaction, such as:

When the user moves the mouse over an object in the image, a tooltip is displayed. When the user clicks on an object in the image, the name of the selected object is displayed in the web page above the image. If the selected object has any data associated with it, a dialog showing the object's data is also displayed. The two buttons at the lower left corner of the demo are used to toggle display of 3D pipes and flow lines.

The tooltips and object selection are processed by the GLG Graphics Server's engine on the server side, with no image maps or vector objects created in the browser on the client side. This technique handles large number of vector objects in the drawing without the HTML performance limitations.

The demo adds onclick and onmousemove event handlers to the image to invoke JavaScript when the user clicks on the image or moves a mouse over it. The JavaScript sends an AJAX request to the servlet to determine the objects located at the mouse position. If an object selection is detected, the servlet returns the name of the selected object to the JavaScript, which executes an appropriate action depending on the selected object, displaying a tooltip on MouseOver or displaying data dialog when an object is selected with the MouseClick.

Alternatively, the user interaction may be handled by the servlet on the server side. For example, when the Toggle3DPipes button is selected, the servlet may toggle the 3D Pipes display in the drawing instead of returning the button name back to the client and letting the client handle it, as shown in the demo.

Click here to see the full source code of the GLG Servlet for generating images and handling user interaction requests.

Dynamic Data Supply

The demo uses simulated process control data. In an application, the servlet can query data from any data source, such as a PLC or process database, using JDBC, Java OPC or any other preferred data connectivity API. Alternatively, the data may also be supplied by the HTML or JavaScript via the parameters of the image URL.

The servlet updates the drawing with the new data by setting the drawing's resources using GLG's SetResource methods. The resources for animating the drawing with data are defined in the Graphics Builder when the drawing is created.

For example, in the demo's drawing, an object named "Heater" has a resource named "HeaterLevel" that controls the fill level of the heater's tank. The servlet updates the displayed fill level by using the "Heater/HeaterLevel" resource name:

     drawing.SetDResource( "Heater/HeaterLevel", heater_level_var );

The use of resources helps to separate graphics from the programming logic. The application simply sets a logical resource named "Heater/HeaterLevel", and the GLG's graphics engine takes care of all low-level details of rendering the objects' graphics.

Customizing GLG Servlet

The GLG Graphics Server allows the developer to customize the servlet's functionality depending on the application requirements. The source code for the GLG Servlet is provided and may be customized to perform various application-specific tasks. The servlet uses the GLG Graphics Server class library that provides developers with both the GLG Standard and Extended API methods described in the documentation of the Java version of the GLG Toolkit.

All graphical features of the GLG applications are also available in the servlet, including the programmatic creation of objects in the drawing and on-the-fly creation of dynamic icons using the GLG Extended API.


Home | AJAX Demos | Java Demos | AJAX Graphics Server | Products