Widgets: button, radio, checkbox, slider, menu, wtext |
 |
Run the ButtonsSlidersMenus example program (snapshot shown above) and inspect the program code to see how to create buttons, sliders, and drop-down menus to control the execution of a 3D animation.
You'll see dollar signs ("$") all through the example. It is a standard abbreviation for jQuery, a widely used library for making connections between a JavaScript program and the HTML of a web page. You may wish to study a jQuery tutorial. GlowScript imports the jQuery and jQuery-ui libraries.
Full understanding of the jQuery mechanisms requires a good knowledge of HTML coding as well as knowledge of jQuery itself. However, the examples shown in the program above should provide you with enough information to be able to use controls in your own GlowScript programs.
You can also use the simpler scheme described here.
GlowScript provides three anchor points that can be used to place jQuery widgets on the page:
scene.title_anchor
scene.caption_anchor
print_anchor
In a jQuery operation, appendTo(cvs.title_anchor) can be used to add a widget to the title above the canvas named cvs and appendTo(cvs.caption_anchor) to add a widget to the caption below the canvas. Specifying print_anchor adds a widget to the bottom of the web page, where the print area is.
Important: Do not use character strings to specify a function as an argument in a jquery statement, as the character string is evaluated in a global context outside the GlowScript context, and your function will not be found. For example, say something like $("<button/>").click(handle_click) rather than something like $("<button onclick='handle_click'></button")