Overview
The GLG
Graphics Server is an AJAX-based thin-client
solution for deploying real-time process control and
monitoring screens on the web and mobile devices. It is an
alternative to the thick client approach and requires only minimal
capabilities on the client.
The GLG JavaScript Library
provides an alternative solution for client-side Web and Mobile
deployment with HTML5 and JavaScript that renders graphics
in the browser and reduces the server load.
With the AJAX-based thin client approach, the client side serves as
a display front end that uses only the industry-standard HTML and JavaScript, while most of the
application processing is performed on the central server. To
display graphics that update dynamically based on the input data,
the server needs to render the image of the graphics on each image
request.
The Graphics Server performs the task of rendering the image in
response to the image generation requests. The image is referred to
as "dynamic" since it reflects the current state of the dynamically
changing data. The Graphics Server also handles user interaction
requests, including object selection with the mouse and object
tooltips, as well as clicking on buttons and toggles in the drawing.
In conjunction with the JavaScript on the client side, it makes the
image appear dynamic as it updates
with real-time data and responds
to user actions.
Both the ASP.NET and JSP versions of the Graphics Server are
available. In the ASP.NET
environment, the Graphics Server is deployed with IIS via custom
HTTP handlers written in C#. In the Java Server Pages (JSP) environment, the Graphics
Server is deployed as a Java Servlet and may be used with any
compliant Java2EE Application server, such as Tomcat.
Interactive Graphical
Editor
The dynamic graphical screens displayed on web
pages are created interactively using a graphical editor - the GLG Graphics Builder.
Using the Builder, a developer can draw graphical objects and edit
their properties, as well as define dynamic behavior and
attach data sources for animating the drawing with real-time data.
The drawing is saved into a file and used by the Graphics Server for
image generation.
In addition to creating drawings from scratch, the Graphics Builder
provides palettes of pre-built widgets, such as
dials and meters, graphs and process control symbols, which can be
added to the drawing using Drag and Drop. The Builder also allows
the user to define custom symbols and add them to a palette as
reusable components.
With the help of the Builder, the job of creating and maintaining
graphics, from simple dashboards
to complex visualizations
and custom
HMI screens, is done in an interactive, point-and-click
environment. The graphics may be easily edited in the Builder with
no programming involved. Once the updated drawing is saved, it is
ready to be used by the Graphics Server without recompiling the
source code.
The GLG drawings are screen-resolution
independent and may be scaled at run-time, as shown in the demos.
The same drawing may be used to render images of various resolutions
depending on the size of the client's screen.
Click here for more
information on the GLG Graphics Builder.
Mobile Dashboards
The drawings created using the
Graphics Builder represent the dynamic graphics displayed on the
application's web pages at run time. For example, to create a custom Mobile Dashboard
displaying a few graphs and meters you can simply open a new drawing
in the Graphics Builder, add a few graphs
and meters to it from a
palette, name them for run-time
data access and save the drawing.
In addition to simple dashboards, elaborate custom graphical
displays may be created in the Builder and deployed on a web page,
as shown in the online demos.
While in the Graphics Builder, you can also change object
properties, edit the object layout on the page, add custom labels
and annotations or draw custom decorations using the Builder's
gradient, shadow and transparency effects.
An alternative way to build an AJAX Dashboard is to combine several
widgets on a single HTML page, as shown in the GLG
AJAX Dashboard demo. Each self-contained widget is using its
own server-side servlet and it may be deployed as a reusable
component on multiple web pages.
Run-Time Image
Generation
At run-time, the Graphics
Server loads the GLG drawing and uses it to generate dynamic images,
updating the drawing with the current data before processing each
image request. The drawing contains definitions of all graphical
objects and their dynamic actions. 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
superior server performance.
When a client issues an image request, the Graphics Server creates a
snapshot image of the drawing using the current data. An image
request may contain parameters that define an image size, a value to
be displayed in a dial, a title for a graph or other custom
attributes. For example, in the process
control demo the image request contains the show_pipes parameter. If this
parameter is set to 1, the generated image will display pipes
connecting the tanks. The image generation parameters are passed to
the Graphics Server using the standard URL parameter syntax.
Before generating an image, the Graphics Server updates the drawing
with the current data by setting the drawing's resources. The resources
are defined in the Graphics Builder when the drawing is created and
accessed by the servlet at run time using the SetResource()
API method.
When the drawing is updated, the servlet generates an image by
simply invoking the CreateImage()
API method. This single method of the Graphics Server takes care of
the complicated task of rendering all objects in the drawing in
their current dynamic state.
Click
here to see an example of a URL showing a dynamically
generated image. 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 the pipe display. In an
application, a JavaScript timer may be used to reload the image
periodically to display new data as shown in the demos.
Developing
Custom Server-Side Applications
In the ASP.NET
environment, the Graphics Server is deployed via a custom HTTP
handler that is used with Windows IIS. In the JSP environment, the Graphics
Server is deployed as a
Java servlet that may be used with any compliant Java2EE Application
server.
The source code of a sample
ASP.NET HTTP handler and a sample
JSP servlet is provided and may be customized by the
application developers according to the application requirements.
For example, servlets and handlers may share one drawing between all
servlet and handler instances or create a separate instance of the
drawing for each servlet session or an HTTP handler request.
When a custom drawing is used, the servlet code may be modified to
set the application-specific resources defined in the drawing, as
well as handle an application-specific user interaction.
The ASP.NET version of the Graphics Handler uses Glg.NetServer.dll,
while the JSP version uses GlgServer.jar
file. Both files provide a class library that contains GLG Toolkit's
object and rendering engine. The class library provides both the GLG
Standard and Extended APIs described in the C#
and Java
documentation. The GLG Standard API provides methods for accessing
resources to update the drawing with real-time data. The Extended
API provides methods for advanced features, such as creating
objects programmatically or querying a list of all resources defined
in the drawing. For example, the Extended API may be used at run
time to create a variable number of dynamic icons representing
airplanes as shown in the GIS and AirTraffic Control demos.
Dynamic Data Supply
A server-side application can query data from any data source, such
as a PLC or process database, using any preferred data connectivity
API. Alternatively, the data may 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 drawing used in the process
control
demo, an object named "Heater"
has a resource named "HeaterLevel"
that controls the fill level of the heater's tank. When the drawing
is used in the servlet, the servlet updates the fill level by using
the "Heater/HeaterLevel"
resource name as follows:
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.
AJAX-Based User
Interaction
In
addition to generating dynamic images, the servlet may handle user
interaction by processing AJAX-based requests for object selection, tooltips and user input, such as
pressing buttons in the
drawing with the mouse. These features are demonstrated in the process
control and other demos.
To handle user interaction, JavaScript is used in the application's
web pages to add onclick and onmousemove event
handlers to the image. When the user clicks on the image or moves
the mouse over it, an event handler is invoked in the script. The
event handler sends an object selection AJAX request to the Graphics
Server, passing the mouse coordinates as parameters of the request.
The Graphics Server processes the request by finding an object
selected by the mouse coordinates. The servlet may process the
selection on the server side or return the selection information
back to the client for processing.
The client may use the output of the selection request to popup a
tooltip, display the name of the selected object or execute a
drill-down action. For example, the process control demo displays a
dialog with the object's data when the object is selected with the
mouse. A tooltip is displayed when the mouse is moved over a named
object in the drawing. If the Show
3D Pipes button at the bottom of the drawing is pressed,
the pipes connecting the tanks and valves will be displayed in the
image.
The tooltips and object selection events 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 a large number of vector objects in
the drawing without the HTML performance limitations related to a
number of used image maps.
Click
here to see the full source code of the GLG Servlet
for generating images and handling user interaction requests.
Since the selection and tooltip events are processed on the
server side with no image maps embedded in HTML, the HTML pages do not need to be
regenerated when the geometry of the objects in the
drawing is changed.
The server-side processing of selection events is the only
practical option when the drawing
contains dynamic moving icons, as shown in the Airtraffic
Control Demo. In this case, generating static image maps for the
icon selection is simply impossible, since the icons change their
position. Using AJAX to generate image maps dynamically every time
the icon moves, would be also impractical due to the performance
limitations. This leaves the server-side selection
processing as the only practical alternative.
Purchasing and
Pricing Information
The Mobile HMI Starter Package
starts from $1650 and includes the Basic Edition of the Graphics
Builder, a Graphics Server with one Web-Server License and one widget set. An additional widget set may
be added for $190.
Select one of the following links for purchasing and pricing
information:
The dynamic graphical screens displayed on web
pages are created interactively using a graphical editor - the GLG Graphics Builder.
Using the Builder, a developer can draw graphical objects and edit
their properties, as well as define dynamic behavior and
attach data sources for animating the drawing with real-time data.
The drawing is saved into a file and used by the Graphics Server for
image generation.