TouchPAD - ICSDataCom

icsdatacom.com
  • No tags were found...

TouchPAD - ICSDataCom

TouchPADTPD Series HMI DeviceUser Manual Version 1.0.3ICP DAS Co., Ltd.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 1Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


WarningICP DAS assumes no liability for any damage resulting from the use ofthis product. ICP DAS reserves the right to change this manual at anytime without notice. The information furnished by ICP DAS is believed tobe accurate and reliable. However, no responsibility is assumed by ICPDAS for its use, not for any infringements of patents or other rights ofthird parties resulting from its use.CopyrightCopyright @ 2010 by ICP DAS Co., Ltd. All rights are reserved.TrademarkThe names used for identification only may be registered trademarks oftheir respective companies.SupportICP DAS take your problem as ours.If you have any problem, please feel free to contact us.You can count on us for quick response.Email: service@icpdas.comTel: 886-3-5973336Also, the FTP site of ICP DAS has contents about TouchPAD whichyou may be interested in. We believe that those contents may behelpful to your work.FTP: ftp://ftp.icpdas.com/pub/cd/touchpad/TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 2Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


PrefaceThank you for buying TPD Series HMI Devices, TouchPAD, which is made byICP DAS Co., Ltd. We suggest you read through this user manual before youset up these devices and develop their programs.Purpose• This manual shows how to use TouchPADs and develop programs.• This manual mainly contains the following parts:• Introduction Part: basic understandings of TouchPADs.• Hardware Part: specifications, dimensions, and installations.• Software Part: mainly how to build a project and HMIWorksintroductions.PersonnelThis manual is fit for following personnel:• End Users• Engineers• TechniciansTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 3Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


CatalogPreface .......................................................................................................................... 31. Introduction ........................................................................................................... 61.1. Advanced Features ................................................................................. 61.2. Applications of TouchPAD ..................................................................... 72. General Specifications ...................................................................................... 102.1. TPD-28X Series ..................................................................................... 112.2. TPD-28XU Series .................................................................................. 123. Hardware ............................................................................................................ 143.1. Hardware Overview .............................................................................. 143.2. Dimension ............................................................................................... 153.3. Installation and Wirings ........................................................................ 184. Development Software, HMIWorks ................................................................ 204.1. Preparations ........................................................................................... 204.2. The Construction of HMIWorks ........................................................... 214.3. Ladder Designer .................................................................................... 234.3.1. Getting Started ............................................................................. 244.3.2. Introduction to Ladder Designer ............................................... 254.3.3. Operations of Ladder Designer ................................................. 364.3.4. User-Defined Function Block ..................................................... 504.3.5. Register Devices ......................................................................... 534.3.6. Associate Tags with Tools .......................................................... 584.3.7. User-Defined I/O Devices .......................................................... 594.4. Frames and Tools .................................................................................. 674.4.1. Properties of a Frame ................................................................. 694.4.2. Drawing a Rectangle .................................................................. 714.4.3. Drawing an Ellipse ...................................................................... 744.4.4. Drawing a Text ............................................................................. 774.4.5. Loading a Picture ........................................................................ 804.4.6. Drawing a Line ............................................................................. 834.4.7. Using a TextPushButton ............................................................. 854.4.8. Using a Slider ............................................................................... 904.4.9. Using a BitButton ......................................................................... 944.4.10. Using a HotSpot ........................................................................ 984.4.11. Using a CheckBox ................................................................... 1014.4.12. Using a Label ........................................................................... 105TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 4Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.4.13. Using a Timer ........................................................................... 1084.4.14. Using a PaintBox ..................................................................... 1114.4.15. Using an ObjectList ................................................................. 1144.5. Menus.................................................................................................... 1194.5.1. Starting Design, File Menu ....................................................... 1204.5.2. Cascading and Grouping, Arrange Menu .............................. 1214.5.3. Rotating and Flipping, Edit Menu ............................................ 1234.5.4. Gridding and Viewing, View Menu .......................................... 1264.5.5. Frame Managing and Aligning, Layout Menu ....................... 1284.5.6. Build and Download to Run, Run Menu ................................ 1324.5.7. Library Management, Popup Menu ........................................ 1375. Make a Simple Project.................................................................................... 1415.1. Your First Project Using Standard C/C++ ........................................ 1415.2. Your First Project Using Ladder Program ........................................ 1445.3. Integrate TPD-280 Series with I/O modules ................................... 1495.4. Integrate TPD-283 Series with I/O modules ................................... 1526. Advanced Programming in C ........................................................................ 1566.1. Update Properties in Run Time ......................................................... 1566.1.1. FillColor and Text of a TextPushButton .................................. 1576.1.2. Percentage of a Slider .............................................................. 1586.1.3. Selected of a CheckBox ........................................................... 1606.1.4. Font, Text and TextColor of a Label ........................................ 161Appendix ................................................................................................................... 164A. FAQ............................................................................................................ 164A.1. What to do if screen flashes? .................................................... 164A.2. How to have higher resolution Picture? ................................... 165A.3. How does a TouchPAD control I/O? ......................................... 166A.4. How to change Font of Text? ..................................................... 167TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 5Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


devices, quick design for a variety of applications‣ Support the most popular C language‣ Ladder logic design1.2. Applications of TouchPADInteractions between human and machine are getting more and moreimportant since automation control has emerged. From systematicsurveillance of equipments, status monitoring of house appliances or evenmeasurements of temperature and humidity, HMI devices play anindispensable role in passing information. In the early time, HMI devicesconsist of lights, meters, 7-segment display. For now, LED and LCD areprevalently used and ICP DAS releases TouchPAD as a state-of-the-artsolution.In addition to GUI and touch LCD, the solution of ICP DAS providesdevelopment software package, HMIWorks. HMIWorks satisfies most of therequirements with the WYSIWYG (What You See Is What You Get) designenvironment. Besides, It has plenty of widgets and varieties of templates, andso it’s easy to present customers with professional interface with modernstyles. Moreover, HMIWorks supports C language. It makes easy timingcontrol and logic design and in turns makes TouchPAD more powerful.Through standard communication protocols and SCADA (Supervisory Controland Data Acquisition) software, it is directly inoculated with backgroundsoftware and attains the best effect of completely integration.Below are figures of the application fields of TouchPAD, intelligent buildingand classroom automation. In these examples, TouchPADs are used to controllights, curtains, air conditioners, stereos, projectors, projector screens, and tomonitor temperature, humidity, and weather conditions.Application Fields of TouchPADTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 7Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Intelligent Building ExampleClassroom Automation ExampleSingle-way, Two-way, Multi-waySwitches ExampleTemperature Control ExampleMulti-DisplayTouchPAD AnywhereTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 8Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 9Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


AmbientRelativeHumidity10 ~ 90% RH, non-condensing2.1. TPD-28X SeriesCompared with TPD-28XU series, TPD-28X series does not have USB client.Besides, TPD-28X series does not have SDRAM/Flash expansion.SpecificationsModel TPD-280 TPD-283HardwareCPULower-power 32-bit RISC CPUMemoryExpansion--CommunicationEthernetRS-485Method(10/100 Mbps)LCD 2.8” TFT (Resolution 240 x 320 x 16)Touch PanelYesBuzzerYesRotary Switch(0~9)YesUSB Client 1.1 --TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 11Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Reset ButtonPowerDimensionIngressProtectionWall mountOperatingTemperatureStorageTemperatureAmbientRelativeHumidityYesElectricalPoE+10 ~ 30 VDC(IEEE 802.3af, Class 1)Mechanical76mm (W) X 119mm (L) X 31mm (H)Front panel: IP65YesEnvironmental-20 ~ +70°C-30 ~ +80°C10 ~ 90% RH, non-condensing2.2. TPD-28XU SeriesCompared with TPD-28X series, TPD-28XU series does have USB client andthis is why we call it TPD-28XU series. Moreover, TPD-28XU series haveSDRAM/Flash expansion.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 12Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


SpecificationsModel TPD-280U TPD-283UHardwareCPULower-power 32-bit RISC CPUMemoryExpansionSDRAM 16 MB/Flash 8 MBCommunicationEthernetRS-485Method(10/100 Mbps)LCD 2.8” TFT (Resolution 240 x 320 x 16)Touch PanelYesBuzzerYesRotary Switch(0~9)YesUSB Client 1.1YesReset ButtonYesElectricalPower+10 ~ 30 VDCPoE(IEEE 802.3af, Class 1)MechanicalDimension76mm (W) X 119mm (L) X 31mm (H)IngressProtectionFront panel: IP65Wall mountYesEnvironmentalOperatingTemperature-20 ~ +70°CStorageTemperature-30 ~ +80°CAmbientRelative10 ~ 90% RH, non-condensingHumidityTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 13Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. HardwareThis chapter shows the overviews, dimensions, etc. of TouchPAD.3.1. Hardware OverviewTPD-280 SeriesTPD-283 SeriesTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 14Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 16Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TPD-283, TPD-283U (unit: mm)TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 17Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3.3. Installation and WiringsMount the hardwareAs the figure shows:Connect to power and networkTPD-280 SeriesTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 18Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TPD-283 Series** Note: either “Ethernet” or “PoE” uses the same general Ethernet cable.** PoE, power over Ethernet, means that the Ethernet cable conveys not onlydata but also power.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 19Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4. Development Software,HMIWorksHMIWorks is the development tool for TouchPAD, both TPD and VPD series.It supports two programming types, Standard C/C++ and Ladder Program.Compared with traditional GUI development tools, HMIWorks is easy to learn,flexible to design GUIs, and takes less time to raise productivity.Features of HMIWorks include:‣ FREE of charge‣ Two programming types, ladder diagram and Standard C/C++‣ Plenty of widgets‣ Plenty of demos shorten development time‣ Advanced search for I/O modules‣ Detail error messages‣ Easy downloading after building‣ Automatic generated codes for user-designed frames‣ Multi-frame design‣ WYGIWYS (What You Get Is What You See)‣ Abstract vector graphics as simple APIs‣ Easy learning IDE to raise productivity in short time4.1. PreparationsFirst, you should install HMIWorks in your PC.Follow the steps below to install the HMIWorks:1. Double click the icon to install.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 20Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


2. Simply follow the instructions to finish the installation.3. The snapshot of Finish.4.2. The Construction of HMIWorksBefore showing the construction of HMIWorks, create a new project first.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 21Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Click File menu, then click on New….Choose the target module, Orientation, and the Default Programming Type.Press OK and HMIWorks integrated design environment shows as below.There are several parts of HMIWorks.1. Menu bar2. Workspace and Toolbox3. Frame Design space4. Inspector and Libraries5. Results window (Output and Errors)6. Status barTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 22Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Next sections show the functions of these parts.4.3. Ladder DesignerOne of the most important feature of HMIWorks is Ladder Designer.The ladder logic is defined by the followings:1. A Ladder Diagram consists of many rungs.2. Each rung resembles a circuit which is formed by relays.3. All of the rungs are executed parallel in a loop.Click HMI menu to use this feature.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 23Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


‣ New Virtual Tag: defines your own variables‣ Register Devices: uses devices of ICP DAS on the networks‣ Ladder Designer: designs your ladder logicsUsers can manage their ladder design in the Workspace.4.3.1. Getting Started‣ To use Ladder Designer, run HMIWorks_Standard.exe first.‣ Then create a new project.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 24Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


‣ New Virtual Tag and open Ladder Designer from HMI menu‣ New Virtual Tag adds variables used in Ladder Designer.There are three ways to open the “Edit variable” window,‣ pressing F2 key,‣ choosing in HMI menu,‣ right-click on the Virtual item and click on “New Virtual Tag”.4.3.2. Introduction to Ladder DesignerA Ladder Designer is a tool to implement the ladder logic according to users’design.Press F4 to open Ladder Designer.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 25Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Mainly, a Ladder Designer consists of three parts, the menu bar, the functionbar, and the edit space. The highlighted rectangle area is the cursor.The briefings of the function bar:Item DescriptionInsert a contact in the left of the cursorInsert a contact in the right of the cursorInsert a contact which is parallel to the cursorInsert a coilInsert a function block in the left of the cursorInsert a function block in the right of the cursorInsert a function block which is parallel to the cursorInsert a Jump which is parallel to the cursorThe briefings of the contact type:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 26Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


ItemDescriptionA normally-open contactA normally-closed contactA positive transition contact‣ when the state from OFF to ON, trigger one shotA negative transition contact‣ when the state from ON to OFF, trigger one shotThe briefings of the coil type:Item DescriptionA normally-open coilA normally-closed coilA “Set” coil‣ once triggered, the coil remains ON until a resetA “Reset” coil‣ once triggered, the coil remains OFF until a setA positive transition coil‣ when the state from OFF to ON, trigger one shotA negative transition coil‣ when the state from ON to OFF, trigger one shotThe briefings of function blocksItem Description (C codes) GroupAND (And)if(en == 1){eno = in1 & in2;return;}else{eno = 0;return;defaultTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 27Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


}OR (Or)if(en == 1){eno = in1 | in2;return;}Else{eno = 0;return;}XOR (Exclusive Or)if(en == 1){eno = in1 ^ in2;return;}else{eno = 0;return;}NE (Not Equal)if(en == 1){if(in1 != in2) eno = 1;else eno = 0;return;}else{eno = 0;return;}defaultdefaultdefaultTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 28Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


GE (Greater or Equal)if(en == 1){if(in1 >= in2) eno = 1;else eno = 0;return;}else{eno = 0;return;}LE (Less or Equal)if(en == 1){if(in1


Add (Addition)if(en == 1){q = in1 + in2;eno = 1;return;}else{eno = 0;return;}Sub (Subtraction)if(en == 1){q = in1 - in2;eno = 1;return;}else{eno = 0;return;}Mul (Multiplication)if(en == 1){q = in1 * in2;eno = 1;return;}else{eno = 0;return;}mathmathmathTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 30Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Div (Division)if(en == 1){q = in1 / in2;eno = 1;return;}else{eno = 0;return;}Inc (Increment)if(en == 1){in++;eno = 1;return;}else{eno = 0;return;}Dec (decrement)if(en == 1){in--;eno = 1;return;}else{eno = 0;return;}mathmathmathTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 31Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Mod (Modular)if(en == 1){q = in1 % in2;eno = 1;return;}else{eno = 0;return;}CTU (Count Up)//initialif (Initialized == 0){Count = 0;Initialized = 1;}math//stop the count and restoreif (en == 0){Count = 0;eno = 0;return;}counter//count up to valueif (en == 1){if (Count >= value) eno = 1;Count++;return;}eno = 0;return;TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 32Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


CTD (Count Down)//initialif (Initialized == 0){Count = value;Initialized = 1;}//stop the count and restoreif (en == 0){Count = value;eno = 0;return;}counter//count down to zeroif (en == 1){if (Count


wait until elapsed time = value//unit = 1 msif (en == 1){if (CT() – T1 >= value )eno = 1;elseeno = 0;return;}eno = 0;return;TOF (Timer Off)//initialif (Initialized == 0){T1 = CT(); //CT=current_timeInitialized = 1;}//stop the timerif (en == 0)T1 = CT();//wait until elapsed time = value//unit = 1 msif (en == 1){if (CT() – T1 >= value )eno = 0;elseeno = 1;return;}timereno = 0;return;TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 34Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Beepif(en == 1){hmi_Beep();eno = 1;return;}else{eno = 0;return;}TOUCH_BEEP_ON(Beep while a widget touched)if(en == 1){hmi_TurnTouchBeep(1);eno = 1;return;}else{eno = 0;return;}TOUCH_BEEP_OFFif(en == 1){hmi_TurnTouchBeep(0);eno = 1;return;}else{eno = 0;return;}systemsystemsystemTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 35Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TOUCH_BEEP_STATEif(en == 1){if(state == 1); //ONeno = 1;else //OFFeno = 0;return;}else{eno = 0;return;}system4.3.3. Operations of Ladder Designer4.3.3.1. New Virtual Tags (F2)To use Ladder Designer, add variables for Ladder Designer first.1. Press F2 (HMI New Virtual Tag) to add virtual tags, an “Edit variable”window shows.2. Define a new variable in the name field and optionally fill the other fields.3. Finally, press OK button to take effect.Here, we add three variable v1, v2 and v3 for example in the next sections.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 36Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.3.3.2. Insert/Delete a RungTo insert a rung, move the cursor to the empty place and then press F2 (orF3/F4).(Or press F6, F7, F8 to insert a rung with a function block.)To delete a rung, move the cursor (the highlighted area) to the starting point ofthe rung and then press “Delete” key.4.3.3.3. Insert/Delete a Contact in a RungTo demonstrate how to insert/delete a contact and other related issues, weembed each function in the sequence of steps as followings.1. Associate a variable to a contactTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 37Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Press F2 to insert a new rung with a contact and a coil.In the new rung, double-click on the contact to invoke the “Select variable”window.Double-click on the variable in the list to set the variable to the contact.For example, we double-click on the variable “v1” and set to the contact. v1, v2and v3 are the variables set by “New Virtual Tags”. Refer to the “New VirtualTags” section.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 38Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


2. Insert a new contact in the left of the cursor (F2)Move the cursor to the “v1” contact and then press F2.And to make things clear, associate variable “v2” to the newly-inserted contact.3. Insert a new contact in the right of the cursor (F3)Move the cursor to the “v2” contact and then press F3.Associate variable “v3” to the newly-inserted contact.4. Insert a new contact which is parallel to the cursor (F4)Move the cursor to the “v3” contact and then press F4.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 39Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5. Set the type of a contactMove the cursor to a contact and then press the space bar to change thecontact type.For example, we move the cursor to the “v3” contact. Press the space bartwice to set the contact type to pulse contact.6. Delete a contact in the rungMove the cursor to the contact you want to delete. Then press the “delete” key.For example, we move the cursor to the “v3” contact and then press the“delete” key.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 40Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


7. Delete the rung.Move the cursor to the starting point of the rung and then press “Delete” key.4.3.3.4. Insert/Delete a Coil in a RungTo demonstrate how to insert/delete a coil and other related issues, we embedeach function in the sequence of steps as followings.1. Associate a variable to a coilPress F2 to insert a new rung with a contact and a coil.In the new rung, double-click on the coil to invoke the “Select variable”window.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 41Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Double-click on the variable in the list to set the variable to the coil.For example, we double-click on the variable “v1” and set to the contact. v1, v2and v3 are the variables set by “New Virtual Tags”. Refer to the “New VirtualTags” section.2. Insert a new coil which is parallel to the cursor (F5)Move the cursor to the “v1” coil and then press F5.And to make things clear, associate variable “v2” to the newly-inserted coil.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 42Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. Set the type of a coilMove the cursor to a coil and then press the space bar to change the coil type.For example, we move the cursor to the “v2” coil. Press the space bar twice toset the coil type to the “set” coil.4. Delete a coil in the rungMove the cursor to the coil you want to delete. Then press the “delete” key.For example, we move the cursor to the “v1” coil and then press the “delete”key.5. Delete the rung.Move the cursor to the starting point of the rung and then press “Delete” key.4.3.3.5. Insert/Delete a Function Block in a RungTo demonstrate how to insert/delete a function block and other related issues,we embed each function in the sequence of steps as followings.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 43Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


1. Set a function type to a function block1. Insert a new rungPress F6 to insert a new rung with a function block and a coil.2. Choose function typeIn the new rung, double-click on the function block to invoke the“Function Block” window.Double-click on the “Function Name” in the list to set the type of thefunction.For example, we double-click on the Function “Assign” in the defaultgroup and set to the function block.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 44Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. Set the variables of the functionNow, we should set the variable to the function “Assign”. As you cansee, there are four variables, en, eno, out, in.• Both “en” and “eno” cannot associate variables by users.• We can associate “out” and “in” with the variables we define by“New Virtual Tags”.For example, we associate “v1” to “out” and “v2” to “in”. v1, v2 and v3are the variables set by “New Virtual Tags”. Refer to the “NewVirtual Tags” section.To associate “v1” to “out”, move the cursor just beside “out” but not inthe function block.Double-click on just beside “out” to invoke “Select variable” window.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 45Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Double-click on the variable in the list to set the variable to “out”.For example, we double-click on the variable “v1” and set to “out” of“Assign” function.Set “v2” to “in” of “Assign” function in the same way.Finally, set “v3” to the coil.This function assigns “v2” to “v1” if en is set to high.The coil “v3” is purely defined by eno, where eno = en.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 46Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


2. Insert a new function block in the left of the cursor (F6)Move the cursor to the “Assign” function block and then press F6.And to make things clear, set the newly-inserted function block as “NE” (notequal).3. Insert a new function block in the right of the cursor (F7)Move the cursor to the “NE” function block and then press F7.Set the newly-inserted function block as “GE” (greater or equal).4. Insert a new function block which is parallel to the cursor (F8)Move the cursor to the “GE” function block and then press F8.Set the newly-inserted function block as “LE” (less or equal).5. Delete a function block in the rungTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 47Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Move the cursor to the function block you want to delete. Then press the“delete” key.For example, we move the cursor to the “Assign” function block and then pressthe “delete” key.6. Delete the rung.Move the cursor to the starting point of the rung and then press “Delete” key.4.3.3.6. Jump to a LabelTo demonstrate how to jump to a label, we first create three rungs and thenexplain how to skip the second rung and jump to the third.1. Press F2 three times to create three rungs for example.2. Move the cursor to the coil of the first rung and then press F9 to add aJump.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 48Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. Double click on the starting point of the third rung to add a label“Test_Label” to it.4. Double click on the Jump of the first rung to associate with the label of thethird rung.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 49Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5. When running the ladder logic, set the coil of the first rung to high, skip thesecond rung and jump to the third rung if the contact of the first rung isclosed.4.3.4. User-Defined Function BlockWhy should we use function block?There may be cases that using only ladders is too complex. At that time,function block may be a good choice.To know how to add a user-defined function block, we first explain howHMIWorks uses these function blocks. Take function block “Assign” inthe group “default” for example.How HMIWorks Uses Function Blocks1. Go to the installation path of HMIWorks. In the sub-directory of“bin\FunctionBlock”, open the file “Category.ini” to load the groups.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 50Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


2. If we choose group “default”, HMIWorks open and load from the .inifile in the sub-directory both of the same name “default”. That is, the“default.ini” in the sub-directory “default”.3. Double click on the “Assign” to use in the Ladder Designer. LadderDesigner uses the logics defined in the file FB.hsf in thesub-directory “Assign”. FB.hsf uses C language. Following figureexplains what FB.hsf of “Assign” does.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 51Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to Add a User-Defined Function Block1. Create a new group if necessary.Go to the installation path of HMIWorks. In the sub-directory of“bin\FunctionBlock”, create a new directory “TestGroup” for exampleand open the file “Category.ini” to add a new item to represent thenew group. Note that: the name of the new item in the Category.inimust be exactly the same as the name of the newly-createddirectory.2. Go to the directory “TestGroup”, create a .ini file of the exactly samename as that of the group, that is, “TestGroup”. Create a sub-directoryof the TestGroup and we may call the sub-directory “TestFunction”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 52Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Finally, define newly-defined function, “TestFunction” in the file“TestGroup.ini”.Note that: VarCount = pin counts.Below shows what does the Row mean and the direction of the pins.3. In the directory “TestFunction”, create a new file FB.hsf to implementthe user-defined function.4.3.5. Register DevicesFor conveniences, users can register the I/O modules of ICP DAS on the samenetwork of TouchPAD to avoid adding virtual tags manually for all channels ofthe I/O modules.There are two types of devices which can be registered.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 53Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


1. MTCP: ET-7000/PET-7000 series (Modbus TCP)2. I7K: I-7000 series (RS-485)Press F3 or click on HMI menu to choose “Register Devices”.• For ET-7000/PET-7000 series:Select MTCP (Modbus TCP) for Device Type. And “Search ModbusDevices”.HMIWorks now scans the network for Modbus devices. Double click onthe Modbus device you want to add to the Ladder Designer as virtualtags. For example, we click on the row “PET-7026”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 54Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Press Save button to save tags which are automatically generatedaccording to the I/O module previously selected.Finally, you can see the registered device in the Workspace.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 55Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


• For I-7000 series:Select I7K for Device Type, specify serial port information and press “AddTags”.Press “Save” button to save tags which are automatically generatedaccording to the I/O module previously selected.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 56Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Finally, you can see the registered device in the Workspace.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 57Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.3.6. Associate Tags with ToolsIn order to use Ladder Designer to build HMI of TouchPAD, we shouldassociate tags with tools. Until now, we can use Slider, CheckBox, and Labelto associate themselves with tags.There are three methods to associate tools with tags. Every change of the tagin the Ladder Designer is updated to the tool in the run time after association.1. The first method: simply drag and drop the tags in the Workspace to theframe design space. A CheckBox is created with the tag associated.Note: this feature is only supported for the Widget, CheckBox.2. The second method: double click on the widget on the frame design spaceto evoke the “Select variable” window. Take a Slider for example.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 58Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Double click on the tag Name you want to associate with the widget. Thenyou can see the tag is associated with the widget (that is, the Slider forexample) by setting the property TagName to the name of the tag.3. The third method is click on the “…” button of the TagName property in theinspector of the Widget to evoke the “Select variable” window. Similarsteps as above.Special Note:Refer to section “Using an ObjectList”. Set RefObject property of a CheckBoxto an ObjectList which contains images and then associate a tag of the LadderDesigner to the CheckBox. Then every time the tag changes its value, theCheckBox toggles the images. This feature is especially useful when buildingswitches.4.3.7. User-Defined I/O DevicesTo know how to add a user-defined I/O device, we first explain how HMIWorksuses these I/O devices.There are several kinds of I/O devices.• DCON I/O devices: I-7000 series I/O devices by ICP DAS.http://www.icpdas.com/products/Remote_IO/i-7000/i-7000_introduction.htm• Modbus TCP I/O devices: ICP DAS provides ET/PET-7000 series.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 59Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


http://www.icpdas.com/products/Remote_IO/et-7000/et-7000_introduction.htm• Modbus RTU I/O devices: M-7000 series I/O devices by ICP DAShttp://www.icpdas.com/products/Remote_IO/m-7000/m-7000_introduction.htmWhere HMIWorks Put I/O Device InformationHMIWorks puts I/O device information in the following locations.Some explanations for above figure:• “C:\ICPDAS\HMIWorks_Standard\” is the default installation path. (Usersmay have different installation paths.)• I7000.ini is the configuration file for I-7000 series I/O devices andModules.ini is that for Modbus TCP series I/O devices.• Each I/O device has a file, IO.hsf, in the directory which must be namedafter the device’s name.• IO.hsf is the file written by C language and defines the behaviors of thedevices.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 60Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


• Every device has its only one the-same-name directory. With all thedevice directories together, we group the same kind of I/O devices into thegroup directory. In above figure, I7K and MTCP are group directories. I7Kis for I-7000 series I/O devices and MTCP is for Modbus TCP series I/Odevices.How “Register Devices (F3)” Generates Tags• For I-7000 series I/O devices, press F3 key:• “Device Type” has two choices, I7K and MTCP, which correspond totwo sub-directories in the directory “[HMIWorks installpath]\bin\Modules\”. Select I7K.• “I7K Type” lists the devices in the directory I7K. After selecting thedevice, HMIWorks looks for the I/O points information from I7000.inifor the selected device. For example, if I-7065 is selected, HMIWorksgoes to I-7065 section in the I7000.ini and adds tags for I-7065.• For Modbus TCP series I/O devices, press F3 key:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 61Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


• “Device Type” has two choices, I7K and MTCP, which correspond totwo sub-directories in the directory “[HMIWorks installpath]\bin\Modules\”. Select MTCP.• “Search Modbus Devices” and select the device in the search resultlist by double click, for example PET-7060. Then HMIWorks looks forthe I/O points information from Modules.ini for the selected device,PET-7060. Finally, HMIWorks add tags as PET-7060 section in theModules.ini.How IO.hsf Defines I/O Behaviors• Take I-7065 for example (I-7000 series I/O device)Open the IO.hsf in the directory “[HMIWorks installpath]\bin\Modules\I7K\I-7065\”.The codes in IO.hsf are of C language.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 62Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Create a User-Defined I/O Device1. Create a directory of the same name as the device’s name in the directoryof I7K or MTCP.2. Define the I/O points, W_Action, R_Action, etc in the I7000.ini orModules.ini. (Be sure to add the device under the [Category] section inthe .ini file.)3. Implement the IO.hsf which is created in the-same-name directory of thedevice. (Refer to other devices, for example I-7065 as above.)Modbus RTU Device, Take PM-2133 For ExamplePM-2133 is the power meter module of ICP DAS. It is control by Modbus RTUprotocol. Here shows how to use HMIWorks to build a program for TouchPADto integrate with Modbus RTU modules.First, add item in the section [Category] and create a new section [PM-2133]in the I7000.ini file as the following figure shows. Create the PM-2133 directoryunder “[HMIWorks install path]\bin\Modules\I7K\”. And in the directoryPM-2133, create the IO.hsf file.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 63Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Second, implement the IO.hsf file.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 64Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 65Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Third, press F3 to “Register Devices”. Choose PM-2133 to add tags as thebelow figure shows and then press Save button.You can check the newly-added tags in the Workspace. Load the backgroundpicture, place Label widgets (or Sliders, CheckBoxs) on the frame and set theTagName property of the Label to the tag which is corresponding to the AIchannel of PM-2133.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 66Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Build the program and download into the TouchPAD. Now TouchPAD can beused to control PM-2133, a Modbus RTU module.4.4. Frames and ToolsThis section introduces properties and usages of frames and tools.In the Toolbox, there are three kinds of tools, Drawings, Widgets and Systemcomponets.Drawing:Drawing 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 screen.4. Picture: this tool is used to load an image file into a frame.5. Line: this tool is used to draw a line.Widget:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 67Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Widgets include the followings:1. TextPushButton: 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 OnClickevent.5. CheckBox: this tool is used to provide an alternative.6. Label: this tool is used to provide a string that can be modified duringrun-time.System: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. ObjectList: this tool is used to maintain a list of library objects which canbe used through property “RefObject” of TextPushButton and CheckBox.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 68Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.4.1. Properties of a FrameThis section introduces the properties of a frame.Properties of a FrameClick on the frame, and properties of the frame are shown in the inspector.propertiesBackgroundColorBrushStyleDefaultIDNameOnCreatedescriptionThe color of the background of the frame. The coloris represented by a three byte value in hexadecimalform. From the highest byte to the lowest, it is theblue byte, the green byte, the red byte in sequence.Solid or Clear.If BrushStyle is set to Solid, BackgroundColor iseffective. However this may make screen flash ifbackground color is quite different from the loadedpicture. Setting BrushStyle Clear disables theproperty BackgroundColor and prevents fromflashing.Whether this frame is default frame or not. Thedefault frame shows first after power on.The serial number of tools or frames which is usedto identify them.The name of the frameThe function name of the OnCreate event of theframe. Use OnCreate to perform some operationsTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 69Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


OnDestroyOnHideOnPaintOnShowProgramStylewhen the frame is created.The function name of the OnDestroy event of theframe. Use OnDestroy to perform some operationswhen the frame is destroyed.The function name of the OnHide event of theframe. Use OnHide to perform some operationswhen the frame is hidden.The function name of the OnPaint event of theframe. Use OnPaint to perform some operationswhen the frame is redrawn.The function name of the OnShow event of theframe. Use OnShow to perform some operationswhen the frame is shown.Standard (C/C++) or Ladder ProgramHow to change the BackgroundColor of a frameClick on the BackgroundColor in the inspector. Then click on the button “…”to open color window to select color.How to implement Event functions of a frameThere are 5 event functions of a frame, OnCreate, OnDestroy, OnHide,OnPaint, and OnShow.Take OnCreate event function for example.1. Click on the OnCreate in the inspector. Then click on the button “…” tocode-edited window for the OnCreate.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 70Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


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.4.4.2. Drawing a RectangleThis section shows how to draw a rectangle.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 71Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to draw a rectangle1. Left-click on the Rectangle icon in the Drawing list of theToolbox.2. Move the cursor over the frame panel.3. Left-click (and not release) on the point of the frame panel asthe left-top vertex of the rectangle to draw.4. Move the mouse to form a rectangle as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the rectangle to draw.5. Release the left button of the mouse and you have a rectangleyou want.PS. What to do if I want to draw a square?Step 3 ~ step 5 with the “Ctrl” key pressed at the same time.Properties of RectangleTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 72Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


propertiesBrushStyleFillColorHeightIDLeftNameOutlineColorTopWidthdescriptionWhat style to fill to a rectangleWhat color to fill in the rectangle. The color isrepresented by a three byte value inhexadecimal form. From the highest byte tothe lowest, it is the blue byte, the green byte,the red byte in sequence.Vertical side length of the rectangleThe serial number of tools (including Drawingsand Widgets) which is used to identify them.x-coordinate of the left-top vertex of therectangleThe name of the rectangleThe outline color of the rectangley-coordinate of the left-top vertex of therectangleHorizontal side length of the rectangleHow to change the FillColor and OutlineColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor uses similar way.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 73Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.4.4.3. Drawing an EllipseThis section shows how to draw an ellipse.How to draw an ellipse1. Left-click on the Ellipse icon in the Drawing 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 asthe left-top vertex of the rectangle that inscribes the ellipse toTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 74Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


draw.4. Move the mouse to form the ellipse you want and stop themouse while the cursor is at the point of the right-bottom vertexof the rectangle that inscribes the ellipse to draw.5. Release the left button of the mouse and you have an ellipseyou 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 EllipsepropertiesBrushStyleFillColordescriptionWhat style to fill to an ellipseWhat color to fill in the ellipse. The color isrepresented by a three byte value inhexadecimal form. From the highest byte toTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 75Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


HeightIDLeftNameOutlineColorTopWidththe lowest, it is the blue byte, the green byte,the red byte in sequence.Vertical side length of the rectangle thatinscribes the ellipse to drawThe serial number of tools (including Drawingsand Widgets) which is used to identify them.x-coordinate of the left-top vertex of therectangle that inscribes the ellipse to drawThe name of the ellipseThe outline color of the rectangle that inscribesthe ellipse to drawy-coordinate of the left-top vertex of therectangle that inscribes the ellipse to drawHorizontal side length of the rectangle thatinscribes the ellipse to drawHow to change the FillColor and OutlineColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor uses similar way.For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 76Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.4.4. Drawing a TextThis section shows how to draw a Text.How to draw a Text1. Left-click on the Text icon in the Drawing 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 ofthe rectangle that encloses the Text to draw.4. Change the Text property in the inspector to “Hello”, forexample.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 77Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Properties of TextpropertiesAlignmentAutoScaleFontSizedescriptionThis property decides which position of thestring locates. Left, right, or center.(LeftJustify, RightJustify, or Center)Note: this property is enabled only whenAutoSize=TrueAutomatically scale the font size to fit therectangle which encloses the Text.Note: this property is enabled only whenAutoSize=True.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 78Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


AutoSizeBrushStyleFontHeightIDLeftNameTextTextAsImageTopWidthTrue or False. This property is used toindicate that whether the size of therectangle which encloses Text can beautomatically changed to cover the wholestring.What style to fill to the rectangle thatencloses the TextThe font of the Text.Note: this property is enabled only whenTextAsImage=True.Vertical side length of the rectangle thatencloses the Text to drawThe serial number of tools (includingDrawings and Widgets) which is used toidentify them.x-coordinate of the left-top vertex of therectangle that encloses the Text to drawThe name of the TextThe string of the Text to showTrue or False. Whether text is stored as animage or not. If the text is treated as animage, of course, it takes more space tostore and more time to download.y-coordinate of the left-top vertex of therectangle that encloses the Text to drawHorizontal side length of the rectangle thatencloses the Text to drawHow to change the font of TextClick 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 nottake effect.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 79Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.4.5. Loading a PictureThis section shows how to load a Picture.How to load a Picture1. Left-click on the Picture icon in the Drawing 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 asthe left-top vertex of the rectangle that encloses the picture toload.4. Move the mouse to cover the area where you want to put thepicture while the cursor is at the point of the right-bottom vertexof the rectangle that encloses the picture.5. Release the left button of the mouse and you have an area forthe picture.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 80Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Click on the picture property in the inspector. Then click on thebutton “…” to open “Select picture” window to load a picture.7. The frame with the loaded picture.8. Or you can just copy an image from the clipboard and paste onHMIWorks. HMIWorks create a Picture and then load the imageTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 81Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


from clipboard automatically.Properties of PicturepropertiesAutoSizeFrameIndexHeightHiColorIDLeftNamePictureTopWidthdescriptionTrue or False. This property is used to indicatethat whether the size of the Picture can bechanged or not.IgnoredVertical side length of the rectangle thatencloses the Picture to loadTrue or False. This property decides whetherthe loaded picture is stored as 16-bit color(True) or 8-bit color (False). Default is 8-bitcolor.The serial number of tools (including Drawingsand Widgets) which is used to identify them.x-coordinate of the left-top vertex of therectangle that encloses the Picture to loadThe name of the PictureThe picture to be loadedy-coordinate of the left-top vertex of therectangle that encloses the Picture to loadHorizontal side length of the rectangle thatencloses the Picture to loadTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 82Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Trade-off between firmware size and resolutionAbove is the comparison between HiColor = True and HiColor = False.The left picture is original one in HMIWorks. The two right-side picturesare real photos. One is HiColor = True and the other HiColor = False.As you can see, setting HiColor to False makes the photo fragmentizedwhile setting HiColor to True does not. Because 8-bit color does nothave enough color (256 only) to represent the picture, similar colors arerepresented by the same color and this results in fragmentation.However, preventing pictures from fragmentation costs TouchPADbigger size of memory. Take above picture for example, setting HiColorto True uses memory of 189KB but setting HiColor to False costs only69KB.4.4.6. Drawing a LineThis section shows how to draw a line segment.How to draw a line segment:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 83Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


1. Left-click on the Line icon in the Drawing 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 asthe first end point of the line segment to draw.4. Move the mouse to decide the second end point of the linesegment to draw.5. Release the left button of the mouse and you have a linesegment you want.Properties of LinepropertiesHeightIDIsSoliddescriptionVertical side length of the rectangle whosediagonal line is the line segment to drawThe serial number of tools (including Drawingsand Widgets) which is used to identify them.IgnoredTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 84Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


LeftNameTopWidthx-coordinate of the left-top vertex of therectangle whose diagonal line is the linesegment to drawThe name of the line segmenty-coordinate of the left-top vertex of therectangle whose diagonal line is the linesegment to drawHorizontal side length of the rectangle whosediagonal line is the line segment to draw4.4.7. Using a TextPushButtonThis section shows how to use a TextPushButton.What is a TextPushButton?A TextPushButton is a button with a Text on it. When a TextPushButtonis pressed and not released, the status is changed. But the status isrestored back to the original after you release it.How to use a TextPushButton:1. Left-click on the TextPushButton icon in the widget list of theToolbox.2. Move the cursor over the frame panel.3. Left-click (and not release) on the point of the frame panel asthe left-top vertex of the TextPushButton rectangle.4. Move the mouse to form a TextPushButton as you want andstop the mouse while the cursor is at the point of theright-bottom vertex of the TextPushButton rectangle.5. Release the left button of the mouse and you have aTextPushButton you want.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 85Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Click on the Text property in the inspector to change the stringon the TextPushButton. Here we change the Text to “Hello”.7. Double click on the TextPushButton on the frame panel. Writecodes you want in the evoking code-edited window for theOn-Click event. Here we use hmi_Beep() to sound a beep forexample.Note: the property “OnClick” is supported only in programmingtype “Standard C/C++”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 86Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


8. Save the file, and then press OK in the code-edited window.Properties of Text PushButtonpropertiesFillColordescriptionWhat color to fill in the TextPushButton. The colorTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 87Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


FontHeightIDLeftNameOnClickOutlineColorPressFillColorReferenceRefObjectTextTopWidthis represented by a three byte value inhexadecimal form. From the highest byte to thelowest, it is the blue byte, the green byte, the redbyte in sequence.The font of the text. Note that the only font styleand size are effective.Vertical side length of the TextPushButtonThe serial number of tools (including Drawingsand Widgets) which is used to identify them.x-coordinate of the left-top vertex of theTextPushButtonThe name of the TextPushButtonThe function name of the on-click event of theTextPushButton.Note: the property is supported only inprogramming type “Standard C/C++”.The outline color of the TextPushButtonThe color to fill in the TextPushButton when theTextPushButton on the TouchPAD is touched (butnot yet released)The reference to a frame. That is, when pressingon the TextPushButton, TouchPAD goes to theframe you specified in this property.Note: the priority of the property “Reference” ishigher than that of “OnClick”.The reference to the object list. An object list is acomponent that can be chosen in the Toolbox tomaintain a list of the elements of the library. Referto “Using an ObjectList” section for details.The string of the TextPushButtony-coordinate of the left-top vertex of theTextPushButtonHorizontal side length of the TextPushButtonTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 88Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to change FillColor, OutlineColor, andPressFillColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor and PressFillColoruse similar way.For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.How to use Reference to another frameThe 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 OnClickevent.It’s easy to specify a value to the Reference property. Simply click onthe Reference property in the inspector and then choose the frame forTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 89Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


eference.4.4.8. Using a SliderThis 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 usedin 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 asthe left-top vertex of the Slider rectangle.4. Move the mouse to form a Slider as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the Slider rectangle.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 90Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5. Release the left button of the mouse and you have a Slider youwant.6. Double click on the Slider on the frame panel. Write codes youwant in the evoking code-edited window for theOnSliderChange event. Here we use hmi_Beep() to sound abeep for example.Note: the property “OnSliderChange” is supported only inprogramming type “Standard C/C++”.7. Save the file, and then press OK in the code-edited window.Properties of SliderTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 91Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


propertiesBackgroundFillColorBackgroundTextColorFillColorFontdescriptionWhat color to fill in the background of theSlider. The color is represented by a threebyte value in hexadecimal form. From thehighest byte to the lowest, it is the bluebyte, the green byte, the red byte insequence.What’s color of the text in the backgroundof the Slider. The color is represented bya three byte value in hexadecimal form.From the highest byte to the lowest, it isthe blue byte, the green byte, the red bytein sequence.What color to fill in the Slider. The color isrepresented by a three byte value inhexadecimal form. From the highest byteto the lowest, it is the blue byte, the greenbyte, the red byte in sequence.The font of the text on the SliderTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 92Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


HeightIDLeftMaxMinNameOnSliderChangeOutlineColorPositionTagNameTopVerticalWidthVertical side length of the SliderThe serial number of tools (includingDrawings and Widgets) which is used toidentify them.x-coordinate of the left-top vertex of theSliderThe maximum value of the PositionThe minimum value of the PositionThe name of the SliderThe function name of theon-slider-change event of the Slider.Note: the property is supported only inprogramming type “Standard C/C++”.The outline color of the SliderThe value where the slider locate(between Max and Min)Associate a variable (tag) in LadderDesigner.Note: the property is supported only inprogramming type “Ladder Program”.y-coordinate of the left-top vertex of theSliderThe direction of the SliderHorizontal side length of the SliderHow to change FillColor and OutlineColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor,BackgroundFillColor and BackgroundTextColor use similar way.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 93Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.4.4.9. Using a BitButtonThis section shows how to use a BitButton.What is a BitButton?A BitButton is a button with 3D appearance and releasing the pressedbutton does not change the status. When you press it, you can see thatTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 94Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


the BitButton is pressed “down”. This 3D-like appearance is achieved bytwo images so that it takes more spaces to store and more time todownload 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 asthe left-top vertex of the BitButton.4. Move the mouse to form a BitButton as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the BitButton.5. Release the left button of the mouse and you have a BitButtonyou want.6. Click on the Text property in the inspector to change the stringon the BitButton. Here we change the Text to “Hello”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 95Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


7. Double click on the BitButton on the frame panel. Write codesyou want in the evoking code-edited window for the On-Clickevent. Here we use hmi_Beep() to sound a beep for example.Note: the property “OnClick” is supported only in programmingtype “Standard C/C++”.8. Save the file, and then press OK in the code-edited window.Properties of BitButtonpropertiesdescriptionFontThe font of the text of the BitButtonTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 96Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


HeightIDLeftNameOnClickReferenceTextTopWidthVertical side length of the BitButtonThe serial number of toolsx-coordinate of the left-top vertex of theBitButtonThe name of the BitButtonThe function name of the on-click event of theBitButton.Note: the property is supported only inprogramming type “Standard C/C++”.The reference to a frame. That is, whenpressing on the BitButton, TouchPAD goes tothe frame you specified in this property.Note: the priority of the property “Reference”is higher than that of “OnClick”.The string on the BitButtony-coordinate of the left-top vertex of theBitButtonHorizontal side length of the BitButtonHow to use Reference to another frameThe 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 OnClickevent.It’s easy to specify a value to the Reference property. Simply click onthe Reference property in the inspector and then choose the frame forreference.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 97Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.4.10. Using a HotSpotThis section shows how to use a HotSpot.What is a HotSpot?HotSpot decides an area which is capable of responding to on-clickevents. Usually, putting a HotSpot on the Drawing components (that is,Rectangle, Ellipse, Text, Picture, and Line) makes them to respond toon-click events. After downloading to TouchPAD, a HotSpot is invisible.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 asthe left-top vertex of the HotSpot rectangle.4. Move the mouse to form a HotSpot as you want and stop themouse while the cursor is at the point of the right-bottom vertexTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 98Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


of the HotSpot rectangle.5. Release the left button of the mouse and you have a HotSpotyou want.6. Double click on the HotSpot on the frame panel. Write codesyou want in the evoking code-edited window for the On-Clickevent. Here we use hmi_Beep() to sound a beep for example.Note: the property “OnClick” is supported only in programmingtype “Standard C/C++”.7. Save the file, and then press OK in the code-edited window.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 99Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Properties of HotSpotpropertiesHeightIDLeftNameOnClickReferenceTopWidthdescriptionVertical side length of the HotSpotThe serial number of tools (including Drawings andWidgets) which is used to identify them.x-coordinate of the left-top vertex of the HotSpotThe name of the HotSpotThe function name of the on-click event of theHotSpot.Note: the property is supported only in programmingtype “Standard C/C++”.The reference to a frame. That is, when pressing onthe HotSpot, TouchPAD goes to the frame youspecified in this property.Note: the priority of the property “Reference” ishigher than that of “OnClick”.y-coordinate of the left-top vertex of the HotSpotHorizontal side length of the HotSpotHow to use Reference to another frameThe 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 OnClickevent.It’s easy to specify a value to the Reference property. Simply click onthe Reference property in the inspector and then choose the frame forTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 100Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


eference.4.4.11. Using a CheckBoxThis 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 asthe left-top vertex of the CheckBox rectangle.4. Move the mouse to form a CheckBox as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the CheckBox rectangle.5. Release the left button of the mouse and you have a CheckBoxyou want.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 101Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Click on the Text property in the inspector to change the stringon the CheckBox. Here we change the Text to “Hello”.7. Double click on the CheckBox on the frame panel. Write codesyou want in the evoking code-edited window for the OnChangeevent. Here we use hmi_Beep() to sound a beep for example.Note: the property “OnChange” is supported only inprogramming type “Standard C/C++”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 102Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


8. Save the file, and then press OK in the code-edited window.Properties of CheckBoxpropertiesBoxSizeDisplayTypeFillColordescriptionThe size of the checking boxHow to display the pictures which are loaded fromRefObject property.What color to fill in the CheckBox. The color isrepresented by a three byte value in hexadecimalTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 103Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


FontHeightIDLeftNameOnChangeOutlineColorRefObjectSelectedTagNameTextTopWidthform. From the highest byte to the lowest, it is theblue byte, the green byte, the red byte in sequence.The font of the text of the CheckBoxVertical side length of the CheckBoxThe serial number of tools (including Drawings andWidgets) which is used to identify them.x-coordinate of the left-top vertex of the CheckBoxThe name of the CheckBoxThe function name of the OnChange event of theCheckBox.The outline color of the CheckBoxThe reference to the object list. An object list is acomponent that can be chosen in the Toolbox tomaintain a list of the elements of the library. Refer tosection “Using an ObjectList” for details.True or false. Whether the CheckBox is checked ornotAssociate a variable (tag) in Ladder Designer.Note: the property is supported only inprogramming type “Ladder Program”.The string of the CheckBoxy-coordinate of the left-top vertex of the CheckBoxHorizontal side length of the CheckBoxHow to change FillColor and OutlineColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor uses similar way.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 104Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.4.4.12. Using a LabelThis 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 theleft-top vertex of the Label rectangle.4. Move the mouse to form a Label as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the Label rectangle.5. Release the left button of the mouse and you have a Label youwant.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 105Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Click on the Text property in the inspector to change the stringon the Label. Here we change the Text to “Hello”.Properties of LabelTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 106Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


propertiesAlignmentDecimalDigitsFillColorFontHeightIDLeftNameOutlineColorTagNamedescriptionThis property decides which position of the stringlocates. Left, right, or center. (LeftJustify,RightJustify, or Center)The power to which ten must be raised to producethe value, say divisor, which is used to divide thevalue of the associated tag of this Label. The valueof the tag must be divided by the divisor to show onthe screen to represent decimal digits.Note: the property is supported only inprogramming type “Ladder Program”.What color to fill in the Label. The color isrepresented by a three byte value in hexadecimalform. From the highest byte to the lowest, it is theblue byte, the green byte, the red byte in sequence.The font of the textVertical side length of the LabelThe serial number of tools (including Drawings andWidgets) which is used to identify them.x-coordinate of the left-top vertex of the LabelThe name of the LabelThe outline color of the LabelAssociate a variable (tag) in Ladder Designer.Note: the property is supported only inprogramming type “Ladder Program”.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 107Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TextTopWidthThe string of the Labely-coordinate of the left-top vertex of the LabelHorizontal side length of the LabelHow to change FillColor and OutlineColorClick on the FillColor in the inspector. Then click on the button “…” toopen color window to select color. The OutlineColor uses similar way.For example, set FillColor to green and OutlineColor to red and thenyou may have the results as shown.4.4.13. Using a TimerThis section shows how to use a Timer.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 108Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Note: this tool is supported only in programming type “Standard C/C++”.What is a Timer?A Timer is a component that executes the OnExecute event functionevery 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 worryabout the size or the location of the Timer because the Timer isinvisible when downloaded to the TouchPAD. Also it’s notnecessary to put the Timer on the frame panel.4. Click on the Interval property in the inspector to change therepeating period of the Timer. Here we set the Interval to 1000(ms). And then change the property “Enabled” to True.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 109Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5. Double click on the Timer on the frame panel. Write codes youwant in the evoking code-edited window for the OnExecuteevent. 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 TimerTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 110Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


propertiesEnabledHeightIDIntervalLeftNameOnExecuteTopWidthdescriptionWhether the Timer is enabled or notVertical side length of the Timer (This propertycannot be changed by users.)The serial number of tools (includingDrawings, Widgets, System component) whichis used to identify them.The time span of two consecutive OnExecuteeventsx-coordinate of the left-top vertex of the TimerThe name of the TimerThe function name of the OnExecute event ofthe Timer.y-coordinate of the left-top vertex of the TimerHorizontal side length of the Timer (cannot bechanged by users.)4.4.14. Using a PaintBoxThis section shows how to use a PaintBox.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 111Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Note: this tool is supported only in programming type “Standard C/C++”.What is a PaintBox?A PaintBox is a component which is used to paint shapes, such asrectangles, 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 theleft-top vertex of the PaintBox rectangle.4. Move the mouse to form a PaintBox as you want and stop themouse while the cursor is at the point of the right-bottom vertexof the PaintBox.5. Release the left button of the mouse and you have a PaintBoxyou want.6. Double click on the PaintBox on the frame panel. Write codesyou want in the evoking code-edited window for the OnPaintevent. Here we draw a rectangle for example.Note 1: the diagonal points used in the function of hmi_FillRectTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 112Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


are in the same coordinate as the frame.Note 2: the part of the rectangle which is outside the perimeterof 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. WhileWidgetRight(pWidget) and WidgetBottom(pWidget) are those ofthe right-bottom.7. Save the file, and then press OK in the code-edited window.Properties of PaintBoxpropertiesHeightdescriptionVertical side length of the PaintBoxTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 113Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


IDLeftNameOnPaintTopWidthThe serial number of tools (including Drawings andWidgets) which is used to identify them.x-coordinate of the left-top vertex of the PaintBoxThe name of the PaintBoxThe function name of the OnPaint event of thePaintBox.y-coordinate of the left-top vertex of the PaintBoxHorizontal side length of the PaintBox4.4.15. Using an ObjectListThis section shows how to use an ObjectList.What is an ObjectList?An ObjectList is a component which is used to maintain a list of libraryobjects (usually two library objects). An ObjectList can be used in bothprogramming type. Combined with “RefObject” properties of the widgetTextPushButton and CheckBox, users can easily toggle two images.Note: TextPushButton does not have the property, TagName, so it is notused in programming type Ladder Program.How to use an ObjectList:1. Left-click on the ObjectList icon in the System list of theToolbox.2. Move the cursor over the frame panel.3. Left-click on the frame panel. Note that you should not worryabout the size or the location of the ObjectList because theObjectList is invisible when downloaded to the TouchPAD. AlsoTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 114Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


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 ina TextPushButton or a CheckBox. After downloading to theTouchPAD, the images of the library objects replace theTextPushButton or the CheckBox. When the state of theTextPushButton or the CheckBox changed, users see only theimages of the library objects toggles but do not see the originalappearances of state exchanges of the TextPushButton or theCheckBox.5. Add two library objects in the ObjectList by double-click on theObjectList icon. Then the window of ObjectList shows. Doubleclick on the list of the library objects adds the clicked libraryobject to the right side region.Note: you only need to add two library objects to the right sideregion, because both TextPushButton and CheckBox have onlytwo states.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 115Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Place a CheckBox on the frame for example. Be sure to makethe size of the CheckBox large enough to cover the wholeimage of the library object.7. Go to the inspector for the RefObject property of the CheckBox.Choose the ObjectList to make connections between theObjectList and the CheckBox.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 116Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


8. Build and download the project. You can see two images of thelibrary objects toggle and no more the TextPushButton andCheckBox.Properties of ObjectListpropertiesHeightIDLeftNameObjectsTopdescriptionVertical side length of the ObjectListThe serial number of tools (including Drawings andWidgets) which is used to identify them.x-coordinate of the left-top vertex of the ObjectListThe name of the ObjectListThe maintained library objectsy-coordinate of the left-top vertex of the ObjectListTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 117Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


WidthHorizontal side length of the ObjectListRelationships between TouchPAD and I/O moduleTake I-7066 for example, Register Devices (F3) to automaticallygenerate tags and then drag and drop the tag on the frame.HMIWorks does the followings to build the relationships betweenTouchPAD and I/O modules.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 118Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Note: the TagName property takes effect only in the programming type,Ladder Program. (It’s easier in programming type, C/C++. Control the I/Oby using API function, dcon_WriteDO, in the event function of theCheckBox.)4.5. MenusAll the menus can be accessed from menu bar or the popup menu.The menu bar:Right click on the frame design space, popup menu shows.The frame design space:Note:The items in the HMI menu are introduced in the section 4.3 Ladder Designer.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 119Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.1. Starting Design, File MenuNew …Create a new project.Specify project name, its location, the orientation, the programming typeand select the module model.Then press OK.Open …Open a HMIWorks project (.hxp).TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 120Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.2. Cascading and Grouping, Arrange MenuTo demonstrate functions of cascading and grouping, first draw threeshapes as followings:Back OneMake the selected object 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.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 121Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Forward OneMake the selected object go up a level of the stack.For example, select the green circle and click “Forward One” in themenu. You can see that the green circle goes up one level in the stack.To backMake the selected object 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 thestack.To frontMake the selected object go up to the highest level of the stack.For example, select the red square and click “To front” in the menu. Youcan see that the red square goes up to the highest level in the stack.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 122Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


GroupPut tools(Drawing tools, Widgets and System components) together asa 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.UngroupBreak a group into its original tools.For example, select the group and then click “Ungroup” in the menu.4.5.3. Rotating and Flipping, Edit MenuTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 123Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


To demonstrate functions of rotating and flipping, first draw threeshapes as followings:Rotate CCWRotate the selected item in the counter-clockwise direction.For example, first put three items into one group, select the group andthen click on “Rotate CCW” in the menu. You can see that this group ofshapes is rotated counter-clockwise.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 124Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Rotate CWRotate the selected item in the clockwise directionFor example, first put three items into one group, select the group andthen click on “Rotate CW” in the menu. You can see that this group ofshapes is rotated clockwise.Flip horizontalFlip the selected item in the horizontal direction.For example, first put three items into one group, select the group andthen click on “Flip horizontal” in the menu. You can see that this groupof shapes is flipped horizontally.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 125Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Flip verticalFlip the selected item in the vertical direction.For example, first put three items into one group, select the group andthen click on “Flip vertical” in the menu. You can see that this group ofshapes is flipped vertically.4.5.4. Gridding and Viewing, View MenuTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 126Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Show gridShow grid on the frame. Take the following snapshot for example, andthen you can see the dots on the frame. Those dots represent the grid.Snap to gridSnap vectors or widgets to the grid.InspectorDisplay the inspector window or notLibraryDisplay the library window or notResultsDisplay the Results window or notNext FrameGo to next frameTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 127Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.5. Frame Managing and Aligning, LayoutMenu• Frame Management:New FrameCreate a new frame(select the programmingtype)Delete FrameDelete the current frameRename FrameRename a frame• Alignment:To demonstrate the functions of alignment, drawthree shapes as followingsTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 128Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Note: all alignment functions refer to the last shape you draw. In aboveexample, all alignment functions refer to the square.Align leftAlign the leftmost edge of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align left” in the menu.Align horizontal centerAlign the horizontal center of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align horizontalcenter” in the menu.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 129Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Align rightAlign the rightmost edge of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align right” in themenu.Align topAlign the topmost edge of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align top” in the menu.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 130Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Align vertical centerAlign the vertical center of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align vertical center”in the menu.Align bottomAlign the bottommost edge of all the selected items to that of last-drawnitem.For example, select all the items and then click “Align bottom” in themenu.Align centerAlign 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 themenu.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 131Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.6. Build and Download to Run, Run Menu4.5.6.1. Setup Device, TPD-280TPD-280 uses RS-485 as its communication method. It is not able to connectthrough Ethernet network. However, TPD-283 is in the different way soHMIWorks provides two distinct methods for setting devices for both TPD-280and TPD-283.Setup TPD-280Select the com port that connects to the TPD-280.Before downloading programs to the TouchPAD, be sure to setup theTouchPAD to connect.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 132Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.6.2. Setup Device, TPD-283TPD-283 uses Ethernet as its communication method. It is not able to connectthrough RS-485 network. However, TPD-280 is in the different way soHMIWorks provides two distinct methods for setup devices for both TPD-280and TPD-283.Setup TPD-283Before downloading programs to the TouchPAD, be sure to setup theTouchPAD to connect.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 133Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


itemsSearch TouchPADHost IP AddressDevice NicknameDevice MAC addressDevice IP Address (inthe runtime)Device IP Address(for downloading)descriptionSearch TouchPADs on the network. Make surethat TouchPADs and the local computer are inthe same subnet.The IP address of the local computerThe nickname used to identify the TouchPADwhich is selected in the “Search TouchPAD”.The MAC address of the TouchPAD which isselected in the “Search TouchPAD”.The IP address of the TouchPAD which is usedin the runtime of the program.The IP address of the TouchPAD which is usedwhen downloading programs.Click on the menu: Run Setup Device.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 134Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Press “Search TouchPAD” button to search.Note1: MAC address can be found in the back of TPD-283.HMIWorks uses MAC to search TouchPAD. To see if TouchPAD ison the network, check that if there is a device with the MAC in thelist after searching.Note2: Be sure to put TPD-283 and your PC in the same subnet.Note3: We have UDP filter enabled by default to search TouchPAD only.Device NicknameTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 135Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


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 download program to the TouchPAD.Device IP address in the runtimeThere 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 IPaddress 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 tobe used in the runtime.Device IP address when downloadingDownloading programs to TouchPADs uses different IP addresses fromthose in the run time.4.5.6.3. Other Items in the Run MenuRun (F9) Rendering + Build + DownloadRendering and build (F5) Rendering + BuildRendering Only (Ctrl + F5) Generate source codes for frames, tools, ladders, etc.Download Only (Ctrl + F9) Download building bin file to TouchPADConsole (F10) Evoke console window (cmd.exe)TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 136Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4.5.6.4. Download Firmware in TPD-280Downloading firmware in TPD-283 is easy. Just click on “Run” or“Download Only”. However, downloading firmware in TPD-280 is a littlecomplicated. As the following figure shows, set rotary switch to one whendownloading the firmware and set rotary switch to zero while the firmware isrunning on TPD-280.4.5.7. Library Management, Popup MenuTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 137Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to add items to libraryFor 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.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 138Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to use items from libraryFor example as below:1. Click on the tab of “Libraries” to show library window.2. Pick the object you want. You can preview the object in the previewbox.3. Click (and not released) on the item in the preview box and thendrag the preview item and drop it on the frame panel.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 139Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


How to add a new folder into library windowBy default we have the only folder “default” in the library window as thebelow shows.To add a new folder into the library window, create a new folder in thefollowing path:“HMIWorks_install_path\bin\Lib\” where the HMIWorks_install_path isthe installation path of HMIWorks.Supposed the installation path of HMIWorks is“C:\ICPDAS\HMIWorks_Standard”. And we want to add a new foldernamed “Test” into the library window. Then all we have the do iscreating a new folder named Test in the directory of“C:\ICPDAS\HMIWorks_Standard\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.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 140Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5. Make a Simple ProjectThere are two programming types in HMIWorks. In this chapter, we introducehow to build your first project for each programming type.5.1. Your First Project UsingStandard C/C++1. Create a new projectGo to the menu: File New…, and select the Model, then specify theProject name, the Location, the Orientation, and the ProgrammingType.Here we choose programming type as [1] Standard C/C++.2. Design the Graphic User InterfaceFor example, draw a rectangular and fill the color. Of course, you candraw more complex and beautiful figures. Here, we simplyTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 141Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


demonstrate how to make a simple project.And then select a Widget. For example, pick a BitButton.3. Modify Source CodesDouble click on the BitButton to invoke the code-editing window.Use “hmi_Beep();” to sound a beep for example, then press OK.Of course, more codes can be written to fulfill the requirements. Herewe simply demonstrate how to make a simple project so we make thecodes as simple as possible.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 142Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4. Setup DeviceGo to the menu Run Setup Device. Refer to “Build and Downloadto Run, Run Menu” for details.5. Compile and Download to RunAfter connecting to TouchPAD, press F9 to run (or Run Run).As the following figure shows, pressing the button makes TouchPADsound a beep.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 143Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


5.2. Your First Project Using LadderProgram1. Create a new projectGo to the menu: File New…, and select the Model, then specify theProject name, the Location, the Orientation, and the ProgrammingType. Here we choose programming type as [2] Ladder Program.2. Design the Graphic User InterfaceFor example, place a CheckBox and a Label on the frame. Here, weplan to take the CheckBox as an input and the Label as an output.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 144Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Drag an ObjectList and drop in the frame design space. Double clickon the ObjectList icon to evoke the “ObjectList” window. In the“ObjectList” window, double click on the pictures you want. Usersneed to double click on two pictures, one is for the checked state ofthe CheckBox and the other is for the unchecked state. Press OK tofinish this step.Make the CheckBox refer to the ObjectList by setting the property“RefObject” to the ObjectList. Now toggling the states of theCheckBox becomes the exchanges of the pictures in the ObjectList.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 145Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. Design the Ladder DiagramFirst, add virtual tags (variables) for the ladder diagram. Press F2key or click on “New Virtual Tag” in the “HMI” menu. Here, we addtwo tags, v1 and v2, for example.After adding the tags, users can check in the Workspace.Press F4 key or click on “Ladder Designer” in the “HMI” menu toopen the Ladder Designer. In the Ladder Designer, press F2 tocreate a new rung.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 146Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Double click on the contact of the first rung in the Ladder Designer.Then a “Select variable” shows. Choose the variable to associatewith the contact.Here, we select variable v1 to associate the contact. And then weassociate v2 with the coil in the similar way.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 147Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Then we associate the CheckBox with v1 and the Label with v2 by“TagName” properties of themselves.After setting the “TagName” properties, users can check in theInspector.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 148Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


4. Setup DeviceGo to the menu Run Setup Device. Refer to “Build andDownload to Run, Run Menu” for details.5. Compile and Download to RunAfter connecting to TouchPAD, press F9 to run (or Run Run).As the following figure shows, pressing the button changes the valueof the Label from 0 1, or 1 0.5.3. Integrate TPD-280 Series withI/O modulesIn this example, we use TPD-280-W to control an I-7066, the 7-channelphoto-MOS relay output module of ICP DAS. First, put I-7066 in the sameRS-485 network of TPD-280-W and configure I-7066 with DCON Utility(baudrate, data bit, parity, stop bit, Net ID).1. Use DCON Utility to setup I-7066Download DCON Utility to install and refer to the user manual.ftp://ftp.icpdas.com/pub/cd/8000cd/napdos/driver/dcon_utility/Then use DCON Utility to setup I-7066. Mainly set the followings:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 149Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Address(Net ID), Baudrate, Databit, Parity, Stopbit.2. Create a new projectGo to the menu: File New…, and select the Model, then specifythe Project name, the Location, the Orientation, and theProgramming Type. Here we choose programming type as [2]Ladder Program.3. Design the Graphic User InterfaceWe can skip this step.Here we just demonstrate how to quickly complete a whole newTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 150Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


project with I/O modules of ICP DAS.4. Design the Ladder DiagramPress F3 key or click on “Register Devices” of the “HMI” menu toevoke the “Devices” window to register I-7066.Choose “Device Type” as “I7K” and “I7K Type” as “I-7066”.Set other serial port information and then click “Add Tags” button.Finally press “Save” button to save and leave.Then pick up the picture which represents the tag. Drag and drop thetag that is corresponding to the DO0 of I-7066. On the frame designspace, the picture you just pick is now on the frame.5. Setup DeviceTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 151Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Go to the menu Run Setup Device. Refer to “Build andDownload to Run, Run Menu” for details.6. Compile and Download to RunAfter connecting to TouchPAD, press F9 to run (or Run Run).As the following figure shows, pressing the button changes theoutput of channel 0 of the I-7066.5.4. Integrate TPD-283 Series withI/O modulesIn this example, we use TPD-283-W to control a PET-7060, the 6-channelPower Relay Output and 6-channel Isolation Digital Input with PoEmodule of ICP DAS. First, put PET-7060 in the Ethernet network ofTPD-283-W and use browser to configure PET-7060.1. Configure I-7066 Using a BrowserDownload MiniOS7 Utility and its user manual onftp://ftp.icpdas.com/pub/cd/8000cd/napdos/minios7/utility/minios7_utility/Then use MiniOS7 Utility to change the IP setting of PET-7060. (BeTouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 152Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


sure to make PET-7060 and your PC in the same subnet.) Press F12to scan the network. After searching, click on PET-7060 and then clickon “IP setting” button to set IP.Finally, use a browser to connect to the PET-7060 and configure it.2. Create a New ProjectGo to the menu: File New…, and select the Model, then specify theProject name, the Location, the Orientation, and the ProgrammingType. Here we choose programming type as [2] Ladder Program.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 153Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. Design the Graphic User InterfaceWe can skip this step.Here we just demonstrate how to quickly complete a whole new projectwith I/O modules of ICP DAS.4. Design the Ladder DiagramPress F3 key or click on “Register Devices” of the “HMI” menu toevoke the “Devices” window to register PET-7060.a. Choose “Device Type” as “MTCP”.b. Press “Search Modbus Devices” button to scan the network.c. Double-click on the PET-7060 to automatically generate tags.d. Save the results by pressing “Save” button.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 154Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Then pick up the picture which represents the tag. Drag and drop thetag that is corresponding to the DO0 of PET-7060 to the frame designspace. On the frame design space, the picture you just pick is now onthe frame.5. Setup DeviceGo to the menu Run Setup Device. Refer to previous section fordetails.6. Compile and Download to RunAfter connecting to TPD-283-W, press F9 to run (or Run Run).As the following figure shows, pressing the button changes the outputof channel 0 of the PET-7060.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 155Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6. Advanced Programming in CWe have an API reference for TouchPAD. However, the API reference does notinclude API functions for handling widgets, such as TextPushButton,CheckBox, etc.Though you can refer to the generated codes to learn how to use these APIfunctions, all the API functions are defined in header files in the following path:“C:\ICPDAS\HMIWorks_Standard\include\grlib” and“C:\ICPDAS\HMIWorks_Standard\include”, where“C:\ICPDAS\HMIWorks_Standard” is the installation path.We give some examples in this chapter.6.1. Update Properties in Run TimeIt is a bit more complicated to change the properties of widgets in the run time.In this section, we demonstrate some commonly-used cases, including:1. FillColor and Text of a TextPushButton2. Percentage of a Slider3. Selected of a CheckBox4. Font, Text and TextColor of a LabelUpdating properties is implemented in event functions of widgets.Note that the naming convention of the event function of the widget (here thewidget is TextPushButton) is as followings:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 156Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6.1.1. FillColor and Text of a TextPushButtonThis section shows how to change FillColor and Text properties ofTextPushButton. Simply follow the steps below.1. Drag and drop a TextPushButton on the frame panel.2. Double click on the TextPushButton to implement its OnClick event function.Save the file and press OK.3. To make clear, we copy the codes below.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 157Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


void TextPushButton13OnClick(tWidget *pWidget){static char * str = "Hello World!";}PushButtonTextSet(&TextPushButton13, str);PushButtonFillColorSet(&TextPushButton13, 0x00FF00);WidgetPaint((tWidget*)&TextPushButton13);The effect of the OnClick function:For more API functions of TextPushButton, refer to pushbutton.h in thefollowing path:“C:\ICPDAS\HMIWorks_Standard\include\grlib”, where“C:\ICPDAS\HMIWorks_Standard” is the installation path.6.1.2. Percentage of a SliderSimply follow the steps to make the percentage of the Slider changing with itsposition.1. Drag and drop a Slider on the frame panel.2. Double click on the Slider to implement its OnSliderChange event function.Save the file and press OK.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 158Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


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*) &SliderWidget15);}The effect of the OnSliderChange function (after selecting colors):For more API functions of Slider, refer to slider.h in the following path:“C:\ICPDAS\HMIWorks_Standard\include\grlib”, where“C:\ICPDAS\HMIWorks_Standard” is the installation path.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 159Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


6.1.3. Selected of a CheckBoxTake the following steps for example to change the Selected property of theCheckBox in the run time.1. Drag and drop a CheckBox and a BitButton on the frame panel.2. Double click on the BitButton to implement the OnClick event function ofthe BitButton. Save the file and press OK.3. To make clear, we copy the codes below.void BitButton23OnClick(tWidget *pWidget){//make CheckBox status = selected (checked)}CheckBoxSelectedSet(&CheckBoxWidget22, 1);WidgetPaint((tWidget*) &CheckBoxWidget22);The effect of the OnClick function:TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 160Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


For more API functions of CheckBox, refer to checkbox.h in the followingpath:“C:\ICPDAS\HMIWorks_Standard\include\grlib”, where“C:\ICPDAS\HMIWorks_Standard” is the installation path.6.1.4. Font, Text and TextColor of a LabelTake the following steps for example to update properties of the Label in therun time.1. Drag and drop a Label and three BitButton on the frame panel as below.2. Double click on the BitButton to implement the OnClick event functions ofthree Bitbuttons. Save the file and press OK.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 161Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


3. To make clear, we copy the codes below with their corresponding results.ResultsCodes of the event function//step 0//the beginning snapshotN/A//step 1//Click on BitButton “change Text”void BitButton17OnClick(tWidget *pWidget){static char *str = "Hello! TouchPAD";CanvasTextSet(&LabelWidget18, str);WidgetPaint((tWidget*) &LabelWidget18);}TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 162Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


step 2//Click on BitButton “change Font”void BitButton19OnClick(tWidget *pWidget){//change Font to size 20CanvasFontSet(&LabelWidget18,&g_sFontCm20);WidgetPaint((tWidget*) &LabelWidget18);}//step 3//Click on BitButton “change Color”void BitButton20OnClick(tWidget *pWidget){//change Text color to RedCanvasTextColorSet(&LabelWidget18,0xFF0000);WidgetPaint((tWidget*) &LabelWidget18);}For more API functions of Label, refer to canvas.h in the following path:“C:\ICPDAS\HMIWorks_Standard\include\grlib”, where“C:\ICPDAS\HMIWorks_Standard” is the installation path.In the same path, there is a header file, grlib.h.grlib.h contains prototypes for the pre-defined fonts, such as g_sFontCm20.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 163Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


AppendixAppendix is listed below:1. FAQ, Frequently Asked QuestionsA. FAQA.1. What to do if screen flashes?Set the “BrushStyle” property of frames to “Clear”.BrushStyleSolid or Clear.If BrushStyle is set to Solid, BackgroundColor iseffective. However this may make screen flash ifbackground color is quite different from the loadedpicture. Setting BrushStyle Clear disables theproperty BackgroundColor and prevents fromflashing.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 164Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


A.2. How to have higher resolution Picture?Set the “HiColor” property of Picture to “True”.HiColorTrue or False. This property decides whetherthe loaded picture is stored as 16-bit color(True) or 8-bit color (False). Default is 8-bitcolor.Trade-off between firmware size and resolutionAbove is the comparison between HiColor = True and HiColor = False.The left picture is original one in HMIWorks. The two right-side picturesare real photos. One is HiColor = True and the other HiColor = False.As you can see, setting HiColor to False makes the photo fragmentizedwhile setting HiColor to True does not. Because 8-bit color does nothave enough color (256 only) to represent the picture, similar colors arerepresented by the same color and this results in fragmentation.However, preventing pictures from fragmentation costs TouchPAD biggersize of memory. Take above picture for example, setting HiColor to Trueuses memory of 189KB but setting HiColor to False costs only 69KB.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 165Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


A.3. How does a TouchPAD control I/O?From a touch to I/O:Take I-7066 for example, Register Devices (F3) to automaticallygenerate tags and then drag and drop the tag on the frame.HMIWorks does the followings to build the relationships betweenTouchPAD and I/O modules.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 166Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


Note: the TagName property takes effect only in the programming type,Ladder Program. (It’s easier in programming type, C/C++. Control the I/Oby using API function, dcon_WriteDO, in the event function of theCheckBox.)A.4. How to change Font of Text?Be sure to set TextAsImage = True. Otherwise changing font does not takeeffect.Note that because of not being able to set their Text as image, the Font ofTextPushButton and Label cannot change their “Font” and “Font Style” but“Size” can.propertiesAutoScaleFontSizeAutoSizeFontTextAsImagedescriptionAutomatically scale the font size to fit therectangle which encloses the Text.Note: this property is enabled only whenAutoSize=True.True or False. This property is used toindicate that whether the size of therectangle which encloses Text can beautomatically changed to cover the wholestring.The font of the Text.Note: this property is enabled only whenTextAsImage=True.True or False. Whether text is stored as animage or not. If the text is treated as animage, of course, it takes more space tostore and more time to download.TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 167Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com


TouchPAD User Manual, version 1.0.3. Last Revised: November 2010 Page: 168Copyright © 2010 ICP DAS Co., Ltd. All Rights Reserved. E-mail: service@icpdas.com

More magazines by this user
Similar magazines