Build Environments: Getting started with Win32

Embedded Wizard GUI application as Win32 executable.

The following article explains all necessary steps to create an Embedded Wizard UI application as Win32 executable suitable for a Windows platform.

Please follow these instructions carefully and step by step in order to ensure that you will get everything up and running on your target. In case you are not familiar with Embedded Wizard, please read first the chapter basic concepts and the Quick Tour tutorial to understand the principles of Embedded Wizard and the GUI development workflow. Moreover, this article assumes that you are familiar with Windows.

Prerequisites

First, make sure you have all of the following items:

Hardware components

x86 based Windows PC

Software components

Embedded Wizard Studio Free or Embedded Wizard Studio Pro

If you want to use the Free edition of Embedded Wizard Studio please register on our website and download the software.

As a customer, please visit the Embedded Wizard Download Center (login/password required) and download Embedded Wizard Studio Pro.

Embedded Wizard Build Environment for Win32

To evaluate Embedded Wizard on the mentioned target, you can download the suitable Build Environment from the following link:

Win32-BuildEnvironment-V13.01.00.00.zip

As a customer, please visit the Embedded Wizard Download Center (login/password required) and download the latest version of the Build Environment and your licensed Platform Package libraries or source codes.

Optional: Microsoft Visual Studio

Installing Tools and Software

Step 1: Install the latest version of Embedded Wizard Studio.

Step 2: Unpack the provided Embedded Wizard Build Environment for Win32 into a new directory, e.g. C:\Win32.

Exploring the Build Environment

The provided Embedded Wizard Build Environment for Win32 contains everything you need to create, compile and link an Embedded Wizard UI application for Win32 devices. After unpacking, you will find the following subdirectories and files:

\Application - This folder contains a ready-to-use project to compile and link an Embedded Wizard generated UI application. It is used for all provided examples and it can be used to build your own UI applications.

\GeneratedCode - This folder is used to receive the generated code from an Embedded Wizard UI project. The template project is building the UI application out of this folder. You can create your own UI project and generate the code into the subdirectory \GeneratedCode without the need to adapt the project.

\Project - This folder contains the prepared projects for GCC (make) and Microsoft Visual Studio (MSVC).

\Source - This folder contains the Win32 main application and the file ewmain.c. There you will find the initialization of the system and the main loop to drive an Embedded Wizard GUI application. The file ewconfig.h contains general configuration settings for the target system, like memory ranges and display parameter and configuration settings for the Embedded Wizard Graphics Engine and Runtime Environment.

\Examples\<ScreenSize> - These folders contain a set of demo applications prepared for a dedicated screen size of 480x272 pixel, 800x480 pixel and 1280x720 pixel. Each example is stored in a separate folder containing the entire Embedded Wizard UI project. Every project contains the necessary profile settings for the Windows target. Depending on the screen size, the following samples are provided:

\HelloWorld - A very simple project that is useful as starting point and to verify that the entire toolchain, your installation and your board is properly working.

\ColorFormats - This project demonstrates that every UI application can be generated for different color formats: RGBA8888, RGB888, RGBA4444, RGB565, Index8 and LumA44.

\ScreenOrientation - This demo shows, that the orientation of the UI application is independent from the physical orientation of the display.

\DeviceIntegration - This example shows the integration of devices into a UI application and addresses typical questions: How to start a certain action on the target? How to get data from a device?

\GraphicsAccelerator - This application demonstrates the graphics performance of the target by using sets of basic drawing operations that are executed permanently and continuously.

\BezierClock - The sample application BezierClock implements a fancy digital clock and timer application with animated digits. The application uses vector graphics to render dynamically the different digits for clock and timer. The change from one digit to another is handled by moving the vector points to get a smooth transition animation.

\BrickGame - The sample application BrickGame implements a classic "paddle and ball" game. In the game, a couple of brick rows are arranged in the upper part of the screen. A ball travels across the screen, bouncing off the top and side walls of the screen. When a brick is hit, the ball bounces away and the brick is destroyed. The player has a movable paddle to bounce the ball upward, keeping it in play.

\ChartsDemo - This application demonstrates the possibilities and the usage of the chart classes LineChart, BarChart and PieChart. The appearance of each chart diagram can be configured easily by using their corresponding properties. Additionally, this demo shows the usage of an outline box to manage scrollable content.

\ClimateCabinet - The ClimateCabinet demo shows the implementation of a control panel for a climatic exposure test cabinet. The user can define a heating time, a nominal temperature and humidity, a dwell time and the final cooling time.

\Dashboard - The sample application Dashboard shows the implementation of a car dashboard. The application demonstrates the usage of vector graphics created from svg path data and how transitions between two dashboard variants and further UI components can be achieved.

\PaperCutter - This demo shows the implementation of a paper cutting machine, where the user can define the pagination and format of the paper as well as the cutting speed and the amount of papers. The application contains many rect effects and fade-in/fade-out effects to change dynamically the layout of the screen.

\PatientMonitor - This application displays continuously measured data in an overwriting data recorder (such as an oscilloscope). The data graphs of the (simulated) measured values and the dialogs for user settings are presented in a modern, clean medical style. Dialogs are using blur filters to show the content behind them with a glass effect.

\PulseOximeter - The sample application PulseOximeter shows the implementation of a medical device for monitoring a person's pulse frequency and peripheral oxygen saturation. The application demonstrates the usage of vector graphics within graphs and circular gauges.

\SmartThermostat - The SmartThermostat demo application shows the implementation of a fancy, rotatable temperature controller to adjust and display the nominal and actual temperature.

\WashingMachine - This demo shows the implementation of a washing machine with a couple of fancy scrollable list widgets to choose the washing program and parameters. The speciality of this sample application is the magnification effect of the centered list items and the soft fade-in/fade-out effects.

\WaveformGenerator - This WaveformGenerator demo application combines waveforms with different amplitudes and frequencies. The implementation shows the usage of vector graphics to draw a curve based on a list of coordinates.

\PlatformPackage - This folder contains the necessary source codes and/or libraries of the Windows Platform Package: Several Graphics Engines for the different color formats (RGBA8888, RGB888, RGBA4444, RGB565, Index8 and LumA44) and the Runtime Environment (in the subdirectory \RTE).

\TargetSpecific - This folder contains all configuration files and platform specific source codes. The different ew_bsp_xxx files implement the bridge between the Embedded Wizard UI application and the underlying Windows system in order to access the display (via Windows API) and the touch driver.

Creating the UI Examples

For the first bring up of your system, we recommend to use the example 'HelloWorld':

Example 'HelloWorld' within Embedded Wizard Studio.

The following steps are necessary to generate the source code of this sample application:

On your PC, navigate to the directory \Examples\<ScreenSize>\HelloWorld.

Open the project file HelloWorld.ewp with your previously installed Embedded Wizard Studio. The entire project is well documented inline. You can run the UI application within the Prototyper by pressing Ctrl+F5.

To start the code generator, select the menu items BuildBuild this profile - or simply press F8. Embedded Wizard Studio generates now the sources files of the example project into the directory \Application\GeneratedCode.

Compiling, Linking and Executing

The following steps are necessary to build the Embedded Wizard UI sample application as Win32 executable suitable for a Windows platform:

Navigate to the top level of the Build Environment.

Open StartGccBuildEnvironment.bat - as a result, a windows command line window should open. In case there are error messages, please edit the file and double-check the path settings.

Now start building the executable:

make

Finally, you can start the executable

EmbeddedWizard-Win32.exe

This is the resulting application on your Windows system:

Example 'HelloWorld' running as Win32 executable.

All other examples can be created in the same way: Just open the desired example with Embedded Wizard Studio, generate code and rebuild the whole executable.

Creating your own UI Applications

In order to create your own UI project suitable for the Win32 device, you can create a new project and select the Windows Software project template:

As a result you get a new Embedded Wizard project - please adapt the Profile attributes suitable for the Win32 target:

The following profile settings are important:

The attribute PlatformPackage should refer to the Windows Software Platform Package.

The attribute ScreenSize should correspond to the desired application size of your GUI.

The attribute OutputDirectory should refer to the \Application\GeneratedCode directory within your Build Environment. By using this template, it will be very easy to build the UI project for your target.

The attribute CleanOutputDirectories should be set to true to ensure that unused source code within the output directory \Application\GeneratedCode will be deleted.

The attribute PostProcess should refer to \Application\Project\MSVC\MSVC_ew_post_process.cmd if you are working with Microsoft Visual Studio. In case of the GCC toolchain leave it blank

Now you can use the template project in the same manner as it was used for the provided examples to compile and link the executable.

Most of the project settings are taken directly out of the generated code, like the color format or the screen orientation. All other settings can be made directly within the file ewconfig.h, which contains general configuration settings for the target system.

Console output

Debug or trace messages from your Embedded Wizard UI application are monitored directly in the console where you start the executable. In case you start the executable from Windows Explorer, an additional console window will be opened automatically.

It can be used for all trace statements from your Embedded Wizard UI applications or for all debug messages from your C code.

Using Microsoft Visual Studio

If you want to use the Microsoft Visual Studio instead of the GCC toolchain, please follow these instructions:

The subdirectory \Application\Project\MSVC contains a template project that is commonly used for all provided Embedded Wizard examples. All Embedded Wizard examples will store the generated code within the common \Application\GeneratedCode folder.

The generated code of an Embedded Wizard example is imported automatically to the Microsoft Visual Studio.

The following steps are needed to establish this automatic project import:

Open the desired Embedded Wizard example project.

If you are using your own GUI project, select the Profile and set the attribute PostProcess to the file \Application\Project\MSVC\MSVC_ew_post_process.cmd.

After the Embedded Wizard code generation the post process will adapt the MSVC project. All necessary libraries and include paths (depending on the color format and screen rotation) will be set automatically.

Start Microsoft Visual Studio and open the provided project \Application\Project\MSVC\EmbeddedWizard-Win32.sln.

Now you can build, debug and execute the Win32 executable.

In case you generate code of your Embedded Wizard GUI application, while Microsoft Visual Studio is opened, a dialog appears that informs you about the project modification. After confirming to reload, the latest generated code and the suitable Embedded Wizard Platform Package will be used (depending on the color format and the screen orientation selected in the Embedded Wizard Profile).

Release notes

The following section contains the version history of the Build Environment (including Graphics Engine and Runtime Environment) for Win32. These release notes describe only the platform specific aspects - for all general improvements and enhancements please see the Embedded Wizard release notes.

Version 13.00.00.00

The set of examples has been expanded with Patient Monitor Demo.

Using Graphics Engine (GFX) and Runtime Environment (RTE) V13.00.

Version 13.01.00.00

Using Graphics Engine (GFX) and Runtime Environment (RTE) V13.01.

Bug-fix: Crash with Shadow view displayed with rounded corners on target systems configured for screen orientation 90 or 270 degree.

Bug-fix: Crash with Filled Path and Stroked Path views configured to buffer the rasterized image on target systems configured for screen orientation 90 or 270 degree.

Bug-fix: Crash with Filled Path Bitmap and Stroked Path Bitmap on target systems configured for screen orientation 90 or 270 degree.