evkmimxrt1170_05_RadialGradient

Draw a big rectangle with the radial gradient color (four small rectangles with different spread modes actually) on the white background.

Hardware Preparation

If using the MIPI interface, connect the LCD displayer to J48 on the MIMXRT1170-EVK board. Connect 5V power to J43, set J38 to 1-2, and turn on the power switch SW5.

Software Preparation

Now three LCD displayers are supported, which are defined in display_support.h:

#define DEMO_PANEL_RK055AHD091 0 /* 720 * 1280, RK055AHD091-CTG(RK055HDMIPI4M) */
#define DEMO_PANEL_RK055IQH091 1 /* 540 * 960,  RK055IQH091-CTG */
#define DEMO_PANEL_RK055MHD091 2 /* 720 * 1280, RK055MHD091A0-CTG(RK055HDMIPI4MA0) */

Use the macro DEMO_PANEL to select the LCD panel you are using, the default panel is RK055AHD091-CTG configured in the display_support.h:

#define DEMO_PANEL DEMO_PANEL_RK055AHD091

For example, if your LCD panel is RK055MHD091A0-CTG, change the macro DEMO_PANEL definition as following:

#define DEMO_PANEL DEMO_PANEL_RK055MHD091

The source code is in RadialGradient.c, where the main function first configures clocks, pins, etc. freerots is deployed in the example. vglite_task is created and scheduled to execute VGLite initialization and drawing task.

VGLite Initialization

Before drawing, several functions are executed to do initialization:

vg_lite_init initializes VGLite and configures the tessellation buffer size, which is recommended to be the size of the most commonly rendered path size. In this project, it's defined by
```
#define OFFSCREEN_BUFFER_WIDTH  400
#define OFFSCREEN_BUFFER_HEIGHT 400

error = vg_lite_init(OFFSCREEN_BUFFER_WIDTH, OFFSCREEN_BUFFER_HEIGHT);
```
vg_lite_set_command_buffer_size sets the GPU command buffer size (optional).

Drawing Task

The array pathData in this project is used to draw four small rectangles, which will be filled by the radial gradient color:

static int8_t path_data[] = {
    2, 0, 0,
    4, 120, 0,
    4, 120, 120,
    4, 0, 120,
    0,
};

And vg_lite_path_t structure describes path data's bounding box, quality, coordinate format, etc., such as

static vg_lite_path_t path = {
    { 0,   0,
      140, 140 },
    VG_LITE_HIGH,
    VG_LITE_S8,
    {0},
    sizeof(path_data),
    path_data,
    1
};

Four spread modes are defined by vg_lite_radial_gradient_spreadmode_t structure, including

VG_LITE_RADIAL_GRADIENT_SPREAD_FILL: Fill the outside of the gradient area with black color
VG_LITE_RADIAL_GRADIENT_SPREAD_PAD: Fill the outside area with the closest stop color.
VG_LITE_RADIAL_GRADIENT_SPREAD_REPEATFill: the outside area with repeated gradient.
VG_LITE_RADIAL_GRADIENT_SPREAD_REFLECT: Fill the outside area with reflected gradient.

In this project, four rectangles with four spread modes are rendered by a customized render_radial_gradient function in the following for loop:

vg_lite_radial_gradient_spreadmode_t spreadmode[] = {
    VG_LITE_RADIAL_GRADIENT_SPREAD_FILL,
    VG_LITE_RADIAL_GRADIENT_SPREAD_PAD,
    VG_LITE_RADIAL_GRADIENT_SPREAD_REPEAT,
    VG_LITE_RADIAL_GRADIENT_SPREAD_REFLECT,
};

for(int i = 0; i < sizeof(spreadmode)/sizeof(spreadmode[0]); i++) {
    error = render_radial_gradient(rt, i);
}

In the customized render_radial_gradient function, three structures are needed when generating the radial gradient color:

vg_lite_radial_gradient_t structure is the definition of the radial gradient which will fill a path.
vg_lite_color_ramp_t structure define colors (RGBA format) and stops of radial gradient, whose all parameters are in the range of [0, 1], which will be mapped to [0, 255].

In this project, five colors and stops are defined in the array vgColorRamp. For example, in the first member of this array (0.0f, 0.4f, 0.0f, 0.6f, 1.0f), the first number (0.0f) means the offset, next three numbers (0.4f, 0.0f, 0.6f) correspond r, g, b channels, and the last number (1.0f) is the alpha value.
```
static vg_lite_color_ramp_t vgColorRamp[] =
{
    {
        0.0f,
        0.4f, 0.0f, 0.6f, 1.0f
    },
    {
        0.25f,
        0.9f, 0.5f, 0.1f, 1.0f
    },
    {
        0.5f,
        0.8f, 0.8f, 0.0f, 1.0f
    },
    {
        0.75f,
        0.0f, 0.3f, 0.5f, 1.0f
    },
    {
        1.00f,
        0.4f, 0.0f, 0.6f, 1.0f
    }
};
```
vg_lite_radial_gradient_parameter_t structure defines five parameters. The first number is the gradient radius, next two numbers are the X and Y coordinates of the gradient center, and last two numbers are the X and Y coordinates of the focal point. When the coordinates of the gradient center are equal to the focal point's, the gradient is a concentric circle.

In this project, the radius and the coordinates of center and focal point are all set to 256:
```
vg_lite_radial_gradient_parameter_t radialGradient = {256.0f, 256.0f, 256.0f, 256.0f, 256.0f};
```

The following functions are used to draw the radial gradient color:

vg_lite_set_rad_grad sets the parameters of the radial gradient described by above structures. In this project, this function applies four spread modes to four rectangles：
```
error = vg_lite_set_rad_grad(&grad, 5, vgColorRamp, radialGradient, spreadmode[fcount],1);
```
vg_lite_update_rad_grad updates the values defined by vg_lite_radial_gradient_t structure.
```
error = vg_lite_update_rad_grad(&grad);
```
vg_lite_get_rad_grad_matrix gets the transformation matrix of the radial gradient, and general transformation functions like vg_lite_identity, vg_lite_translate, vg_lite_scale and vg_lite_rotate are suitable for this matrix.
```
matGrad = vg_lite_get_rad_grad_matrix(&grad);
```
This gradient transformation matrix needs to be initialized, otherwise the radial gradient will not be displayed:
```
vg_lite_identity(matGrad);
```

vg_lite_draw_radial_gradient is used to fill a path with a radial gradient, defined by the vg_lite_radial_gradient_t structure.

error = vg_lite_draw_radial_gradient(fb, &path, VG_LITE_FILL_EVEN_ODD, &matPath, &grad, 0, VG_LITE_BLEND_NONE, VG_LITE_FILTER_LINEAR);

vg_lite_clear_rad_grad clears the values defined by vg_lite_radial_gradient_t structure and frees up the buffer.
```
error = vg_lite_clear_rad_grad(&grad);
```

And some generic functions are used:

vg_lite_clear clears the render buffer with a solid color (ABGR format). In this project, the full screen is filled with white color by
```
vg_lite_clear(rt, NULL, 0xFFFFFFFF);
```
vg_lite_identity resets the specified transformation matrix, which is uninitialized or previously modified by functions of vg_lite_translate, vg_lite_rotate, vg_lite_scale.
vg_lite_translate translates draw result by input coordinates with transformation matrix.
vg_lite_scale scales the transformation matrix in both horizontal and vertical directions.

In this project, four rectangles are scaled, and placed next to each other by

vg_lite_identity(&matPath);
vg_lite_scale(2.0f, 2.0f, &matPath);

vg_lite_translate(10.0f + x * 120, 100.0f + y * 120, &matPath);

Once an error occurs, cleaning work is needed including the following function:

vg_lite_close finally frees up the entire memory initialized earlier by the vg_lite_init function.
```
vg_lite_close();
```

Run

Compile firstly, and use a Micro-USB cable to connect PC to J86 on MIMXRT1170-EVK board, then download the firmware and run.

If it's successful, the correct image will show on the displayer:

And FPS information will be sent through UART serial port continuously. The correct UART configuration is

115200 baud rate
8 data bits
No parity
One stop bit
No flow control

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

evkmimxrt1170_05_RadialGradient

Hardware Preparation

Software Preparation

VGLite Initialization

Drawing Task

Run

Files

README.md

Latest commit

History

README.md

File metadata and controls

evkmimxrt1170_05_RadialGradient

Hardware Preparation

Software Preparation

VGLite Initialization

Drawing Task

Run