Chapter 7. Display Elements

Every developer has faced this: the interface seems to work, but looks “empty”, uninformative, or worse, misleads the user. Labels are in the wrong place, indicators stay silent, numbers do their own thing—and the app loses trust on the first screen.

Here you’ll discover why display elements aren’t just “decorations”, but full-fledged tools for managing perception. We’ll reveal how professional developers transform simple widgets into sources of clarity, feedback, and quality feel—without complicating the architecture or adding unnecessary code.

The chapter covers QLabel with HTML content, fine control over alignment, mnemonic bindings, progress indicators (including “infinite” ones), and QLCDNumber electronic displays with different number systems.

Skipping this chapter means continuing to write interfaces “the usual way” instead of making them clear, alive, and professional.

This chapter includes ready-to-use code examples.

Chapter Self-Check

Why is the QLabel widget inherited from QFrame instead of directly from QWidget?Answer
Correct answer: Inheriting from QFrame gives QLabel the ability to have a border and manage its style, which is important for visually highlighting labels in the interface.
Why do we need to combine alignment flags using the | (OR) operation when we could just use AlignCenter?Answer
Correct answer: This allows creating custom alignment combinations, for example AlignTop | AlignLeft, when standard constants don’t fit a specific task.
What’s the advantage of the setNum() method over directly converting a number to string via QString::number()?Answer
Correct answer: setNum() combines conversion and text setting in one call, simplifying code. For floating-point numbers, it also allows controlling display format and precision.
Why doesn’t the setBuddy() method work in macOS the same way as in Windows and Linux?Answer
Correct answer: In macOS, ampersand mnemonics aren’t used according to platform design principles. Instead, standard navigation methods are used: Tab for switching between fields and Cmd+combinations for commands.
What security problem can arise when using setOpenExternalLinks(true) for QLabel?Answer
Correct answer: Users can open arbitrary links, including malicious ones, if label text is formed from untrusted sources. You need to control HTML text content.
Why call setTextInteractionFlags() for QLabel when text is visible to users by default?Answer
Correct answer: By default, QLabel text can’t be selected and copied. This method enables interactivity, allowing users to select and copy text, which is important for long messages, file paths, or data.
Why is a progress indicator with range setRange(0, 0) called “infinite”?Answer
Correct answer: With a 0-0 range, the indicator doesn’t show completion percentage but displays a continuous motion animation, signaling that the process is running but its duration is unknown.
What happens if you try to display number 99999 on a QLCDNumber with setDigitCount(3)?Answer
Correct answer: The number won’t fit in three digits, and an overflow() signal will be emitted. Developers can handle this signal to notify users or change the digit count.
Why do we need the qOverload<>() function when connecting the valueChanged() signal to the display() slot?Answer
Correct answer: Both methods have multiple overloads with different parameters. qOverload helps the compiler select the right method version when using modern signal-slot syntax with function pointers.
In what case is it better to use QProgressBar instead of a simple QLabel with text “Loading…”?Answer
Correct answer: When an operation takes more than 2-3 seconds and it’s important to show that the program hasn’t frozen, and especially when you can estimate completion percentage so users understand how much time remains.
Why does the progress indicator example use the m_nStep attribute instead of directly calling setValue(getValue() + 1)?Answer
Correct answer: This provides control over value change logic at the class level, making it easy to add checks, logging, or other business logic when changing the step.
What’s the difference between displaying a bitmap image via HTML <IMG> tag versus using setPixmap() in QLabel?Answer
Correct answer: The HTML method allows combining images with text and tables in one label but is limited by HTML capabilities. setPixmap() gives direct control over the image and its dimensions but only works for graphics without text.
Which QLCDNumber style (Outline, Flat, Filled) is best for display on a dark background and why?Answer
Correct answer: Filled provides the best readability on dark backgrounds because segments are fully filled with color. Outline may be poorly visible, while Flat is suitable for light backgrounds.
Why call resize(pix.size()) for QLabel before setPixmap() when the widget can automatically adjust to content?Answer
Correct answer: Explicit sizing guarantees the window will exactly match the image, especially if QLabel is a top-level widget. Without this, size may be determined incorrectly or require manual adjustment by the user.
In what real scenario is it useful to handle the linkActivated() signal instead of using setOpenExternalLinks(true)?Answer
Correct answer: When additional control is needed: logging link clicks, requesting confirmation before opening, filtering by domains, or opening links in the app’s embedded browser instead of the system browser.

Hands-On Assignments

Easy Level

Information Panel with Indicators
Create an application with an information panel containing: QLabel with your name and age (use HTML formatting for emphasis), QProgressBar to display disk fill level (from 0 to 100%), and a button to increase indicator value by 10%. When reaching 100%, the indicator should reset.
Hints: Use HTML tags <b> and <font color> to format text in QLabel. Set QProgressBar range via setRange(0, 100). Use condition if (value >= 100) to check maximum reached. Don’t forget setAlignment() to center percentages in the indicator.

Medium Level

Number System Calculator with LCD Display
Develop a number system converter application using QLCDNumber. The program should contain a QSpinBox for entering decimal numbers, four QLCDNumbers to display this number simultaneously in binary, octal, decimal, and hexadecimal systems. Each LCD indicator should have a label (QLabel) with the number system name. Apply different styles (Outline, Flat, Filled) to different indicators.
Hints: Create four QLCDNumbers and set mode for each via setMode() (Bin, Oct, Dec, Hex). Use setSegmentStyle() to change style. Connect the valueChanged() signal from QSpinBox to display() slots of all four LCD indicators. For labels, use QLabel with setBuddy() method for linking. Arrange elements using QVBoxLayout or QGridLayout.

Hard Level

File Download Manager with Multiple Indicators
Create a file download manager simulator. The application should allow adding “files” for download (button “Add File”), each file displayed in a separate row with: QLabel with filename (generate random names), QProgressBar for download progress, QLCDNumber for displaying download speed in KB/s, “Pause/Resume” button. Add a QTimer that increases progress of active downloads every second and updates speed. Implement overflow() signal handling for QLCDNumber—if speed is too high, increase the digit count.
Hints: Use QScrollArea for scrolling the download list. Create a separate widget class for one download row. For name generation, use QString::number(QRandomGenerator::global()->bounded(1000)). QTimer with 1000 ms interval will update all active downloads. Store each download’s state (active/paused) in a class attribute. Connect overflow() signal to a slot that calls setDigitCount(currentDigitCount + 1). Use qOverload when connecting signals.

💬 Join the Discussion!

Mastered Qt display elements? Have questions about choosing between QLabel and QLCDNumber for your project?

Share your experience using progress indicators, tell us about creative HTML applications in QLabel, or help other readers understand the nuances of display widgets!

Leave a Reply

Your email address will not be published. Required fields are marked *