12

Cleaning Up the User Interface

Welcome to Chapter 12! In the previous chapter, we integrated three different kinds of animation blending into the existing code. We also added some control elements for easy manipulation of the blending types and properties.

In this chapter, we will clean up the user interface by using more ImGui elements. We will start with an overview of various types of UI controls and their intended usage. Then, two ImGui elements, a combo box and a radio button, will be introduced. The function of these two elements is well known, and we will look at how to use them in code.

Then, we will check the drawing of the so-called ImGui plots. Plots are graphical diagrams and are perfect for visualizing a short, graphical history of numerical values, such as the FPS counter or the timer values.

At the end of the chapter, we will have a cleaner user interface for our tool, using more appropriate elements to simplify the usage of the character animation program...

Technical requirements

To follow along with this chapter, you will need the OpenGL and Vulkan renderer code from Chapter 11.

Before we examine the new ImGui control elements in detail, we will take a short detour to look at some of the element types, their functions, and the advantages and disadvantages of using them for specific tasks.

UI controls are cool

In Chapter 5, we added a slider to control the field of view of the renderer output. For such a task, a slider is great, as it shows visual feedback of the range and the selected value within that range. However, using a slider to select the animation clip or skeleton node has a major drawback – it lacks the visible mapping between the numerical value of the clip or node and the clip or node name itself. Selecting a specific clip or a node is a try-and-error process, resulting in you having to remember or write down the most important numbers.

By changing the slider to a list box or a combo box, the names of the animation clips and nodes will be shown instead of just the numbers of the clips and nodes. Internally, the currently selected entry of the combo box is identified by its index in the array of all elements in the combo box, resulting in an implicit mapping between a numerical value and name. So, we do not need any additional control structure...

Creating combo boxes and radio buttons

ImGui has two different widget variants that allow you to select an element from a list of options – list boxes and combo boxes.

A list box usually displays a configurable number of list elements on the screen, using a larger amount of screen space compared to a combo box. In contrast, the combo box only shows a preview of the currently selected list element and unfolds to enable the user to select an element. On the left-hand side in Figure 12.1, you can see a list box, which is permanently shown with a configurable height. A combo box is initially drawn as a folded single line, as shown in the middle of Figure 12.1, and is only expanded upon user interaction. An expanded combo box can be seen in Figure 12.1 on the right-hand side:

Figure 12.1: A list box (left), a folded combo box (middle), and an expanded combo box (right)

We will use the combo box in our example code, as the single-line display avoids...

Drawing time series with ImGui

You will find charts with two-dimensional time series in many places. A graphical drawing is easier to understand, compared to a table of numbers. In Figure 12.5, a simple example of a time series chart is shown:

Figure 12.5: An example of a time series chart

For the X axis of the chart, an ascending time will be used. On the Y axis, the value for a specific time is drawn as a point, and all the points are connected by lines thereafter. The result is a single line from left to right, enabling us to detect possible correlations between different time points, which is easier than just having a column of numbers.

Figure 12.6 shows a plot of a sine wave made in ImGui. The basic principle is the same as for the preceding time series – the horizontal X axis of the chart is the time value, and for every point in time, a value on the vertical Y axis can be set:

Figure 12.6: A plot of a sine wave...

The sky is the limit

If you look at the message thread behind the Gallery link in the ImGui repository on GitHub, you will find many amazing user interfaces that have been created using ImGui. See the Additional resources section for the link, and make sure to follow the links in the first comment to the older tickets.

ImGui offers many other widget types that may be useful for your programming. You can do the following:

• Open extra settings in separate, closeable windows
• Display dialogs to a user
• Create modal dialogs that must be acted on
• Add menus to the control window
• Let the user choose colors by implementing a color picker widget
• Group settings in tabs instead of collapsed headers
• Organize controls and text in tables
• Show images in your windows, even create 2D animations
• Adjust parameters, such as colors, fonts, and the layout of widgets

To explore the ImGUI widgets and options, check out the live demo link in the Additional resources...

Summary

In this chapter, we explored how to create a cleaner user interface by replacing some of the currently used widgets with new ones.

After a quick overview of the widgets, we removed the sliders we used to select the animation clips and skeleton nodes, adding combo boxes instead. Then, we removed some ambiguous checkboxes and added radio button groups as replacements.

In the last part of the chapter, we added ImGui plots to draw time series of the FPS counter and the timers, and we created tooltips to show the plotted charts whenever a user hovers a mouse over the FPS counter and timer widgets.

In the following chapter, we will refocus on the animation part. You will learn the basics of inverse kinematics, a method that allows us to create and limit the movement of model nodes in a natural-looking way.

Practical sessions

You can try out the following ideas to get a deeper insight into the creation of user interfaces using ImGui elements:

• Add tooltips to a user interface. You can add a (disabled) question mark on the same line as the text field and explain the purpose of the control if the mouse hovers over the question mark. Adding explanations allows more accessibility for users without detailed knowledge of character animation.
• Add a confirmation dialog before closing a window. Create a modal dialog in the center of the window, requesting a user to confirm the end of the current renderer session.
• Add two sliders to a user interface to control the number of data points and the update frequency of the timer plots. The slider values do not need to be exposed to other components in the OGLRenderData struct; you can keep the logic inside the createFrame() method of the UserInterface class.
• Advanced difficulty: Search for an ImGui-based file browser extension and...

Additional resources

• The ImGui website: https://github.com/ocornut/imgui
• ImGui examples: https://github.com/ocornut/imgui/labels/gallery
• ImGui extensions: https://github.com/ocornut/imgui/wiki/Useful-Extensions
• An ImGui live demo: https://jnmaloney.github.io/WebGui/imgui.html