Contents

 
[show]
[hide]

AppWizard User Guide & Reference Manual

Wizard for creating ready-to-use emWin applications.

Introduction 📎

This introduction gives some information about this document. It also gives an overview of the AppWizard’s features and its requirements.

What is the AppWizard? 📎

The AppWizard is a tool for creating complete and ready-to-use emWin applications consisting of a number of screens.

Each screen consists of its own graphical control elements like buttons, sliders, images, text, child windows and so on. Applications are generated as a bundle of C files. Those C files are included automatically by the BSPs shipped with the AppWizard or can be used by a custom defined project.

Resources can be compiled and linked with the application code or stored externally on an SD card. Using resources at runtime from SD card is supported by the AppWizard without any additional configuration or code.

Features 📎

Interactions

Interactions define the application behavior in case of user input. Several methods, animations or swiping can be used to switch between the application screens. To be able to extend the applications behavior user defined code can be invoked on interactions which can be edited within the AppWizard.

Positioning

Positioning of objects can be done by specifying absolute coordinates or relative to already existing elements. Zooming can be used to be able to place small elements.

Resources

Resources like fonts, text and images are managed completely by the AppWizard. That means the application designer gets completely rid of resource management. Resources can be part of the created application code or generated as binary files to be stored on external media. The behavior ’intern’ or ’extern’ can be specified for each resource separately. That makes it possible to have frequently used resources directly in the addressable ROM area and rarely used resource components on external media. The content of the resource folder is automatically managed by the AppWizard.

Multiple languages

Multiple languages can be defined in the integrated multilingual text management system. Text can also be part of the application code or located on external media.

Font management

To be able to display the text with the right font the AppWizard contains its own font management system which is used to create emWin-fonts. The range of included codepoints can be specified for each font separately. It can be specified by custom defined pattern files, custom defined ranges or automatically by the range of characters resulting from the application defined text. Fonts can also be located on an SD card or as part of the application code.

Integrated play mode

The internal play mode can be used for a quick check of the application’s behavior without the need of compiling. Display size and color management can be changed on demand within the AppWizard.

BSPs (Board Support Packages)

The AppWizard comes with a set of BSPs which may also include precompiled libraries of emFile and embOS. In case of using a BSP the possibility of changing the color format and display size are restricted. Those ready-to-use and preconfigured BSPs make it possible to write and execute applications without any knowledge of writing applications in C code. All BSPs automatically include the generated application code, which means nothing needs to be changed or configured to be able to run the application on the target. Of course it is also possible to use custom defined BSPs with the AppWizard.

Simulation

Projects generated by the AppWizard also contain a simulation project for Microsoft Visual Studio. The difference between the integrated play mode and the simulation is that application defined code is not compiled and executed by the play mode. The simulation on the other hand also runs application defined code.

Variables

The user may also add variables to the project, which can be manipulated from outside of the application. Variables are mostly used for interactions. For example, an interaction can be set for a variable that will be triggered after its value has changed. An interaction can also change the value of a variable.

Requirements 📎

Host system 📎

The first version is available for Windows systems only, requiring Windows 7 or newer.

The recommended screen resolution is at least full HD (1920 × 1080).

Target system 📎

To be able to use applications generated by the AppWizard we recommend that the target at least fulfills the following requirements:

At the end RAM and ROM requirement depends on the application built with the AppWizard.

Note

*1 256 KBytes of flash memory are required for emWin and the AppWizard library. Additional flash memory or external storage is required for resources like fonts, images and text.

*2 130 KBytes are required for emWin including 100 KByte of working RAM. This does not include memory required for a framebuffer.

*3 Ideal would be a device with a hardware accelerator such as D/AVE 2D by Renesas or Chrom-ART Accelerator by ST.

Development environment 📎

The AppWizard can be used with any IDE and any ANSI C compiler complying with at least one of the following international standards:

Additional software libraries 📎

No additional software library is required to be able to use the AppWizard. The AppWizard optionally supports resource (fonts, images and text) management from external storage. If external storage should be used for resource management a file system for reading operations is required. Any file system can be used.

Installation 📎

The following chapter describes how to install the AppWizard.

Windows 📎

Installing the AppWizard

To install the AppWizard, simply run the setup wizard which will guide you through the installation. It comes with all required components without use of downloading and installing further tools.

Uninstalling the AppWizard

To uninstall the AppWizard, simply run the uninstaller which is located in the program directory.

Getting started 📎

The following chapter will provide an overview on how to get started with the AppWizard right after the installation has finished.

Note

The shipment also includes a Quick Start Guide to the AppWizard which provides step-by-step guides for creating example projects or performing simple actions (e.g. adding objects to the screen).

The guide is located in the directory and named AN03003_AppWizard_QuickStartGuide.pdf.

Starting the tool 📎

The AppWizard application (AppWizard.exe) can be started from the Windows Start menu or the installation directory.

AppWizard version 📎

The current version of the AppWizard can be read in the top bar of the program. The version number contains the AppWizard version and the emWin version that is used.

In the above example, AppWizard version 1.04 is used in conjuction with emWin version 6.12.

APP_Version.h

The current version of AppWizard is defined in the file APP_Version.h. The example below equals V1.04.

#define APPW_VERSION    10400

GUI_Version.h

The current emWin version is defined in GUI_Version.h. The example below equals V6.12.

#define GUI_VERSION    61200

Note

The used emWin libraries/code must match the corresponding emWin and AppWizard versions.

Creating a new project 📎

The following section will guide you through the entire process of creating and running a project with the AppWizard.

  Create a new project

The initial step is to create a new project. Right after opening the AppWizard, the user has the option to either create a new project or open an existing one.

When creating a new project, the user can choose the project path, a name for the project, specify the target’s display size and pick a color format. Alternatively a BSP can be selected, which already includes the respective display size and color format. The user also has the option to enable extern storage mode by ticking the checkbox next to the SD card image. Other options are to enable support of Thai script or bi-directional text.

When generating a project, the AppWizard also generates a simulation project in the folder \Simulation located in the project directory.

  Build up a structure

After the project has been created, the user can start to build their application by dragging objects onto the screen, adding interactions to the objects, or adding their resources to the project like bitmaps.

The first thing to add to an empty application is a screen object. This object serves as a parent object for all other objects to be added. Window objects may be added to the screen object to divide the screen into different sections, enhancing the application structure.

Objects like buttons can be placed into the screens or windows and the object’s properties can be edited in the ’Properties’ window to the right.

A more detailed explanation on how the user interfaces work can be found in the chapter User interface. To learn more about objects, see the chapter Objects.

  Run and test the application

As the user is building their application, they can run their application during this entire process of building. This makes it very easy to test the application. The application can be run by entering play mode which is done by clicking the play button in the top right corner of the editor window. More information about this can be found in Play window.

  Export and save the project

The option “File → Save” (<CTRL>+S) simply saves the project file. If the user wants to save their application as C files, they are able to save and export their project by clicking “File → Export & Save” (<CTRL>+<SHIFT>+E). By doing this, the AppWizard generates C files from this project.

  Run the simulation project

Once the project has been exported, the AppWizard generated C sources with runnable emWin code. The source files are located in the \Source directory. To run the generated code, the simulation project can be used which the AppWizard generated after the creation of the project. The exported source files are automatically linked to the simulation project, which means it is ready to be run.

  Compile and run on target

The chapter Board support packages (BSPs) explains how to run a project on a hardware target.

Opening existing projects 📎

The user may open existing projects either on start-up of the AppWizard by clicking the button “Open existing project” or by using the command “File → Open” (<CTRL>+O).

The only files applicable for opening are AppWizard project files that have a .AppWizard extension. When opening an existing project, the project settings may be changed by selecting a different BSP, if needed.

Directory structure 📎

This chapter gives an overview on how the structure of an AppWizard project looks like.

Root folder 📎

The root folder contains the project file <PROJECT_NAME>.AppWizard. It also contains the following sub-folders:

Folder Description
/Source Root directory for the generated application source code.
/Source/CustomCode Directory for application source code which the user is allowed to extend by custom code.
/Source/Generated Directory for fixed application code which should not be edited.
/Resource Root directory for resource files.
/Resource/Image Images used by the project including generated C and DTA files.
/Resource/Text Text defined in the multilingual text editor.
/Resource/Font Fonts created or referred by the project including generated C files.
/Target Selected board support package for target hardware.
/Simulation Simulation project.

/Source 📎

The folder /Source contains the file with the application entry point. The file is named <PROJECT_NAME>.c.

/Source/Config 📎

The sub-folder /Config contains the following files intended to be changed/enhanced by the user:

File Description
Application.h Header file to be used by user defined code.
<SCREEN_ID>_Slots.c Interaction slots to be used to invoke user defined code on interactions.

When opening a project, the AppWizard reads the user defined slot code. It can be edited within the AppWizard.

/Source/Generated 📎

The sub-folder /Generated contains the following files not intended to be modified by the user.

File Description
APPWConf.c Configuration file (text and driver initialization).
Application.h Header file to be used by user defined code.
<SCREEN_ID>.c Screen definition(s).
Resource.c Resource and screen information.
Resource.h Prototypes of resource and screen information elements.

/Resource 📎

The folder /Resource is the root directory for text, font and image resources:

/Resource/Font 📎

The sub-folder /Font contains all font files referenced by the project:

File Description
<FONTNAME>.xbf Binary file of font in XBF format.
<FONTNAME>.c Simple C arrays of XBF font files which are not managed on external memory.
/Resource/Image 📎

The sub-folder Image contains all image files referenced by the project:

File Description
<IMAGENAME>.<SUFFIX> Image file referenced by the project.
<IMAGENAME>.dta Streamed image.
<IMAGENAME>.c Simple C arrays of streamed image files which are not managed on external memory.
/Resource/Text 📎

The sub-folder Text contains all text defined in the project:

File Description
APPW_Language_<n>.txt Text file(s), one for each language.
APPW_Language_<n>.c Simple C arrays of text file(s) if not managed on external memory.

User interface 📎

The following chapter will give an overview on the user interface of the AppWizard. The user interface of the AppWizard consists of a menu bar and a couple of windows.

The following windows exist:

It consists of the following items:

Edit / Preferences

The preferences dialog has the following options:

Project / Edit options

The project options dialog has the following options:

In case of using a BSP display size and color format are fixed and come from the BSP.

Editor window 📎

The editor window shows the currently selected screen by drawing it directly with emWin. That makes sure that “what you see is what you get”. Additionally each object has a slightly semi-transparent frame which ensures that also invisible objects give a slight optical feedback.

To be able to place graphical objects a screen has to be created at first. That is done by clicking on the screen icon in the ’Add Object’ window left to the editor window. Placing controls is done in the same way. Simply drag an element from the ’Add Object’ window onto an existing screen or window object in the editor window.

Independent horizontal and vertical placing

Horizontal and vertical placement of an object can be defined independently. The behavior of each axis can be defined by either a relative position and a size or two relative positions. ’Relative’ means relative to its parent or relative to a sibling. That makes it possible to create screens or windows which are self-adjusting when changing the parent’s or sibling’s placement.

Hierarchical structure

Window elements are used to achieve a hierarchic object structure. They can be placed within a screen or an already existing window. When placing objects on a window the position of those objects can be changed by simply moving or animating the window.

Snapping

Snapping is used when moving objects with the mouse. Edges and center points of existing objects are used for snapping. When aligned with other objects the editor generates optical feedback by highlighting the according object and/or center line.

Selecting objects

Left-clicking selects the first object under the clicked coordinate. A selected object has nine drag points for modifying the coordinates, one on each edge, one on each corner and one in the center point.

With the <CTRL> key pressed multiple objects can be selected. Selected objects are getting joint into a selection group. In that case the drag points are getting placed on to the rectangle surrounding the selection group. Rectangle selection can be done by clicking with the left button in an empty area of the editor window, holding the button pressed and dragging the rectangle with the mouse. When releasing the button the objects within the rectangle will be selected.

Positioning

Objects and groups can be positioned by dragging them with the mouse. The drag points are used to modify the geometry of an object. The property window on the right hand side can also be used to modify the size, coordinates and relations of objects.

Concatenating object positions

To concatenate object coordinates, one of the edge drag points of an object has to be connected to the edge of another object using the right mouse button. This will result in when moving the object the other object was connected to, both objects will be moved synchronous on the axis of the drag point.

A concatenated object position can be cleared by selecting any of the nine positioning options. These options are explained under Positioning logic.

Copy/Paste

Single objects, groups or complete screens can be copied and pasted by either using the keyboard or the menu bar. IDs of copied objects are extended with the suffix ’_Copy’. The AppWizard makes sure that the generated Ids are unique within the current screen.

Zooming and panning

The content of the editor window can be easily zoomed by using the ’+’ or ’-’ button, the ’+’ or ’-’ key or the mouse wheel in combination with the <CTRL> key.

The zoom level can be reset by pressing the ’1:1’ button.

The content of the editor window can be moved by panning, which is done by pressing the <SPACE> bar and moving the mouse while pressing the left mouse button.

Play mode

The play button in the upper right corner of the editor window opens the play window, which allows a quick check of the current application.
More information about this window can be found in the chapter Play window.

Property window 📎

The window on the right shows the object specific properties. It consists of four areas (top to bottom):

Id, position and size 📎

The top area shows the selected object’s Id, which can be edited. Below that it shows the coordinates and size of the object.

Placing details can be modified in the ’Positioning details’ area below.

Positioning logic 📎

The rectangle of a simple emWin window is defined by its upper left position and its X- and Y-size. To be more flexible with this, the AppWizard supports more options.

One option for example is specifying the coordinates of one of the edges and the objects X- and Y-size. That is similar to a normal emWin window except the option of using any edge and not only the top/left coordinates.

Each coordinate can be relative to an existing edge of the parent or any other sibling. For example, the top coordinate can be relative to the parent, the Y-size fixed and right and left coordinates relative to the parent.
The Y-position of the next object can then be relative to the object above and so on. This mechanism makes it possible to generate screens which are self-adjusting when the parent’s size or orientation changes.
To remove a concatenated positioning logic, one of the nine options for positioning logic has to be clicked.

The top of the area shows the positioning logic of the selected object. Dimension lines are used to show coordinate and size definitions. In case of coordinates relative to existing siblings it shows the Id of the according sibling.

There are nine positioning options to choose from:

Positioning option Description
 Top and left coordinate relative to parent. Width and height defined by given value.
 Top and right coordinate relative to parent. Width and height defined by given value.
 Bottom and right coordinate relative to parent. Width and height defined by given value.
 Bottom and left coordinate relative to parent. Width and height defined by given value.
 Top, left, bottom and right coordinate relative to parent.
 Top, left and bottom coordinate relative to parent. Width defined by given value.
 Top, left and right coordinate relative to parent. Height defined by given value.
 Top, right and bottom coordinate relative to parent. Width defined by given value.
 Left, bottom and right coordinate relative to parent. Height defined by given value.

Note

The positioning logic can be changed at anytime.

Example

In this example, the Text object’s X-position shall be relative to the X-position of the Button object. To do that, one of the Text object’s contact points on the X-axis has to be right-clicked. After clicking, a line appears that has to be moved to the Button’s X-axis contact point.

When the line appears in a green color, the operation is valid and will be applied when releasing the right mouse button.

When selecting the Text object, the positioning logic property shows that its X-axis is dependent on the Button object.

To remove this positioning property, the user simply has to select one of the nine positioning options that are explained above.

Positioning details 📎

This section allows setting up top, left, bottom and right coordinates and X/Y size by spin boxes, depending on the selected positioning option.

Object dependent details 📎

Each object has its own properties that can be edited, they are located below the ’positioning details’ section in the ’object dependent details’ section.

Depending on which object is selected, its properties are shown. To see a list of all existing object properties, see the chapter Object properties.

Editing properties

Each property is shown with a text and an arrow button to the left.

 To set or define a property, the arrow button should be clicked.
 It opens a configuration area to be able to specify the property details. An existing property can be closed with the arrow button.
 To delete an existing property, the X button on the right side has to be clicked.

Clicking the arrow button of an existing property opens and closes the according property definition area. The preferences dialog (Edit → Preferences) allows the option to open all existing property areas per default.

Properties like text, fonts or images open the according resource management and selection dialog.

Hierarchic tree view 📎

The hierarchic tree view gives a quick overview about the currently existing objects. It allows changing the relative position of siblings per drag and drop. Selecting an object within the tree view also selects the object in the editor window.

Duplicating objects

 When clicking the duplicate object button, a copy of the selected object is inserted into the same level of the hierarchic tree.

Moving objects

 Clicking the ’Move up’ button will move the currently selected object upwards.
 Clicking the ’Move down’ button will move the currently selected object downwards.

Note

The ’Move up’ and ’Move down’ buttons can only move an object within their level of the hierarchic tree. This means an object can not be moved to another parent. To move an object to another level/parent, it has to be cut out and pasted to the new location by right-clicking it.

Play window 📎

The play window shows the user a ’running’ version of the current project application.

It can be opened by clicking on the play button in the upper right corner of the editor window and closed by pressing the escape key. It may also be opened and closed by pressing the <F5> key.

When opening the play window, a modal dialog with the resulting interactive application will be shown.

Limitations

There is one limitation to the play mode, as the AppWizard does not compile any C code, the play mode does not include any code by the user added to interactions.

Interaction window 📎

The interaction window shows a list of all interactions associated with the selected screen. Each interaction has its own emitter, signal, job and receiver.

Creating a new interaction

Creating a new interaction is done by pressing the + button at the end of the list. To learn more details on how to create new interactions, see the Introduction section of the Interaction chapter.

After specifying the receiver a dialog occurs which allows it to specify job dependent data and/or user defined code of the interaction slot. Clicking the pen opens a dialog for editing those parameters.

Removing an interaction is done by clicking the X button in the first column.

Grouping interactions

Interactions may also be grouped together. This makes sense if there is a large number of interactions present in the application and a more overseeable structure is desired. Grouped interactions are marked via the line in the “[” column.

To group interactions, select the interactions, right click them and select “Add to group”. As demonstrated below, after a group has been created, all the interactions between the start and end of the line are in that group.

Now, when one item of the group is clicked, all group items are selected. To delete the group, right click and select “Clear group”.

Adding a comment

A comment can be added for each interaction. To do so, simply double click the empty area next to the interaction in the “Comment” column.

Quick access buttons 📎

In the lower left corner there are four buttons for managing resources. Clicking on one of the four buttons (text, fonts, images and variables) will open the corresponding resource window.

For more information about managing resources, see the chapter Resource management.

Text resource window 📎

The text resource window makes it possible to save texts in multiple languages. The order of the languages may be changed by using drag and drop on the column header.

Each text has its own ID, that can be assigned to objects. The Ref column states how often the text is referenced in any objects.

Add texts or languages

Before adding texts, you need to have added at least one language first. New languages/columns are added via the New language button.

New texts are added via the Add text or Insert text buttons. They can be edited by clicking on the corresponding field.

Texts can be deleted via the Delete text button, but only when they have no references.

Export and import texts

It is also possible to export the texts to a CSV file or import a CSV file. For importing CSV files, the rules for CSV files should be obeyed. These rules are described in the emWin User Manual under “32.2.4 Rules for CSV files” in the chapter “Language Support”.

Font resource window 📎

The font resource window allows the user to manage fonts.

The table shows whether the font is a stock font and/or is used in the project. It also shows how often fonts are referenced in any objects and the height of the font. By ticking the checkbox next to the SD card, the font can be marked as an external resource.

Note

Only XBF files created with the AppWizard can be used!

Create new fonts

Clicking on Create new… allows the user to add a new font from the local installed fonts. When clicking the button, a window similar to that in the FontConverter is opened. The user has to select which font should be added, in which style and height and also select the anti-aliasing level.

To optimize memory footprint, the user may define which characters should be present in the font. This can be done by clicking on Codepoint range… and either selecting a range of characters, keeping only the characters that are used in all project’s texts or by parsing a pattern file.

By default, a range of characters is used for creating a font. The default range of enabled characters is:

0x0000 to 0x007F
0x0100 to 0x017F
0x0180 to 0x024F

Image resource window 📎

The image resource window allows the user to manage images.

The window gives an overview of all the images used in the project, showing also their dimensions, the bitmap format applied to the image and how often it is referenced in other objects.

As in the other management windows, the user can choose if the image should be marked as an external resource. The Add button can be used to add another image from your local disk.

Variable resource window 📎

The variable window lets the user add or remove variables. More explanation on what variables are used for can be read in the chapter Variables.

Starting the simulation project 📎

By selecting menu entry Project->Start Simulation or by pressing F6 the AppWizard starts automatically the simulation project which is placed within the AppWizard project directory. Depending on the selection made under ’Preferences’ either the VS2013 or VS2015 project gets started.

Resource management 📎

The AppWizard manages all text, fonts and images required for the application. The user gets completely rid of additional resource management like creating font files with the font converter, image files with the bitmap converter or text data to be used in the project.

Per default resources are compiled and linked into the application. For systems short on ROM, large resources or resource data which should be changeable at runtime, those resources can be managed from SD card with the file system included in the BSP.

Optionally the AppWizard manages the content of the SD card which needs to be available at runtime.

Please refer to the Creating custom BSPs example to learn how BSPs with or without a file system can be used.

Stock resources 📎

The AppWizard comes with a bunch of different stock fonts and images that are ready for use for any application.

Note

Note that as with any resources, any stock resources that have been used are saved in the exported project as well!

Stock fonts

The AppWizard by default supplies two fonts, each in three different sizes. All stock fonts use 4bpp anti-aliasing.

Stock images

For every object which can make use of a bitmap, the AppWizard offers a set of bitmaps. For example, bitmaps for a Rotary and its marker, or a thumb and shaft bitmap for a Slider object.

Text management 📎

A text input dialog allows entering text in multiple languages. Text usage is based on using IDs instead of using strings directly. Text access within the application is realized by using text IDs. In combination with emWin’s language module it becomes quite easy to switch between languages.

Managing text from SD card

The project property dialog has the option to enable text management directly from SD card. In that case the text is not compiled and linked with the application code.

When exporting the project, the text will then be stored in the specified media path in the directory <Mediapath>\Resource\Text.

Font management 📎

The AppWizard comes with a small set of default fonts in form of XBF font files and the option for creating new fonts. The resource path contains all fonts referenced by the project. A font management dialog shows all available fonts in the project.

The following options exist:

The dialog shows the following columns:

When compiling the project all referenced fonts are compiled and linked with the application per default. SD card management excludes the font from compiling and linking with the application. Those fonts are managed from SD card directly without using addressable ROM for the content of the font. When exporting the project, these fonts will be saved in a directory in the specified media path, that is <Mediapath>\Resource\Fonts.

The resource folder of the project contains all fonts which are used or have been used within the project. That means the folder can contain fonts which are not currently used. Those fonts are shown with zero references and can be deleted by pressing the ’Delete’ button if not planned to be used any longer.

Font creation options 📎

A font dialog offers the option for creating new fonts (by specifying family, style, type, and height in pixels) or importing existing ones from already existing projects. The available font families depend on the installed fonts of the host system.

Note

Fonts created with the FontConverter can not be used or imported by the AppWizard!

The following types of fonts can be created:

Definition of code point ranges 📎

Each font can have its own range of code points. The font selection dialog has the option for specifying the desired code point range.

Clicking the according button opens a dialog for setting up the desired range. The following options exist:

Image management 📎

The image management dialog shows all images located in the image stock or the resource folder of the project.

The dialog shows the following columns:

The following options exist:

Note

The project folder will contain all images used in the project, this applies to stock images as well.

Bitmap format

When adding a new image, by default the format is set to ’Auto’. This will automatically choose the fitting bitmap format depending on which color format has been selected for the project. But the user may also select a specific bitmap format if the hardware requires it.

Additional to that the user has the option to select a completely different bitmap format by setting a format which should be used for the ’Auto’ option. This can be done by opening the ’Default bitmap formats’ dialog through the ’Preferences’ menu.

Deleting images

Images can be deleted from the project by clicking the Delete from project button, after selecting the image that should be deleted. Images can only be deleted if the they haven’t been referenced, that means the reference count shows zero.

Variable management 📎

The variable window allows the user to manage the variables for this project. New variables can be added by pressing the Add variable button and they can be deleted by pressing the Delete variable button.

Using the buttons with the upwards and downwards arrows will move the selected variable either up or down, depending on the button.

After a variable has been created, it may be used for an interaction.

Objects 📎

This chapter gives an overview of the objects the AppWizard supports.

Introduction 📎

The objects the AppWizard supports are similar to the widgets in emWin. The following table gives an overview about the currently available objects in the AppWizard.

Note

Some of the objects are based on emWin widgets. For more information refer to the document UM03001 emWin User Guide & Reference Manual.

Name Symbol Description
Box
Box object that can be colored.
Button
Clickable button object.
Edit
Edit field for user input.
Gauge
Radial progress bar.
Image
Object that displays an image.
Keyboard
Screen keyboard for entering text or numbers.
Multiedit
Edit field for multiple lines of user input.
Progbar
Progressbar to display the progression of a process.
QRCode
Displays a QR code.
Rotary
Circular object that can be rotated.
Screen
A screen serves as a parent for all other objects.
Slider
Movable slider.
Switch
Toggleable switch with two states.
Text
An object displaying text.
Timer
Timer object.
Window
Similar to screen object, serves as a parent object for other objects.

Object properties 📎

Every object has its own properties than can be edited. The following section will give an overview of each different property.

This table lists all properties and provides links to its corresponding chapter with more explanation.

Property Description
Alignment Alignment of an object.
Auto repeat Repeated clicking of a button.
Bitmap Bitmap to be shown in an object.
Blend colors Blending colors for an object.
Border size Size of border for an object.
Color and background color Foreground and background colors for an object.
Cursor inversion When disabling cursor inversion, the color for the cursor isn’t the inverted background color.
Decimal mode Makes an object only eligible for digits.
Error correction level Error correction level of a QR code.
Fade mode Fades the two bitmaps of an state into each other.
Font Font for the object.
Frame radius Radius of frame around an object.
Frame size Pixel-size of frame around an object.
Gradient Horizontal and vertical gradients.
Keyboard layout Keyboard layout for a Keyboard object.
Motion Motion settings for swiping between screens.
ID ID for the object.
Initial value Initial value for an object.
Invert direction Inverts direction of an object.
JPEG/GIF/BMP Image to be shown.
Line width Width of lines in an object.
Maximum length Maximum text length.
Offset Offset for parts of an object.
Overwrite mode Overwrite mode for text cursors of an object.
Password mode Enables password mode for Multiedit objects.
Period Movement period.
Persistent mode Persistent mode for screens.
Pixelsize Size in pixels of one module of a QR code.
Position and size Position and size of an object.
Radius Radius of an object.
Range Range of position values of an object.
Rotate marker Toggle rotate markers of a Rotary object.
Rounded value/ends Option to curve the end’s edges of the arc(s) of a Gauge object.
Snap position Snapping position of an object.
Space Spacing.
Span of values Set range of values of an object.
Start/end angle Sets the starting and ending angle of an object.
Text Text to be shown.
Text color Color for text.
Text rotation Rotation mode for text.
Text wrapping Enables text wrapping.
Tiling Tiling mode for Image objects.
Version Version of a QR code.
Vertical mode Changes an object to be vertical.

Alignment 📎

Description

The alignment property allows to choose a combination of a horizontal alignment and a vertical alignments. This property can be set for bitmaps and texts.

Available objects

This property can be set for the following objects:

Usage

Combined with Horizontal left Horizontal center Horizontal right
Vertical
top
Vertical
center
Vertical
bottom

You may also add an x and y offset to the object.

Auto repeat 📎

Description

Enables the ’auto repeat mode’ of a button. When holding the button pressed, it begins sending clicked events after the start time period in the given interval.

Available objects

This property can be set for the following objects:

Specification

Property Description
Start time Period to wait until the repeat should start.
Interval Repeating interval to be used.

Bitmap 📎

Description

The bitmap property allows to set a bitmap to a specific state of an object.

Available objects

This property can be set for the following objects:

Blend colors 📎

Description

This property allows to define colors, that will be blended into the left and right bitmaps of a Slider object’s shaft.

Available objects

This property can be set for the following objects:

Specification

Property Description
Shaft left Color to be blended in on the left end of the shaft.
Shaft right Color to be blended in on the right end of the shaft.

Example

This example uses the green shaft bitmaps provided as stock images by the AppWizard and has the color red set as the blend color for the right side of the shaft.

Border size 📎

Description

This property sets the border size of an Edit object in pixels. The border is the spacing between the frame and the text.

Available objects

This property can be set for the following objects:

Color and background color 📎

Description

The color and background color properties set the color or background color of an object.

Available objects

This property can be set for the following objects:

Usage

When selecting the color, a dialog is opened. This dialog allows to set a specific color by setting RGB and HSV values, as well as the alpha value.

You may also save custom colors.

Related topics

Cursor inversion 📎

Description

Cursor inversion is by default activated for Edit objects. When deactivating it, the color of the cursor is no longer the inverted background color of the Edit object, but rather the user can pick a new color.

The user can set the color of the cursor with the Background color property under ’Cursor’.

Available objects

This property can be set for the following objects:

Decimal mode 📎

Description

With decimal mode, the Edit or Text object is only eligible of holding digits instead of characters. For decimal mode, a mask of zeros has to be specified which determines how many digits are shown by the object. Also, when using decimal mode, a range property is added to the object to limit the numbers that can be entered.

Available objects

This property can be set for the following objects:

Additional information

The mask being set for an Edit or Text object behaves slightly different.

The Edit object accepts either a single ’0’ or a single ’#’ as mask. A ’0’ shows leading zeros depending on the range set for this object.

The Text object shows as many leading zeros as ’0’ are being used as mask. The umber of ’#’ used indicates the maximum number of digits.

Example

As an example, the mask 00000 for a Text object would allow a maximum of five digits and would also show the zeros if the entered number has less digits than five.

Mask Result

Error correction level 📎

Description

The error correction level is a property exclusively used for the QRCode object. The higher the error correction level, the more information is saved redundantly in the QR code in order to increase the chance to be read without errors.

Available objects

This property can be set for the following objects:

Error correction levels

emWin QR codes offer four error correction levels.

Error correction level Description
GUI_QR_ECLEVEL_L About 7% or less errors can be corrected.
GUI_QR_ECLEVEL_M About 15% or less errors can be corrected.
GUI_QR_ECLEVEL_Q About 25% or less errors can be corrected.
GUI_QR_ECLEVEL_H About 30% or less errors can be corrected.

Fade mode 📎

Description

When activating this setting, while moving the thumb of a Switch object or when the switch animation is performed, the bitmap of the old state will be faded into the new state’s bitmap. The default setting is ’disclose mode’. A more detailed explanation about the difference between these two modes is provided in the chapter Switch.

Available objects

This property can be set for the following objects:

Comparison

Disclose mode Fade mode

Font 📎

Description

The font property allows to set a font to an object.

Available objects

This property can be set for the following objects:

Usage

Choosing a font will open a dialog showing all fonts available in the project.

Frame radius 📎

Description

This property sets the radius of the rounded corners of an Edit object in pixels.

Available objects

This property can be set for the following objects:

Frame size 📎

Description

This property sets the width of an object’s frame in pixels.

Available objects

This property can be set for the following objects:

Gradient 📎

Description

You can define horizontal and vertical gradients using two colors or more.

Available objects

This property can be set for the following objects:

Usage

The user may add colors via the Add color button. A gradient must contain at least two colors. The colors can be changed when the corresponding marker has been clicked. They can be edited using the Set color button and deleted via the Delete button.

The position of each color can be changed by specifying the position in the spinbox or by moving the markers.

Result

Keyboard layout 📎

Description

A Keyboard layout defines which key layout is used for a Keyboard object.

Available objects

This property can be set for the following objects:

Available layouts

Layout Description
SKEYBOARD_ARA Layout for Arabic.
SKEYBOARD_DEU QWERTZ layout, used for German.
SKEYBOARD_DEU_LP QWERTZ layout with extra longpress characters.
SKEYBOARD_ENG QWERTY layout, used for English.
SKEYBOARD_ENG_LP QWERTY layout with extra longpress characters.
SKEYBOARD_FRA_LP AZERTY layout, used for French.
SKEYBOARD_NUMPAD Numpad layout.
SKEYBOARD_RUS JCUKEN/ЙЦУКЕН layout, main Cyrillic keyboard layout for the Russian language.

Motion 📎

Description

Horizontal and vertical motion allow swiping between different screens or windows.

Available objects

This property can be set for the following objects:

Horizontal motion properties

Property Description
Left partner Screen/window that should be located left from the screen/window.
Mode left Mode that should be applied to the left partner. Either ’disclose’ or ’replace’.
Right partner Screen/window that should be located right from the screen/window.
Mode right Mode that should be applied to the left partner. Either ’disclose’ or ’replace’.
Period Period to be used until motion stops.

Vertical motion properties

Property Description
Upper partner Screen/window that should be located above the screen/window.
Mode up Mode that should be applied to the upper partner. Either ’disclose’ or ’replace’.
Lower partner Screen/window that should be located below the screen/window.
Mode down Mode that should be applied to the lower partner. Either ’disclose’ or ’replace’.
Period Period to be used until motion stops.

Disclose mode

In ’disclose mode’ the window that the user is swiping to will be disclosed. This means only the window that is swiped away moves, the other window does not.

Replace mode

In ’replace mode’ the window that the user is swiping to replaces the old window as the user is swiping.

ID 📎

Description

Every object has an ID that can be set in order to identify that object.

Available objects

This property can be set for all objects.

Initial value 📎

Description

This property sets the initial value of an object.

Available objects

This property can be set for the following objects:

Invert direction 📎

Description

This property inverts the direction of an object, meaning it lowest value and initial position will be on the right instead of the left.

Available objects

This property can be set for the following objects:

JPEG/GIF/BMP 📎

Description

This property allows to add a JPEG, a GIF or a BMP image to an Image object. Animated GIFs are supported as well.

Available objects

This property can be set for the following objects:

Difference between bitmaps and images

To learn about the difference between bitmaps and images, refer to Image.

Line width 📎

Description

This property defines the width of the background and foreground arcs of a Gauge object.

Available objects

This property can be set for the following objects:

Maximum length 📎

Description

This property sets the maximum text length in bytes of an Edit object.

Available objects

This property can be set for the following objects:

Offset 📎

Description

This property sets an offset angle for a Rotary object. This will make the object appear rotated by that angle from the beginning. The offset is measured in 10th of degrees (3600 = 360°).

Available objects

This property can be set for the following objects:

Overwrite mode 📎

Description

This property sets the mode of a possible cursor to overwrite. The default mode is insert.

Available objects

This property can be set for the following objects:

Password mode 📎

Description

This property enables the password mode for a Multiedit object. The password mode displays the text of the object as asterisks.

Available objects

This property can be set for the following objects:

Example

Password mode disabled Password mode enabled

Period 📎

Description

This property sets a time period in ms how long the related operation should take until it is finished.

Available objects

This property can be set for the following objects:

Persistent mode 📎

Description

The persistent mode property allows a screen to be persistent, so it does not get deleted during runtime when it is not visible anymore.

Available objects

This property can be set for the following objects:

Usage

It is explained when to use this mode in the chapter Screen.

Pixelsize 📎

Description

The pixelsize property defines the size in pixels of one module in a QR code.

Available objects

This property can be set for the following objects:

Position and size 📎

Description

Every object has its position and its size.

Available objects

These properties can be set for every object:

Radius 📎

Description

This property sets the radius of an object or a specific part of an object. For the Rotary object, it depends on this radius where the marker bitmap will be positioned.

Available objects

This property can be set for the following objects:

Range 📎

Description

This property allows to define a range for an object.

Available objects

This property can be set for the following objects:

Rotate marker 📎

Description

This property, when activated, rotates the bitmap set for the marker.

Available objects

This property can be set for the following objects:

Comparison

Without marker rotation With marker rotation

Rounded value/ends 📎

Description

With this property, the ends of the value or end arc of a Gauge object can be set to have rounded edges.

Available objects

This property can be set for the following objects:

Comparison

Default Rounded value Rounded ends

Snap position 📎

Description

This property sets a position on the Rotary object at which it should snap in place. The snap position is specified in 10ths of degrees (1800 = 180°).

Available objects

This property can be set for the following objects:

Space 📎

Description

This property defines the spacing. For instance, spacing in X- and Y-axis can be set between each key on a Keyboard object.

Available objects

This property can be set for the following objects:

Span of values 📎

Description

This property defines the range of numbers an object should return.

Available objects

This property can be set for the following objects:

Start/end angle 📎

Description

This property defines the angles, where the arc of a GAUGE object should start and end. The values to be entered should be 10th of degrees (1800 = 180°).

Available objects

This property can be set for the following objects:

Additional information

The entered degree values are based off the standard angle measurement.

Text 📎

Description

The text property allows to select a text to be shown from the text window. Only a text from the text window can be selected. For more information about the text window and how to add texts, refer to Text resource window.

Available objects

This property can be set for the following objects:

Text color 📎

Description

The text color property sets the text color of an object for its different states.

Available objects

This property can be set for the following objects:

Related topics

Text rotation 📎

Description

Rotates the text in an object.

Available objects

This property can be set for the following objects:

Available rotation modes

Rotation Description
CCW Counter-clockwise rotation (210°).
CW Clockwise rotation (90°).
180° 180° rotation.

Text wrapping 📎

Description

Text wrapping for text in an object.

Available objects

This property can be set for the following objects:

Comparison

No text wrapping Text wrapping

Tiling 📎

Description

Tiling mode will fill the entirety of the Image object with the selected image.

Available objects

This property can be set for the following objects:

Example

See chapter Image for an example.

Version 📎

Description

The version of a QR code indicates the overall dimensions of the code. The entered value has to be between 0 and 40. If 0 is entered, the appropriate version is chosen automatically.

Available objects

This property can be set for the following objects:

Vertical mode 📎

Description

The vertical mode property changes the orientation of an object to be vertical. By default it is horizontal.

Available objects

This property can be set for the following objects:

Box 📎

A box object can be placed as the first object in a window/screen and simply serves for specifying a background color or a gradient. Horizontal and vertical gradients are supported. A gradient can have an unlimited number of colors. For each color the pixel position can be defined. Semi-transparent gradients are also supported.

Symbol Example

Note

Semi-transparency is only recommended if a hardware is used which either has an accelerator for semi-transparent filling operations or is fast enough to mix up the colors per software.

Properties

Property Description
Color Color to be shown in the box.
Horizontal gradient Horizontal gradient to be shown in the box.
Vertical gradient Vertical gradient to be shown in the box.

Button 📎

The button object is very similar to its emWin counterpart. It is an object that can be clicked, so that its input may be processed by the application.

Symbol Example

Properties

Property Description
Text colors
  • Unpressed: Text color for unpressed state.
  • Pressed: Text color for pressed state.
  • Disabled: Text color for disabled state.
Background colors
  • Unpressed: Background color for unpressed state.
  • Pressed: Background color for pressed state.
  • Disabled: Background color for disabled state.
Bitmaps
  • Unpressed: Bitmap for unpressed state.
  • Pressed: Bitmap for pressed state.
  • Disabled: Bitmap for disabled state.
Bitmap alignment
  • Alignment: Bitmap alignment.
  • Offset x: Additional x-offset.
  • Offset y: Additional y-offset.
Auto repeat
  • Start time: Starting time of auto repeating after button press.
  • Interval: Repeating time.
Text Text to be shown.
Text alignment
  • Alignment: Text alignment.
  • Offset x: Additional x-offset.
  • Offset y: Additional y-offset.
Font Font to be used for the text.

Edit 📎

An Edit object provides, like the emWin EDIT widget, a box where the user can type text in, or numbers if decimal mode is activated.

Symbol Example

Properties

Property Description
Text Text to be displayed initially.
Decimal mode Mask to be used for decimal mode.
Overwrite mode Set the cursor mode to overwrite.
Text colors
  • Enabled: Text color for enabled state.
  • Disabled: Text color for disabled state.
  • Cursor: Color of cursor.
Background colors
  • Enabled: Background color for enabled state.
  • Disabled: Background color for disabled state.
  • Cursor: Background color of cursor.
Frame color Color of frame of Edit.
Cursor inversion Disables cursor inversion mode.
Blink period Blinking period of cursor.
Font Font to be used.
Text alignment
  • Alignment: Text alignment.
  • Offset x: Additional x-offset.
  • Offset y: Additional y-offset.
Inner gap Spacing between frame and text.
Frame radius Radius of rounded corners of the Edit’s frame.
Frame size Line size of frame around Edit.
Maximum length Maximum length of characters entered into the Edit.

Decimal mode

With decimal mode, the Edit object is only eligible of holding digits instead of characters. For this mode, a mask of zeros has to be specified which determines how many digits are shown by the object. More details about the usage of the mask is explained under Decimal mode.
Also, when using decimal mode, a range property is added to the object to limit the numbers that can be entered. More on the range property can be found under Range.

During runtime, the cursor is highlighting the currently selected digit. When the user types in a number, the cursor will move from its current position to the right until the last digit has been reached. If the entered number exceeds the maximum, the maximum number is put in.

The number can be increased using the <UP> and decreased using the <DOWN> key, whereas the cursor can be moved using the <LEFT> and <RIGHT> arrow keys.

Gauge 📎

A Gauge object is similar to a progress bar, although the progress is displayed in a radial manner. The object consists of two arcs that are drawn. The relation between these two arc lines shows the progress.

Two colors can be set for a Gauge object, for the background and and foreground line.

Symbol Example

Properties

Property Description
Center alignment
  • Alignment: Alignment of the Gauge within the object frame.
  • Offset x: Additional x-offset of the Gauge.
  • Offset y: Additional y-offset of the Gauge.
Initial value Initial value of the Gauge.
Start/end angle
  • Angle 0: Start angle in 10th of degrees.
  • Angle 1: End angle in 10th of degrees.
Span of values
  • Min: Lowest value the object should return.
  • Max: Highest value the object should return.
Radius Radius of the Gauge.
Colors
  • Item 0: Color of the background curve.
  • Item 1: Color of the foreground curve.
Line width
  • Width 0: Width of the background curve.
  • Width 1: Width of the foreground curve.
Rounded value Enables rounded ends of the foreground (value) curve.
Rounded ends Enables rounded ends of the background curve.
Background color Background color of the object.

Image 📎

An Image object is similar to emWin’s IMAGE widget. It can be used to display any images of the file types JPEG, GIF or BMP. Alternatively, a bitmap can be chosen as well.

Symbol Example

Properties

Property Description
Bitmap Sets a bitmap to the object.
JPEG Sets a JPEG image to the object.
GIF Sets a GIF image to the object.
BMP Sets a BMP image to the object.
Tiling Enables tiling mode for the object.

Difference between bitmaps and images

In contrast to bitmaps, JPEG, GIF and BMP images are always displayed native. Therefore JPEGs and GIFs are always decompressed before being displayed. This can lead to a notable difference in performance compared to bitmaps.

Tiling mode

Tiling mode will fill the entirety of the Image object with the selected image. In this example the purple frame surrounds the Image object.

Tiling mode disabled Tiling mode enabled

GIF support

Any GIF images are supported for this object, this includes animated GIFs.

Keyboard 📎

A Keyboard object can be used to enter text or numbers.

Symbol Example

Properties

Property Description
Font for codes Font used for keys.
Font for longpress codes Font used for longpress characters on keys.
Keyboard layout Keyboard layout used for the object.
Colors
  • Code: Color used for text shown on keys.
  • Long: Color used for longpress characters shown on keys.
  • Mark: Color used for selected character in long press dialog and locked shift key.
Background colors
  • Key: Background color for keys.
  • F-Key: Background color for function keys.
  • Pressed: Background color for pressed keys.
  • BG: Background color of Keyboard object.
Periods for backspace key
  • Start time: Period between the press of backspace and deletion of the characters.
  • Interval: Interval between each character deleted when holding backspace.
Radius for key outline Radius used for rounded corners or the keys.
Space between keys
  • Space (X-axis): Space between each key on X-axis.
  • Space (Y-axis): Space between each key on Y-axis.

Layouts

Files for streamed layout files are located in the project directory under Resource\Keyboard. The pattern files needed for specific layouts are also located in this directory.

Note that pattern files for Arabic only contain the isolated letter forms displayed on the keyboard. This excludes representation forms that are required for the display of Arabic texts.

Additional information

For more information about how the components of a KEYBOARD widget, refer to the emWin user manual.

Multiedit 📎

The Multiedit object is a multi-line text input widget.

Symbol Example

Properties

Property Description
Text Text to be displayed initially.
Overwrite mode Set the cursor mode to overwrite.
Text colors
  • Enabled: Text color for enabled state.
  • Disabled: Text color for disabled state.
  • Cursor: Color of cursor.
Background colors
  • Enabled: Background color for enabled state.
  • Disabled: Background color for disabled state.
  • Cursor: Background color of cursor.
Frame color Color of frame of Multiedit.
Cursor inversion Disables cursor inversion mode.
Blink period Blinking period of cursor.
Font Font to be used.
Text alignment Text alignment (see below for additional information).
Text wrapping Enables text wrapping.
Inner gap Border size between frame and text.
Frame radius Radius of rounded corners of the Multiedit’s frame.
Frame size Line size of frame around Multiedit.
Password mode Enables password mode.

Additional information

There is only left and right text alignment available for this object.

Progbar 📎

A Progbar object visualizes the progression of an operation.

Symbol Example

Properties

Property Description
Bitmap Bitmap for the “filling” and the “empty” part of the Progbar.
Bitmap alignment Alignment of the set bitmaps.
Colors Bitmap for the “filling” and the “empty” part of the Progbar.
Frame size Size of the frame of the Progbar. If 0 no frame is displayed.
Initial value Sets the initial value for the Progbar.
Invert direction Inverts the direction of the Progbar (left to right or right to left).
Period Sets a period which describes the duration it takes to move a Bitmap through the object.
Radius Sets the radius of the edges of the Progbar. Affects also the radius of the frame. Has no effect on gradients.
Range Sets the range of the Progbar.
Vertical mode Changes the direction of the Progbar from horizontal to vertical.

Additional information

The period is used to animate the “filling” bitmap of the progress bar. This way it is possible to indicate a state where the progress bar is waiting for data. The user has to make sure that the bitmap has the size of the Progbar object and the left and right endings of the bitmap match each other.

QRCode 📎

A QRCode object displays a QR code. A custom text can be set which will then be converted into a QR code.

Symbol Example

Properties

Property Description
Error correction level Error correction level for QR code.
Pixelsize Size in pixels of one module for QR code.
Text Text used to be encoded in QR code.
Version Dimensions of the code.

Rotary 📎

A rotary object is similar to its emWin counterpart. A Rotary object is a circular object that can be rotated. The object consists of a background and a marker, both which make use of a bitmap. When rotating the object, the marker moves along the rotary axis. Depending on how the user set the scale, values are returned for the rotated degree.

Symbol Example

Properties

Property Description
Bitmaps
  • Background: Bitmap used for background of Rotary.
  • Marker: Bitmap used for marker of Rotary.
Initial value Initial value of Rotary.
Range
  • Positive: Starting rotation angle in 10th of degrees.
  • Negative: Ending rotation angle in 10th of degrees.
Span of values
  • Min: Lowest value the object should return.
  • Max: Highest value the object should return.
Offset Offset angle in 10th of degrees.
Radius Radius of the Rotary.
Rotate marker Enables marker rotation.
Period Period how long the marker moves when released.
Snap position Sets snap positions on the Rotary (in 10th of degrees).

Screen 📎

A screen is an invisible parent object for all other objects. An application consists of one or more screens. Interactions are also assigned to one screen.

Symbol Example

Properties

Property Description
Horizontal motion Horizontal motion screen/window partner.
Vertical motion Vertical motion screen/window partner.
Persistent mode Enables persistent mode for screen.

Persistent mode

It makes sense to use this mode, when the widgets in a screen are showing values which should not get deleted.

Slider 📎

A Slider object is, like the emWin SLIDER widget, a movable thumb on a shaft. By moving the thumb on the shaft, values can be selected.

Symbol Example

Properties

Property Description
Vertical mode Enables vertical mode.
Invert direction Inverts direction of slider.
Bitmaps
  • Shaft left: Bitmap of left part of the shaft.
  • Shaft right: Bitmap of right part of the shaft.
  • Thumb up: Bitmap of unpressed thumb.
  • Thumb down: Bitmap of pressed thumb.
Blend colors
  • Shaft left: Color on left part of the shaft to be blended in.
  • Shaft right: Color on right part of the shaft to be blended in.
Range
  • Min: Minimum value of slider.
  • Max: Maximum value of slider.

Blend colors

The blend colors setting makes it possible to choose a color for the left and/or right side of the shaft to blended into the corresponding bitmap. A deeper explanation can be found in Blend colors.

Switch 📎

A switch object works like a switch present on most modern smartphones. It has two states and can be toggled by clicking on it.

Symbol Example

Properties

Property Description
Bitmaps
  • BG-Left: Background bitmap for left state.
  • BG-Right: Background bitmap for right state.
  • BG-Disabled: Background bitmap for disabled state.
  • Thumb-Left: Thumb bitmap for left state.
  • Thumb-Right: Thumb bitmap for right state.
  • Thumb-Disabled: Thumb bitmap for disabled state.
Left text Text displayed in left state.
Right text Text displayed in right state.
Text colors
  • Text left: Text color in left state.
  • Text right: Text color in right state.
Font Font to be used for the object.
Period Animation period when clicking the switch.
Fade mode Enables fade mode which fades the background bitmaps when switching from right to left state.

Fade mode and disclose mode

By default, a Switch object uses the disclose mode, which means that when the switch animation is performed or when the thumb is moved, the old state bitmap will disappear while the new state bitmap will be disclosed.

When set to fade mode, while the switch animation is performed or when the thumb is moved, the old state bitmap will fade into the new state bitmap.

Text 📎

A text object is similar to its emWin counterpart, it is an object displaying a text resource or a decimal value at a specified position.

Symbol Example

Properties

Property Description
Text color Text color to be used.
Background color Background color of the object.
Frame color Color of the object used for framed fonts.
Text Text to be displayed.
Decimal mode Enables decimal mode.
Text alignment Text alignment.
Font Font to be used.
Text wrapping Enables text wrapping.
Text rotation Text rotation mode.

Decimal mode

Just as decimal mode for the Edit object, with this setting the Text object is only eligible of holding digits instead of characters. For this mode, a mask of zeros has to be specified which determines how many digits are shown by the object. More details about the usage of the mask is explained under Decimal mode.

Also, when using decimal mode, a range property is added to the object to limit the numbers that can be entered. More on the range property can be found under Range.

Timer 📎

A timer object represents a GUI_TIMER that can be set to a custom time period and optionally restarted.

The timer is an object, although unlike the other objects that represent widgets, the timer object does not have window-specific properties such as position and size. Because of that, it is also not visible on the screen.

However, it is visible in the hierarchical object tree on the left side of the AppWizard.

Properties

Property Description
Timer period Period of timer.
Auto-restart mode When this mode is activated, the timer will be restarted again when it run out using the same time period.

Window 📎

A window works similar to a screen. It is also invisible and serves as parent object for objects. Moving/animating the window also moves its objects. A window can have further child windows. That makes it possible to achieve a hierarchic structure for complex dialogs.

Symbol Example

Properties

Property Description
Horizontal motion Horizontal motion screen/window partner.
Vertical motion Vertical motion screen/window partner.

Interactions 📎

The AppWizard’s interaction window makes it possible to define the application’s behavior on certain actions. Interactions are always assigned to a screen, meaning two different screens have different interactions.

Introduction 📎

This section will explain how to set up interactions and describe the terms.

  Select an emitter

First, an emitter for a signal has to be selected. The emitter specifies the ID of the widget or variable that has to send out a certain signal in order for the interaction’s job to be executed.

  Select the signal

The second step is to select the signal. The signal is the event that has to occur for the job to be executed. This could be e.g. WM_NOTIFICATION_CLICKED, which occurs when a widget was clicked.

For a list of all available signals, see the chapter List of signals.

  Select the job

The third step is to select a job for this interaction. The job specifies a certain action that will be done when the above mentioned signal has occurred. This could for example be SETTEXT to set the text of an Edit object.

For a list of all available jobs, see the chapter List of jobs.

  Select the receiver

The last step is to select is a receiver for the interaction. The receiver specifies the ID of the widget or variable the job will be executed for. For example, if the job is SETTEXT, the receiver has to be an Edit object, whose text will then be set.

  Set up interaction parameters

The final step is to define what the action/job should do with the receiver. This can be done by clicking on the ’Edit’ symbol of an interaction to set up interaction-specific parameters. For example for the job ADDVALUE, the user has to specify the value that will be added to the receiver.

Instead of a permanent value, the user is also able to select a variable. To do this, click the Set variable button and select a variable from the dropdown menu.

In the ’Slot’ field, the user can see and may change the name of the slot routine. The slot routine is the routine, that will be executed for this interaction.

Note

The name of the slot routine must be unique! Otherwise the user code won’t compile.

  Add a condition to the interaction (optional)

Optionally, a condition can be set up for the interaction. This condition determines whether or not the job of the interaction will be executed.

To add a condition to an interaction, click the plus symbol in the condition column. More information about conditions can be read under Conditions.

  Add custom user code to the interaction (optional)

The user may edit/insert C code that will be executed upon this interaction. The code may be added via the “Edit code” dialog or externally via an editor or IDE. More information about slot routines and where they are located can be read in the chapter Slot routines.

Note

The user must not add custom routines to the C files that contain the generated slot routines! More information about how the user can properly add their own code can be read under Custom user code.

List of signals 📎

The following section will provide a list of all available signals the user can choose from for an interaction.

Signal Description
ANIMCOORD Emitted by an object that has been animated.
ANIMEND Emitted when an animation has ended.
ANIMSTART Emitted when an animation has started.
CLICKED When the user clicks on an object.
CREATE Emitted when an object was created.
DELETE Emitted when an object was deleted.
ENTER_PRESSED Emitted when ENTER key is pressed.
GOT_FOCUS When an object gets the focus.
INITDIALOG Emitted right after the application has started.
LOST_FOCUS When an object lost its focus.
MOTION Emitted when a user moves a screen by dragging it.
MOTION_STOPPED When the motion of a Rotary object has stopped.
RELEASED Once a click on an object has been released.
TEXT_CHANGED Emitted when the text of an object has changed.
TIMER Emitted when a given timer has run out.
VALUE_CHANGED If the value of an object has changed.

ANIMCOORD 📎

Description

This signal is emitted by an object that the job ANIMCOORD was executed on. See CASCADECOORD for a detailed example.

Emitting objects

ANIMEND 📎

Description

This signal is emitted by an object after an animation paired to the object has ended.

Emitting objects

ANIMSTART 📎

Description

This signal is emitted by an object after an animation paired to the object has started.

Emitting objects

CLICKED 📎

Description

This signal is emitted when the user clicks on an object.

Emitting objects

CREATE 📎

Description

This signal is emitted right after an object has been created. The Window Manager equivalent is WM_CREATE.

Emitting objects

DELETE 📎

Description

This signal is emitted right after an object has been deleted. The Window Manager equivalent is WM_DELETE.

Emitting objects

ENTER_PRESSED 📎

Description

This signal is emitted when the ENTER key is pressed.

Emitting objects

GOT_FOCUS 📎

Description

This signal is emitted when an object has gotten the focus.

Emitting objects

INITDIALOG 📎

Description

This signal is emitted right after the application has started. The Window Manager equivalent is WM_INIT_DIALOG.

Emitting objects

LOST_FOCUS 📎

Description

This signal is emitted when an object lost its focus.

Emitting objects

MOTION 📎

Description

This signal is emitted when a screen object has been moved by the user dragging it. The Window Manager equivalent is WM_MOTION.

Emitting objects

MOTION_STOPPED 📎

Description

This signal is emitted when the motion of a Rotary object has stopped.

Emitting objects

RELEASED 📎

Description

This signal is emitted once a click on an object has been released.

Emitting objects

TEXT_CHANGED 📎

Description

This signal is emitted when the text of an object has been changed.

Emitting objects

TIMER 📎

Description

This signal is emitted when a given timer has run out. To run a timer, a timer object has to be created and started using the job START.

Emitting objects

VALUE_CHANGED 📎

Description

This signal is emitted when the value of an object has changed.

Emitting objects

Additional information

By default, the custom value option is disabled. This means, the value of the emitting object will be directly passed to the receiver and process the value depending on the selected job. This can be useful for jobs like SETVALUE, but it certainly does not work for all jobs.

When clicking the button Use custom defined value, a custom value can be entered, which will be sent to the receiver.

List of jobs 📎

Job Description
ADDVALUE Adds a given increment to the given object.
ANIMCOORD Animates a coordinate from the current value to the given value.
ANIMVALUE Animates a value from the current value to the given value.
ANIMRANGE Animates a value using the given range.
CASCADECOORD Adds a coordinate animation to an existing animation.
CLEAR Clears the state of the given object.
CLOSESCREEN Closes a given screen to go back to the screen that is behind.
ENABLEPID Enables or disables PID input.
SET Sets the state of the given object.
SETBKCOLOR Sets the background color of the given object.
SETCOLOR Sets the color of the given object.
SETCOORD Sets a coordinate.
SETENABLE Enables the given object.
SETFOCUS Sets focus to a given object.
SETLANG Sets the language index of an object.
SETSIZE Sets the size of the given object.
SETTEXT Sets the text of the given object.
SETVALUE Sets a value.
SETVIS Makes the given object visible.
SETX0 Sets the x0-coordinate of an object.
SETY0 Sets the y0-coordinate of an object.
SETX1 Sets the x1-coordinate of an object.
SETY1 Sets the y1-coordinate of an object.
SHIFTSCREEN Shifts into the given screen using the given method.
SHOWSCREEN Makes the given screen visible.
START Starts a given timer object.
STOP Stops a given timer object.
SWAPSCREEN Swaps the screen to the given screen.
TOGGLE Toggles the state of the given object.
NULL Used for only executing custom user code.

ADDVALUE 📎

Description

Adds a given increment to the given object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value Value to be added.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Value to be added.

ANIMCOORD 📎

Description

Animates an object from its current position to the given position.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value Coordinate the object should be moved to.
Coordinate Axis to the coordinate the object should be moved to.
Ease Animation style to be used. See the chapter ’Animations’ in the emWin manual for reference.
Period Period in ms how long the animation will last.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v End value.
aPara[1].v Index of coordinate. See Dispose indexes for a list of legal values.
aPara[2].pFunc Pointer to ease function.
aPara[3].v Animation period.

Additional information

Similar to emWin animations, additional animation items can be added to that animation. See CASCADECOORD to learn how to do that.

Example

Dispose indexes 📎

Description

These indexes are used by jobs that animate coordinates. Its value describes which axis is used for the animation. Jobs that make use of these indexes are ANIMCOORD, CASCADECOORD and SETCOORD.

Definition

#define DISPOSE_INDEX_X0    0
#define DISPOSE_INDEX_Y0    1
#define DISPOSE_INDEX_X1    2
#define DISPOSE_INDEX_Y1    3

Symbols

Definition Description
DISPOSE_INDEX_X0 Animate towards negative X-axis.
DISPOSE_INDEX_Y0 Animate towards negative Y-axis.
DISPOSE_INDEX_X1 Animate towards positive X-axis.
DISPOSE_INDEX_Y1 Animate towards positive Y-axis.

ANIMVALUE 📎

Description

Animates a value from the current value to the given value.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value Value the object should have when the animation is finished.
Ease Animation style to be used. See the chapter ’Animations’ in the emWin manual for reference.
Period Period in ms how long the animation will last.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v End value.
aPara[1].pFunc Pointer to ease function.
aPara[2].v Animation period.

ANIMRANGE 📎

Description

Animates a value using the given range.

Receiving objects

Interaction parameters of dialog

Parameter Description
Start Start value.
End End value.
Ease Animation style to be used. See the chapter ’Animations’ in the emWin manual for reference.
Period Period in ms how long the animation will last.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Start value.
aPara[1].v End value.
aPara[2].pFunc Pointer to ease function.
aPara[3].v Animation period.

CASCADECOORD 📎

Description

Adds a coordinate animation to an existing animation, similar how animation items can be added to an existing animation in emWin.

This job is paired to the signal APPW_NOTIFICATION_ANIMCOORD, that means it can only be executed when reacting on APPW_NOTIFICATION_ANIMCOORD. Therefore a previously added animation is required. This is done by setting up an interaction job ANIMCOORD.

The emitter specified for this interaction is the object that receives the ANIMCOORD job. In the example below, ID_BOX_01 is the receiver of the job ANIMCOORD, therefore the same box object is emitter of the signal APPW_NOTIFICATION_ANIMCOORD.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value Coordinate the object should be moved to.
Coordinate Axis to the coordinate the object should be moved to.
Trigger ID of the object that starts the animation, or executes the job ANIMCOORD, respectively.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v End value.
aPara[1].v Index of coordinate. See Dispose indexes for a list of legal values.
aPara[2].v Emitter Id of trigger.

Example

CLEAR 📎

Description

Sets the state of the given object to its default state. For example, when executing this job on a Switch object, it will be set to the ’left state’.

Receiving objects

CLOSESCREEN 📎

Description

Closes a given screen. When the screen is closed, the screen that was behind is shown again.

Interaction parameters of dialog

Parameter Description
Screen ID ID of the screen to be closed.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Screen Id.

Additional information

It should be made sure of that there is another screen behind the screen to be deleted, otherwise nothing will be shown. Therefore, the screen opening the screen that performs the CLOSESCREEN job should not be moved out via SHIFTSCREEN. Rather, the other screen should be shown using SHOWSCREEN.

ENABLEPID 📎

Description

Enables, disables or toggles PID input for the application. This job has no receiving object, since it will alter the state of PID input for the entire application.

Interaction parameters of dialog

Parameter Description
Enabled state State of PID input for the job: On, Off or Toggle.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v PID input. 1 = On, 0 = Off.

SET 📎

Description

Sets the state of the given object to its “pressed” state. This means, e.g. when executed on a Button object, it will be in its pressed state and when executed on a Switch object it will be in its ’right state’.

Receiving objects

SETBKCOLOR 📎

Description

Sets the background color of the given object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Background color New background color to be used.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Background color to be used.

SETCOLOR 📎

Description

Sets the color of the given object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Color New color to be used.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Color to be used.

SETCOORD 📎

Description

Sets a coordinate of an object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value New coordinate of the object.
Coordinate Axis of the coordinate to be set.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Value.
aPara[1].v Index of coordinate. See Dispose indexes for a list of legal values.

SETENABLE 📎

Description

Sets the ’enabled’ state of a given object. The receiving object will be either enabled or disabled, depending which ’enabled’ state was specified in the interaction parameters.

Receiving objects

Interaction parameters of dialog

Parameter Description
Enable state New enable state of the object. This can be set to either on, off or toggled.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Enable state. 1 = on, 0 = off.

SETFOCUS 📎

Description

Sets the focus onto a given object.

Receiving objects

SETLANG 📎

Description

Sets the language of the application to the given index.

Interaction parameters of dialog

Parameter Description
Language index Index of the new language to be set. The index is the zero-based column number of the language seen in the text management dialog.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Index of language.

SETSIZE 📎

Description

Sets the size of the given object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value New size value.
Dimension Either X- or Y-axis where the new size value should be applied to.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Value to be used.
aPara[1].v Index of axis.

Additional information

In order for this job to work, the size of the object must be editable. If all coordinates are relative, there is no size to be edited.

SETTEXT 📎

Description

Sets the text of a given object.

Receiving objects

Interaction parameters of dialog

Parameter Description
Text ID of the text to be used.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Text Id. Only if aPara[0].p = NULL.
aPara[0].p Handle. Only if aPara[0].v < 0.

SETVALUE 📎

Description

With this job the value of an object can be set. For most objects, this is a numerical value, except for the Text and Edit objects, where this job sets the corresponding text.

Receiving objects

Interaction parameters of dialog

Parameter Description
Value New value or text to be set to the object.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Value to be set.

Additional information

Instead of a permanent value, the user can also choose a variable.

SETVIS 📎

Description

Sets the visibility of the given object to either on or off.

Receiving objects

Interaction parameters of dialog

Parameter Description
Visibility New visibility of the object. This can be either set to on, off or toggled.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Visibility flag. 1 = on, 0 = off.

SETX0 📎

SETY0 📎

SETX1 📎

SETY1 📎

Description

Sets the corresponding coordinate of an object.

Interaction parameters of dialog

Parameter Description
Value Value to be set.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Value to be set.

SHIFTSCREEN 📎

Description

Shifts into the given screen with an animation that the user defines.

Receiving objects

Interaction parameters of dialog

Parameter Description
Screen ID ID of the screen to be shifted in.
Edge Edge, the old screen should be moved to.
Ease Animation style to be used. See the chapter ’Animations’ in the emWin manual for reference.
Period Period in ms how long the animation will last.
Disclose Not used for this job.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Screen Id.
aPara[1].v Index of edge.
aPara[2].pFunc Pointer to ease function.
aPara[3].v Animation period.
aPara[4].v If 1, disclose mode is used.

Additional information

Note that screens that are not being marked as persistent (see Persistent mode) will be deleted after they have been faded out.

Example

SHOWSCREEN 📎

Description

This job makes the given screen instantly visible. There are no animation options for this job.

Receiving objects

Interaction parameters of dialog

Parameter Description
Screen ID ID of the screen to be shown.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Screen Id.

Additional information

Note that screens that are not being marked as persistent (see Persistent mode) will be deleted after they have been faded out.

START 📎

Description

This job starts a given timer with the set period.

Receiving objects

STOP 📎

Description

This job stops a given timer.

Receiving objects

SWAPSCREEN 📎

Description

Swaps the screen to the given screen without an animation.

Receiving objects

Interaction parameters of dialog

Parameter Description
Screen ID ID of the screen to be shown.

Job-specific parameters passed to slot-routine

Parameter Description
aPara[0].v Screen Id.

TOGGLE 📎

Description

Toggles the ’pressed’ state of the given object. For example, when executing this job on a Switch it will toggle between its left and right state and when executing on a Button, it will toggle between its pressed and unpressed state.

Receiving objects

NULL 📎

Description

Specifying a job to NULL gives the user the option to simply add custom code to the interaction and do nothing else.

Receiving objects

Conditions 📎

Introduction 📎

A condition can be optionally added to an interaction. When a condition is added, the job of the interaction will only be executed, if the term of the condition is true. This allows the user to even add complex logic to the application.

Adding a condition

As hinted before, a condition can only be added to an existing interaction. A condition can be added by clicking the plus symbol in the condition column in the interaction window.

Editing or deleting a condition

A condition can be edited or removed from an interaction by clicking on the pen icon in the condition column in the interaction window.

Terms and operands 📎

A term is made up from operands (such as A, B, C, …) and logical operators.

Comparisons and operands

Each operand is a validation of a comparison between two values. The values to be compared can be:

The operators for comparison are:

Note

For each comparison, an operand is added. The operand is named by a letter of the alphabet, starting with A. This means, the maximum number of operands to be added for a condition is limited to 26.

Term

When the operands have been added, a term can be set up. The term consists of the added operands and logical operators. the logical operators that can be used are:

Furthermore, brackets ( and ) can be used.

The interface allows the user to enter the term using the buttons or manually enter it via the keyboard. For each operand, an individual button is added.

The four left-most buttons are used for moving the cursor, deleting characters and inserting spaces. Buttons with operators or operands that may not be inserted at the current position appear grayed out.

When using the keyboard to enter the term, any operators or operands not currently applicable to the term are ignored.

User Code 📎

The following chapter explains how the user may add custom code to their AppWizard application. It will also be explained how variables and fonts created within AppWizard may be utilized for custom code and how slot routines can be used.

Slot routines 📎

Slot routines are the routines that are executed with the job of an interaction.

Where to find a slot routine

The name of a slot routine can be accessed and changed in the ’Set interaction parameters’ dialog. This routine is located in the file <ScreenID>_Slots.c in the directory \CustomCode\Config\.

Prototype

void <ScrID>__<EmitID>__<SignID>__<RecvID>__<JobID>(APPW_ACTION_ITEM * pAction,
                                                    WM_HWIN            hScreen,
                                                    WM_MESSAGE       * pMsg,
                                                    int              * pResult);
ScrID Id of the screen where the objects are on.
EmitID Id of the emitting object.
SignID Id of the signal.
RecvID Id of the receiving object.
JobID Id of the job.

Parameters

Parameter Description
pAction Pointer to an APPW_ACTION_ITEM structure.
hScreen Handle of the screen.
pMsg Pointer to a WM_MESSAGE structure. pMsg->hWin is the handle to the receiver while pMsg->hWinSrc is the handle to the emitter.
pResult Pointer to an int containing the ’result’ value. This value is explained below.

Additional information

Each interaction has job-specific parameters. The parameters can be accessed via the aPara element of the APPW_ACTION_ITEM structure which is passed to a slot routine.

The parameter of each interaction is explained under Job-specific parameters passed to slot-routine for each job under List of jobs.

The parameter pResult points to an integer which by default is 0. If *pResult = 0, the interaction will be executed by the AppWizard. If *pResult = 1, only the custom code is executed.

APPW_ACTION_ITEM 📎

Description

This structure is passed to an interaction slot routine.

Type definition

typedef struct {
  int              IdSrc;
  int              NCode;
  int              IdDst;
  int              IdJob;
  void          (* pfSlot)(APPW_ACTION_ITEM * pAction,
                           WM_HWIN            hScreen,
                           WM_MESSAGE       * pMsg,
                           int              * pResult);
  APPW_PARA_ITEM   aPara[6];
} APPW_ACTION_ITEM;

Structure members

Member Description
IdSrc Id of the emitter.
NCode Id of the signal.
IdDst Id of the receiver.
IdJob Id of the job.
pfSlot Function pointer to a slot routine. Prototype explained under Slot routines.
aPara Optional job specific parameters. The parameter for each job is explained in the List of jobs.

Custom user code 📎

Slot routines

As mentioned earlier, the user may add their own code to slot routines, either via the “Edit code” dialog in the interaction dialog, or even from any editor or IDE.

Any user code within the generated slot routines stays persistent when for example exporting the AppWizard project another time.

Custom routines

If the user wants to add their own custom routines to the application, they should create a new C file and add it to their project. Any non-generated routines from the user must be added to this file.

AppWizard also adds the automatically generated files Application.c and Application.h to the simulation project. These files are intended to be used for user code.

Screen callback routines 📎

Every screen object has its own generated callback routine. This callback will be called additionally, this means it isn’t a requirement and may be left empty.

Where to find a screen callback

The callback is named after the format cb<ScreenID>, e.g. cbID_SCREEN_00. A screen callback routine can be found in the slot routine file, located in the project directory under \Source\CustomCode.

How to use them

Generally, a screen callback is very similar to an emWin window callback. This means, the callback may react on all types of window messages. To learn more about the different types of window messages, refer to the document UM03001 emWin User Guide & Reference Manual.

Note

However, a screen callback must not have a default case that calls WM_DefaultProc(), as a normal window callback would do.

Example

When reacting on the WM_INIT_DIALOG case, custom windows or widgets can be added to the application upon creation of the screen object. When creating a window/widget as a child to the screen, WM_NOTIFY_PARENT messages obviously get sent to the parent callback.

/*********************************************************************
*
*       cbID_SCREEN_00
*/
void cbID_SCREEN_00(WM_MESSAGE * pMsg) {
  WM_HWIN hWin;
  int     Id, NCode;

  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
    hWin = LISTVIEW_CreateEx(10, 10, 300, 200, 
    pMsg->hWin, WM_CF_SHOW, 0, GUI_ID_LISTVIEW0);
    break;
  case WM_NOTIFY_PARENT:
    Id    = WM_GetId(pMsg->hWinSrc);
    NCode = pMsg->Data.v;
    switch(Id) {
    case GUI_ID_LISTVIEW0:
      switch(NCode) {
      case WM_NOTIFICATION_CLICKED:
        break;
      case WM_NOTIFICATION_RELEASED:
        break;
      case WM_NOTIFICATION_MOVED_OUT:
        break;
      case WM_NOTIFICATION_SCROLL_CHANGED:
        break;
      case WM_NOTIFICATION_SEL_CHANGED:
        break;
      }
      break;
    }
    break;
  }
}

General AppWizard API 📎

Routine Description
APPW_GetText() This function stores the text of an object in the given buffer.
APPW_SetCustCallback() Sets a function pointer for a function which is executed at the end of APPW_Exec().
APPW_GetValue() This function returns the value of an object.
APPW_SetText() This function sets a text to an object.
APPW_SetValue() This function returns the value of an object.

APPW_GetText() 📎

Description

This function stores the text of an object in the given buffer.

Prototype

int APPW_GetText(U16    IdScreen,
                 U16    IdWidget,
                 char * pBuffer,
                 U32    SizeOfBuffer);

Parameters

Parameter Description
IdScreen ID of the parent screen the object belongs to.
IdWidget ID of the object the text should be retrieved from.
pBuffer Pointer to a buffer the text gets stored in.
SizeOfBuffer The size of the buffer pBuffer points to.

Return value

If the return value is 1 no handle to the object was found.

Additional information

This fuction can be used for all objects which can have a text.

Available objects

This function can be used for the following objects:

APPW_GetValue() 📎

Description

This function returns the value of an object.

Prototype

int APPW_GetValue(U16   IdScreen,
                  U16   IdWidget,
                  int * pError);

Parameters

Parameter Description
IdScreen ID of the parent screen the object belongs to.
IdWidget ID of the object the value should be retrieved from.
pError Out pointer being used to indicate that something went wrong.

Return value

The current value of the given object.

Additional information

This fuction can be used for all objects which can have a value. If pError is 1 no handle to the object could be found.

Available objects

This function can be used for the following objects:

APPW_SetCustCallback() 📎

Description

Sets a function pointer for a function which is executed at the end of APPW_Exec().

Prototype

void APPW_SetCustCallback(void ( *pFunc)());

Parameters

Parameter Description
pFunc Pointer to the function which should be called.

Additional information

This function allows the user to set a function pointer which is being called from APPW_Exec(). This allows the user to execute his own code periodically.

Note

It is possible to set further callback and hook functions. Please refer to chapter ’Setting hook functions’ in the emWin user manual UM03001_emWin.pdf

APPW_SetText() 📎

Description

This function sets a text to an object.

Prototype

int APPW_SetText(U16    IdScreen,
                 U16    IdWidget,
                 char * pText);

Parameters

Parameter Description
IdScreen ID of the parent screen the object belongs to.
IdWidget ID of the object the text should be set to.
pText Pointer to the text which should be set.

Return value

If the return value is 1 no handle to the object was found.

Additional information

This fuction can be used for all objects which can have a text.

Available objects

This function can be used for the following objects:

APPW_SetValue() 📎

Description

This function returns the value of an object.

Prototype

int APPW_SetValue(U16 IdScreen,
                  U16 IdWidget,
                  int Value);

Parameters

Parameter Description
IdScreen ID of the parent screen the object belongs to.
IdWidget ID of the object the value should be retrieved from.
Value The value to be set to the object.

Return value

If the return value is 1 no handle to the object was found.

Additional information

This fuction can be used for all objects which can have a value.

Available objects

This function can be used for the following objects:

Fonts 📎

This chapter explains how fonts created within AppWizard can be used in custom user code.

Note

The chapter Font management explains how fonts can be created using AppWizard.

How to use fonts 📎

As already explained earlier in this manual, fonts can be easily created with AppWizard and used as often as the user wants to within a project. The following section will demonstrate, how these fonts can be accessed within custom C code.

Requirements

In order to be able to use a font in custom C code, it must have been created within the project. The font also has to have been referenced by an object on a screen, this means the “Set font” property for an object must be set with the desired font.

How to use a font

The following example will demonstrate, how a font can be used in user code.

The font has to be created using APPW_GetFont(). The ID of the object that references the font has to be stated as second parameter, the ID of the screen the object is on as first parameter.

The function will then fill a GUI_FONT and GUI_XBF_DATA structure. The variables that hold the font data should be located in ROM, so the font data stays persistent.

/*********************************************************************
*
*       APP_cbWin
*/
void APP_cbWin(WM_MESSAGE * pMsg) {
  static GUI_FONT     Font;
  static GUI_XBF_DATA FontData;

  switch (pMsg->MsgId) {
  case WM_CREATE:
    APPW_GetFont(ID_SCREEN_00, ID_TEXT_00, &Font, &FontData);
    break;
  case WM_PAINT:
    GUI_SetFont(&Font);
    GUI_SetTextMode(GUI_TM_TRANS);
    GUI_DispStringAt("Test", 0, 0);
    break;
  default:
    WM_DefaultProc(pMsg);
  }
}

With the callback above, a window can be created. Custom window or widget callbacks should be located in the Application.c file and can then be used in a slot routine.

/*********************************************************************
*
*       cbID_SCREEN_00
*/
void cbID_SCREEN_00(WM_MESSAGE * pMsg) {
  WM_HWIN hWin;

  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
    hWin = WM_CreateWindowAsChild(10, 10, 100, 32, pMsg->hWin,
    WM_CF_SHOW | WM_CF_HASTRANS, APP_cbWin, 0);
    break;
  }
}

Note

To learn more about slot routines and custom user code, refer to Slot routines.

Font API 📎

The following table provides an overview of the routines related to fonts.

Routine Description
APPW_GetFont() Fills a font structure using the addressed setup structure.
APPW_GetFont() 📎

Description

Fills a font structure using the addressed setup structure.

Prototype

int APPW_GetFont(U16            IdScreen,
                 U16            IdWidget,
                 GUI_FONT     * pFont,
                 GUI_XBF_DATA * pData);

Parameters

Parameter Description
IdScreen ID of the screen.
IdWidget ID of the widget.
pFont GUI_FONT structure to be filled.
pData Pointer to a GUI_XBF_DATA structure

Return value

0 Function has succeeded.
1 Function has failed.

Example

See How to use fonts for an example.

Variables 📎

How to use variables 📎

Variables in the AppWizard can be used to store a value. They can be accessed and changed by the application or from outside of the application. The application can react on a change of a variable using interactions.

Creating variables

The user can manage (add and delete) their variables via the variable resource window. This window can be accessed by clicking the lower right quick access button, located in the lower left corner of the AppWizard.

Using variables for interactions

The main purpose for variables is to use them within an interaction, whether as an emitter or as a receiver.

If the variable is an emitter of an interaction, the signal to be reacted on can be a change of that variable. If the variable is instead the receiver of a signal, the job can be to change the value of the variable.

Reading and setting variables from outside of the application

Variables created with the AppWizard can be read from outside of the application via the method APPW_GetVarData() and set from outside of the application via the method APPW_SetVarData().

Variables API 📎

The following table provides an overview of the routines related to variables.

Routine Description
APPW_GetVarData() Returns the value of a variable.
APPW_SetVarData() Sets the value of a variable.
APPW_GetVarData() 📎

Description

Returns the value of a variable.

Prototype

I32 APPW_GetVarData(U16   Id,
                    int * pError);

Parameters

Parameter Description
Id ID of the variable.
pError Pointer to integer used to return error on demand.

Return value

Data value of the specified variable.

APPW_SetVarData() 📎

Description

Sets the value of a variable.

Prototype

int APPW_SetVarData(U16 Id,
                    I32 Data);

Parameters

Parameter Description
Id ID of the variable.
Data Data value to set.

Return value

0 Function has succeeded.
1 Function has failed.

Board support packages (BSPs) 📎

As already mentioned in the chapter Requirements the AppWizard can be used with any ANSI C compiler without any additional software library. To make things easy it comes with a couple of preconfigured BSPs. The following chapter explains in detail which software components need to be included in a BSP, how to create custom BSPs and how to import a BSP into the repository of the AppWizard.

Preconfigured BSPs included in the shipment 📎

The AppWizard comes with some ready to use preconfigured BSPs to be used with SEGGER Embedded Studio, but also with other IDEs. They contain the following:

Why does a BSP include embOS?

embOS is only used to get the CPU initialized and to give emWin a time base. An operating system is basically not a requirement for AppWizard. But from emWin’s standpoint it makes more sense to use the embOS code, instead of rewriting it.

The same applies to the time base for emWin. Instead of using embOS a time base can be achieved with a simple timer interrupt routine.

Why does a BSP include emFile?

A file system is only required if resources should be outsourced to external media, for which we use the emFile system.

Example 📎

The following example will explain how to open and run a project for a supported BSP on target hardware with SEGGER Embedded Studio.

Step 1: Select BSP 📎

Select Project → Edit Options and click Select BSP. Choose any BSP for Embedded Studio and click Select. Confirm the selection with Ok.

After the BSP has been selected, a new folder in the project directory named Target will be created. This folder contains the complete BSP.

Step 2: Generate code 📎

Choose File → Export & Save. By doing this the project file will be saved and the code will be exported to the sub folder Source.

Step 3: Run SEGGER Embedded Studio Project 📎

The BSP contains a project file for SEGGER Embedded Studio. This project file has the suffix .emProject and can be found in the sub folder of the selected board under \Target\BSP.

Open the .emProject file with SEGGER Embedded Studio.

Step 4: Compile and run on target 📎

The SEGGER Embedded Studio projects include all of the AppWizard code automatically, meaning normally no files need to be added or changed. Simply compile the project by pressing F7 and run the project by pressing F5.

Creating custom BSPs 📎

The following example shows how to create an AppWizard BSP. To be able to create a BSP for the AppWizard, we should already have an existing project with the following components:

For the sake of simplicity, we will use an already existing evaluation project for SEGGER Embedded Studio which is available on www.segger.com. This evaluation project is intended to be used for ST’s STM32F429I-Discovery board.

Note

Although the example uses SEGGER Embedded Studio for demonstration, the following steps may also be applied to other IDEs.

Example 📎

The following steps show how to create a reusable BSP for AppWizard based on that project.

Step 1: Create a project with AppWizard 📎

After taking a look to the display configuration file of the above mentioned project, we know the display size and color conversion. Select File → New project and enter the following data:

xSize: 240
ySize: 320
Color conversion: GUICC_M8888I
Name: Does not matter.
BSP: None
Step 2: Create some elements 📎

Fill the project with some elements such as Screen, Box and Button to make sure that there is something visible on the screen.

Step 3: Export & Save 📎

Choose File → Export & Save. After that we should find the following directory structure in the project directory:

Step 4: Copy evaluation software package into project folder 📎

By default a BSP is located in a directory named Target parallel to the directories Resource, Simulation and Source. For now, extract the evaluation software into the folder SeggerEval. The folder name does not matter during this step, but it must not be Target.

Step 5: Exchange libraries 📎

The emWin libraries of the evaluation software are located in the directories \GUI\Lib and \GUI\Inc:

Note

The emWin library of the evaluation package is divided into 2 directories, \GUI\Lib and \GUI\Inc. To be able to work with AppWizard, all files of the library have to be located in a single directory.

Delete the libraries present in the folder \GUI\Lib and remove the folder \GUI\Inc.

AppWizard comes with a couple of precompiled libraries which can be found in the program data directory of the AppWizard, as shown below. The program data directory is C:\ProgramData\Segger\AppWizard_Vxxx_xxx, depending on your AppWizard version.

Since we are using SEGGER Embedded Studio in this example and the MCU is an ARM Cortex-M4 device, we can use the library located in the sub-folder GCCM4. Copy the complete content of the GCCM4 and the Include directory into the folder \GUI\Lib of the evaluation project.

If there is no precompiled library available, which is not very unlikely when working with your own hardware, you should create your own library. The emWin-documentation contains a detailed description how that can be achieved.

Note

The version number of emWin to be used to create the library must not be outdated and at least ≥ the emWin version number of the AppWizard. Otherwise the AppWizard assumes that the library of a project using the BSP which we are creating here, needs to be updated each time we open it.

With any normal project, the step of exchanging the GUI libraries would be finished at this point. But for this example, we are using an evaluation project containing multiple SEGGER products. Because of that, the files Global.h, SEGGER.h and IP_FS.h located in the \GUI\Lib directory need to be deleted. This needs to be done to avoid duplicate include files (in this example).

Step 6: Add file access routines 📎

The next step is to add the file access routines to the project folder. Depending on if you want to use a file system, you have to copy one of the files located in \Sample into the data directory. The directory contains two files:

APPW_X_NoFS.c to be used without a file system.
APPW_X_emFile.c to be used with a file system, in this case emFile.

Because the hardware does not have an SD-card slot, we have to use APPW_X_NoFS.c. For this example, it has to be copied into the folder \GUI\Setup\STM32F429_ST_STM32F429I_Discovery.

Step 7: Add library to project 📎

Now, open the project with SEGGER Embedded Studio. The project file is located under BSP\ST\STM32F429_STM32F429I_Discovery. Replace the content of the Lib folder with the new library and the new header files and remove the Inc folder.

 →

Note

To remove the files, select them and press DEL. To add the new files, drag them from your file explorer into the correct folder in Embedded Studio.

Step 8: Add file access routines to the project 📎

For the next step, add the file access routines to the project. The file is located under GUI\Setup\STM32F429_ST_STM32F429I_Discovery.

 →
Step 9: Adjust include files 📎

Select the project in the Embedded Studio Project Explorer and press ALT + ENTER to open the project settings dialog and choose common options:

Go to the preprocessor options…

…and open the include directory dialog. Change GUI\Inc to GUI\Lib:

$(ProjectDir)/../../../GUI/Inc → $(ProjectDir)/../../../GUI/Lib
Step 10: Add application to project 📎

Now, you should add your application to the project. If not already done, the currently selected program should be moved into the “Excluded” folder.

Right-click on the “Application” folder and select “New Folder”, name the new folder AppWizard.

Add a resource and source directory

Adding a folder for the resource and source files is done the same way.

Step 11: Compile and run on target 📎

Now, your application should successfully compile and run on your target hardware. Don’t forget to call Build → Clean Solution after compiling the project, so the custom BSP won’t include the generated object files.

Note

In order to flash the target using SEGGER Embedded Studio, make sure that the on-board ST-Link debugger has been upgraded to a J-Link, otherwise Embedded Studio will not be able to download the application onto the target. Click here to learn how this can be done.

Importing a custom BSP 📎

To be able to have a custom BSP available in AppWizard’s BSP repository, it has to be imported. To do that, select File → Import BSP…. But before the above created BSP can be included, we have to move it into a different folder and add some further information and an image. The following steps demonstrate how this can be achieved.

Step 1: Create BSP folder 📎

Create a folder somewhere with the exact name which should be shown into the BSP selection combo box. In this example, the folder is named STM32F429I_Disco_ES.

Step 2: Copy project into BSP folder 📎

Take the folder SeggerEval of the above created project and copy it as a sub folder into the BSP directory and rename it to exactly the same name as its parent directory, in this case STM32F429I_Disco_ES\STM32F429I_Disco_ES.

Step 3: Add an image 📎

When selecting a BSP in the AppWizard, an image is shown in the dialog. In this step, such an image is added to the BSP. The filename of the image must be <Name of BSP>.jpg, in this case the filename is STM32F429I_Disco_ES\STM32F429I_Disco_ES.jpg. Since the image shown in the dialog is quite small (80x80 pixels), it is recommended using a small image with dimensions of at least 80x80 pixels.

Step 4: Add information file 📎

Each BSP contains a .BSPInfo file containing the following information:

Take one of the already existing *.BSPInfo files and copy it into the BSP folder. The file name must be of the format <Name of BSP>.BSPInfo. Open the file in a text editor and add the required information:

<!DOCTYPE emWin_AppWizard_BSP_Info>
<BSP>
  xSizeDisplay=240
  ySizeDisplay=320
  ColorConv=GUICC_M8888I
  BoardName=STM32F429I-Discovery
  IDE=Embedded Studio
  MCU=STM32F429IIT6U
  Manufacturer=STMicroelectronics
</BSP>

Save the file as STM32F429I_Disco_ES\STM32F429I_Disco_ES.BSPInfo.

Step 5: Import the BSP into AppWizard 📎

To import the BSP into AppWizard, select File → Import BSP…. Then, select the folder STM32F429I_Disco_ES (the folder that contains the evaluation project, the image and the .BSPInfo file).

This process can take a minute or longer. After that, a new BSP should be available within AppWizard:

Using the emWin source code 📎

If you have purchased a emWin PRO you have access to the emWin source code. This source code can also be used within an AppWizard BSP. Either in a custom one or a BSP which comes along with the AppWizard. In general description on how to add the source code to a BSP should work for both cases.

For easiness this description is done by using the BSP for the STM32F746 Discovery which comes along with the AppWizard.

We assume that you are already familiar in using your IDE. Especially with adding new folder and setting new include paths.

Step 1: Remove the pre-compiled static libraries 📎

At first delete the ’GUI_Lib’ folder from the ’Target’ directory within the AppWizard project.

Step 2: Add the source code to the project directory 📎

Copy the complete ’GUI’ folder from your emWin shipment (found under emWin_ship) into the ’Target’ directory. The ’GUI’ folder contains the complete source code of emWin.

If you are using a BSP coming from SEGGER (either directly from the AppWizard or from our website) you should make sure that the following files in the ’GUI’ directory are not present multiple times within the project. If they are delte those from the ’’GUI’ directory.

Step 3: Add the source code to the project 📎

Within the Embedded Studio project for the STM32F746 Discovery add a new folder and name it ’GUI’. Now add all the subdirectories from the ’GUI’ directory on your hard disk drive to the newly created ’GUI’ folder in your Embedded Studio project. Although, it would be possible to use a different folder structure we strongly recommend to the structure as it is. This will make it easier if you intend to update to a newer emWin version.

Step 4: Set include paths 📎

After adding the source code to the Embedded Studio project you have to set the proper include paths.

Add the include paths to the following directories in the Embedded Studio project.

Glossary 📎

BSP
Board support package.

embOS
Embedded real-time operating system.

emFile
Embedded file system.

emWin
Embedded graphics library.

MCU
Microcontroller unit.

RAM
Random access memory.

ROM
Read-only memory.

SES
SEGGER Embedded Studio.

WYSIWYG
What You See Is What You Get.