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 least 256 KBytes of flash. *1
- At least 130 KBytes of RAM. *2
- At least a 32 bit CPU running at 100 MHz or more. *3
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:
- ISO/IEC/ANSI 9899:1990 (C90) with support for C++ style comments (//)
- ISO/IEC 9899:1999 (C99)
- ISO/IEC 14882:1998 (C++)
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.
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 conjunction 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:
- ’Editor’ window (center/top)
- ’Interactions’ window (center/bottom)
- ’Add objects’ window (left/top)
- ’Hierarchic tree view’ window (left/bottom)
- ’Properties’ window (right)
- Quick access buttons for text, fonts, images and variables at the lower left edge
It consists of the following items:
- File (New project, Close project, Save, Open, Save as, Export & Save, Exit, Recent files)
- Edit (Undo, Redo, Cut, Copy, Paste, Delete, Select all, Preferences)
- Project (Edit options, Play F5, Start Simulation F6)
- Resource (Edit Text, Edit Fonts, Edit Images, Edit Variables)
Edit / Preferences
The preferences dialog has the following options:
- Load last project on start: Enables loading the last used project after starting the application.
- Open properties on default: Opens all object properties by default.
- Show Id numbers: Shows the Window Manager Id next to the AppWizard Id.
- Simulation project to be used: Select which Visual Studio simulation project should be used when pressing F6. If you are using Visual Studio 2010-2013 select the first option. If using a later version select the second option.
- Media path: Path to external media.
- BSP stock: Sets a path, where custom BSPs are located.
- Edit default codepoints…: Editing the default range of code points to be used for new fonts.
- Default bitmap formats: Set the default bitmap format to be used when bitmaps use the ’auto’ format.
Project / Edit options
The project options dialog has the following options:
- Display size x: Horizontal display size.
- Display size y: Vertical display size.
- Color format: Desired color format.
- Selected BSP: Desired BSP for target hardware.
- Show text from SD-card: Option to outsource the texts to external media.
- Enable bi-directional text: Enables support of bi-directional texts.
- Enable Thai support: Enables support of Thai script.
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
- Positioning logic
- Coordinate and size modification
- Object specific area
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.
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.
- NettoOT_16_Normal_EXT_AA4
- NettoOT_24_Normal_EXT_AA4
- NettoOT_32_Normal_EXT_AA4
- Roboto_16_Normal_EXT_AA4
- Roboto_24_Normal_EXT_AA4
- Roboto_32_Normal_EXT_AA4
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:
- Show stock fonts
- Show project specific fonts
The dialog shows the following columns:
- Font family
- Stock font, means that the font is located in font stock
- Project font, means that the font is located in resource folder of the project
- Height in pixels
- Number of references
- Check box to specify SD card management for that font
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:
- 4bpp antialiased
- 2bpp antialiased
- 1bpp
- Framed fonts
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:
- Setting up a list of code point ranges
- Using all code points required to draw the text defined in the application
- Using a custom pattern file which defines the code points to be used
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:
- Image preview
- File name
- Width and height in pixels
- Stock image, means image is located in image stock
- Project image, means image is located in resource folder of the project
- Number of references
- Check box to specify SD card management for that image
The following options exist:
- Show stock images
- Show project specific images
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.
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.
Error correction level