Home | AJAX Demos | HTML5 & JavaScript Demos | AJAX Graphics Server | Products
Demo Overview
Ultimate Flexibility and Performance
Image Generation
The Simplest Image Generation Example
AJAX-Based User Interaction
Dynamic Data Supply
Customizing JSP Servlet or ASP.NET Handler
Image URL with the
JSP Servlet or
ASP.NET Handler source
code
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).
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.
The GLG Map Server is used to generate the background map image for the selected region using the selected GIS layers. The GLG GISObject manages dynamic icons in the GIS coordinate system and allows the application to position icons by specifying their lat/lon coordinates. 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 real-time 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.
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.
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.
A tooltip is displayed when the mouse
hovers over a city or plane icon. A popup dialog with additional
information is displayed when the user clicks on a city or plane icon.
For plane icons, the dialog contains the flight number and a
dynamically updating lat/lon position.
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 or Handler to determine the objects located at the mouse position. If an object selection is detected, the Servlet or Handler 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.
Click on the links to see the source code of the JSP Servlet or the ASP.NET Handler used for generating images and handling user interaction requests.
The demo uses simulated process control data. In an application, the Servlet or Handler can query data from any data source, such as a telemetry stream, PLC or process database, using 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 or Handler updates the drawing with the new data by setting the drawing's resources using SetResource methods of the GLG API, and the GLG's graphics engine takes care of all low-level details of rendering the objects' graphics.The resources for animating the drawing with data are defined in the Graphics Builder when the drawing is created.
For example, each plane icon has a
resource named "Position" that defines the icon position using
the lat/lon coordinates. The Servlet or Handler updates a plane icon's
position by using its "Position" resource name:
drawing.SetGResource( "Plane5/Position", lon, lat, 0. );
The use of resources helps to separate graphics from the programming logic. The application simply sets a logical resource named "Plane5/Position", 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. The source code for the JSP Servlet or ASP.NET Handler 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