Working with Embedded Wizard: Using Graphic objects

Graphic objects are intended to manage graphic related information. This can be, for example, the vector path describing the shape of a polygon you want to display in your application. Or it can be an off-screen bitmap you fill with contents and display dynamically at the runtime. Unlike the views, graphic objects are per se not visible. They store the graphic related information only. The graphic objects, however, can be connected to views and so the content found in a graphic object can be displayed on the screen.

You can freely use and combine the graphic objects and views according to the expected effect in your developed GUI component. With this chapter we intend to provide you a short overview of the available graphic objects, so you will be able to decide by yourself which object is the most suitable for your particular application case. More detailed description of the objects is found in the subordinated chapters.

Objects to create and manage vector paths (curves, polygons) and SVG (scalable vector graphics)

These objects are optimized to store vector paths describing a curve or the outline of a polygon. In its simplest form, a path is composed of line segments, Bézier curves and elliptical arcs. The path can be opened (e.g. a curve within a diagram) or it can be closed (e.g. to describe a circle). In more sophisticated application cases you can compose several sub-paths to one complex path. For example, with two sub-paths, each describing a circle, you can create easily a ring. Data stored within such an object can be displayed e.g. by using the views Filled Path and Stroked Path. To display SVG (scalable vector graphics) the SVG view is intended. The following table provides an overview of the available objects to create and manage vector paths:

Icon

Name

Description

Path Data

This object provides functionality to create and store any kind of curves and polygons. Every path data object can contain one or more sub-paths, every individually composed of line segments, Bézier curves, elliptical arcs or even circles. During creation of the path contents, transformations like rotation, scaling can be applied on them.

Arc Path Data

This path data object is optimized to conveniently create and store curve data based on an ellipse. The object can be configured to calculate open arcs, segments or pie charts. The radius and the angle of the arc can be specified.

SVG Data

This object provides functionality to store and process SVG data (scalable vector graphics) obtained dynamically at the runtime of the application, e.g. from an SD card.

Objects to define linear or radial gradients

These objects permit you to define a color gradient. A single gradient can be composed of multiple color stops. The colors between the color stops are interpolated. Depending on the type of the used object, the resulting gradient will spread linearly or radially. Gradient defined within such an object can be displayed e.g. by using the views Filled Gradient Path and Stroked Gradient Path.

Icon

Name

Description

Linear Gradient

This object provides a graphic object specialized to define a linear gradient containing multiple color stops.

Radial Gradient

This object provides a graphic object specialized to define a radial gradient containing multiple color stops.

Off-screen bitmaps to rasterize vector graphic

These objects act as off-screen bitmaps to store dynamically rasterized vector graphics, like curves and polygons. The so created off-screen images can be used wherever a regular Embedded Wizard bitmap is allowed. For example, they can be associated to a Filter Image view and act there as mask or be assigned to a widget as icon, etc.. The curves and shapes to rasterize within such an off-screen bitmap are determined by the associated Path Data objects or in case of SVG images (scalable vector graphics) as SVG resources and SVG Data objects. By dynamically changing the Path Data or SVG Data objects, the content in the associated off-screen bitmap is adapted automatically.

Please note, except the SVG images, the resulting off-screen bitmaps are stored in ALPHA8 format. The bitmaps contain thus the opacity information only without any colors. If necessary, the rasterized vector graphics can be colorized afterwards in the respective view. SVG images, in turn, contain very well colors. The following table provides an overview of the available objects to create and manage off-screen bitmaps containing rendered vector graphics:

Icon

Name

Description

Filled Path Bitmap

This object provides a graphic object specialized to fill a polygon from the provided path data and store the resulting image as an off-screen ALPHA8 bitmap.

Stroked Path Bitmap

This object provides a graphic object specialized to stroke a curve from the provided path data and store the resulting image as an off-screen ALPHA8 bitmap.

SVG Bitmap

This object provides a graphic object specialized to rasterize an SVG (scalable vector graphics) and store the resulting image as an off-screen NATIVE bitmap.

Off-screen bitmap to render GUI contents (Canvas)

The graphic objects belonging to this category act as off-screen bitmaps to store dynamically rendered GUI contents. The so created off-screen images can be used as source wherever a regular Embedded Wizard bitmap is allowed. For example, they can be associated to an Image view.

Please note, the resulting off-screen bitmaps are stored in NATIVE format. The bitmaps contain thus the opacity and color information. Actually, this category includes only one graphic object:

Icon

Name

Description

Canvas

The Canvas acts as an off-screen bitmap where GUI contents can be rendered and stored. To render the Canvas contents, the Canvas object provides a set of methods to fill areas with colors, copy bitmaps, print text, etc..