Home | AJAX Demos | HTML5 & JavaScript Demos | AJAX Graphics Server | Products
Demo Overview
Thin-client solution
Image Generation
Dynamic Data Supply
Customizing JSP Servlet or ASP.NET Handler
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 Graphics Server works.
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 browser independent and may be used on any embedded or mobile device.
The GLG Graphics Server is deployed on the server with either
JSP or
ASP.NET. The client side uses
industry-standard HTML and JavaScript (including HTML5).
A server-side JSP Servlet or ASP.NET Handler generates an image of the monitored process updated with real-time data. The image is periodically reloaded by client-side JavaScript with a user-defined update interval.
The Servlet or Handler generates an image by loading a GLG drawing and invoking the drawing's CreateImage() method. The drawing is created using the GLG 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 Servlet or Handler, it may be scaled to generate images of arbitrary sizes. Before generating an image, the Servlet or Handler updates the drawing with real-time data by setting the drawing's resources using SetResource methods of the GLG API.
The drawing is loaded only once and reused between all Servlet or
Handler instances and threads. This increases performance and also ensures
that all generated images display the same state of the monitored
process.
The demo displays the generated process image in an HTML page, and JavaScript is used periodic refreshes and handling user interaction. The same image URL may be used as a component in multiple web pages.
Click here to view the output image 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, and a timer can be used to periodically reload the image to show new data.
Click on the links to see the source code of the JSP Servlet or the ASP.NET Handler used for to generate the image.
The demo uses simulated data to update the circuit display. In an application, the Servlet or Handler can query data from any data source, such as a PLC or process database, using any 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 or Handler updates the drawing with new data by setting the drawing's resources using SetResource methods of the GLG API. 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.
The Servlet or Handler functionality can be customized according to the application requirements. JSP Servlet and ASP.NET Handler source code is provided and may be customized to perform various application-specific tasks. The Servlet or Handler uses the GLG Graphics Server library that provides developers with both the GLG Standard and Extended API methods described in the GLG documentation.
All graphical features of the GLG applications are also available in the Servlet or Handler, 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 | HTML5 & JavaScript Demos | AJAX Graphics Server | Products