Tip / Sign in to post questions, reply, level up, and achieve exciting badges. Know more

TRAVEO™ T2G MCU: Converting and using Vector Graphics in TRAVEO™ T2G-C - KBA235750

TRAVEO™ T2G MCU: Converting and using Vector Graphics in TRAVEO™ T2G-C - KBA235750

BinduPriya_G
Community Manager
Community Manager 250 replies posted First like received 50 sign-ins
Community Manager

TRAVEO™ T2G MCU: Converting and using Vector Graphics in TRAVEO™ T2G-C - KBA235750

Version: **

This KBA provides and explains the tool that is used to convert vector graphic files (SVG) into a header file, which can be used with the graphics driver of TRAVEO™ T2G cluster devices.

1  Vector Graphic Files

Vector graphics are images described by geometric shapes like circles, polygons, text, lines and curves. Images are created by specifying the location, features like Bezier curve and rectangle, and colors. They are inherently different from raster graphics, which describe the color of each visible pixel. One advantage of vector graphics is resolution-independent rendering, which delivers sharp images regardless of scaling.

Figure 1 compares the sharpness of an upscaled low-resolution raster graphic on the left with the vector graphic on the right.

BinduPriya_G_0-1657086137082.png
Figure 1   Two images scaled with different approaches. On the left side a raster graphic, on the right side a vector graphic. Latter is sharper than former.

Common file formats used for vector graphics are EPS, PDF, and SVG.

1.1  The SVG file format

An SVG file is described via XML and thus can be read by a normal text editor. The SVG 1.1 specification defines 14 features, under which are:

  • Paths, which are encoded via Move To, Line To, Cubic Curve, and other commands
  • Basic shapes like circles and rectangles
  • Text
  • Color

Figure 2 shows a simple vector path and its code. You can save this text as an SVG file and display it with any modern browser.

BinduPriya_G_1-1657086178757.png

 

Figure 2  A simple filled path consisting out of multiple cubic bézier curves

 

<svg width="800" height="480" viewBox="0 0 800 480" xmlns="http://www.w3.org/2000/svg">

<path style="fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:1.54356px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

       d="M 55,230 C 55,120 250,290 250,120 C 530,10 720,10 720,120 C 720,340 530,340 310,440 C 180,490 470,290 55,230 Z"/>

</svg>

2    Vector graphics on TRAVEO™ T2G cluster series

The TRAVEO™ T2G Cluster series (T2G-C) devices include a graphic accelerator, containing a Drawing Engine capable of displaying vector graphics. In the graphics driver, you should define the color, path array, and command array to draw the vector graphic. Additionally, various utility functions are available to draw simple and more complex shapes – see the utDraw.h file. Use the following code to draw the example shown in Figure 2 with the TRAVEO™ T2G graphics driver.

CYGFX_U08 PathSegments[] = {CYGFX_DE_INSTR_MOVE_TO_ABS, CYGFX_DE_INSTR_CUBIC_TO_ABS, CYGFX_DE_INSTR_CUBIC_TO_ABS, CYGFX_DE_INSTR_CUBIC_TO_ABS,

CYGFX_DE_INSTR_CUBIC_TO_ABS, CYGFX_DE_INSTR_CLOSE_PATH};

CYGFX_FLOAT PathData[] = {55,230,  55,120,250,290,250,120,  530,10,720,10,720,120,  720,340,530,340,310,440,  180,490,470,290,55,230};

CYGFX_U32 noInstr = sizeof(PathSegments)/sizeof(CYGFX_U08);

CyGfx_BeSetSurfAttribute(ctx, CYGFX_BE_TARGET_SRC, CYGFX_BE_SURF_ATTR_COLOR, CYGFX_SM_COLOR_TO_RGBA(0, 0, 255, 255));
CyGfx_DeSetAttribute(ctx, CYGFX_DE_ATTR_DATA_FORMAT, CYGFX_DE_DATA_FORMAT_FLOAT);
CyGfx_DeAppendPathData(ctx, noInstr, PathSegments, PathData);
CyGfx_DeDraw(ctx, 0, 0);

Specify the commands (PathSegments[]), coordinates (PathData[]), and color by setting the correct attribute (CyGfx_BeSetSurfAttribute()) of the source surface to draw a path. Make sure that nothing is bound to the source surface; otherwise, the color values from the bound surface are used as the color.

Additionally, you must specify the format of your coordinates via CyGfx_DeSetAttribute(), and then call CyGfx_DeAppendPathData() to fill the path buffer, which must be initialized beforehand. Make sure to have an alpha buffer created as the Drawing Engine makes use of it. When calling CyGfx_DeDraw(), all path data in the buffer will be drawn to the set destination surface.

You cannot directly include, load, or display SVG files in the graphics driver. By comparing the TRAVEO™ T2G code snippet with the SVG file, you can observe that the instructions and path data are similar. To allow the usage of SVG files, an experimental command-line tool is provided with this KBA, which converts an SVG file into array data that can be read by the TRAVEO™ T2G graphics driver.

3  SVG to T2G CLI tool

Note:    The CLI tool is provided as is, without any warranty of correctness and support. It is open-source and includes an executable version for Windows. You can build it yourself by using the Visual Studio project and CMake file included with the tool.

Call the tool via the command line and provide the path of the SVG file you wish to convert.

For example, if the working directory is the same as the path of the tool, to convert a file called sample.svg in the same directory, use the command in Code Listing 1.

Code Listing 1 

SVG-2-T2G sample.svg

A header file called sample_svg.h is created with an array (pathData[]) and structure (tsPathData) as shown in Code Listing 2. This file contains all necessary data for the graphics driver and can be included into your code.

Code Listing 2

typedef struct {

    CYGFX_U32 fillColor;
    CYGFX_U32 numSegments;
    const CYGFX_U08 *pPathSegments;
    const CYGFX_FLOAT *pPathData;
} tsPathData;

As shown in Code Listing 3, loop over all elements of pathData[] and render them via the Drawing Engine to display this correctly with the graphics driver. This can be done in the following way:

Code Listing 3

CyGfx_BeBindSurface(ctx, CYGFX_BE_TARGET_SRC, NULL);
for (int i = 0; i < sizeof(pathData)/sizeof(tsPathData); ++i)
{

    CyGfx_BeSetSurfAttribute(ctx, CYGFX_BE_TARGET_SRC,     CYGFX_BE_SURF_ATTR_COLOR, pathData[i].fillColor);
    CyGfx_DeAppendPathData(ctx, pathData[i].numSegments, pathData[i].pPathSegments, pathData[i].pPathData);
    CyGfx_DeDraw(ctx, 0, 0);

}

Ensure that nothing is bound to the source surface; otherwise, the Drawing Engine will take the color values from the bound surface and not from the specified color. You can call the CyGfx_DeDraw() command after the loop, but in this case, your path buffer must be large enough.

On the other hand, calling it in a loop after each step might cause artifacts to be visible to the eye. Thus, you should choose the method of calling this function according to the available memory and the desired result.

Even though the Drawing Engine does not support outlining, the tool tries to provide suitable paths to achieve outlining. This might fail especially for complex graphics, causing artifacts to be visible. Simpler graphics or those that contain no outlining should work fine with the tool. In either case, this tool is not thoroughly tested and the functionality is not guaranteed.

0 Likes
Contributors