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. Others, 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.

Shadow

This view appears as a blurred rectangular area. With this kind of view you can display rectangular shadows and glow effects.

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. The views can be configured with individual colors or a color gradients. 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.

Stroked Gradient Path

Similarly to the above mentioned Stroked Path this view displays the outline of specified paths (sequences of line segments). The outline, however, appears filled with a linear or radial gradient composed of multiple color stops. This can be useful to create sophisticated charts, diagrams, or any other vector graphic application.

Filled Gradient Path

Similarly to the above mentioned Filled Path this view displays a filled polygon composed of paths (sequences of line segments). The polygon, however, appears filled with a linear or radial gradient composed of multiple color stops. This can be useful to create sophisticated charts, diagrams, or any other vector graphic application.

SVG

This view displays a single SVG image. The image can be aligned, scaled, stretched, rotated or even scrolled within the view area. This kind of view is ideal to show pictures, icons or any other kind of image symbols which are intended to be adjusted in size and orientation.

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.

Filter Image

This view shows a bitmap by applying one or multiple filter operations on the bitmap content. The filters include blur, color tinting (e.g. RGB to gray-scale conversion) and masking with a separate ALPHA8 mask bitmap. This view allows sophisticated image effects like blurring and shadows.

Attributed Text

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

SVG

This view displays a single SVG image. The image can be aligned, scaled, stretched, rotated or even scrolled within the view area. This kind of view is ideal to show pictures, icons or any other kind of image symbols which are intended to be adjusted in size and orientation.

Views to display SVG images (scalable vector graphics)

These views are optimized to display SVG images (scalable vector graphics), which are usually SVG resources existing in your project. The displayed images can be modulated with individually specified opacity or opacity gradient. Unlike views displaying bitmaps, the SVG images can be scaled in size and rotated without loss of quality and without presenting any ugly scaling effects as it is the case when using pixel bitmap resources. 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

SVG

This view displays a single SVG image. The image can be aligned, scaled, stretched, rotated or even scrolled within the view area. This kind of view is ideal to show pictures, icons or any other kind of image symbols which are intended to be adjusted in size and orientation.

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.

Filter Group

This view shows the image of a foreign GUI component by applying one or multiple filter operations on the image content. The filters include blur, color tinting (e.g. RGB to gray-scale conversion) and masking with a separate ALPHA8 mask bitmap. This view allows sophisticated blur and shadow effects to be applied on the image of the original component.

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. The table below provides an overview of the available views:

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.

Views to perform blur, mask and tint filter effects

These views are optimized to perform visual filter operations on an image or on the screen content found behind the view. The views implement three different filter effects: blur, mask and color tint. The filter effects can be used individually or combined together to achieve more sophisticated results. For example, an image can be converted to grayscale, masked by a content of a separate ALPHA8 bitmap and finally blurred. The table below provides an overview of the available views:

Icon

Name

Description

Filter Image

This view shows a bitmap by applying one or multiple filter operations on the bitmap content. The filters include blur, color tinting (e.g. RGB to gray-scale conversion) and masking with a separate ALPHA8 mask bitmap. This view allows sophisticated image effects like blurring and shadows.

Filter Group

This view shows the image of a foreign GUI component by applying one or multiple filter operations on the image content. The filters include blur, color tinting (e.g. RGB to gray-scale conversion) and masking with a separate ALPHA8 mask bitmap. This view allows sophisticated blur and shadow effects to be applied on the image of the original component.

Filter Screen

This view applies one or multiple filter operations on the screen content lying behind the view. The filters include blur, color tinting (e.g. RGB to gray-scale conversion) and masking with a separate ALPHA8 mask bitmap. This view allows sophisticated image effects like blurring and tinting the screen background.

Shadow

This view appears as a blurred rectangular area. With this kind of view you can display rectangular shadows and glow effects.