Embedded screen color development

Remember the previous "blue and black gold skirt" dispute? This difference stems from the difference in the cone cells used to distinguish colors in our eyes, and the "blue and black gold skirt" in the human-machine interface also exists. What is the reason? This article is for you to reveal the secret, and introduces the design of human-computer interaction interface from the color point of view.

We look at the world like this

People know that it takes three steps to put an elephant in the refrigerator, and the human eye can put the world into the brain in three steps:

1. The eye senses the image (the sensor collects and converts it into a digital signal)

2. Turn the nerve signal into the brain (transmit the signal to the processor through the communication system)

3. The brain processes and stores (the processor converts the screen into a displayable and storage format)

Therefore, the image format that the human eye begins to see is transformed from an optical signal into an electrical signal and a chemical signal in the nerve. The propagation format is different. Similarly, the machine is also converted.

First, the format in the brain - RGB image format

First of all, the screen is composed of pixels, and the brilliant colors are only from the three primary colors of red, green and blue. The representation of this color is called RGB color. Spatial representation (it is also one of the most used color space representations in multimedia computer technology), as shown in the following figure:

Tricolor map

According to the principle of three primary colors, any color light F can be added and mixed with different components of R, G, and B colors. As shown in Equation 1.1.

Equation 1.1 The principle of three primary colors

White light is a mixture of multiple lights, so when the three primary color coefficient is the largest, it is white, and when it is zero, it is black, and between the two is the world's Bose.

Each pixel is like a paint box. The larger the box, the more colors it has, the richer the color can be expressed by this pixel. The size of this box is called storage space in the computer, and the color is To change the content of the three primary colors, the lower the table below, the larger the storage space required, but the more accurate the color can be described by each pixel, the more realistic the screen will be.

The common format of RGB is shown in Table 1. It is not necessary to look at it in detail.

Table 1 RGB common format

Second, the format on the eye - YUV image format

When we store, we use the luminance signal Y and two color difference signals RY (red-brightness, ie U), BY (blue-brightness, ie V) to encode separately, and then send out, in order to save space and facilitate packaging. The display terminal is then converted back to the RGB format. The representation of this color is the so-called YUV color space representation.

At this time, you may ask "Hey, G (green) where to go", in fact, the two colors plus brightness can also express the original color through the algorithm, so even if it is merged into R and B.

Compared with RGB video signal transmission, the biggest advantage of YUV is that it only takes up very little bandwidth (RGB requires three independent video signals to transmit at the same time). The difference in bandwidth between the two formats is as follows: RGB occupied The bandwidth is much larger.

Is it just to save bandwidth, so we have chosen the YUV format without hesitation? of course not! While low bandwidth is critical, color is also critical.

The use of YUV color space is more important because its luminance signal Y and chrominance signals U, V are separated, so the advantage of separation is not only to avoid mutual interference, but also to reduce the sampling rate of chromaticity without affecting image quality too. Big. If U and V are zero, there is no color and it becomes a black and white TV. Of course, Y is also an important parameter. In fact, we usually see a color shade is very different, and the depth depends on the brightness Y, the effect of Y is shown below.

Figure 4 Brightness change chart

Let's first introduce a YUV format, and everyone will bypass the class.

YUV 4:2:2:

"4" means there are 4 Ys in the stored stream code;

"2" indicates that there are 2 U color difference values ​​in the stored stream code;

The second "2" indicates that there are 2 V color difference values ​​in the stored stream code.

The following four pixels are: [Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2] [Y3 U3 V3]

The stored code stream is: Y0 U0 Y1 V1 Y2 U2 Y3 V3

The mapped pixels are: [Y0 U0 V1] [Y1 U0 V1] [Y2 U2 V3] [Y3 U2 V3]

Figure 5 YUV sampling network

The picture above shows the sampling network of YUV4:2:2. The light sample (Y) is represented by a cross, and the color sample (U, V) is represented by a circle. Each point has a fork, and the circle is only half, so this is why the above stored stream code four Y is complete, and U, V is only half.

Third, the development of interactive interface

The development of images is mainly for the aesthetics of human-computer interaction interface. At present, the design of human-computer interaction interface is emWin and QT. The use of QT/E often requires running an embedded operating system on the microcontroller, so there are certain requirements for the performance of the MCU. In addition, if you have not been exposed to QT/E before, it will take a certain amount of time to use. In contrast, emWin is more suitable for fast, streamlined UI development, but the interface interaction and aesthetics are lower.

emWin_Demo

ZLG Zhiyuan Electronics has developed the next-generation embedded development platform AWorks platform for 12 years. The internal integrated GUI programming framework - AWUI, AWUI currently supports Qt and emWin, uses Designer to edit the interface, develops ViewModel/Model with C++, so that developers do not need to learn. The final application of Qt and emWin APIs can be run on Qt and emWin (to ensure that the control is supported on emWin).

Based on AWUI, ZLG plans to launch AWTK, which is more widely used and better used during the year. AWTK contains a wealth of GUI components, breaking through the "drag and drop" GUI programming mode, greatly improving the efficiency of GUI programming. With a good design structure, both emWin low memory smooth operation and Qt high-quality interface effects, to ensure the smoothness and operational stability of the interactive interface, so that embedded UI development will be integrated into the AWorks platform in the form of components. Interactive interface development can be quickly implemented under the platform.

AWUI Development Plan

UI framework in AWorks

ZLG Zhiyuan Electronics M1052 cross-border core board supports AWorks embedded development platform, which not only has the powerful processing performance of MPU, but also the ease of use and real-time advantage of MCU microcontroller! Pre-installed with AWorks real-time operating system for intelligent hardware and industrial IoT applications.

M335x-T industrial core board