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

GLG Graphics Server: AJAX Electrical Circuit Monitoring Demo

Update Interval:
Loading Image...

Servlet's Source Code        Servlet's Image URL

Demo Overview
Thin-client solution
Image Generation
Dynamic Data Supply


This AJAX demo demonstrates using the GLG Graphics Server for a web-based electrical circuit monitoring application.

Refer to the Process Demo for an AJAX example of handling user interaction such as tooltips, object selection and drill-down.

The Process Demo also provides a detailed explanation of how the GLG Servlet and GLG Graphics Server work.

Thin Client Solution

This 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.

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 circuit image as an element of an HTML page. Since the servlet is self-contained, it may be used as a component in multiple web pages.

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.

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 GLG Servlet used for generating the image.

Dynamic Data Supply

The demo uses simulated data to update the circuit display. In an application, the servlet can query data from any data source, 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, a switch object named "#SW1_1" has a resource named "#State" that controls the state of the switch, ON or OFF. The servlet may update the displayed switch state by using the "#SW1_1/#State" resource name:

     drawing.SetDResource( "#SW1_1/#State", switch_1_1_var );

The use of resources helps to separate graphics from the programming logic. The application simply sets a logical resource named "#SW1_1/#State", 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