In CHAI3D widgets are the primary elements for displaying data and status information in 2D. Each camera contains a front and back layer on which can be attached widgets. When a camera scene is rendered, the 2D back layer is rendered first, followed by the 3D world, and finally the 2D front layer.
In the following section we review some of these basic widgets.
Widgets in CHAI3D
cPanel can be used put an empty panel on a window. Panels have properties for providing round corners, colors, and material texture properties. A panel is defined by its width and height can be placed anywhere in the viewport.
An application can add a bitmap widget to its user interface to display an image. The image is displayed with its origin at the bottom-left corner of the widget's destination rectangle, and can be stretched along the X and Y axis.
A background widget can be used to display an image that covers the entire display window.
cBackground* background = new cBackground();
Example 05-fonts: A background image covers the entire windows.
A Level is a linear gauge widget which is used to let users quickly understand where a value lies in a certain range. The level can be set horizontally or vertically.
The Level can be set horizontally by rotating the widget of 90 degrees.
A dial offers similar capabilities than a level, but in a circular type display.
Dials: (Left) Continuous Display (Right) Single Increment Display
An application can add a cScope widget to display up to four different signals similar to a digital oscilloscope.
scope->setSignalEnabled(true, true, true, false);
Once the scope has been initialized, the signal values can be continuously updated with the following command:
scope->setSignalValues(value0, value1, value2, value3);
A Label is a widget that is used add text in an application. For each label, a font is assigned. A font should always be created before instantiating a label and can be shared among many labels.
CHAI3D supports the use of Bitmap fonts, which consist of a texture atlas containing all of the required letters from the font, and a text data file describing the location and size of each letter on that texture atlas.
A selection of fonts are encoded in the CHAI3D framework and can be instantiated with the following code. The full list of encoded fonts can be found in the src/resources directory.
A font can also be loaded using a font file generated by the application BMFont from AngelCode.
Creating a Bitmap Font using BMFont
- Run BMFont and open Options->Font Settings.
- Select your desired font from the list of installed fonts on your PC, or add a font file that you have on your harddrive.
- Set the pixel size of the font and check Match char height
- Check Font Smoothing and Super Sampling if you want the letters to be smooth and anti-aliased.
- Then back in the main tool window you'll see all the letters contained within your chosen font.
- Highlight all the letters you wish to be contained in the font, either individually by toggling on/off each letter, or by toggling subsections of letters from the list on the right.
- Next, open Options->Export Options
- Depending on your chosen font, and whether you're adding any after effects to the texture atlas, you may want to add some letter padding to prevent unintentional artifacts on the letters.
- Set a Width and Height for the texture atlas. It needs to be big enough to fit all the letters onto one Texture. To check that it all fits on the chosen size, go back to the main window and press 'V' or go to Options->Visualize.
- The best is to stick to power-2 dimensions for the atlas. e.g. 2,4,8,16,32,64,128,256,512 etc.
- Check 32 Bit depth to allow alpha channel.
- Check Text File Format, and PNG for the Texture format.
- Select Options->Save bitmap font as...
- Save the Bitmap font to your CHAI3D resource folder.