Embedded Wizard Studio: Prototyper window

Embedded Wizard provides an integrated prototyping environment where every individual GUI component or even the entire GUI application can be tested instantly without the necessity to compile and download it to the target system. During the prototyping session the tested application or component is shown in the Prototyper window:

Prototyper window with a running application

Test the currently edited GUI component

When editing a GUI component in the Composer window, you can at any time start the prototyping environment and test the component in the Prototyper window. This is very useful during an incremental development process of the respective component:

To start the Prototyper and load the currently edited component press the key F5

... or select the menu item BuildStart Prototyper.

In fact, activating this command causes the class of the currently edited component being compiled, instantiated and executed.

Test the entire GUI application

You can at any time start the prototyping environment and test the entire GUI application in the Prototyper window. This is very useful, when you want to test how various components of the complete application do play together. It is as if the application were executed in the target system:

To start the Prototyper and load the complete application press the keys CtrlF5

... or select the menu item BuildStart Prototyper with application class.

In fact, activating this command causes the class of the application itself being compiled, instantiated and executed. The actual application class is determined by the attribute ApplicationClass of the profile currently selected in the Profile selection combo box.

What you see is what you get

You can consider the prototyping environment as a kind of virtual machine which is able to emulate all essential characteristics of the particular target system like its respective color format or the resolution of the screen. Accordingly, what you see in the Prototyper window is what you finally get in your target device.

Prototyping environment emulating the color formats RGBA8888, RGBA4444 and Index8

The checkerboard pattern represents the actual screen background. With it you can easily distinguish how transparent or semi-transparent areas of the tested component will in fact be composed with other screen contents lying behind them.

Size of the Prototyper window

The Prototyper window represents the display in your final product. Accordingly, the size of the Prototyper window does correspond to the resolution you have specified in the attribute ScreenSize of the actually selected profile.

Touch screen inputs

The Prototyper reacts to mouse interactions (click and drag) and relays these as touch events to the tested GUI component. In this manner you can verify how the component or application will behave in a target device containing a touch screen.

With Embedded Wizard you can develop multitouch applications. The Prototyper, however, in its current version is able to react and relay single touch events only. In other words, the prototyping is limited to single touch interactions.

The Mosaic framework provides various event handlers you can integrate in your GUI component in order to handle touch events. The event handlers can be used also when you intend to develop a device using in fact a mouse instead a touch screen.

Keyboard inputs

As long as being in foreground the Prototyper window reacts to keyboard interactions and relays these as keyboard events to the tested GUI component. In this manner you can verify how the component or application will behave in a target device containing a keyboard.

The Mosaic framework provides a key press handler you can integrate in your GUI component in order to handle keyboard events.

At its very beginnings, Embedded Wizard was used primarily to design software for TV sets. Due to this history, there is a set of pre-defined Prototyper keyboard shortcuts that are equivalents of typical remote control commands (e.g. channel up/down). All these shortcuts exist for compatibility purpose only and can be completely ignored. Anyway, when you hold the key Ctrl while interacting with the Prototyper an overview of the TV set shortcuts is shown:

Overview of TV set specific Prototyper shortcuts

Debug your application

During an active prototyping session the implementation of the tested component or application can be debugged. In particular you can set breakpoints, causing the prototyper to stop on them, execute code step by step, watch variables, inspect the call stack, and much more.

For more details see Prototyping and debugging.

Track screen updates

During an active prototyping session you can track screen changes. If enabled, the Prototyper highlights every redrawn screen area for a short period. This function can help you to analyze and optimize the screen updates in your GUI application:

Prototyper window with enabled 'Track screen updates' function.

To enable/disable the function select the menu item DebugTrack screen updates before you start a prototyping session.

When the application hangs?

If you can neither control the tested GUI component nor interact with the Embedded Wizard Studio, then certainly the execution of the GUI component has entered an endless loop. In order to obtain back the control, try following:

With the mouse click on the close button in the upper-right corner of the Prototyper window.

Double-click within the Prototyper window.

This should cause the Prototyper to pause with the current code line shown in the Code Editor. Now you can investigate the reason for the endless execution using the integrated Debugger.

Clicking again on the close button of the Prototyper window, will terminate the current prototyping session.

Profile, Language and Styles selection

When a new prototyping session is started, the Protyper uses following settings:

the profile determined by Profile selection combo box,

the language determined by Language selection combo box,

and the styles set determined by Styles selection combo box.

Using the above mentioned combo boxes its is very simple to test individual variants of GUI components or the entire GUI application depending on the selected profile, language or enabled styles.