FDI Future Designs UEZGUI-4088-43WQN uEZ GUI Start Here Guide User Guide
- September 28, 2024
- FDI Future Designs
Table of Contents
- UEZGUI-4088-43WQN uEZ GUI Start Here Guide
- Product Information
- Specifications:
- 1. Hardware Verification
- 2. Software Installation
- Q: Where can I find more information about FDI or their
- define ID_WINDOW
- define ID_TITLE_TEXT
- define ID_STARTHERE_TEXT
- define ID_FDIINFO_TEXT
- define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
- if(UEZ_DEFAULT_LCD == LCD_RES_WVGA)
- define SPACING
- define FONTSIZE
- else
- define SPACING
- define FONTSIZE
- endif
- define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
- define TITLE_TEXT_YPOS
- define STARTHERE_TEXT_XSIZE #define STARTHERE_TEXT_YSIZE #define
- define ID_WINDOW
- define ID_TITLE_TEXT
- define ID_MYBUTTON_BUTTON
- define ID_FDIINFO_TEXT
- define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
- if(UEZ_DEFAULT_LCD == LCD_RES_WVGA)
- define SPACING
- define FONTSIZE
- else
- define SPACING
- define FONTSIZE
- endif
- define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
- define TITLE_TEXT_YPOS
- define FDIINFO_TEXT_XSIZE #define FDIINFO_TEXT_YSIZE #define
- define MYBUTTON_BUTTON_XSIZE #define MYBUTTON_BUTTON_YSIZE #define
- define ID_WINDOW #define ID_TITLE_TEXT #define ID_TEMP_TEXT
- define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
- define TITLE_TEXT_YPOS
- define TEMP_TEXT_XSIZE #define TEMP_TEXT_YSIZE #define TEMP_TEXT_XPOS #define
- include <uEZ.h> #include <uEZTemperature.h> #include <uEZGPIO.h> #include
- define ID_WINDOW #define ID_TITLE_TEXT #define ID_TEMP_TEXT #define
- define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
- define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
- define TITLE_TEXT_YPOS
- define TEMP_TEXT_XSIZE #define TEMP_TEXT_YSIZE #define TEMP_TEXT_XPOS #define
- define BACK_BUTTON_XSIZE #define BACK_BUTTON_YSIZE #define BACK_BUTTON_XPOS
- define BACK_BUTTON_YPOS
- References
- Read User Manual Online (PDF format)
- Download This Manual (PDF format)
UEZGUI-4088-43WQN uEZ GUI Start Here Guide
“`html
Product Information
Specifications:
- Model: UEZGUI-4088-43WQN
- Power Input: 5V USB power output
- Software Compatibility:
- Rowley CrossWorks v4.8
- IAR Embedded Workbench v9.30.1
Product Usage Instructions
1. Hardware Verification
Power the device using the USB power adapter and cable provided
in the kit. Once connected, a screen will appear displaying the
Out-of-Box (OOB) Demo. Explore the demos and test the GUI by
drawing lines on the screen.
2. Software Installation
To install the necessary software:
-
Follow the IAR 30-day evaluation license manual activation
instructions at https://tinyurl.com/zyctkha. -
Activate CrossWorks 30-day evaluation license by following the
instructions at https://tinyurl.com/hlsn9qf.
FAQ
Q: Where can I find more information about FDI or their
products?
A: For more information on FDI or their products, please visit
their official website at https://www.teamfdi.com/.
“`
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
µEZ GUI Start Here Guide
UEZGUI-4088-43WQN
Introduction
At Future Designs, our goal is to make it easy for our customers to get their
projects up and running as quickly as possible. In this guide, you will
develop a simple graphical user interface (GUI) on the µEZ platform to
demonstrate how to use some of the core features of emWin and µEZ. Using this
“Hello World” type of walkthrough as a starting point, we hope to shorten the
learning curve for GUI development. Aside from this document, there are many
additional resources available at https://www.teamfdi.com/. If you ever need
more help, contact us and we will be happy to assist you.
Hardware Used in This Guide: (Included in Kit)
· UEZGUI-4088-43WQN-BA · SEGGER J-Link Lite Probe · FDI J-Link 20-pin to
mini-10 pin adapter model JLINK-ARM-AD · USB Type A to USB Type Mini B Cable
(2x) · Universal AC to 5V USB plug Power Supply Unit
Software Used in This Guide:
(Installation and usage instructions are provided within the guide)
· SEGGER J-Link Software · µEZ Source w/ Project Maker (v2.12 or later) · One
of the following IDEs:
o Rowley CrossWorks v4.8 o IAR Embedded Workbench v9.30.1
Files Used in This Guide:
(Installation and usage instructions are provided within the guide)
· Start Here Project Files (located in the µEZ source download)
Rev 1.3 March 25, 2024
Page 1
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
Contents
1. Hardware Verification………………………………………………………………….3 2. Software
Installation……………………………………………………………………4
A. IDE Installation …………………………………………………………………………………………………… 4 A. J-Link
Installation………………………………………………………………………………………………… 4 B. µEZ
Installation…………………………………………………………………………………………………… 4
3. Connecting the J-Link Debugger to the µEZ GUI for programming ……….5 4.
Developing a Simple GUI Application with emWin ……………………………5
A. emWin Introduction……………………………………………………………………………………………. 5 B. Building and
Running the Initial Project…………………………………………………………………. 6 C. Adding a Button to
the Home Screen ………………………………………………………………….. 11 D. Creating a New Window
……………………………………………………………………………………. 15 E. Adding Callback Functionality
…………………………………………………………………………….. 19 F. Interfacing with the Onboard Temperature
Sensor ………………………………………………. 20 G. Creating a Task
…………………………………………………………………………………………………. 22 H. Adding a Back
Button………………………………………………………………………………………… 24
5. Restoring the Out-of-Box (OOB) Demo (Optional) …………………………..27 6. Next
Steps………………………………………………………………………………..28 7. Website and
Support………………………………………………………………….28
Important Legal Information
Information in this document is provided solely to enable the use of Future
Designs products. FDI assumes no liability whatsoever, including infringement
of any patent or copyright. FDI reserves the right to make changes to these
specifications at any time, without notice. No part of this document may be
reproduced or transmitted in any form or by any means, electronic or
mechanical, for any purpose, without the express written permission of Future
Designs, Inc. (FDI) 996 A Cleaner Way, Huntsville, AL 35805.
For more information on FDI or our products please visit
https://www.teamfdi.com/.
NOTE: The inclusion of vendor software products in this kit does not imply an
endorsement. © 2016 Future Designs, Inc. All rights reserved.
µEZ® is a registered trademark of Future Designs, Inc. Windows is a registered
trademarks of Microsoft. emWin and J-Link are registered trademarks of SEGGER
Microcontroller GmbH & Co. KG. IAR EMBEDDED WORKBENCH is a registered
trademark of I.A.R. Systems AB.
Rev 1.3 March 25, 2024
Page 2
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
1. Hardware Verification
The µEZ GUI kit comes with a pre-installed 4GB or larger SD card that contains
files required for the demo application and slideshow to run. It also contains
user manuals, schematics, and documentation for the product including this
guide. FDI recommends that you visit the documentation tab of the product page
of your µEZ GUI to get the latest documentation.
Figure 1: UEZGUI-
408843WQN
Power is supplied via the USB power adapter and cable provided in the kit.
1. Connect the USB cable to the mini USB Type B connector on the µEZ GUI. 2.
Connect the other end of the USB cable to the provided universal AC power
supply’s 5V USB power output.
NOTE: The µEZ GUI must be powered with the included universal AC to 5V USB
plug power supply or through the alternate power and com port on the side. Do
not try to power the µEZ GUI from a computer’s USB port. The standard PC USB
port does not provide the necessary current to power the µEZ GUI. The JTAG
port and J-Link probe do not power the µEZ GUI.
The following screen will appear once power has been connected to the device:
Figure 2: Out-of-Box
(OOB) Demo
You can now explore the out-of-box demos. Test the GUI by selecting “Draw” and drawing lines on the screen with your finger.
Rev 1.3 March 25, 2024
Page 3
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
2. Software Installation
A. IDE Installation All µEZ GUI projects require a development environment to
compile and debug the projects. µEZ currently officially supports IAR Embedded
Workbench v9.30.1 and Rowley CrossWorks 4.8 on the LPC4088. This guide uses
IAR Embedded Workbench for ARM version 9.30.1 and Rowley Crossworks for ARM
Version 4.8. Download your preferred IDE at the appropriate link provided
below and install according to the instructions provided on their respective
websites.
· IAR Embedded Workbench 9.30.1 30-day free trial: (select Evaluation License
option on install) Windows: https://tinyurl.com/3m93kyfh (.7z)
o IAR 30-day evaluation license manual activation instructions:
https://tinyurl.com/zyctkha
· Rowley CrossWorks for ARM version 4.8 30-day free trial: Windows:
https://tinyurl.com/3yps2nff Mac: https://tinyurl.com/yrrkbrxs Linux x64:
https://tinyurl.com/5n283eyu
o Activating Crossworks 30-day evaluation license instructions:
https://tinyurl.com/hlsn9qf
A. J-Link Installation The µEZ GUI uses a J-Link debugger probe. The SEGGER
version 6.86b driver must be installed. Download and install the software from
the link below:
· SEGGER J-Link Software 6.86b: Windows (x86): https://tinyurl.com/yn7dxxd3
Mac (x64): https://tinyurl.com/ywpcxp62 Linux ARM (x64):
https://tinyurl.com/y3wzrwcm
B. µEZ Installation µEZ is a middleware API library built on FreeRTOS and
emWin. It is created, managed and regularly updated by FDI. Download the
latest µEZ release at the link provided below:
· EZ (v2.12): https://sourceforge.net/projects/uez/
Extract the µEZ 7z, or zip file, to the desired location. This folder contains
the µEZ source library, helpful tools, documentation, project files referenced
in this guide, and the µEZ project maker. The library files will be compiled
in subsequent steps.
Rev 1.3 March 25, 2024
Page 4
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
3. Connecting the J-Link Debugger to the µEZ GUI for programming
Figure 3: J-Link
Hardware
1. Connect the J-Link probe to a PC with an included USB cable. 2. Connect
the J-Link probe to the FDI mini-10 pin JTAG connector (J5) on the bottom
side of the µEZ GUI. The J-Link ribbon cable and FDI adapter for the µEZ GUI
are supplied in the kit. The 10-pin connector can only be connected one way.
3. If not already done, connect the µEZ GUI to the power supply with the
second included USB cable.
Figure 4: J-Link
Connected to µEZ GUI
4. Developing a Simple GUI Application with emWin
A. emWin Introduction emWin (segger.com/emwin.html) is a software library from
SEGGER which provides an efficient GUI library that is processor and LCD
controller independent. emWin enables
Rev 1.3 March 25, 2024
Page 5
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
you to easily add graphics to an application and is included with µEZ. Some of
the features of emWin include:
· Basic drawing functions such as drawing lines, squares, circles and
polygons. · More complex functions such as managing windows, button widgets,
list-view
widgets, edit widgets, etc. · Displaying images. · Support for multiple
displays. · Support for multiple layers and transparency settings. · Control
of GUI by mouse and touch screen. · Rapid development, even without targeted
hardware, due to support for simulating
the GUI in Microsoft Visual Studio.
NXP® Semiconductors has a license with SEGGER that allows any device using an
NXP LPC microcontroller to use the full emWin library without requiring an
additional license. Since the UEZGUI-4088-43WQN-BA utilizes the LPC4088, the
emWin license applies. See here for more information:
https://tinyurl.com/gueckmp, NXP emWin introduction video:
https://tinyurl.com/jrata57
This section of the guide will take a simple screen and develop it into a GUI
to demonstrate a few of the core features of the µEZ and emWin libraries.
B. Building and Running the Initial Project Before digging into the code of
the project, examine the output by building and running the initial project as
outlined in the steps below:
NOTE: The following sections reference the uEZ files from Sourceforge. In the
following instructions, the “uEZ_v2.XX_SourceForge” files were unpackaged to
the C:Workspace folder on a Windows PC.
1. Navigate to the extracted folder from the µEZ download. The beginning
project for the Start Here Guide is located in the µEZ download in the
uEZ_v2.XX_SourceForge/StartHere folder. The finished project is also included
in the uEZ_v2.XX_SourceForge/StartHereEnd folder for you to reference as
needed.
Figure 5: µEZ files from SourceForge
Download (v2.12 shown)
Rev 1.3 March 25, 2024
Page 6
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
2. Locate the “uEZ” folder within the EZ download. This folder includes the
µEZ library files needed by the project to function. The uEZ folder must
always be in the same directory as the project’s main folder, like it is in
the download. Otherwise, EZ projects would not be able to get the library
files they need to compile.
3. Navigate through the uEZ folder to
uEZ_v2.XX_SourceForge/uEZ/Build/Generic/NXP. Then, locate the folder
corresponding to the microcontroller used in the EZ GUI. NOTE: The processor
number is the first set of numbers in the model number of the µEZ GUI. This
UEZGUI-4088-43WQN uses an LPC4088 micro-controller and the corresponding
folder referenced in this step is labeled accordingly.
Figure 6: Navigating to the µEZ Workspace
4. Navigate to FreeRTOSIAR or FreeRTOSCrossworks and open the IAR
(uEZ_NXP_LPC4088_FreeRTOS_IAR.eww) or Crossworks
(uEZ_NXP_LPC4088_FreeRTOS_CrossWorks.hzp) workspace/project file. If you have
multiple versions of IAR or Crossworks installed, make sure that these
projects are opened in the correct installation of the respective IDE.
Figure 7: Opening the µEZ Workspace
NOTE: Note: Both IAR and Crossworks are shown in this guide, but only one
should be used when following this guide. The same version of the IDE must be
used both for building the library and final µEZ GUI executable.
The project should now open up in the IDE.
Rev 1.3 March 25, 2024
Page 7
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
5. After the project opens: For IAR: Select the “Debug” Build from the
workspace menu if not already selected. For Crossworks: Select the “Project
Explorer” sub-window if not already selected.
6. Next building the project: For IAR: Select “Project > Make” or press F7 to
build the µEZ library project. For Crossworks: Select “Build->Build…” or press
F7 to build the µEZ library project.
IAR
Figure 8: Building the µEZ library
project
Crossworks
Figure 9: Build
Finished
7. After the build process is complete, there should be no errors.
IAR
Crossworks
8. Close the IDE.
Rev 1.3 March 25, 2024
Page 8
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
9. Next open up the actual start here project by navigating to the appropriate location: For IAR the workspace file is at StartHereBuilduEZGUI_4088_43WQNIARuEZGUI_StartHere.eww. For Crossworks the project file is at StartHereBuilduEZGUI_4088_43WQNCrossworksuEZGUI_StartHere.hzp.
Commented [AG1]: Need to come back to this
Figure 10: Start Here
Project Locations
10. Verify that the Debug build is selected to match the library project. 11.
If using IAR, proceed to step 12, otherwise proceed to step 15. 12. Right
click the main project name in the workspace and select “Options”
Figure 11: Debug
Settings
13. Select “Debugger” and verify that the “Driver” is set to “J-Link/J-Trace”.
Rev 1.3 March 25, 2024
Page 9
uEZ GUI Start Here Guide
Figure 12: Debug
Settings
UEZGUI-4088-43WQN
14. Click the [OK] button to exit the dialog. Proceed to step 17 15. If using
Crossworks, proceed to step 16, otherwise proceed to step 17. 16. Click
“Target > Connect > SEGGER J-Link” from the drop down menu. This activates
the J-Link probe.
Figure 13: Debug
Settings
17. Build (if needed), download and run the project following the respective
IDE steps. For IAR: Press [Ctrl]+[D] or select “Project > Download and Debug”
from the menu at the top. For Crossworks: Press [F5] or select “Debug > Go”
from the menu at the top.
18. If the debugger has halted on a breakpoint, press [F5] to make the
project run. After the project is running on the µEZ GUI, a simple window is
shown with three text bars.
Figure 14: Initial
project
Rev 1.3 March 25, 2024
Page 10
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
To see where the window is developed, examine the folder structure of the
initial project.
Figure 15: File
Hierarchy
All of the source code used to provide functionality to the project is within
the “SourceApp” directory. The “SourceAppemWin” directory contains the code
that uses emWin to create and manage windows and other graphic designs for the
GUI.
C. Adding a Button to the Home Screen To demonstrate the process for adding
widgets to a window, this section will walk you through the steps to create a
button on the home screen which, once pressed, will open to a new window. To
begin, open the HomeScreen.c file in the emWin directory.
The HomeScreen.c file contains the information that is used to create a window
and any widgets (buttons, etc) that will load with the window. The beginning
of the file contains the #includes and a list of definitions that define the
ID, size, and position of each object within the window including the window
itself.
In the next section, “Local Data”, there are two array variables which define
the window and widgets and associate callback functions to them. The first
array, _iHomeScreenDialog[ ], is an emWin array that holds the ID, position,
and size for each widget. The second array, HomeScreenMapping[ ] is a µEZ
array which holds their text label, color, font, and callback functions.
NOTE: A callback function is a function which is called when an associated
event occurs. For buttons, this event is a touch event. When the button is
pressed (or depressed), the callback function is run to perform the desired
task.
Rev 1.3 March 25, 2024
Page 11
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
The remainder of the file contains the emWin event handler function and a window setup function. Any callback function that is used for widgets will also be placed in this section.
NOTE: Most of the code segments in this guide are formatted to be copied and pasted to assist you in easily applying the code to your project.
1. The “Start Here” text can be replaced with a button by modifying the existing code. The definitions associated with the “Start Here” text are shown below:
/—————————————————————————
- Constants:
————————————————————————–/
define ID_WINDOW
(GUI_ID_USER + 0x00)
define ID_TITLE_TEXT
(GUI_ID_USER + 0x01)
define ID_STARTHERE_TEXT
(GUI_ID_USER + 0x02)
define ID_FDIINFO_TEXT
(GUI_ID_USER + 0x03)
define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
WINDOW_YPOS
(UEZ_LCD_DISPLAY_WIDTH) (UEZ_LCD_DISPLAY_HEIGHT) (0) (0)
if(UEZ_DEFAULT_LCD == LCD_RES_WVGA)
define SPACING
(10)
define FONTSIZE
&FONT_LARGE
else
define SPACING
(5)
define FONTSIZE
&FONT_SMALL
endif
define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
define TITLE_TEXT_YPOS
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) (0)
define STARTHERE_TEXT_XSIZE #define STARTHERE_TEXT_YSIZE #define
STARTHERE_TEXT_XPOS #define STARTHERE_TEXT_YPOS
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) ((WINDOW_YSIZE/10)*4 + 10)
NOTE: Each widget, including the window itself, has a unique ID defined as shown above. Each additional widget increments by 1 and adding a new ID for an additional widget is as simple as setting it to the next value. GUI_ID_USER is equal to 0x800 by default and needs to be used to avoid conflicts with other areas of the program.
Rev 1.3 March 25, 2024
Page 12
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
2. Replace the definitions with the names and values associated with the new button being created:
/—————————————————————————
- Constants:
————————————————————————–/
define ID_WINDOW
(GUI_ID_USER + 0x00)
define ID_TITLE_TEXT
(GUI_ID_USER + 0x01)
define ID_MYBUTTON_BUTTON
(GUI_ID_USER + 0x02)
define ID_FDIINFO_TEXT
(GUI_ID_USER + 0x03)
define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
WINDOW_YPOS
(UEZ_LCD_DISPLAY_WIDTH) (UEZ_LCD_DISPLAY_HEIGHT) (0) (0)
if(UEZ_DEFAULT_LCD == LCD_RES_WVGA)
define SPACING
(10)
define FONTSIZE
&FONT_LARGE
else
define SPACING
(5)
define FONTSIZE
&FONT_SMALL
endif
define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
define TITLE_TEXT_YPOS
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) (0)
define FDIINFO_TEXT_XSIZE #define FDIINFO_TEXT_YSIZE #define
FDIINFO_TEXT_XPOS #define FDIINFO_TEXT_YPOS
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) ((WINDOW_YSIZE/10)*9 + 0)
define MYBUTTON_BUTTON_XSIZE #define MYBUTTON_BUTTON_YSIZE #define
MYBUTTON_BUTTON_XPOS #define MYBUTTON_BUTTON_YPOS
(WINDOW_XSIZE/3 + 20) ((WINDOW_YSIZE/5)) (WINDOW_XSIZE/3 – 10) ((WINDOW_YSIZE/10)*4)
Rev 1.3 March 25, 2024
Page 13
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
3. The two arrays under the section header “Local Data” still contain the information from the “Start Here” text. Each widget is represented in one of the sections within each array. Identify where the “Start Here” text is.
/————————————————————————— Local Data: —————————————————————————
*/ /* Structure to hold all of the widgets used in this dialog/ static const GUI_WIDGET_CREATE_INFO _iHomeScreenDialog[] = {
//Function, Name, ID, XP, YP, XS, YS { WINDOW_CreateIndirect, “”, ID_WINDOW,
WINDOW_XPOS, WINDOW_YPOS,
WINDOW_XSIZE, WINDOW_YSIZE, 0, 0, 0}, { TEXT_CreateIndirect, “”,
ID_TITLE_TEXT, TITLE_TEXT_XPOS,
TITLE_TEXT_YPOS, TITLE_TEXT_XSIZE, TITLE_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, { TEXT_CreateIndirect, “”, ID_STARTHERE_TEXT,
STARTHERE_TEXT_XPOS, STARTHERE_TEXT_YPOS, STARTHERE_TEXT_XSIZE,
STARTHERE_TEXT_YSIZE, TEXT_CF_HCENTER| TEXT_CF_VCENTER, 0, 0}, {
TEXT_CreateIndirect, “”, ID_FDIINFO_TEXT, FDIINFO_TEXT_XPOS,
FDIINFO_TEXT_YPOS, FDIINFO_TEXT_XSIZE, FDIINFO_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, };
/* Generic Mapping of Screen Layout/
static T_LAFMapping HomeScreenMapping[] = {
{ ID_WINDOW, “”, GUI_BLACK, GUI_WHITE, &FONT_SMALL, LAFSetupWindow, 0},
{ ID_TITLE_TEXT, “Welcome To uEZ GUI!”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText, 0},
{ ID_STARTHERE_TEXT, “”START HERE””, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText, 0},
{ ID_FDIINFO_TEXT,
“Future Designs, Inc. 2016
www.TeamFDI.com”,
GUI_BLACK, GUI_WHITE, FONTSIZE, LAFSetupText, 0},
{0},
};
4. Replace the “Start Here” text field’s information with the following
button information:
/————————————————————————— Local Data: —————————————————————————
*/ /* Structure to hold all of the widgets used in this dialog/ static const GUI_WIDGET_CREATE_INFO _iHomeScreenDialog[] = {
//Function, Name, ID, XP, YP, XS, YS { WINDOW_CreateIndirect, “”, ID_WINDOW,
WINDOW_XPOS, WINDOW_YPOS,
WINDOW_XSIZE, WINDOW_YSIZE, 0, 0, 0}, { TEXT_CreateIndirect, “”,
ID_TITLE_TEXT, TITLE_TEXT_XPOS,
TITLE_TEXT_YPOS, TITLE_TEXT_XSIZE, TITLE_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, { BUTTON_CreateIndirect, “”, ID_MYBUTTON_BUTTON,
MYBUTTON_BUTTON_XPOS, MYBUTTON_BUTTON_YPOS, MYBUTTON_BUTTON_XSIZE,
MYBUTTON_BUTTON_YSIZE, TEXT_CF_HCENTER| TEXT_CF_VCENTER, 0, 0}, {
TEXT_CreateIndirect, “”, ID_FDIINFO_TEXT, FDIINFO_TEXT_XPOS,
FDIINFO_TEXT_YPOS, FDIINFO_TEXT_XSIZE, FDIINFO_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, };
Rev 1.3 March 25, 2024
Page 14
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
/* Generic Mapping of Screen Layout/
static T_LAFMapping HomeScreenMapping[] = {
{ ID_WINDOW, “”, GUI_BLACK, GUI_WHITE, &FONT_SMALL, LAFSetupWindow, 0},
{ ID_TITLE_TEXT, “My Main Screen”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText, 0},
{ ID_MYBUTTON_BUTTON, “Temperature”, GUI_GRAY, GUI_BLACK, &FONT_LARGE,
LAFSetupButton, 0},
{ ID_FDIINFO_TEXT,
“Future Designs, Inc. 2016
www.TeamFDI.com”,
GUI_BLACK, GUI_WHITE, FONTSIZE, LAFSetupText, 0},
{0},
};
5. Build, download, debug, and run the updated project to display the created button. For IAR: Press [Ctrl]+[D]. For Crossworks: Press [F5]. The button does not do anything yet because it lacks a callback function, but this will be added later once a second window has been created for the button to switch to.
Figure 16: Button Added
D. Creating a New Window In order to have the button open a new window, a new
window file similar to the HomeScreen.c file needs to be created. Since each
window requires the same general structure, copy the existing HomeScreen.c
file, instead of creating a new file from scratch.
1. Right click the HomeScreen.c file For IAR: Select “Open Containing
Folder…”. For Crossworks: Select “Select in File Explorer”.
2. Copy the HomeScreen.c file located in the emWin directory and rename it
SecondScreen.c.
3. Back in the IDE, right click the emWin folder. For IAR: Select “Add > Add
Files…”. For Crossworks: Select “Add Existing File…”.
4. In the browse files dialog that appears, select SecondScreen.c and click
Open. 5. Open the new file by double clicking it in the IDE workspace or
project explorer. 6. Rename all instances of “HomeScreen” to “SecondScreen”
(only in that file).
Rev 1.3 March 25, 2024
Page 15
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
NOTE: To simplify this process, just press Ctrl+H to open the Find and Replace
dialog. Insert “HomeScreen” in the Find what field and “SecondScreen” in the
Replace with field. Select Match case and make sure Match whole word is
unselected. Click Replace All and the entire document will be updated.
7. Delete all the widget definitions that were specific to the home screen.
Rev 1.3 March 25, 2024
Page 16
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
8. The two arrays that hold the information for the various widgets on a window are shown below. Delete the lines highlighted in red that are specific to the first window. The only remaining values within each of these array variables define the window’s properties and title text that will be used by emWin to setup the window.
Rev 1.3 March 25, 2024
Page 17
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
9. This file now contains the minimum required information to setup a blank window. The final step to creating the window is to update the WindowManager.c file. Open the file and update the WindowManager_Create_All_Active _Windows function as shown below:
You also need to add a #define identifier for SECOND_SCREEN to the top of the WindowManager.h file as shown below if not already present:
Rev 1.3 March 25, 2024
Page 18
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
E. Adding Callback Functionality Now that the second screen has been created,
return to HomeScreen.c and add a callback function to the previously created
button. Once this callback function is created, the button will switch to the
newly created second window when it is pressed.
1. Add the name of the callback function into the first widget definition
matrix. (the “Temperature” button) You can choose any name to give the
callback function. In this example we used (TBool ()(WM_MESSAGE , TInt32,
TInt32)) IHandleSecondScreen to make the function name easily understandable.
2. Declare the callback function’s prototype between the “Global Data” and
“Local Data” sections of the HomeScreen.c file. In addition add the
“G_WhichWindow” variable in the “Global Data” section.
/————————————————————————— Global Data: ————————————————————————–/
static TBool G_Active = EFalse; // Active Flag, tell the dialog when it
receives messages that the screen is in the foreground TInt32 G_WhichWindow;
// Variable to hold the ID of the active window
/————————————————————————- Function Prototypes:
————————————————————————-/
static TBool IHandleSecondScreen(WM_MESSAGE pMsg, int aNCode, int aID);
/————————————————————————— Local Data: ————————————————————————–/
3. Create the callback function below the “Local Data” section. This function
takes a message from the event handler and switches windows when the button is
pressed.
Rev 1.3 March 25, 2024
Page 19
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
/————————————————————————-
- Routine: IHandleSecondScreen
————————————————————————-
-
Description:
Change to the second screen when the temperature button is pressed.
————————————————————————-/
static TBool IHandleSecondScreen(WM_MESSAGE * pMsg, int aNCode, int aID)
{
if (aNCode == WM_NOTIFICATION_RELEASED) {
WindowManager_Show_Window(SECOND_SCREEN);
}
return EFalse;
}
4. Use the appropriate steps to Build, download, debug, and run the updated
project to test the functionality. Since the second window is blank, pressing
the button will display a black screen.
F. Interfacing with the Onboard Temperature Sensor In the following steps of
this guide we will demonstrate how to interface with the uEZ GUI hardware
using the on-board temperature sensor and how to update the temperature on the
screen. We will start by returning to the SecondScreen.c file in the IDE, then
creating two new text fields. One text field will be a title for the
temperature reading, and the other will show the onboard temperature sensor
value. Finally, we will add a back button to return to the home screen.
1. First, open SecondScreen.c to add the new text fields and give the
temperature text an update function.
2. Define a new ID for the Temperature Text.
define ID_WINDOW #define ID_TITLE_TEXT #define ID_TEMP_TEXT
(GUI_ID_USER + 0x00) (GUI_ID_USER + 0x01) (GUI_ID_USER + 0x02)
3. Define the temperature fields’ position and size.
define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
define TITLE_TEXT_YPOS
define TEMP_TEXT_XSIZE #define TEMP_TEXT_YSIZE #define TEMP_TEXT_XPOS #define
TEMP_TEXT_YPOS
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) (0)
(WINDOW_XSIZE/3) ((WINDOW_YSIZE/5)) (WINDOW_XSIZE/3) ((WINDOW_YSIZE/10)*4)
NOTE: We use WINDOW_XSIZE and WINDOW_YSIZE to size and place all GUI elements relative to the screen, so it is easy to change to a different LCD screen resolution without need to re-write the element placement code.
Rev 1.3 March 25, 2024
Page 20
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
NOTE: The µEZ GUI screen coordinates are defined such that the coordinates
(0,0) are
located at the upper left corner of the screen.
4. Add the temperature widget to each of the “Local Data” arrays. This text
field will not need a callback function. Instead, the temperature update
function will be
called periodically by its own task which will be created later. Also, rename
the title
text to display “Temperature Screen”.
/————————————————————————— Local Data: —————————————————————————
*/ /* Structure to hold all of the widgets used in this dialog/ static const GUI_WIDGET_CREATE_INFO _iSecondScreenDialog[] = {
//Function, Name, ID, XP, YP, XS, YS { WINDOW_CreateIndirect, “”, ID_WINDOW,
WINDOW_XPOS, WINDOW_YPOS,
WINDOW_XSIZE, WINDOW_YSIZE, 0, 0, 0}, { TEXT_CreateIndirect, “”,
ID_TITLE_TEXT, TITLE_TEXT_XPOS,
TITLE_TEXT_YPOS, TITLE_TEXT_XSIZE, TITLE_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, { TEXT_CreateIndirect, “”, ID_TEMP_TEXT,
TEMP_TEXT_XPOS, TEMP_TEXT_YPOS, TEMP_TEXT_XSIZE, TEMP_TEXT_YSIZE,
TEXT_CF_HCENTER| TEXT_CF_VCENTER, 0, 0}, };
/* Generic Mapping of Screen Layout/ static T_LAFMapping
SecondScreenMapping[] = {
{ ID_WINDOW, “”, GUI_BLACK, GUI_WHITE, &FONT_SMALL, LAFSetupWindow, 0}, {
ID_TITLE_TEXT, “Temperature Screen”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText, 0}, { ID_TEMP_TEXT, “Temp”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText,
0}, {0}, };
5. Add the function for updating the temperature. This function is a wrapper that calls the emWin function to change the text value of the text widget. It updates the text to whatever character array is passed to it through the “myString” argument.
/————————————————————————-
- Routine: UpdateTemp
————————————————————————-
-
Description:
Update the temperature text.
————————————————————————-/
void UpdateTemp(char *myString)
{
TEXT_SetText(WM_GetDialogItem(G_WhichWindow, ID_TEMP_TEXT),
(const char*)myString);
}
6. Add the line shown below to the beginning of the _SecondScreenDialog, to update the ID of the active window.
static void _SecondScreenDialog(WM_MESSAGE *pMsg) {
int Id, NCode; G_WhichWindow = pMsg->hWin;
Rev 1.3 March 25, 2024
Page 21
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
G. Creating a Task The next set of steps will describe the process for setting
up a new task to monitor the data provided by the onboard I2C digital
temperature sensor. Creating new tasks allows multiple continuous processes to
operate “simultaneously” by taking advantage of FreeRTOS’ ability to simulate
threading without the need for complex hardware. In effect, tasks are
equivalent to threads. It is important that a small delay is introduced into
the task’s loop to avoid bogging down the processor. Doing this allows the
other tasks to take priority during the delayed time and doesn’t use
unnecessary processing. The following flow diagram describes the task as it
will be designed.
Figure 17: Temp Loop Task Flow
To save time, the thread files MyTask.c and MyTask.h are included with the Start Here SourceApp directory. In the next steps we will add them into the App directory of the project as done before with the SecondScreen.c. Shown below is an excerpt of the temperature loop task code from MyTask.c
Rev 1.3 March 25, 2024
Page 22
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
include <uEZ.h> #include <uEZTemperature.h> #include <uEZGPIO.h> #include
Rev 1.3 March 25, 2024
Page 23
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
5. Use the appropriate steps to Build, download, debug, and run the updated
project to verify that there are no errors. The temperature on the second
screen should display an accurate reading.
Figure 18: Second Screen
A heartbeat task that demonstrates GPIO port functionality using the EZ GUI’s
onboard LED is also included in the project’s MyTask.c file. It may be
implemented using the same instructions provided for the temperature task by
calling UEZTaskCreate.
H. Adding a Back Button In the following steps, we will add a back button to
the second screen by defining the ID, size, and position inside
SecondScreen.c. Then, update the widget matrices and add a callback function
that will switch back to the home screen.
1. Open SecondScreen.c. 2. Define the new button widget’s ID and properties.
Rev 1.3 March 25, 2024
Page 24
uEZ GUI Start Here Guide
define ID_WINDOW #define ID_TITLE_TEXT #define ID_TEMP_TEXT #define
ID_BACK_BUTTON
define WINDOW_XSIZE #define WINDOW_YSIZE #define WINDOW_XPOS #define
WINDOW_YPOS
define TITLE_TEXT_XSIZE #define TITLE_TEXT_YSIZE #define TITLE_TEXT_XPOS
define TITLE_TEXT_YPOS
define TEMP_TEXT_XSIZE #define TEMP_TEXT_YSIZE #define TEMP_TEXT_XPOS #define
TEMP_TEXT_YPOS
define BACK_BUTTON_XSIZE #define BACK_BUTTON_YSIZE #define BACK_BUTTON_XPOS
define BACK_BUTTON_YPOS
UEZGUI-4088-43WQN
(GUI_ID_USER + 0x00) (GUI_ID_USER + 0x01) (GUI_ID_USER + 0x02) (GUI_ID_USER + 0x03)
// ID
(UEZ_LCD_DISPLAY_WIDTH) (UEZ_LCD_DISPLAY_HEIGHT) (0) (0)
(WINDOW_XSIZE) ((WINDOW_YSIZE/10)) (0) (0)
(WINDOW_XSIZE/3) ((WINDOW_YSIZE/5)) (WINDOW_XSIZE/3) ((WINDOW_YSIZE/10)*4)
(WINDOW_XSIZE/5) // Properties ((WINDOW_YSIZE/6)) (0) ((WINDOW_YSIZE/6)*5)
Rev 1.3 March 25, 2024
Page 25
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
3. Add a line in both of the local data arrays for the new back button.
/————————————————————————— Local Data: —————————————————————————*/
/* Structure to hold all of the widgets used in this dialog/ static const
GUI_WIDGET_CREATE_INFO _iSecondScreenDialog[] = {
//Function, Name, ID, XP, YP, XS, YS { WINDOW_CreateIndirect, “”, ID_WINDOW,
WINDOW_XPOS, WINDOW_YPOS,
WINDOW_XSIZE, WINDOW_YSIZE, 0, 0, 0}, { TEXT_CreateIndirect, “”,
ID_TITLE_TEXT, TITLE_TEXT_XPOS,
TITLE_TEXT_YPOS, TITLE_TEXT_XSIZE, TITLE_TEXT_YSIZE, TEXT_CF_HCENTER|
TEXT_CF_VCENTER, 0, 0}, { TEXT_CreateIndirect, “”, ID_TEMP_TEXT,
TEMP_TEXT_XPOS, TEMP_TEXT_YPOS, TEMP_TEXT_XSIZE, TEMP_TEXT_YSIZE,
TEXT_CF_HCENTER| TEXT_CF_VCENTER, 0, 0}, { BUTTON_CreateIndirect, “”,
ID_BACK_BUTTON, BACK_BUTTON_XPOS, BACK_BUTTON_YPOS, BACK_BUTTON_XSIZE,
BACK_BUTTON_YSIZE, TEXT_CF_HCENTER| TEXT_CF_VCENTER, 0, 0}, };
/* Generic Mapping of Screen Layout/ static T_LAFMapping
SecondScreenMapping[] = {
{ ID_WINDOW, “”, GUI_BLACK, GUI_WHITE, &FONT_SMALL, LAFSetupWindow, 0}, {
ID_TITLE_TEXT, “Temperature Screen”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText, 0}, { ID_TEMP_TEXT, “Temp”, GUI_BLACK, GUI_WHITE, &FONT_LARGE,
LAFSetupText,
0}, { ID_BACK_BUTTON, “Back”, GUI_GRAY, GUI_BLACK, &FONT_LARGE,
LAFSetupButton, (TBool ()(WM_MESSAGE , int, int)) IHandleBackButton}, {0},
};
4. Create the callback function for switching back to the home screen by adding the associated handling function to the file below the local data arryas.
/————————————————————————-
- Routine: IHandleBackButton
————————————————————————-
-
Description:
Change to the home screen when the back button is pressed.
————————————————————————-/
static TBool IHandleBackButton(WM_MESSAGE * pMsg, int aNCode, int aID)
{
if (aNCode == WM_NOTIFICATION_RELEASED) {
WindowManager_Show_Window(HOME_SCREEN);
}
return EFalse;
}
5. Add the function prototype after the “Global Data” section at the top of
the file.
/————————————————————————- Function Prototypes:
————————————————————————-/
static TBool IHandleBackButton(WM_MESSAGE pMsg, int aNCode, int aID);
6. Use the appropriate steps to Build, download, debug, and run the updated project to test the new functionality.
Rev 1.3 March 25, 2024
Page 26
uEZ GUI Start Here Guide
Figure 19: Final
Screen
UEZGUI-4088-43WQN
Congratulations! This concludes the walkthrough for building a simple GUI!
Professional looking designs with complex functionality can be designed using
advanced features provided in the emWin and µEZ libraries. Documentation and
support for learning these features is available through Future Designs, Inc.
for emWin and µEZ libraries.
The following optional section, provides instructions for how to restore the
factory demo to the µEZ GUI if desired.
5. Restoring the Out-of-Box (OOB) Demo (Optional)
1. Remove the SD card from the µEZ GUI. 2. Insert the µEZ GUI’s SD card into
the PC (depending on your PC, an SD card reader or
adapter may be required). 3. In the root directory of the SD card, the folder
titled “OOB Demo” contains the flash
binary and a J-Link script that will flash the original out-of-box to the
connected µEZ GUI.
Figure 20: OOB Demo
Directory
Figure 21: OOB Demo
Files
4. Connect the PC to the µEZ GUI via the J-Link debugger probe and double- click the “Install OOB.jlink” script. This reinstalls the OOB demo onto the µEZ GUI.
Rev 1.3 March 25, 2024
Page 27
uEZ GUI Start Here Guide
UEZGUI-4088-43WQN
6. Next Steps
Additional examples can be found on the https://www.teamfdi.com/ website
including but not limited to the following application notes:
· Create & Compile a Project with µEZ Project Maker: …………………………………………….
https://tinyurl.com/hopv57u · RS-232 Serial Communications:
……………………………………………………………………………. https://tinyurl.com/j24l5ss · TTL UART Serial
Communications: ………………………………………………………………………..https://tinyurl.com/zrc7gp2 ·
Video Conversion Guide:
………………………………………………………………………………………https://tinyurl.com/jxthcvv
FDI also provides documentation for using the demo bootloader for playing
videos and slideshows as well as running other applications from the menu.
· Slideshow Creation Guide: ………………………………………………………………………………….
https://tinyurl.com/zlu9ood · Bootloader User’s Manual:
………………………………………………………………………………… https://tinyurl.com/z6lw2fd · JTAG Programming
µEZ GUI: ………………………………………………………………………………https://tinyurl.com/h9dnu96
7. Website and Support
Documentation:
· µEZ Library Online Documentation………………………………………………..
https://www.teamfdi.com/uez/docs/index.html · emWin
Documentation…………………………………………………………………………….. https://www.segger.com/emWin.html
· emWin 5.30 user’s manual …………………………………………………………………………………………
https://tinyurl.com/go4lj4j
Support & Downloads:
· FDI Support Home Page ………………………………………………………………………………..
https://www.TeamFDI.com/support · FDI Forums
………………………………………………………………………………………………………https://www.teamfdi.com/forum · emWin
FAQs ……………………………………………………………………………………. https://www.segger.com/emWin-faqs.html
· µEZGUI-4088-43WQN
……………………………………………………………………………………………….https://tinyurl.com/hloa98z · µEZ Source
w/ Project Maker (v2.12 or later)………………………………………..
https://sourceforge.net/projects/uez/files/ · Start Here Guide
………………………………………………………………………………………… https://www.teamfdi.com/StartHere
Contact Information:
Future Designs, Inc.
996 A Cleaner Way SW Huntsville, AL 35805 Phone:
256-883-1240 Fax:
256-883-1241 Email: Sales@TeamFDI.com
https://www.TeamFDI.com
Rev 1.3 March 25, 2024
Page 28
References
- emWin
- Home - FDI - Future Designs Inc.
- uEZ download | SourceForge.net
- uEZ - Browse Files at SourceForge.net
- emWin
- Home - FDI - Future Designs Inc.
- Home - FDI - Future Designs Inc.
- Index - FDI Forums
- Support - FDI - Future Designs Inc.
- uEZ