PART I Working with HMIWorks. 6

1. Introduction.. 7

1.1. What HMIWorks Does. 8

1.2. What This Manual Include. 9

1.3. What ICP DAS Supports. 11

2. Getting Started.. 12

2.1. Set Up the TouchPAD.. 13

2.2. Install HMIWorks. 14

3. Introduction to Workspace of HMIWorks. 16

3.1. Overviews of the Workspace of HMIWorks. 17

3.2. Descriptions of Each Part of the Workspace. 18

4. Your First Program... 23

4.1. Workflow of HMIWorks. 24

4.2. Your First Program – an Example. 25

PART II Basic Topics 29


PART II Basic Topics. 29

5. Properties of a Frame.. 30

5.1. How to Access Properties of a Frame. 31

5.2. Properties of a Frame. 32

6. Drawing Shapes. 38

6.1. Rectangle. 39

6.2. Ellipse. 42

6.3. Text. 45

6.4. Picture. 49

6.5. Line. 52

7. Using Widgets. 54

7.1. Text PushButton.. 55

7.2. Slider. 61

7.3. BitButton.. 66

7.4. HotSpot. 70

7.5. CheckBox. 74

7.6. RadioGroup. 79

7.7. Label. 85

8. Using System Components. 89

8.1. Timer. 90

8.2. PaintBox. 93

8.3. ObjectList. 96

9. Functions Which Assist Designing.. 101

9.1. Starting Design, File Menu. 102

9.2. Managing Project,Project Menu. 103

9.3. Cascading and Grouping, Arrange Menu. 104

9.4. Rotating and Flipping, Edit Menu. 108

9.5. Gridding and Viewing, View Menu. 111

9.6. Frame Managing and Aligning,Layout Menu. 113

9.7. Library Management, Popup Menu. 117

10. Running and Debugging.. 120

10.1. Setup the TouchPAD.. 121

10.2. Running and Debugging. 125

PART III Advanced Topics 126


PART I Working with HMIWorks. 6

1. Introduction.. 7

1.1. What HMIWorks Does. 8

1.2. What This Manual Include. 9

1.3. What ICP DAS Supports. 11

2. Getting Started.. 12

2.1. Set Up the TouchPAD.. 13

2.2. Install HMIWorks. 14

3. Introduction to Workspace of HMIWorks. 16

3.1. Overviews of the Workspace of HMIWorks. 17

3.2. Descriptions of Each Part of the Workspace. 18

4. Your First Program... 23

4.1. Workflow of HMIWorks. 24

4.2. Your First Program – an Example. 25

PART II Basic Topics. 29

5. Properties of a Frame.. 30

5.1. How to Access Properties of a Frame. 31

5.2. Properties of a Frame. 32

6. Drawing Shapes. 38

6.1. Rectangle. 39

6.2. Ellipse. 42

6.3. Text. 45

6.4. Picture. 49

6.5. Line. 52

7. Using Widgets. 54

7.1. Text PushButton.. 55

7.2. Slider. 61

7.3. BitButton.. 66

7.4. HotSpot. 70

7.5. CheckBox. 74

7.6. RadioGroup. 79

7.7. Label. 85

8. Using System Components. 89

8.1. Timer. 90

8.2. PaintBox. 93

8.3. ObjectList. 96

9. Functions Which Assist Designing.. 101

9.1. Starting Design, File Menu. 102

9.2. Managing Project,Project Menu. 103

9.3. Cascading and Grouping, Arrange Menu. 104

9.4. Rotating and Flipping, Edit Menu. 108

9.5. Gridding and Viewing, View Menu. 111

9.6. Frame Managing and Aligning,Layout Menu. 113

9.7. Library Management, Popup Menu. 117

10. Running and Debugging.. 120

10.1. Setup the TouchPAD.. 121

10.2. Running and Debugging. 125

PART III Advanced Topics. 126

11. Multi-frame Design.. 127

11.1. Switching Frames by Property “Reference”. 128

11.2. Switching Frames by API Functions. 130

12. Update Properties in Run Time.. 133

12.1. The FillColor and Text of the Text PushButton.. 134

12.2. The Percentage of the Slider. 135

12.3. The Text of the Label. 136

Appendix.. 138

Appendix A How-To.. 139

Appendix B Demo List. 140


Working with HMIWorks

PART I gives you basic understanding of how HMIWorks runs, including

1. Introduction to HMIWorks

2. Getting started with hardware and software installations

3. Descriptions of workspace of HMIWorks

4. Running through a simple design flow with your first project


Introduction

This chapter gives you a basic understanding of what HMIWorks does and why should I need it. Then contents of this manual are introduced. You can choose topics to help you develop your project efficiently. Finally, ICP DAS has some resources for users.


What HMIWorks Does

007 What is HMIWorks?

HMIWorks is a powerful software to develop programs that run on TouchPAD.

………………………………………………………………………………..

007 What is TouchPAD?

TouchPAD is ICP DAS’ new HMI device with a colorful touch screen.

………………………………………………………………………………..

007 What HMIWorks does?

HMIWorks provides a powerful IDE (integrated development environment) to help users develop an application from designing, coding, building, and uploading to run in short time!

………………………………………………………………………………..

007 Why should I need HMIWorks?

HMIWorks can simplify the development efforts, shorten the development time, and concentrate yourself on designing not coding details.


What This Manual Include

This section introduces each chapter to help users have a rough understanding of HMIWorks’ capabilities.

PART 1: Working with HMIWorks

Chapter 1: Introduction

Introduction to HMIWorks and this manual.

Chapter 2: Getting Started

Getting started with hardware setup and software installation

Chapter 3: HMIWorks Work Space Introduction

Introduction to IDE of HMIWorks

Chapter 4: Your First Project

Running through the design flow with your first project.

Part 2: Basic Topics

Chapter 5: Properties of a Frame

Introducing properties of a frame

Chapter 6: Drawing Shapes

Making familiar with vector drawing elements

Chapter 7: Using Widgets

Making familiar with usages of widgets

Chapter 8: Using System Components

Making familiar with usages of system components

Chapter 9: Functions Which Assist Designing

Making familiar with functions which assist designing

Chapter 10: Running and Debugging

How to building and debugging your project

Part 3 Advanced Topics

Chapter 11: Multi-Frame Design

Making familiar with multi-frame Design

Chapter 12: Update Properties in Run Time

Updating properties in the run time

Appendix

Appendix A: How-To

Appendix B: Demo List


What ICP DAS Supports

ICP DAS continually improve the main program and adding templates and demos.

The FTP sites of HMIWorks

ftp://ftp.icpdas.com

ICP DAS Serivce:

service@icpdas.com


Getting Started

This chapter shows how to set up TouchPAD, the hardware, and how to install HMIWorks, the software.


Set Up the TouchPAD

Connect to power and Ethernet as the following figure shows.


Install HMIWorks

Follow the steps below to install the HMIWorks:

1. Double click the icon to install.

2. Next

3. Next or select a different folder.

4. Next or select a different Start Menu folder

5. Next or uncheck not to create a desktop icon.

6. Install and then Finish.


Introduction to Workspace of HMIWorks

This chapter briefs the workspace of HMIWorks.

A workspace consists of many elements to help users designing, coding, building, and uploading and etc.

2.


Overviews of the Workspace of HMIWorks

Below is the screenshot of HMIWorks.

A. Menu bar: all kinds of functions can be accessed here.

B. Toolbox: there are three kinds of tools, vectors, widgets, and system components.

C. Color selector: selecting foreground and background colors by mouse.

D. Frame panel: design your frame here.

E. Inspector and Libraries: tool properties inspector and library of tool groups.

F. Frame selector: where you can select frames.

G. Results space: Results space includes two parts. One is Output window and the other is Errors list.

H. Status bar: where current status is shown.


Descriptions of Each Part of the Workspace

This section provides detail descriptions for each part of the workspace.

A. Menu bar:

There are nine menus in this menu bar.

1. File: provides functions of saving, closing files, etc.

2. Edit: provides functions of undo, copy and paste, rotation, and flipping, etc.

3. View: provides functions of grid setting, opening and closing of inspector and libraries, etc.

4. Project: provides functions of creating a new project, opening an old one, etc.

5. Layout: provides functions of creating, deleting frames and alignment of tools.

6. Arrange: provides functions of changing orders of stacked tools and grouping of tools, etc.

7. Run: provides functions of building, uploading, searching TouchPAD, etc.

8. Window: provides functions of cascading, tiling, etc.

9. Help: provides basic information of HMIWorks.

B. Toolbox:

There are three kinds of tools, vectors, widgets and system componets.

Vectors:

Vector includes the followings:

1. Rectangle: this tool is used to draw a rectangle.

2. Ellipse: this tool is used to draw ellipse.

3. Text: this tool is used to put string (text) on TouchPAD.

4. Picture: this tool is used to load a image file into a frame.

5. Line: this tool is used to draw a line.

Widgets:

Widgets include the followings:

1. Text PushButton: this tool is used to create a button.

2. Slider: this tool is used to show or decide the percentage.

3. BitButton: this tool is used to create an image-formed button.

4. HotSpot: this tool is used to create a hot spot that can issue an OnTouch event.

5. CheckBox: this tool is used to provide an alternative.

6. RadioGroup: this tool is used to provide multiple choices.

7. Label: this tool is used to provide a string that can be modified during run-time.

System components:

System components include the followings:

1. Timer: this tool is used to periodically execute codes.

2. PaintBox: this tool is used to draw shapes in the run time.

3. ObjextList: this tool is used to maintain a list of library objects which can be used through property “RefObject” of TextPushButton and CheckBox.

C. Color selector:

The color selector can divided into three parts:

1. A palette, on the left side: used to select color.

2. Foreground and background color, on the right-top side: used to show current foreground and background color.

3. Current color viewer, on the right-bottom side: used to show current color of where mouse points to on the palette. Also, it shows R, G, B, values.

D. Frame panel:

The frame panel is where you put your tools and what is shown on TouchPAD.

E. Inspector and Libraries

Inspector is the properties manager of a selected tool.

Library viewer is a library list. A library is a group of tools.

F. Frame selector

A frame selector is frame switcher.

G. Results space

Results space includes two parts, Output window and Errors list.

Output window is where the output message of compiling sends.

Error list is where the compiling error shows in the column-like form.

H. Status bar

Status bar is where status shows.


Your First Program

This chapter shows how to go through the project from creating a new one to uploading the program to TouchPAD to run.

5.


Workflow of HMIWorks

The workflow of HMIWorks contains steps as followings:


Your First Program – an Example

We provide a simple example, beep sound, in the section.

1. Create a new project

Go to the menu: “File à New …” and then specify the Project name, the Location and the orientation.

2. Design the Graphic Interface

Vector drawing to design your graphic user interface

For example, draw a rectangle and fill the color with the color selector in the left-bottom corner.

Select a Widget to realize your goals.

For example, pick a BitButton to trigger the beep sound.

3. Modify Source Codes

Double click on the BitButton to invoke the code-editing window. Then write codes in the event function, BitButton5OnClick().

For example: key in “hmi_Beep();” in the event function to sound a beep, save the file, and then press OK.

4. Search TouchPAD

Go to the menu: Run à Setup Device, prepare TouchPAD to be connected for downloading the program.

Go to 10.1 Setup the TouchPAD for details.

5. Compile and Upload to Run

After connecting to TouchPAD, press F9 to run (or Run à Run).

Note: touch the BitButton on the TouchPAD, you have the beep sound.


Basic Topics

This part describes the basic topics of usages of HMIWorks, including:

Chapter 5: Properties of a Frame

This chapter introduces the properties of a frame.

Chapter 6: Drawing Shapes

This chapter shows how to use vectors of tools to drawing shapes.

Chapter 7: Using Widgets

This chapter shows how to use widgets of tools to design user interface.

Chapter 8: Using System Components

This chapter shows usages of functions which help to design frames.

Chapter 9: Designing Frames

This chapter shows usages of functions which help to design frames.

Chapter 10: Running and Debugging

This chapter shows how to build and upload a program to run and how to debug the program in HMIWorks.


Properties of a Frame

This chapter introduces the properties of a frame.


How to Access Properties of a Frame

How to access properties of a frame?

Go to the inspector and select the frame you want to edit through the combobox as the following figure shows.


Properties of a Frame

Properties of Frame

properties | description
BackgroundColor | The color of the background of the frame. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Default | Whether this frame is default frame or not. The default frame shows first after power on.
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Name | The name of the frame
OnCreate | The function name of the OnCreate event of the frame. Use OnCreate to perform some operations when the frame is created.
OnDestroy | The function name of the OnDestroy event of the frame. Use OnDestroy to perform some operations when the frame is destroyed.
OnPaint | The function name of the OnPaint event of the frame. Use OnPaint to perform some operations when the frame is redrawn.

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to change the Background color of a frame

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor uses similar way.

How to implement the OnCreate Event

1. Click on the OnCreate in the inspector. Then click on the button “…” to code-edited window for the OnCreate.

2. Here we use hmi_Beep() to sound a beep for example.

3. Save the file, and then press OK in the code-edited window.

How to implement the OnDestroy Event

1. Click on the OnDestroy in the inspector. Then click on the button “…” to code-edited window for the OnDestroy.

2. Here we use hmi_Beep() to sound a beep for example.

3. Save the file, and then press OK in the code-edited window.

How to implement the OnDestroy Event

1. Click on the OnPaint in the inspector. Then click on the button “…” to code-edited window for the OnPaint.

2. Here we use hmi_Beep() to sound a beep for example.

3. Save the file, and then press OK in the code-edited window.


Drawing Shapes

This chapter tells how to draw shapes in details.

There are vectors in toolbox which can be used to draw shapes.


Rectangle

This section shows how to draw a rectangle.

How to draw a rectangle:

1. Left-click on the Rectangle icon in the vector list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the rectangle to draw.

4. Move the mouse to form a rectangle as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the rectangle to draw.

5. Release the left button of the mouse and you have a rectangle you want.

Properties of Rectangle

properties | description
BrushStyle | What style to fill to a rectangle
FillColor | What color to fill in the rectangle. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Height | Vertical side length of the rectangle
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the rectangle
Name | The name of the rectangle
OutlineColor | The outline color of the rectangle
Top | y-coordinate of the left-top vertex of the rectangle
Width | Horizontal side length of the rectangle

How to change the fill color and outline color

There are two ways to change colors of a rectangle.

One is left-click on the palette to change fill color and right-click on the palette to change outline color.

The left is a palette.

You can also right click on the foreground/background color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor uses similar way.


Ellipse

This section shows how to draw an ellipse.

How to draw an ellipse:

1. Left-click on the Ellipse icon in the vector list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the rectangle that inscribes the ellipse to draw.

4. Move the mouse to form the ellipse you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the rectangle that inscribes the ellipse to draw.

5. Release the left button of the mouse and you have an ellipse you want.

PS. What to do if I want to draw a circle?

Step 3 ~ step 5 with the “Ctrl” key pressed at the same time.

Properties of Ellipse

properties | description
BrushStyle | What style to fill to an ellipse
FillColor | What color to fill in the ellipse. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Height | Vertical side length of the rectangle that inscribes the ellipse to draw
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the rectangle that inscribes the ellipse to draw
Name | The name of the ellipse
OutlineColor | The outline color of the rectangle that inscribes the ellipse to draw
Top | y-coordinate of the left-top vertex of the rectangle that inscribes the ellipse to draw
Width | Horizontal side length of the rectangle that inscribes the ellipse to draw

How to change the fill color and outline color

There are two ways to change colors of an ellipse.

One is left-click on the palette to change fill color and right-click on the palette to change outline color.

The left is a palette.

You can also right click on the foreground/background

color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor uses similar way.


Text

This section shows how to draw a Text.

How to draw a Text

1. Left-click on the Text icon in the vector list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click on the point of the frame panel as the left-top vertex of the rectangle that encloses the Text to draw.

4. Change the Text property in the inspector to “Hello”, for example.

Properties of Text

properties | description
Alignment | This property decides which position of the string locates. Left, right, or center. (LeftJustify, RightJustify, or Center) Note: this property is enabled only when AutoSize=True
AutoScaleFontSize | Scale the font size of the string according to the size of the Text. Note: this property is enabled only when AutoSize=True.
AutoSize | True or False. This property is used to indicate that whether the size of the Text can be changed or not.
BrushStyle | What style to fill to the rectangle that encloses the Text
Font | The font of the Text. Note: this property is enabled only when TextAsImage=True.
Height | Vertical side length of the rectangle that encloses the Text to draw
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the rectangle that encloses the Text to draw
Name | The name of the Text
Text | The string of the Text to show
TextAsImage | True or False. Whether text is stored as an image or not. If the text is treated as an image, of course, it takes more space to store and more time to upload.
Top | y-coordinate of the left-top vertex of the rectangle that encloses the Text to draw
Width | Horizontal side length of the rectangle that encloses the Text to draw

How to change the font of Text

Click on the font property in the inspector. Then click on the button “…” to open font window to change font.

Be sure to set TextAsImage = True. Otherwise changing font does not take effect.


Picture

This section shows how to load a Picture.

How to load a Picture

1. Left-click on the Picture icon in the vector list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the rectangle that encloses the picture to load.

4. Move the mouse to cover the area where you want to put the picture while the cursor is at the point of the right-bottom vertex of the rectangle that encloses the picture.

5. Release the left button of the mouse and you have an area for the picture.

6. Click on the picture property in the inspector. Then click on the button “…” to open “Select picture” window to load a picture.

7. The frame with the loaded picture.

Properties of Picture

properties |  | description
AutoSize | True or False. This property is used to indicate that whether the size of the Picture can be changed or not.
FrameIndex | Ignored
Height | Vertical side length of the rectangle that encloses the Picture to load
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the rectangle that encloses the Picture to load
Name | The name of the Picture
Picture | The picture to be loaded
Top | y-coordinate of the left-top vertex of the rectangle that encloses the Picture to load
Width | Horizontal side length of the rectangle that encloses the Picture to load


Line

This section shows how to draw a line segment.

How to draw a line segment:

1. Left-click on the Line icon in the vector list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the first end point of the line segment to draw.

4. Move the mouse to decide the second end point of the line segment to draw.

5. Release the left button of the mouse and you have a line segment you want.

Properties of Line

properties | description
Height | Vertical side length of the rectangle whose diagonal line is the line segment to draw
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
IsSolid | Ignored
Left | x-coordinate of the left-top vertex of the rectangle whose diagonal line is the line segment to draw
Name | The name of the line segment
Top | y-coordinate of the left-top vertex of the rectangle whose diagonal line is the line segment to draw
Width | Horizontal side length of the rectangle whose diagonal line is the line segment to draw


Using Widgets

This chapter shows how to use widgets.

The widgets can be accessed from the widget list of the toolbox.


Text PushButton

This section shows how to use a Text PushButton.

What is a Text PushButton?

A Text PushButton is a button with a Text on it. The background color of a Text PushButton can be changed when a Text PushButton is pressed.

How to use a Text PushButton:

1. Left-click on the Text PushButton icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the Text PushButton rectangle.

4. Move the mouse to form a Text PushButton as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the Text PushButton rectangle.

5. Release the left button of the mouse and you have a Text PushButton you want.

6. Click on the Text property in the inspector to change the string on the Text PushButton. Here we change the Text to “Hello”.

7. Double click on the Text PushButton on the frame panel. Write codes you want in the evoking code-edited window for the On-Click event. Here we use hmi_Beep() to sound a beep for example.

8. Save the file, and then press OK in the code-edited window.

Properties of Text PushButton

properties | description
FillColor | What color to fill in the Text PushButton. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Font | The font of the text. Note that the only font style and size are effective.
Height | Vertical side length of the Text PushButton
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the Text PushButton
Name | The name of the Text PushButton
OnClick | The function name of the on-click event of the Text PushButton.
OutlineColor | The outline color of the Text PushButton
PressFillColor | The color to fill in the Text PushButton when the Text PushButton on the TouchPAD is touched (but not yet released)
Reference | The reference to a frame. That is, when pressing on the Text PushButton, TouchPAD goes to the frame you specified in this property. Note: the priority of the property “Reference” is higher than that of “OnClick”.
RefObject | The reference to the object list. An object list is a component that can be chosen in the toolbox to maintain a list of the elements of the library. Refer to section 8.3 for details.
Text | The string of the Text PushButton
Top | y-coordinate of the left-top vertex of the Text PushButton
Width | Horizontal side length of the Text PushButton

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to change fill color, outline color, and pressed fill color

There are two ways to change colors of a Text PushButton.

One is left-click on the palette to change fill color and right-click on the palette to change outline color. (This method cannot change the pressed fill color)

The left is a palette.

You can also right click on the foreground/background

color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor and PressFillColor use similar way.

How to use Reference to another frame

The Reference property is used as a go-to-specified-frame event.

It has higher priority than other events, such as OnClick event. Thus specifying a value to the Reference property disables the OnClick event.

It’s easy to specify a value to the Reference property. Simply click on the Reference property in the inspector and then choose the frame for reference.


Slider

This section shows how to use a Slider.

What is a Slider?

A Slider is a control element used to set levels. Usually, a Slider is used in volume control.

How to use a Slider:

1. Left-click on the Slider icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the Slider rectangle.

4. Move the mouse to form a Slider as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the Slider rectangle.

5. Release the left button of the mouse and you have a Slider you want.

6. Double click on the Slider on the frame panel. Write codes you want in the evoking code-edited window for the OnSliderChange event. Here we use hmi_Beep() to sound a beep for example.

7. Save the file, and then press OK in the code-edited window.

Properties of Slider

properties | description
BackgroundFillColor | What color to fill in the background of the Slider. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
BackgroundTextColor | What’s color of the text in the background of the Slider. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
FillColor | What color to fill in the Slider. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Font | The font of the text on the Slider
Height | Vertical side length of the Slider
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the Slider
Max | The maximum value of the Position
Min | The minimum value of the Position
Name | The name of the Slider
OnSliderChange | The function name of the on-slider-change event of the Slider.
OutlineColor | The outline color of the Slider
Position | The value where the slider locate (between Max and Min)
Top | y-coordinate of the left-top vertex of the Slider
Vertical | The direction of the Slider
Width | Horizontal side length of the Slider

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to change fill color and outline color

There are two ways to change colors of a Slider.

One is left-click on the palette to change fill color and right-click on the palette to change outline color. (The outline color is the background color)

The left is a palette.

You can also right click on the foreground/background

color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor, BackgroundFillColor and BackgroundTextColor use similar way.


BitButton

This section shows how to use a BitButton.

What is a BitButton?

A BitButton is a button with 3D appearance. When you press it, you can see that the BitButton is pressed “down”. This 3D-like appearance is achieved by two images so that it takes more spaces to store and more time to upload than a Text PushButton.

How to use a BitButton:

1. Left-click on the BitButton icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the BitButton.

4. Move the mouse to form a BitButton as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the BitButton.

5. Release the left button of the mouse and you have a BitButton you want.

6. Click on the Text property in the inspector to change the string on the BitButton. Here we change the Text to “Hello”.

7. Double click on the BitButton on the frame panel. Write codes you want in the evoking code-edited window for the On-Click event. Here we use hmi_Beep() to sound a beep for example.

8. Save the file, and then press OK in the code-edited window.

Properties of BitButton

properties | description
Font | The font of the text of the BitButton
Height | Vertical side length of the BitButton
ID | The serial number of tools
Left | x-coordinate of the left-top vertex of the BitButton
Name | The name of the BitButton
OnClick | The function name of the on-click event of the BitButton.
Reference | The reference to a frame. That is, when pressing on the BitButton, TouchPAD goes to the frame you specified in this property. Note: the priority of the property “Reference” is higher than that of “OnClick”.
Text | The string on the BitButton
Top | y-coordinate of the left-top vertex of the BitButton
Width | Horizontal side length of the BitButton

Note: To remove the event functions, use “Clear Event” button in the code-edited window.

How to use Reference to another frame

The Reference property is used as a go-to-specified-frame event.

It has higher priority than other events, such as OnClick event.Thus specifying a value to the Reference property disables the OnClick event.

It’s easy to specify a value to the Reference property. Simply click on the Reference property in the inspector and then choose the frame for reference.


HotSpot

This section shows how to use a HotSpot.

What is a HotSpot?

A HotSpot is a control element that decides an area for the on-click event. HotSpot provides a way of making vector components, such as rectangle, picture, etc, capable of responding to on-click events. So after uploading to TouchPAD, a HotSpot is invisible in order to make it look like a rectangle, for example, responses to users’ touch.

How to use a HotSpot:

1. Left-click on the HotSpot icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the HotSpot rectangle.

4. Move the mouse to form a HotSpot as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the HotSpot rectangle.

5. Release the left button of the mouse and you have a HotSpot you want.

6. Double click on the HotSpot on the frame panel. Write codes you want in the evoking code-edited window for the On-Click event. Here we use hmi_Beep() to sound a beep for example.

7. Save the file, and then press OK in the code-edited window.

Properties of HotSpot

properties | description
Height | Vertical side length of the HotSpot
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the HotSpot
Name | The name of the HotSpot
OnClick | The function name of the on-click event of the HotSpot.
Reference | The reference to a frame. That is, when pressing on the HotSpot, TouchPAD goes to the frame you specified in this property. Note: the priority of the property “Reference” is higher than that of “OnClick”.
Top | y-coordinate of the left-top vertex of the HotSpot
Width | Horizontal side length of the HotSpot

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to use Reference to another frame

The Reference property is used as a go-to-specified-frame event.

It has higher priority than other events, such as OnClick event.Thus specifying a value to the Reference property disables the OnClick event.

It’s easy to specify a value to the Reference property. Simply click on the Reference property in the inspector and then choose the frame for reference.


CheckBox

This section shows how to use a CheckBox.

What is a CheckBox?

A CheckBox is a control element that provides a yes-no choice.

How to use a CheckBox:

1. Left-click on the CheckBox icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the CheckBox rectangle.

4. Move the mouse to form a CheckBox as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the CheckBox rectangle.

5. Release the left button of the mouse and you have a CheckBox you want.

6. Click on the Text property in the inspector to change the string on the CheckBox. Here we change the Text to “Hello”.

7. Double click on the CheckBox on the frame panel. Write codes you want in the evoking code-edited window for the OnChange event. Here we use hmi_Beep() to sound a beep for example.

8. Save the file, and then press OK in the code-edited window.

Properties of CheckBox

properties | description
BoxSize | The size of the checking box
FillColor | What color to fill in the CheckBox. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Font | The font of the text of the CheckBox
Height | Vertical side length of the CheckBox
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the CheckBox
Name | The name of the CheckBox
OnChange | The function name of the OnChange event of the CheckBox.
OutlineColor | The outline color of the CheckBox
RefObject | The reference to the object list. An object list is a component that can be chosen in the toolbox to maintain a list of the elements of the library. Refer to section 8.3 for details.
Selected | True or false. Whether the CheckBox is checked or not
Text | The string of the CheckBox
Top | y-coordinate of the left-top vertex of the CheckBox
Width | Horizontal side length of the CheckBox

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to change fill color and outline color

There are two ways to change colors of a CheckBox.

One is left-click on the palette to change fill color and right-click on the palette to change outline color.

The left is a palette.

You can also right click on the foreground/background color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor uses similar way.


RadioGroup

This section shows how to use a RadioGroup.

What is a RadioGroup?

A RadioGroup is a group of radio buttons which is used for multiple choices.

Note: only one choice can be selected.

How to use a RadioGroup:

1. Left-click on the RadioGroup icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the RadioGroup rectangle.

4. Move the mouse to form a RadioGroup as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the RadioGroup rectangle.

5. Release the left button of the mouse and you have a RadioGroup you want.

6. Click on the Items property in the inspector to add the radio buttons to the RadioGroup. Here we add three items, Red, Green, and Blue.

7. Click on the Text property in the inspector to change the Text to what you specify. Usually the default Text looks like “RadioGroupWidget11”. Here we change the Text property to “Colors”.

8. Double click on the RadioGroup on the frame panel. Write codes you want in the evoking code-edited window for the OnRadioChange event. Here we use hmi_Beep() to sound a beep for example.

9. Save the file, and then press OK in the code-edited window.

Properties of RadioGroup

properties | description
CircleSize | The size of selecting circle
FillColor | What color to fill in the RadioGroup. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Font | The font of the texts of radio buttons
Height | Vertical side length of the RadioGroup
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Items | The list of the names of the radio buttons
ItemSelected | The index of the selected item. The index is started from zero.
Left | x-coordinate of the left-top vertex of the RadioGroup
Name | The name of the RadioGroup
OnRadioChange | The function name of the OnRadioChange event of the RadioGroup.
OutlineColor | The outline color of the RadioGroup
SelectedColor | The color of the selected radio button in the RadioGroup
Text | The text of the RadioGroup which is shown on the top-side perimeter of the group.
Top | y-coordinate of the left-top vertex of the RadioGroup
Width | Horizontal side length of the RadioGroup

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.

How to change fill color and outline color

There are two ways to change colors of a RadioGroup.

One is left-click on the palette to change fill color and right-click on the palette to change outline color. (The fill color is that of not-selected radio button. The selected color cannot be specified by this method.)

The left is a palette.

You can also right click on the foreground/background

color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor and SelectedColor use similar way.


Label

This section shows how to use a Label.

What is a Label?

A Label is a Text put on TouchPAD to give information.

How to use a Label:

1. Left-click on the Label icon in the widget list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the Label rectangle.

4. Move the mouse to form a Label as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the Label rectangle.

5. Release the left button of the mouse and you have a Label you want.

6. Click on the Text property in the inspector to change the string on the Label. Here we change the Text to “Hello”.

Properties of Label

properties | description
Alignment | This property decides which position of the string locates. Left, right, or center. (LeftJustify, RightJustify, or Center)
FillColor | What color to fill in the Label. The color is represented by a three byte value in hexadecimal form. From the highest byte to the lowest, it is the blue byte, the green byte, the red byte in sequence.
Font | The font of the text
Height | Vertical side length of the Label
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the Label
Name | The name of the Label
OutlineColor | The outline color of the Label
Text | The string of the Label
Top | y-coordinate of the left-top vertex of the Label
Width | Horizontal side length of the Label

How to change fill color and outline color

There are two ways to change colors of a Label.

One is left-click on the palette to change fill color and right-click on the palette to change outline color.

The left is a palette.

You can also right click on the foreground/background

color to evoke color window to set the fill color and the outline color.

For example, left-click on the green region of the palette and then right-click on the red region and then you may have the results as the following.

The other way is using property inspector:

Click on the FillColor in the inspector. Then click on the button “…” to open color window to select color. The OutlineColor uses similar way.


Using System Components

This chapter shows how to use system components.

The system components can be accessed from the system component list of the toolbox.


Timer

This section shows how to use a Timer.

What is a Timer?

A Timer is a component that executes the OnExecute event function every specified interval.

How to use a Timer:

1. Left-click on the Timer icon in the system list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click on the frame panel. Note that you should not worry about the size or the location of the Timer because the Timer is invisible when uploaded to the TouchPAD. Also it’s not necessary to put the Timer on the frame panel.

4. Click on the Interval property in the inspector to change the repeating period of the Timer. Here we set the Interval to 1000 (ms). And then change the property “Enabled” to True.

5. Double click on the Timer on the frame panel. Write codes you want in the evoking code-edited window for the OnExecute event. Here we use hmi_Beep() to sound a beep for example.

6. Save the file, and then press OK in the code-edited window.

Properties of Timer

properties | description
Enabled | Whether the Timer is enabled or not
Height | Vertical side length of the Timer (This property cannot be changed by users.)
ID | The serial number of tools (including vectors, widgets, system component) which is used to identify them.
Interval | The time span of two consecutive OnExecute events
Left | x-coordinate of the left-top vertex of the Timer
Name | The name of the Timer
OnExecute | The function name of the OnExecute event of the Timer.
Top | y-coordinate of the left-top vertex of the Timer
Width | Horizontal side length of the Timer (cannot be changed by users.)

Note: To remove the event functions, use “Clear Event” button in the code-edited window.


PaintBox

This section shows how to use a PaintBox.

What is a PaintBox?

A PaintBox is a component which is used to paint shapes, such as rectangles, ellipses, etc, in the runtime.

How to use a PaintBox:

1. Left-click on the PaintBox icon in the system list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click (and not release) on the point of the frame panel as the left-top vertex of the PaintBox rectangle.

4. Move the mouse to form a PaintBox as you want and stop the mouse while the cursor is at the point of the right-bottom vertex of the PaintBox.

5. Release the left button of the mouse and you have a PaintBox you want.

6. Double click on the PaintBox on the frame panel. Write codes you want in the evoking code-edited window for the OnPaint event. Here we draw a rectangle for example.

Note 1: the diagonal points used in the function of hmi_FillRect are in the same coordinate as the frame.

Note 2: the part of the rectangle which is outside the perimeter of the PaintBox is cut off.

Note 3: WidgetLeft(pWidget) and WidgetTop(pWidget) are the x, y coordinates of the left-top vertex of the PaintBox. While WidgetRight(pWidget) and WidgetBottom(pWidget) are those of the right-bottom.

7. Save the file, and then press OK in the code-edited window.

Properties of PaintBox

properties | description
Height | Vertical side length of the PaintBox
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the PaintBox
Name | The name of the PaintBox
OnPaint | The function name of the OnPaint event of the PaintBox.
Top | y-coordinate of the left-top vertex of the PaintBox
Width | Horizontal side length of the PaintBox

Note: To remove the event functions

The event functions cannot be removed simply by deleting the function names in the inspector. To remove the event functions, click on the button “…” to open the code-edited window and then press the “Clear Event” button.


ObjectList

This section shows how to use an ObjectList.

What is an ObjectList?

An ObjectList is a component which is used to maintain a list of library objects. Combined with RefObject properties of the widget Text PushButton and CheckBox, users can easily toggle two images.

How to use an ObjectList:

1. Left-click on the ObjectList icon in the system list of the toolbox.

2. Move the cursor over the frame panel.

3. Left-click on the frame panel. Note that you should not worry about the size or the location of the ObjectList because the ObjectList is invisible when uploaded to the TouchPAD. Also it’s not necessary to put the ObjectList on the frame panel.

4. The ObjectList maintains a list of a library objects and is used in a Text PushButton or a CheckBox. After uploading to the TouchPAD, the images of the library objects replace the Text PushButton or the CheckBox. When the state of the Text PushButton or the CheckBox changed, users see only the images of the library objects toggles but do not see the exchanges of the states of the Text PushButton or the CheckBox.

5. Add two library objects in the ObjectList by double-click on the ObjectList icon. Then the window of ObjectList shows. Double click on the list of the library objects adds the clicked library object to the right side region. Note that you only need to add two library objects to the right side region, because both Text PushButton and CheckBox have only two states.

6. Place a CheckBox on the frame for example. Be sure to make the size of the CheckBox large enough to cover the whole image of the library object.

7. Go to the inspector for the RefObject property of the CheckBox. Choose the ObjectList to make connections between the ObjectList and the CheckBox.

8. Build and upload the project. You can see two images of the library objects toggle and no more the Text PushButton and CheckBox.

Properties of ObjectList

properties | description
Height | Vertical side length of the ObjectList
ID | The serial number of tools (including vectors and widgets) which is used to identify them.
Left | x-coordinate of the left-top vertex of the ObjectList
Name | The name of the ObjectList
Objects | The maintained library objects
Top | y-coordinate of the left-top vertex of the ObjectList
Width | Horizontal side length of the ObjectList


Functions Which Assist Designing

This chapter shows functions which help users to design frames.

Mainly, we introduce the functions of menus in this chapter, including

l File

l Edit

l View

l Project

l Layout

l Arrange

l Popup menu on the frame panel

Some items of the Run menu are left to the next chapter where we introduce how to build and debug in HMIWorks.


Starting Design, File Menu

New …

Create a new project.

Specify project name, its location and the orientation.

Then press OK.

Open …

Open an old HMIWorks project (.hwp).


Managing Project,Project Menu

Add To Project

Add files to the project

View Files

Show files in this project in the View Files window.

You can switch focus to another file by selecting the file in the View Files window and then pressing OK.


Cascading and Grouping, Arrange Menu

To demonstrate functions of cascading and grouping, first draw three shapes as followings:

Back One

Go down a level of the stacks.

For example, select the blue ellipse and click “Back One” in the menu. You can see that the blue ellipse goes down one level in the stack.

Forward One

Go up a level of the stack.

For example, select the green circle and click “Forward One” in the menu. You can see that the green circle goes up one level in the stack.

To back

Go down to the lowest level of the stack.

For example, select the blue ellipse and click “To back” in the menu. You can see that the blue ellipse goes down to the lowest level in the stack.

To front

Go up to the highest level of the stack.

For example, select the red square and click “To front” in the menu. You can see that the red square goes up to the highest level in the stack.

Group

Put vectors or widgets together as a set, that is, a group.

For example, first circle the items together by a mouse, and then click “Group” in the menu. You can see that they are grouped together.

Ungroup

Break a group into its original vectors or widgets.

For example, select the group and then click “Ungroup” in the menu.


Rotating and Flipping, Edit Menu

To demonstrate functions of rotating and flipping, first draw three shapes as followings:

Rotate CCW

Rotate the selected item in the counter-clockwise direction.

For example, first put three items into one group, select the group and then click on “Rotate CCW” in the menu. You can see that this group of shapes is rotated counter-clockwise.

Rotate CW

Rotate the selected item in the clockwise direction

For example, first put three items into one group, select the group and then click on “Rotate CW” in the menu. You can see that this group of shapes is rotated clockwise.

Flip horizontal

Flip the selected item in the horizontal direction

For example, first put three items into one group, select the group and then click on “Flip horizontal” in the menu. You can see that this group of shapes is flipped horizontally.

Flip vertical

Flip the selected item in the vertical direction

For example, first put three items into one group, select the group and then click on “Flip vertical” in the menu. You can see that this group of shapes is flipped vertically.


Gridding and Viewing, View Menu

Show grid

Show grid on the frame. Take the following snapshot for example, and then you can see the dots on the frame. Those dots represent the grid.

Snap to grid

Snap vectors or widgets to the grid.

Inspector

Display the inspector window

Library

Display the library window

Results

Display the Results window

Next Frame

Go to next frame


Frame Managing and Aligning,Layout Menu

l Frame Management:

New Frame

Create a new frame

Delete Frame

Delete the current frame

Rename Frame

Rename a frame

l Alignment:

To demonstrate the functions of alignment, draw three shapes as followings

:

Note: all alignment functions refer to the last shape you draw. In above example, all alignment functions refer to the square.

Align left

Align the leftmost edge of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align left” in the menu.

Align horizontal center

Align the horizontal center of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align horizontal center” in the menu.

Align right

Align the rightmost edge of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align right” in the menu.

Align top

Align the topmost edge of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align top” in the menu.

Align vertical center

Align the vertical center of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align vertical center” in the menu.

Align bottom

Align the bottommost edge of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align bottom” in the menu.

Align center

Align the center point of all the selected items to that of last-drawn item.

For example, select all the items and then click “Align center” in the menu.


Library Management, Popup Menu

How to add items to library

For example as below:

1. Group the selected items.

2. Right click on the frame panel to evoke the popup menu.

3. Click on “Add to library …”

4. Specify the library name and save the library.

Note: you can preview the library in the library window.

How to use items from library

For example as below:

1. Click on the tab of “Libraries” to show library window.

2. Pick the library you want. You can preview the library in the preview box.

3. Click (and not released) on the item in the preview box and then drag the preview item and drop it on the frame panel.

How to add a new folder into library window

By default we have the only folder “default” in the library window as the below shows.

To add a new folder into the library window, create a new folder in the following path:

“HMIWorks_install_path\bin\Lib\” where the HMIWorks_install_path is the installation path of HMIWorks.

Supposed the installation path of HMIWorks is “C:\ICPDAS\HMIWorks_Express”. And we want to add a new folder named “Test” into the library window. Then all we have the do is creating a new folder named Test in the directory of “C:\ICPDAS\HMIWorks_Express\bin\Lib”.

And then reopen the library window, you can see the new folder “Test” as below shows.

Of course, there’s no library item in it. You should add items yourself.


Running and Debugging

This chapter shows how to run and debug in HMIWorks.

First, we introduce how to connect to the TouchPAD.

Second, we demonstrate how to build and upload to run on TouchPAD.


Setup the TouchPAD

Setup the TouchPAD

Before uploading programs to the TouchPAD, be sure to setup the TouchPAD to connect.

items | description
Search TouchPAD | Search TouchPADs on the network. Make sure that TouchPADs and the local computer are in the same subnet.
Host IP Address | The IP address of the local computer
Device Nickname | The nickname used to identify the TouchPAD which is selected in the “Search TouchPAD”.
Device MAC address | The MAC address of the TouchPAD which is selected in the “Search TouchPAD”.
Device IP Address (in the runtime) | The IP address of the TouchPAD which is selected in the “Search TouchPAD”. This IP address is used in the runtime of the program.
Device IP Address (for downloading) | The IP address of the TouchPAD which is selected in the “Search TouchPAD”. This IP address is used when downloading programs.

Search TouchPAD

1. Click on “Refresh” and wait for 10 seconds for HMIWorks to find out the MAC address of the TouchPAD.. Then click on your TouchPAD and press OK.

If your TouchPAD is NOT in the list,

2. Make sure that the TouchPAD and your computer are in the same subnet and do the step 1 again.

3. If still not in the list, check “Disable UDP filter” and do the step 1 again. We have UDP filter on by default to search TouchPADs only.

4. If still not in the list, plug out the Ethernet cable and re-plug in the Ethernet cable and do the step 1 again.

5. If still not in the list, plug out the Ethernet cable and switch the rotary switch to “1” in the back of the TouchPAD. Then plug in the Ethernet cable, and do the step 1 again. Note that the IP found in this method is “0.0.0.0”. Click your TouchPAD in the list, press OK and then set the IP address in the “Setup Device” window. Finally, switch rotary switch back to “0”, plug out and re-plug in the Ethernet cable, and do the step 1 again.

Device Nickname

Set the nickname of the device.

Use “Run à Run (F9)” to set the nickname to the TouchPAD.

“Run à Run (F9)” is used to build and upload program to the TouchPAD. Users need to open a new project in order to enable “Run à Run (F9)” to set the nickname to the TouchPAD.

Device IP address in the runtime

There are two different cases.

1. Using DHCP to acquire an IP address for TouchPAD:

If the radio button “DHCP” is selected, DHCP server assigns an IP address for the TouchPAD to be used in the runtime.

2. Setting the IP address of TouchPAD manually:

If the radio button “Static” is selected, the IP address in the text field, “Device IP address”, is used to set the IP address to the TouchPAD to be used in the runtime.

Device IP address when downloading

Uploading programs to TouchPADs uses different IP addresses from those in the run time.


Running and Debugging

Build and Compile

Build the project but not upload the program to the TouchPAD.

Run

Build the project but upload the program to the TouchPAD.

If there are bugs, …

Double click on the item in the list of Errors to go to where the bug locates


Advanced Topics

This part describes the advanced topics of HMIWorks, including:

Chapter 11: Multi-frame Design

This chapter shows how to design multi-frame projects

Chapter 12: Update Properties in Run Time

This chapter shows how to update properties of widgets in the run time


Multi-frame Design

This chapter introduces how to design a multi-frame project.

There are two ways to switch to another frame. One is using property “Reference”, the other is using functions, “hmi_GotoFrameByID” or “hmi_GotoFrameByName”.


Switching Frames by Property “Reference”

There are three widgets which have the property “Reference”. They are Text PushButton, BitButton, and HotSpot. Refer to the respective sections in the chapter 7 for usages.

Take BitButton for example.

1. Create a new project. File à New …

You can see that there is one frame “Frame1” by default.

2. Add a new frame. Layout à New Frame

You can see that there is a newly-added frame, “Frame2”.

3. Add a BitButton on Frame1, and set its Reference property to Frame2.

4. Similarly, add a BitButton on Frame2, and set its Reference property to Frame1.

5. If necessary, add more frames as you want and design them frame by frame.

6. Connect to the TouchPAD by Run à Setup Device. And then Run à Run for uploading program to run.

7. You can see that clicking the BitButton on each frame switches to the other.


Switching Frames by API Functions

Although we can use the reference property to switch frames, there are widgets which do not have the property reference. In these cases, we use the API functions, hmi_GotoFrameByID or hmi_GotoFrameByName to switch frames.

Similar to the previous section, take Text PushButton for example.

1. Create a new project. Project à New Project

You can see that there is one frame “Frame1” by default.

2. Add a new frame. Layout à New Frame

You can see that there is a newly-added frame, “Frame2”.

3. Add a Text PushButton on Frame1, and set its Text property to “Go to Frame2”.

4. Double click on the Text PushButton to evoke the code-edited window to implement the OnClick event function. Write “hmi_GotoFrameByID(2);” for switching to Frame2. Or you can use “hmi_GotoFrameByName(“Frame2”);” instead. Then Save the file and press OK.

Note:

Since users can change the order of the frame by using mouse to drag the frame tag in the left-bottom corner, it is not necessary that hmi_GotoFrameByID(2) and hmi_GotoFrameByName(“Frame2”) go to the same frame.

5. Similarly, add a Text PushButton on Frame2, but set its Text property to “Go to Frame1”. And then double click on the Text PushButton on the Frame2 to implement its OnClick event function for switching to Frame1.

6. If necessary, add more frames as you want and design them frame by frame.

7. Connect to the TouchPAD by Run à Search TouchPAD. And then Run à Run for uploading program to run.

8. You can see that clicking the Text PushButton on each frame switches to the other.


Update Properties in Run Time

It is a bit more complicated to change the properties of widgets in the run time.

In this chapter, we demonstrate some commonly-used cases, including:

1. the FillColor and Text of the Text PushButton

2. the percentage of the slider

3. the Text of the Label


The FillColor and Text of the Text PushButton

Simply follow the steps to make the percentage of the Slider changing with its position.

1. Drag and drop a Text PushButton on the frame panel.

2. Double click on the Text PushButton to implement its OnClick event function. Save the file and press OK.

3. To make clear, we copy the codes below.

void TextPushButton4OnClick(tWidget *pWidget)

{

static char * str = "Hello World!";

PushButtonTextSet(&TextPushButton4, str);

PushButtonFillColorSet(&TextPushButton4, 0x00FF00);

WidgetPaint((tWidget*)&TextPushButton4);

}


The Percentage of the Slider

Simply follow the steps to make the percentage of the Slider changing with its position.

1. Drag and drop a Slider on the frame panel.

2. Double click on the Slider to implement its OnChange event function. Save the file and press OK.

3. To make clear, we copy the codes below.

void SliderWidget6OnSliderChange(tWidget *pWidget, long lValue)

{

static char strValue[10];

usnprintf(strValue, sizeof(strValue), "%d%%", lValue);

SliderTextSet((tSliderWidget*) pWidget, strValue);

WidgetPaint((tWidget*) &SliderWidget7);

}


The Text of the Label

Take the following steps for example to update the Text of the Label in the run time.

1. Drag and drop a Label and a BitButton on the frame panel.

2. Double click on the BitButton to implement the OnClick event function. Save the file and press OK.

3. To make clear, we copy the codes below

void BitButton4OnClick(tWidget *pWidget)

{

static char *str = "Hello! TouchPAD";

CanvasTextSet(&LabelWidget6, str);

WidgetPaint((tWidget*) &LabelWidget6);

}


Appendix

Appendix A: How-To

Appendix B: Demo List


Appendix A How-To

l How to print floating-point data on the TouchPAD

Using two integer before and after the decimal point to replace the floating-point representation.

static char s[32];

int integer = -2;

int decimals = 234;

usnprintf(s, sizeof(s), "%d.%d", integer, decimals);

CanvasTextSet(&LabelWidget4, s);

WidgetPaint((tWidget*) &LabelWidget4);

l How to delete a tool element on a frame

Use “Ctrl” + “Delete”


Appendix B Demo List

Demo Name | Descriptions
BitButton | Using BitButton
CheckBox | Using CheckBox
Demo black | A demo of commonly-used widgets
HotSpot | Using HotSpot
Modbus landscape | Using Modbus-TCP to control remote device, landscape version
Modbus portrait | Using Modbus-TCP to control remote device, portrait version
ObjectList | Using ObjectList
PaintBox | Using PaintBox
parameter | A demo for how to store parameters in the flash
SliderWidget | Using Slider
TextPushButton | Using Text PushButton
Timer | Using Timer