|
GLG Toolkit
|
Online Web / Mobile Demos: HTML5 & JavaScript (Client Side) ASP.NET or JSP (Server Side) Download Desktop Demos: C/C++ / C# .NET / Java |
Request Evaluation
Copy Request Web Conference |
Pricing |
Web Deployment: |
Integration with Application
Environment C/C++ Java C# and .NET ActiveX Control HTML5 JavaScript Library Graphics Server (ASP.NET or JSP ) Data Integration and Supply Data Connectivity Using Tags Object Selection User Interaction Cross-Platform Use Unix and Linux Windows Java HTML5 & JavaScript |
Technical Details Features Object Model Constraints
and Layers Automatic Damage Repair Supported Platforms Documentation |
OverviewGLG Toolkit is a state-of-the-art real-time graphics framework for developing highly graphical dynamic interfaces: not just simple buttons and menus, but fully animated graphical objects that show dynamic data and react to users' interactions. It is not just a drawing tool for creating "pretty pictures" (there are plenty), but a graphical engine that allows developers to define graphical objects and interact with them from a program. It is uniquely targeted towards an application developer, converting a tedious job of coding low-level graphics into an engaging interactive design of high-level behavior.
The Graphics Builder plays the central role in the Toolkit. The Builder allows the developer to define the look of an interface independent of its functionality, and change it at any time without touching the code, avoiding time-consuming compile-link cycles. It provides easy access to any and all advanced features of GLG graphical objects, including constraints, 2D and 3D dynamics, custom events, viewport and image objects, layering and subdrawings, groups and object hierarchies.
The Toolkit maintains the correct balance between the functionality of the drawing editor and the programming API. The Builder allows the developer to define intricate connections between graphical objects, while leaving the functional logic to where it belongs: a more wieldy programming environment. The programming API provides a seamless access to the high-level resources defined in the drawing, so that the code does not need to concern itself with what the interface looks like, only with its logical structure.
The GLG Toolkit redefines the meaning of the
word "framework". Usually, a framework is a
structure for enclosing an application, so that the entire
application has to be written within it, instead of
integrating into a native programming environment. GLG
Toolkit may be used as
both the framework (in which an application is
built) as well as a native
component (Motif,
Gtk or Qt widget, MFC
class, Java
bean, C# User
Control, ActiveX
control, etc.) which can be easily inserted into the
framework of your application. As such, it still
allows unlimited access to the graphical object engine
inside the component. The HTML5 JavaScript Library
option may be used to deploy GLG applications on a web
page inside a web browser on either a desktop or mobile
device. GLG web applications provide a full range of
interactive graphics capabilities which were previously
available only on desktop devices, as shown in the GLG Online Demos. The GLG
Graphics Servers provides an alternative server-side web
deployment option using either ASP.NET or JSP.
The
Toolkit's unprecedented level of control is accomplished
with a concise and
compact API. A handful of functions provide the
functionality which usually requires hundreds. All
attributes and resources are accessed and modified with
the same Get/Set
resource method due to the consistent resource-based
model. In other toolkits, each attribute has a different
set of access methods, so if an object has 30 attributes,
the developer needs to become accustomed with 30 different
functions. In GLG, even custom attributes created by the
user are still accessed as resources with the same Get/Set resource
methods. All a programmer needs to know is the name of a
given resource, either an intuitive default such as FillColor,
or any custom name given to the resource by the developer. |
![]() ![]() ![]() |
The dynamic graphical screens 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, which is
later loaded in an application using the GLG library.
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 program without recompiling the source
code.
The GLG Graphics Builder is geared towards application development and allows the developer to not only draw graphical objects, but also attach 2D and 3D dynamic animation, define object and resource hierarchies, setup constraints, etc. The Builder also provides a way to prototype the drawing with dynamic data to test the drawing's behavior.
The governing principle of the Toolkit is to allow developers to define as much of the graphical aspects of the application in the Builder as possible, leaving the code to handle only the application logic. In the beginning, the Builder is used to draw graphical objects, edit their shapes, define colors, gradients, shadows and other rendering attributes, attach dynamics for animation and layout the graphics in the drawing.
Furthermore, the Builder allows developers to assign custom names to objects and their attributes. They become resources for the application to access. The Toolkit organizes resources into tree-like hierarchies, resembling the way files are organized in a file system. This decreases the number of resources visible on each level of the hierarchy, making dealing with large drawings easier. The resource hierarchy of the drawing may be tuned interactively with the Builder to minimize later programming efforts.
The Builder provides two ways to access objects: by selecting objects and traversing their hierarchies, or by browsing resources directly. Object selection provides immediate access to objects for editing, while the resource interface views the hierarchy as the application sees it, and is convenient for debugging resource access errors.
The produced drawing encapsulates the graphical
appearance of the objects, and is completely separate from the
application code. As a result, the application does not need to be
recompiled when the drawing changes, as long as the resource
hierarchy remains intact. This feature is useful when providing
multiple versions of the drawing, all of which contain identical
resource hierarchies, but may differ in appearance. For example,
some versions of the drawing may contain much more elaborate
graphics, while those with simple graphics result in faster
updates.
The prototype mode of the Graphics Builder may be used to animate a drawing or widget with real or simulated data. The run command of the Builder has a variety of options for supplying data. For samples of run commands, use Ctrl-Click in widget palettes to load widget drawings with the default run commands, then click on Run in the toolbar to prototype. A custom editor extension DLL can also be used to supply data and handle user input, allowing to prototype a complete application right in the Builder.
Widgets and Custom Components The Toolkit provides a vast library of
pre-built widgets: dials
and meters, graphs, avionics gauges, process control
widgets and other graphical components. All widgets
are built on top of the Toolkit's object engine and their
behavior is encapsulated in the component's drawing. Each
component's drawing can be loaded into the Graphics Builder and
extensively customized, including not only editing its
resources, but also changing the shape of its graphical
elements. Custom components can be created and added to
the Builder's palette.
Custom OEM components can be created in the OEM version of the Graphics Builder by defining public properties for easy editing of the custom components. Custom OEM components can be used with the HMI Configurator which provides a simplified editing interface for end users. Click here for more information on the GLG widgets. Click here for the list of available widget sets. GLG Toolkit Features
|
![]() ![]() |
A
common application requires creating a dynamic screen displaying
the current state of a process control,
network monitoring or any other
mission critical system. The
screen must change in real-time to reflect the current data and
react to an operator's actions, converting them to signals to
control equipment or vessels being monitored. The Toolkit
specifically targets such tasks.
The screen will contain graphical objects
representing hundreds or even thousands of pieces of equipment
which can move, rotate, change colors, fill levels and labels
based on changes in data. The screen should support object selection, flicker-free
updates, drill-down, panning and
zooming. It must possess the ability to function on Unix, Linux, Windows and browser environments.
The screen should be screen-resolution independent, to display
both on small embedded monitors or large wall-mounted displays.
With such a specification, the task is nearly impossible-- unless
the GLG Toolkit is used.
With the Toolkit, a developer no longer needs to
worry about tediously coding low-level graphics for a particular
platform. Instead, the developer draws graphical objects in the
Graphics Builder, defines dynamics and resources the application
accesses, and saves the drawing. He/she then inserts the drawing
into an application using one of the provided GLG containers, and
starts using GLG's simple but powerful high-level Programming API. The API is used to
set the drawing's resources, supply data and handle user interaction.
The Toolkit saves months of development time by
eliminating low-level graphics code, providing a point and click
drawing editor and allowing fast prototyping directly in the
Graphics Builder. Finally, the Programming API allows the
developer to concentrate on the application logic by enabling
complete control over any and all objects in the drawing and
letting the Toolkit to handle the rest.
Due to the vector nature of the GLG graphics,
every attribute
of a graphical object, from a line width to gradient color, is
inherently dynamic. If an attribute of a graphical object is
changed by assigning it a new value, it will be automatically
reflected in the drawing, updating not only the object itself, but
also all other objects in the drawing affected by the change.
The dynamic nature of GLG objects makes them
ideal for rendering dynamic icons. Alternatively, if static
bitmaps were used, a separate bitmap would be necessary for each
variation in color, line width, fill level, etc., which quickly
becomes an unmanageable task as the number of dynamic objects
increases.
With the Toolkit's vector graphics and resource mechanism, every attribute of an object is accessible as a resource. If the value of a resource changes, the Toolkit will update the drawing accordingly. The Toolkit's automated damage repair redraws all objects intersecting the update area, as well as objects that have attributes constrained to the changed attribute. The automated damage repair uses double buffering to eliminate flickering.
In addition to changing attribute values
directly, more elaborate dynamics are also available using dynamic
transformations. For example, instead of setting an RGB
color value directly, a color list transformation may be attached
to the object color to change the color from green to red based on
the value of the state variable. A threshold transformation may be
used to change color when the value of a variable exceeds
predefined limits.
There are two special attribute dynamics types that
deserve a special mention. The fill dynamics
is achieved by changing the value of the FillAmount attribute. The fill dynamics using
arbitrary fill angle is supported. A visibility dynamics is achieved by simply changing
the value of the Visibility
attribute. Fractional values of the Visibility may be used for
transparency and alpha-blending, as well as object dimming and
highlighting.
In addition to the attribute dynamics, full 2D
and 3D geometrical dynamics are supported using geometrical
transformations. The move, scale, rotation, shear, mirror
and path
transformations may be used to change object shape or position in
the drawing by specifying the move, scale or angle parameters. The
object rendering in the drawing will be automatically updated when
the controlling parameter is changed by the program.
The unique feature of the Toolkit is the ability
to attach dynamic transformations not only to the geometrical
objects, such as polygons, rectangles, etc., but also to the
object's attributes. For example, geometrical transformations may
be applied not only to objects, but also to the object's control
points, providing a powerful way to change an object's shape.
Another example is attaching a move transformation to the center
of the rotation dynamics to dynamically move the center of
rotation.
Upon resizing the drawing, the contained graphics
are automatically resized to fit the new screen size, insulating
the application from worry about the exact screen size. This
transparent handling is convenient for monitoring applications in
which the user may want to vary the screen size while still
monitoring the entire process. An alternative non-resizable mode
is available, which displays more objects as the area is
increased.
The Toolkit's selection mechanism assures the object selection will work with an object's new dimensions. If it moves, rotates, or changes its shape, the selection mechanism will handle these changes transparently.
Additionally, the Toolkit's integrated pan
and zoom features allow the user to navigate through a large
drawing. These features can also be controlled from the API.
A JPEG, GIF or BMP image may be imported into a
drawing to be used as a drawing background or an image icon. Both
fixed-size and scalable images are supported. Image transparency
is supported with an OpenGL renderer.
An image may have dynamics attached as any other graphical object,
including the variation of the source image based on user data.
For example, an icon may use several images to represent different
states of an object and have a variable whose value controls which
image is used.
Move and scale dynamics may also be used with an
image object to control its position in the drawing.
A DXF converter is provided to import DXF
drawings and convert them into GLG drawings, which can then be
used the same way as any other GLG drawings.
Constraints are a unique feature of the GLG Toolkit. They are especially useful in large drawings or drawings with complex dynamics. If a drawing contains a map with 50 states, whose color is identical, the FillColor attribute of all 50 may be constrained to each other to ease development. Instead of setting the color of each state separately, setting one will automatically change the rest. The code of an application that uses such a drawing is naturally simpler.
In the Builder, instead of selecting each state and setting its color, only the color of one state needs to be changed. In the code, instead of traversing 50 states and setting 50 colors, one SetResource call will accomplish the same goal.
Constraints can also be used to define complex logical
dependencies between graphical objects. For example, several
objects may have constrained
dynamics in order to move in a related way. GLG
graphs and dials utilize this feature extensively.
Constraints can be used to define complex behavior. For
example, the seven segment LED widget uses complex constraints
so a single Value attribute controls all segments. In the code,
one simple SetResource call will display the requested
digit, and the appropriate segments will automatically be lit.
Constraints can also be used to handle objects in separate
layers as if they
were in one.
The Toolkit's robust and sophisticated graphics
capabilities include splines,
gradients,
shadows and other 3D
effects, 2D and 3D
dynamics, constraints, aliases,
integrated
zooming and panning, object tooltips, layering and subdrawings, image objects, a choice of an
OpenGL or
native GDI renderer and a GIS map server component.
Combined with easy to use resource-based
data access and the virtually unlimited power of the Programming API, the GLG Toolkit is
a comprehensive graphical solution tested in a variety of
industries.
The GLG JavaScript Library implements full GLG run-time
functionality present in the GLG C/C++, C# and Java
libraries, allowing the same graphical page and programming
logic to be shared between the desktop, web and mobile
versions of an application.
The library uses HTML5 canvas to render graphics
and supports all major browsers: Chrome, Firefox,
Edge and Safari, as well as mobile browsers. Since the
rendering is performed by the browser on the client side,
the server load is reduced, making it possible to use
low-end embedded web servers for hosting a web application.
Click here to run live
HTML5 and JavaScript Demos. Each demo includes a
button to view the demo source code.
While the Graphics
Builder is used for interactive design of drawings, the
Programming API provides a way for the program to interact with
the drawing from a program. The API is the second crucial element
of the Toolkit, and provides programming access to objects created
in the Builder when the drawing is embedded into an application.
The Toolkit provides a number of native programming containers
for deploying the Toolkit's graphics in an application, both C/C++
and Java, Unix, Linux and Windows: a Motif/Gtk/Qt widget, an MFC class, Windows custom
control, a Java bean
with a Java class library, a C#
User Control with a .NET class library, an ActiveX Control and more. Click here for more
information on available programming containers and deployment
options.
A developer will only need to use a single SetResource
function call or method to set any of the drawing's resources,
which is a result of the resource based Programming API. The
programmer needs to know only the name of a given resource, either
an intuitive default such as FillColor, or any custom name
given to the resource.
The Programming API may be used to modify
resources of the drawing at run-time and supply dynamic data for
real-time updates. The application needs to concern itself only
with supplying new resource values, and the Toolkit's engine
handles all details of the low-level graphics and damage repair.
The updates are data-driven, so no CPU time is consumed if the
data does not change. Click
here for more information.
The API may also be used to handle user interaction,
such as object selection or interaction with buttons, sliders and
other controls. The object selection is handled transparently by
the Toolkit, regardless of the screen size or zooming state, and
the program's callback is invoked with all selection information
every time an object of interest is selected. Click here for more
information.
Click on the following links for more information
on specific topics of the GLG Programming API:
The Extended API is also
available, in addition to the Standard API described
above. It provides all functionality available in the Builder to
the program at run-time. The Extended API allows the application
to create, add or delete objects from the drawing
programmatically, which is convenient if the nature of the
graphics or the number of objects in the drawing is not known
until run-time. It also allows to programmatically add dynamic
transformations and constraints to objects at run-time,
instead of (or in addition to) defining transformations and
constraints in the Graphics
Builder.
The Extended API may be used to implement drawing
editor functionality, such as dragging objects with the mouse, and
is often used to build custom diagramming applications. It also
provides methods for traversing
all objects in the drawing as well as
introspection methods for querying a list of all
resources contained in a drawing.
The Extended API may also be used to dynamically generate drawings based on configuration files, information from a database or user input. The object-oriented resource-based nature of Toolkit makes it extremely easy to create and add objects at run-time and supply data for them, without the need to attach all data variables by hand in a drawing editor. To create an additional instance of a dynamic object, it is copied using the GlgCopyObject function. The copy will contain the same set of resources as the original object. The resources on the copy may be accessed by simply naming the copy and using the name as part of a path name to access the resources inside the copy.
The Extended API is available with all deployment
options (C/C++/C#, Java, JavaScript and ActiveX):
The following lists the types of applications
that need Extended API.
|
|
If the drawing can be built ahead of time using the Graphics Builder, the GLG Standard API is sufficient to display the drawing and update it with real-time data. |