This is a pure HTML5 and JavaScript example that loads a panel of custom controls created with the GLG Graphics Builder into a JavaScript program and animates the drawing with real-time data using the GLG JavaScript Library API. More information
All controls may accept user input. Use the mouse to manually move dials and knobs, or to flip the switches. The demo stops updates when a slider or a dial is moved. Click on the Start button to resume automatic updates.
On mobile devices, a touch may be used instead of the mouse, but touch dragging is disabled on this page to avoid interfering with page scrolling and zooming. Use the Mobile Version button to see the mobile version of the page with the touch dragging enabled .
The drawing containing a panel of custom dials, meters and other input controls was 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. The drawing is saved into a file (controls.g). Click here to see more dials, meters, toggles and other available widgets.
The GLG JavaScript Library is used to deploy the drawing 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.