Using OpenVG for 2D graphics in auto infotainment displays -

Using OpenVG for 2D graphics in auto infotainment displays


OpenVG is an API designed for hardware-accelerated 2D vector graphics. It was designed to help manufacturers create more attractive user interfaces by offloading computationally intensive graphics processing from the CPU onto a GPU to save energy. It is being used across many platforms, including a number of embedded applications. In this article we will describe the basic capabilities of the OpenVG spec and how to use it in automotive infotainment and instrument display applications.

OpenVG handles two main parent objects:
Bitmap: a memory organization used to store/draw an image. Every x and y coordinate will have a corresponding pixel. Each pixel is assigned an alpha, red, green and blue (ARGB) value, thus a 200 x 200 resolution image will require (200*200*(color depth)) bytes of storage. Bitmaps are particularly useful for photorealistic graphics. The coverflow application depicted in the Use Cases section contains image handling code and functions.
Vector: a mathematical formula that requires start and end points. Depending on how those points are connected, other parameters may be required, such as curve control points, arc radiuses, and arc angles. This feature makes a vector fully scalable, as it does not rely on per-pixel data to represent an image.

Figure 1 depicts how both circles appear to be the same when viewed at a normal size, but when zooming in, the bitmap image begins to lose fidelity, while the edge remains sharp in the vector image.

Figure 1: Vector vs bitmap

Vectors do not hold an advantage over bitmaps in all scenarios. Though bitmaps appear sharp at a fixed size, they become pixilated when scaled. Bitmaps are also faster to process but require more memory. Vectors maintain their image quality at any scale/size and occupy less memory. Vector images can only come from vector design tools, while bitmaps can be a photograph, or an image from any source or pixel-based tool.

Advantages of OpenVG
OpenGL can accomplish many graphical tasks, such as fonts, 2D GUIs and HMI. However, its strength lies in polygon and texture pushing power. OpenGL is bitmap oriented, and simple graphics can take precious time from that powerful OpenGL core.

OpenVG closes the gap on graphical needs. On its own, it can provide for great applications, and in combination with OpenGL, it can manage fonts, vectors, and most 2D and pseudo 3D elements, while an OpenGL core dedicates its time to doing what it does best.

When used stand-alone, OpenVG can accomplish a lot with low current and memory consumption. When combined with OpenGL, OpenVG manages the tasks the OpenGL core was not designed to perform.

Raster images (bitmaps)
Handling images in OpenVG is straightforward. Follow these steps to draw an image on your rendering surface:

  1. Declare a VGImage object.
  2. Create a VGImage and assign the handler to your VGImage object.
  3. Fill the image with the bitmap data.
  4. Set the matrix mode to VG_MATRIX_IMAGE_USER_TO_SURFACE in order to transform images (3 x 3 afine transformations).
  5. Draw your image.

Apply the same steps in pseudo code:

  VGImage ovgarticle_image
  ovgarticle_image = vgCreateImage(VGImageFormat format, VGint width, VGint height, VGbitfield allowedQuality)
  vgImageSubData(VGImage image, const void * data, VGint dataStride, VGImageFormat dataFormat, VGint x, VGint y, VGint width, VGint height)

To perform this operation, you must be familiar with certain bitmap aspects, such as stride, bit depth, and set API properties such as blending.

Paths form the core of vector-accelerated graphics. To fully grasp this concept, you must understand the following:

  • Path: Series of points that are bounded by segments.
  • Point: Coordinate value.
  • Segment: Type of union between two points. It may consume more points that act as control values for the segment.

A simple triangle path can serve as an example. First, you must define the segments that will integrate the whole path. The segments of a path are described as a series of commands stored in an array of bytes. Each command (Table 1 ) will consume one or more points.

Table 1: OpenVG commands for drawing a triangle

Figure 4: Drawing a triangle with OpenVG

Complex paths involve the use of arcs and bezier curves.

The steps to create and draw a path in OpenVG include:

  • Declare a VGPath object.
  • Declare a segment and point array
  • Create an empty path that will accept segment data (vgCreatePath).
  • Fill segment and point data to the path (vgAppendPathData).
  • Draw the path (vgDrawPath).

Coverflow animation
One of the most common yet eye-catchinganimations is the 2D perspective transform often used to represent albumcovers on audio playback devices. This type of animation gives theperception that the images are moving in a 3D space by moving androtating on the x, y and z axes. Rather than implementing this animationvia 3D GPU or a 3D processing engine, this type of transform can bedefined in a 2D space, and OpenVG provides the necessary API to achievethis type of animation.

The mathematical concept is called “3Dprojection” and consists of mapping a set of 3D points onto a 2D plane.The concept is simple. Imagine a flat, squared object such a piece ofpaper or a picture. You can put this picture in front of you in such away that it looks like a rectangle. If you bring it closer to your eyesit will look bigger, and if you pull it away it will look smaller. Now,if you rotate the picture using its vertical axis it won’t look like arectangle anymore. It will have some acute angles and can be made tolook like a rhombus or a straight line. This is accomplished by the 3Dobject projecting different points (vertex) into your eye. A moretechnical clarification of this concept is available in a Wikipedia entry on 3D projection .

Withgraphics, spatial image manipulation always ends up with a matrix. Toscale a matrix, you must multiply your image points by a matrix. To dosomething as simple as translating an image, you also need a matrixmultiply. To create a coverflow animation, again you need a matrix. Allspatial manipulation in OpenVG is accomplished by providing atransformation matrix. A simple example of drawing an image rotated inthe y axis is as follows:


The result would be something like Figure 5 .

Figure 5: Example of an image rotated in the y axis

Thekey is obtaining the “perspective matrix” needed to achieve the 3Deffect. This requires some additional math. The matrix can be created byusing the equations described in a Wikipedia entry on 3D graphics( There are other facilitiesprovided by the OpenVG API that include additional calculationsrequired to come up with the proper matrix for the perspectivetransform:


Theseutility functions from the OpenVG API allow you to compute a matrix of aprojective transform from a quadrilateral to a quadrilateral, squaredimage to any given quadrilateral or vice versa. This allows you to movethe vertex of an image to any desired position. Calculations aresimplified by using these functions when performing coverflowanimations.

The code to perform a perspective transform is implemented by the following:

//Input parameters
// H_angle: angle in radias on which the image is rotating (image rotates on the Y axis)
// width: width of the original squared image
// FOV: Field of view, ratio between the projection plane and the actual object
// pivotX: Pivot point in X; indicates which point in x to use for rotation.

// Author: Davor Bogavac, Freescale Semiconductor
void PPMatrixX(VGfloat H_angle, VGfloat width, VGfloat height, VGfloat FOV, VGfloat pivotX)
  VGfloat matrix[9]; // Matrix that will be used for the multiplication
  VGfloat Xw; // Holds the proportional width due to the rotation
  VGfloat Yo; // Holds the proportional height on the reduced side
  VGfloat Rx; // Delta width ( Rx + Xw = width)
  VGfloat Po,Pon; // ratio of reduction affected by X pivot point offset

  Xw = cos(H_angle) * width; // transformed width
  Rx = width – Xw; // width delta
  Yo = sin(H_angle) * (height/2) * FOV; // height reduction due to horizontal angle
  Po = pivotX/width; // ratio of reduction affected by X pivot point offset
  Pon= 1.0f – Po; // inverse ..

  //Compute the matrix for the main image
    (Po * Rx), height + (Po * Yo) + rD,
    (Po * Rx) + Xw, height – (Pon * Yo) + rD,
    (Po * Rx) + Xw, (Pon * Yo) + rD,
    (Po * Rx), (Po * -Yo) + rD,

    0, height,
    width, height,
    width, 0,
    0, 0,
vgMultMatrix(matrix); //Multiply the main image matrix

Thereare two types of fonts in OpenVG: raster and vector. The OpenVG APIprovides facilities for both types and has functions for defining andregistering a font (vgCreateFont). Once this is complete, using the fontis easy with the vgDrawGlyphs function. A vector vs. raster fontcomparison is outlined in Table 2 .

Table 2: Vector vs. raster font comparison

Theprogrammer must consider the information in Table 2 and decide whichtype of fonts to use in their application. Often, this can be acombination of both, depending upon different graphical needs. Forexample, zoomable text could be applied using vector fonts, while textthat does not change in size, such as button labels, can be a rasterfont.

OpenVG use case: automotive displays
Freescale and Echilibra (see note at end of article) have developed a completely vector-based automotive cluster demo that takes advantage of the complete Freescale ecosystem , as well as Vybrid controllers   that use a GC355 OpenVG 1.1 GPU from Vivante and i.MX 6 SoloLite ,6Quad and 6Dual applications processors. Design files and assets, evenfonts, were imported directly from Inkscape and Illustrator.

In both demo versions (Figure 7 ),the speedometer relies on large fonts to convey speed information,which involves scaling up the current font before drawing it to therender surface. Not even OpenGL  provides that kind of capability.

Asimple animation engine was developed to handle scaling, rotation andtranslation. Each path and raster image on both clusters can be easilyanimated using that engine.

Complex animations such as GPSturn-by-turn navigation were easily accomplished via thevgInterpolatePath function. This function receives start and end paths(with similar segments), a destination path and the amount ofinterpolation you want to execute. The destination path data isinterpolated between start and end paths by the amount selected. Thisallows you to create a complex path transformation by defining only twopath states (Figure 6 ).

Figure 6: An OpenVG complex path transformation defined with only two path states

Figure 7: Two speedometer images built using Open VG

How the images were created
Aprimary advantage of OpenVG is the ability to easily create animationswith the provided API. Once you have an EGL surface on which to draw,you just need a couple of lines to bring an image to the screen and acouple more to animate it.

In automotive applications, onecommon requirement is to implemenet crisp, realistic looking needles orgauges. In OpenVG this is a sraightforward operation that can beachieved by rendering at the highest frame rate possible (for example 60fps).


Othertransition effects can be achieved by using common transformations suchas scaling. Scaling doesn’t just allow you to increment or decrease thesize of a form, it also allows you to do so independently on the x and ycoordinates. In the case of the needle animation, needles fade in orzoom in. One animation involves making needles appear to grow largerwhile maintaining their width:


To properly perform this animation, the needle must be completely vertical.

Reflectionis another stunning effect that can be easily implemented using OpenVG.A reflection can be added to a horizontal image with some level oftransparency for a glossy surface effect. A predefined function to flipan image does not exist. Instead, a flip matrix must be loaded beforedrawing the image:

  float matrix[] = {0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0};

Someof these effects are demonstrated on Freescale’s Qorivva MPC5645Splatform architecture in in a YouTube video(

Echilibra is a startup company based in Guadalajara, México. Its main areas of focus are Design of UI interfaces and Embedded Systems. Although the link to their website is live, they are still in the process of adding content as of 3/27/13. 

Hugo Osornio has been rolling on the Automotive Industry since 2008. He started as anInfotainment and Safety Engineer at Delphi and then joined Freescale in2010 as an Automotive Systems and Applications Engineer. He mainlysupports Driver Information Systems products and applications. Hiscurrent areas of interest are Computer Graphics and Embedded OS.

Luis Olea obtained a bachelors degress in Electrical Engineering in 2009. Hespent a little over a year working as a Powertrain Software Engineer atone of Freescale's customers R&D centers, before deciding to joinFreescale in March 2011. He currently works with Freescale's automotivedevices in different applications (body, cluster) and in severalactivities (customer support, validation, documentation).

Ioseph Martinez has been working on graphics since 2008 specializing in DisplayControllers and 2D GPU. He has worked developing display drivers,converter tools, graphic demo applications and leading an applicationsengineering team focused on automotive cluster applications. He iscurrently focused on Freescale’s Vybrid controller solutions.

1 thought on “Using OpenVG for 2D graphics in auto infotainment displays

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.