NXP Application Code Hub

VGLite examples

The VGLite graphics API is platform-independent, lightweight, and used to control 2D GPU hardware in i.MX RT platforms. It supports 2D vector-based and 2D raster-based operations. it is able to provide maximum 2D vector/raster rendering performance with minimum memory footprint. VGLite API Reference Manual can be download from nxp.com.

The VGLite examples focus on how to program with VGLite API including vglite initialization, pixel buffer allocation, transformation matrix control, vector path draw, gradient draw, blit operations with compositing/blending, and stroke operations. The examples of using elementary API and multitask are also provided.

All examples ues the same code frame. Below's the block of software stack of VGLite examples.

An example uses VGLite API to render vector objects and bitmaps on the pixel buffers. There are display components used to show the rendered graphics in the pixel buffer on the screen, that include display controller driver, MIPI DSI driver, frame buffer (FB) manager, display abstract layer. There are also some VGLite rendering utilities to create display device and window where the VGLite renders graphics objects to.

Boards: MIMXRT1170-EVK, MIMXRT1170-EVKB

Categories: Graphics

Peripherals: DISPLAY

Toolchains: MCUXpresso IDE

Table of Contents

1. Software
2. Hardware
3. Setup
4. Results
5. FAQs
6. Support
7. Release Notes

1. Software

The software of VGLite examples is delivered in raw source files and MCUXpresso IDE projects.

• MCUXpresso SDK 2.14.0
• MCUXpresso IDE, version is 11.8.0 or later

There are 20 examples provided for your reference:

• SimplePath demonstrates the code structure and the basic flow of a VGLite API program. The application fills the blue backround, draw a while rectangle in the middle of screen, then draw a red triangle using simple path segment.
• QuadraticCurves is similar to SimplePathbut using more path segments to draw a curve.
• Stroked CubicCurves draws the stroked path with different end cap styles and different line join styles.
• LinearGradient draws a path and fills it with a linear gradient according to a specified fill rule. The linear gradient draw in LinearGradient is implemented by the vg_lite_draw_pattern API.
• RadialGradient draws a path and fills it with a radial gradient according to the specified fill rule. The path is drawn four times with different spread modes.
• LinearExtGradient draws a path and fills with a linear gradient four times with different spread modes. Extended linear gradient is supported with hardware. It is not available on i.MX RT500 but i.MX RT1170 and i.MX RT1160.
• FillRules demonstrates the effect of different fill rules.
• BlitColor uses vg_lite_blit API to composite an image to background. The image is composited twice. The second composition is done by multipying a mix color.
• Alpha Behavior demonstrates the effect of different blending modes while using vg_lite_blit to composite an image to background.
• Glyphs simply uses vg_lite_blit API to implement the alpha glyph/text.
• FreeSizeBuffers draws 5 color bars with different width values and different colors.
• BlitRect renders a sequence of numbers using vg_lite_blit that blits the partial rectangle eara of a source image to the target buffer.
• PatternFill demonstrates to use vg_lite_draw_pattern to draw a path and fill it with different pattern modes.
• UI simulates a UI that shows 6 icons and a highlight icon that's selected.
• EVOLoading uses Elementary rendering library that uses VGLite to render EVO vector object that's generated by the VGLite toolkit from a SVG file.
• EVOExtra is similar to EVOLoading by adding a fill rule for each vector path.
• EBO demonstrates using Elementary library to render a EBO object that's an image object.
• Cube uses 2.5D VGLite to simulate a 3D cube rotation.
• Fone uses VGLite text drawing API to render the embedded font in the SVG file.
• Multitask demonstrates the usage of VGLite API in the two tasks to render respective graphics objects independently.

2. Hardware

• MIMXRT1170-EVK (all Rev boards are supported)
• RK055HDMIPI4M or RK055HDMIPI4MA0 MIPI display panel
• Micro USB Cable
• Personal computer

3. Setup

1. Connect a USB cable between the host PC and the OpenSDA USB ort on the target board.
2. Open a serial terminal with the following settings:
   • 115200 baud rate
   • 8 data bits
   • No parity
   • One stop bit
   • No flow control
3. Open MCUXpresso IDE and import the examples
4. Change the display definition in display_support.h for your display panel.
5. Build the selected project of example.
6. Download the built image to the board through debug probe USB port and run the example.

4. Results

The similar log below shows the output of the examples in the terminal window:

60 frames in 1060 mSec: 56.603 FPS
60 frames in 1055 mSec: 56.872 FPS
60 frames in 1060 mSec: 56.603 FPS

When example is runing, some graphics contents are rendered on the screen. Detailed result of examples are described in their domcument:

• SimplePath
• QuadraticCurves
• Stroked CubicCurves
• LinearGradient
• RadialGradient
• LinearExtGradient
• FillRules
• BlitColor
• Alpha Behavior
• Glyphs
• FreeSizeBuffers
• BlitRect
• PatternFill
• UI
• EVOLoading
• EVOExtra
• EBO
• Cube
• Fone
• Multitask

5. Support

If you have any qustions or find a bug, please enter an issue in the issues tab of this GitHub repository.

Project Metadata

Questions regarding the content/correctness of this example can be entered as Issues within this GitHub repository.

Warning: For more general technical questions regarding NXP Microcontrollers and the difference in expected funcionality, enter your questions on the NXP Community Forum

6. Release Notes

Version	Description / Update	Date
1.0	Initial release on Application Code Hub	September 18th 2023