📄 embOS & embOS-MPU User Guide & Reference Manual
📄 emCompress-Embed User Guide & Reference Manual
📄 emCompress-Flex User Guide & Reference Manual
📄 emCompress-ToGo User Guide & Reference Manual
📄 emCrypt User Guide & Reference Manual
📄 emDropbox User Guide & Reference Manual
📄 emFile User Guide & Reference Manual
📄 emNet User Guide & Reference Manual
📄 emSecure-ECDSA User Guide & Reference Manual
📄 emSecure-RSA User Guide & Reference Manual
📄 emSSH User Guide & Reference Manual
📄 emSSL User Guide & Reference Manual
📄 emUSB-Device User Guide & Reference Manual
📄 emUSB-Host User Guide & Reference Manual
📄 emWeb User Guide & Reference Manual
📄 emWin User Guide & Reference Manual
📄 IoT Toolkit User Guide & Reference Manual
📄 SEGGER Assembler User Guide & Reference Manual
📄 SEGGER Floating-point Library User Guide & Reference Manual
📄 SEGGER Linker User Guide & Reference Manual
📄 SEGGER Runtime Library User Guide & Reference Manual
📄 AppWizard User Guide & Reference Manual

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.
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.
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.
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 les