Web Power and Data Center Monitoring:
GLG Demo (HTML5 & JavaScript)
This example loads drawings created with the
GLG Graphics Builder into a JavaScript program that handles user
interaction and animates the drawings with real-time data using the
GLG JavaScript Library API.
Drawings used in this demo were created with the
GLG Graphics Builder, which allows a user to create graphical
objects and define their dynamic behavior using a point-and-click
interface, without the need to write graphics code by hand. Each drawing
is saved into a file (power_diagram.g and datacenter.g).
The GLG JavaScript Library is used to deploy drawings on a
web page. The library provides an API to load and display the drawing,
animate it with real-time data and handle user interaction.
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 demo uses simulated data, but an application-specific data
acquisition mechanism can be used to supply live data
for animation from any remote data source using data tags.
User Interaction
Power Monitoring Page User Interaction
In the Manual Mode,
power circuits may be activated or deactivated
by clicking on the toggles located next to each switch or breaker.
The Manual Mode toggle may be used to disable Manual Mode and
animate the power diagram state with simulated data.
The Room buttons at the bottom of the Power Monitoring page
may be used to drill down to show the state of equipment in
different data center rooms.
Data Center Room Page User Interaction
The room menu at the top of the page may be used to select the
displayed data center room.
The Back button at the bottom of the page may be used to
return to the Power Monitoring page.