Qt Widgets Rendering Pipeline

13 Dec 2023

Qt Widgets is among the GUI toolkits developed by the Qt firm. It’s constructed following desktop software program tips, so it’s a highly effective instrument to create desktop software program with complicated GUIs utilizing C++.

To have the ability to manipulate and show GUI objects on the display, it depends on a graphics pipeline composed of a number of steps, liable for remodeling the visible description of GUI objects into pixels displayed on the display.

I will describe all of the steps of the Qt Widgets graphics pipeline on this article, to provide you a transparent thought of the way it works.

Person Interface

In Qt Widgets, each consumer interface component is represented as an object. They derive from the QWidget base class, which gives the properties and conduct which might be shared between all UI objects, similar to place, dimensions, occasion dealing with and portray. Objects are organized in a tree, so each node is the guardian of a number of youngsters, and has a pointer to its guardian. The tree construction is handy when traversing the widgets to color on the display.

When making a consumer interface, you may select between utilizing the primitive controls offered by Qt Widgets straight, creating a brand new widget composed out of the primitive widgets, or creating your absolutely personalized management.

Widgets specify how they react to occasions delivered by the occasion system. Suppose we create a button inside a window, after which that the consumer presses the left mouse button over it. First the widget receives a mouse press occasion, which units an inner variable saying that the component was pressed. Then the widget schedules a repaint of itself on display, to alter its visible illustration to a sunken model of itself.

The total repaint of the UI system is applied utilizing the painter’s algorithm. The repaint supervisor traverses the widget tree from the foundation to the leaf nodes with a DFS, portray first the container widgets, then portray the kids widgets from the again to the entrance, in order that entrance widgets are painted over the again widgets in the event that they overlap. However the widgets don’t deal with the precise drawing themselves, delegating this accountability as a substitute to the QStyle class.

Styling

One architectural purpose of Qt Widgets is that widgets ought to be capable of change their look, to be in concord with the appear and feel of the platform they’re working on, or to undertake a customized look outlined by the appliance builders. To attain this, when a widget processes the paint occasion it delegates the portray activity to a QStyle object or the comfort object QStylePainter, which simply gives some syntactic sugar on prime of QStyle. The picture beneath exhibits the dealing with code for the paint occasion of a QPushButton.

QStyle will then rework the logical description of the UI objects into the 2D primitives that compose them. Types may be personalized by subclassing from QStyle, so each customized model has its personal derived class. For representing buttons, it’s going to instantiate a QPainter and draw rectangles with strokes, borders and fills, textual content, and optionally a picture. This leads us into the subsequent step of the pipeline.

Portray System

QPainter is a totally featured 2D rendering engine that may draw geometric shapes, textual content and pictures. It isn’t distinctive within the software program trade. Different 2D rendering APIs embrace Home windows’ GDI and Direct 2D, Apple’s Quartz 2D, Google’s Skia, Cairo and the HTML5 Canvas component.

2D graphics shows present essentially the most broadly used expertise for creating consumer interfaces. Adopted in desktops, tablets and smartphones, they’ve largely changed command line interfaces, which in the present day stay restricted to a technical viewers. As a consequence, each GUI toolkit depends upon a 2D graphics library, utilizing both a publicly accessible rendering library or constructing a customized one.

The primitives that may be drawn embrace rectangles, polygons, factors and contours, with totally different fill patterns, strokes and colours. Textual content can also be supported. Strains can fluctuate their finish caps and joint types. Object coordinates may be rotated, scaled and translated.

QPainter attracts the 2D primitives in accordance with the technique outlined by the rendering backends. Applied by the QPaintDevice and QPaintEngine pairs, the backends allow the GUI to be rendered utilizing totally different APIs and on totally different surfaces. The backends that come out of the field allow the consumer to render on the display, in SVGs, PDFs and even printers. The backend used for drawing on the display is at present the software program rasterizer.

Rasterizer

Earlier than Qt 4.0, QPainter used the native OS APIs to transform strokes into pixels, similar to GDI on Home windows. Nevertheless the discrepancies of rendering from one platform to a different, and the sluggish progress of some native APIs gave start to a brand new backend impressed by the anti-grain geometry library (AGG): the Qt software program rasterizer. For the reason that rendering may now occur with the identical code in each platform, the function set, high quality and efficiency can be constant. This led to the software program rasterizer finally changing into the default backend in Home windows, Mac OS and X11.

The software program rasterizer makes use of CPU operations to do the heavy work of the rasterizer, and is coded purely in C++. Some well-known algorithms utilized by rasterizers are Bresenham’s line drawing algorithm and the midpoint ellipse algorithm. They’re additionally liable for drawing anti-aliased graphics utilizing strategies similar to supersampling.

Throughout a brief interval of experimentation, QPainter may additionally draw each widget in an utility utilizing OpenGL, which allowed it to leverage the GPU for rendering. However enabling it didn’t play nicely with the widgets structure and will even decelerate the appliance. Widgets draw various kinds of graphical components one after the opposite, altering states quickly. Since OpenGL excels in rendering a number of information of the identical kind, however is sluggish when altering states, this created a efficiency penalty for Qt Widgets purposes. This led to the code being eliminated, and additional consolidated the software program rasterizer.

Display screen Output

When drawing widgets to the display, the operation needs to be accomplished as quick as attainable, in any other case the monitor would possibly show the scene whereas it’s nonetheless being drawn. This situation is solved utilizing the approach often called double buffering. Older toolkits did not present help for double buffering out of the field, so GUIs may flicker whereas nonetheless being drawn.

Each Qt widget is a part of a local window represented by QWindow. QWindow is liable for receiving system occasions and for storing the picture used as a again buffer, contained in QBackingStore. Throughout a repaint, widgets render their visuals on this picture. Then, when the repaint is completed, the picture will get flushed to the display utilizing a platform particular API. In Home windows, the flush operation typically calls GDI’s {hardware} accelerated BitBlt. The native graphics API is then liable for speaking with the graphics driver that may drive the monitor to show the picture. Lastly, the consumer is ready to see the picture.

Conclusion

This text gave you an outline of how a fancy and mature GUI library interacts with 2D graphics primitives to create the consumer interfaces that we use day by day. Figuring out how GUI libraries work will aid you be simpler when writing your GUIs, and when growing customized elements or libraries on your utility.