Working with Embedded Wizard: Using Views

Views are simple graphical objects you add and arrange within the GUI component in order to compose its appearance similarly as you do when playing with Lego building blocks. Embedded Wizard provides various views for typical cases found in every GUI application. Some of them represent primitive graphical shapes like a line segment or a simple frame. Other, in turn, are able to show fancy 3D transformations or they implement powerful text layout engines or they raster vector graphic.

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

Views to display primitive graphical shapes

These lightweight views are optimized to display simple graphical objects, like the straight line segment or the filled rectangle. Every view can be configured with an individual color or a color gradient. In case of line segments and borders you can freely control the thickness of the stroked lines and edges. The following table provides an overview of the available views belonging to this family including few suggestions what you can do with them within a GUI component:

Icon

Name

Description

Line

This view appears as a single straight line segment. With this kind of view you can add separators, compose non rectangular borders or even show simple graphs.

Filled Rectangle

This view appears as a filled rectangular area. With this kind of view you can fill the background areas and add rectangular shaped decorations or semitransparent overlays.

Border

This view appears as a rectangular border. This kind of view is ideal for typical cases of frames and rectangular shaped decorations.

Bevel

This view implements another version of a rectangular border. Depending on the specified colors the border may appear sunken or raised. This kind of view is ideal for frames and rectangular shaped decorations you want to show with a kind of simple 3D effect.

Views to display complex graphical shapes described by vector graphic paths

These views are optimized to fill and stroke vector graphic objects described by paths. In its simplest version a path is a sequence of line segments. It can however also be composed of arcs, Bézier curves, etc. Even nesting of paths is possible resulting in complex polygons. Every view can be configured with an individual color or a color gradient. You can determine the thickness of the stroked path, as well as how path edges should join together (round, bevel or miter) and how the path caps should end (round, flat, triangle or square). The following table provides an overview of the available views belonging to this family including few suggestions what you can do with them within a GUI component:

Icon

Name

Description

Stroked Path

This view displays the outline of specified paths (sequences of line segments). With this kind of view you can create charts, diagrams, or any other vector graphic application.

Filled Path

This view displays a filled polygon composed of paths (sequences of line segments). With this kind of view you can create charts, diagrams, or any other vector graphic application.

Views to display images

These views are optimized to display images, which are usually bitmap resources existing in your project. The displayed images can be modulated with individually specified opacity or opacity gradient. Bitmaps not providing any own color information (so-called alpha-only bitmaps) can be colorized with a specified color or color gradient. If the original bitmap is configured as containing an animated sequence, the views can play it similarly to a short video. The following table provides an overview of the available views belonging to this family including few suggestions what you can do with them within a GUI component:

Icon

Name

Description

Image

This view displays a single image. The image can be aligned, scaled, stretched or even scrolled within the view area. This kind of view is ideal to show pictures, icons or any other kind of image symbols.

Bitmap Frame

This view displays a freely scalable image by composing it of slices. With this technique (also known as 9-slice scaling) the view may flexibly change its size without the displayed image being stretched or distorted. This kind of view is in particular ideal to add resizable, stylish looking frames.

Wallpaper

This view fills a rectangular area with multiple copies (tiles) of an image. The displayed content can be scrolled within the view area. With this kind of view you can fill the background areas and add rectangular shaped image decorations.

Warp Image

This view shows a perspective correct projection of an image onto a quad (four corners polygon). The position of the quad corners can be determined explicitly or calculated by using a 3D transformation matrix. This view allows sophisticated 2D/3D image effects like rotation, scaling or even mirroring in 2D or 3D space. In particular, this view is useful when you intend to implement gauges or similar analog display components.

Attributed Text

This view displays text enriched with attributes to control the text output. Similarly to HTML these attributes can be combined with images.

Views to display text

These views are optimized to display text rasterized dynamically at the runtime by using font resources existing in your project. The text can be aligned and be wrapped automatically in multiple rows. Large text blocks can be scrolled. The colors and the opacity of the text can be determined. Even, the text may appear with an opacity or color gradient. The following table provides an overview of the available views belonging to this family including few suggestions what you can do with them within a GUI component:

Icon

Name

Description

Text

This view displays text with a specified font. The distance between text rows as well as an optional ellipsis mode (...) can be configured. This view is ideal to display labels, button captions, messages, etc.

Attributed Text

This view displays text enriched with attributes to control the text output. Similarly to HTML these attributes determine the alignment, the colors and fonts to format individual spans, paragraphs and columns within the text. Additionally the text can be combined with images and hyperlinks can be defined. This view is primarily intended to show user manual or help pages. You can however use it also to display formatted labels and messages containing emphasized text fragments or even icons.

Views to display a projection of existing GUI components

These views are optimized to display a projection of an existing GUI component. In this manner multiple images of the original component can appear simultaneously at various screen locations, every time with different settings like scaling, opacity or even opacity gradient. Using them, fancy mirroring and fading effects can be implemented. The views can be configured to react to touch screen events and to relay them to the original GUI component as if the user had touched it directly. The following table provides an overview of the available views belonging to this family including few suggestions what you can do with them within a GUI component:

Icon

Name

Description

Group

This view shows a projection of the image of a foreign GUI component. The view can align, scale, stretch or scroll the image within its rectangular area as if it were a simple bitmap. This view is useful to perform opacity and scale animations while fading-in or fading-out the original GUI component.

Warp Group

This view shows a perspective correct projection of an image of a foreign GUI component onto a quad (four corners polygon). The position of the quad corners can be determined explicitly or calculated by using a 3D transformation matrix. This view allows sophisticated 2D/3D image effects like rotation, scaling or even mirroring in 2D or 3D space applied on the projected component image.

Views to perform 2D and 3D image transformations

These views are optimized to perspective correct project an image onto a quad (four corners polygon). The position of the quad corners can be determined explicitly or calculated by using a 3D transformation matrix. These views allow sophisticated 2D/3D image effects like rotation, scaling or even mirroring in 2D or 3D space. In particular you can rotate images about the Z-axis, or arrange them so that they appear as individual objects in 3D space. In fact, the here described views are already treated in the sections above. The below table summarizes them again:

Icon

Name

Description

Warp Image

This view shows a perspective correct projection of an image, which is usually a bitmap resource existing in your project. The displayed image can be modulated with individually specified opacity or opacity gradient. Bitmaps not providing any own color information (so-called alpha-only bitmaps) can be colorized with a specified color or color gradient. If the original bitmap is configured as containing an animated sequence, the views can play it similarly to a short video. In particular, this view is useful when you intend to implement gauges or similar analog display components.

Warp Group

This view shows a perspective correct projection of an image of a foreign GUI component. The displayed image can be modulated with individually specified opacity or opacity gradient. The view can be configured to react to touch screen events and to relay them to the original GUI component as if the user had touched it directly. Using this view, fancy mirroring and fading effects applied on the image of the original component can be implemented.