This is tutorial to give you basic concept and how to program HMI Software WebOP Designer / WebAccess-HMI. •Level 1 : Before Start •Level 2 : Creating a Project •Level 3 : Background and Screen Setting •Level 4 : Data logger and History data display •Level 5 : Alarm function •Level 6 : Tag and Internal memory •Level 7 : Macros

1. Advantech WebOP Designer:
Step by Step
IAG Inter-corn AE
Alex Hsieh (謝明宏)

2. C:Program Files
(x86)AdvantechDAQNaviLabviewDriver
Outline
• Level 1 : Before Start
• Level 2 : Creating a Project
• Level 3 : Background and Screen Setting
• Level 4 : Data logger and History data display
• Level 5 : Alarm function
• Level 6 : Tag and Internal memory
• Level 7 : Macros

3. Level 1 : Before Start
1.SW developing environment
2.Video training
3.AE maintenance & trouble shooting
4.Concept and tool

4. Software developing environment
• WebOP designer : 2.1.0.0
• Panel Express : 2.1.0.0
• You can’t open the WebOP project by panel express with
different version.

5. Video training
• Link: http://www2.advantech.tw/WebOp/video.aspx

6. AE maintenance & Trouble shooting
• FAQ : http://www2.advantech.tw/WebOp/faq.aspx
• TechNote / Application Note / PLC support list /
http://www2.advantech.tw/WebOp/downloads.aspx
• Supported PLC and Controllers List

7. AE maintenance & Trouble shooting
• Limitation

8. Concept and tool - Development Architecture
• Once user has done the HMI design by WebOP Designer.
• The project could be deployed to WOP Device and
communicate with Controller Device

9. Concept and tool - HMI Mode for WebOP-2000
(BIOS & Panel Setup Mode)
BIOS Mode
1. This mode is for the factory use.
2. The designer can enter this mode to adjust
the initial mode is “RUN AP” or “Panel
Setup” mode.
3. When the HMI power on, press the left-
upper corner and wait for 3~5 seconds.
When you hear the 2nd beep sound, please
release your finger.
Panel Setup Mode
1. This mode is for the designer use.
2. The designer can download their AP
from “Panel Setup” mode.
3. When the HMI power on, press the
right-upper corner and wait for 3~5
seconds. When you hear the 2nd beep
sound, please release your finger.

10. Concept and tool – Date Transfer Helper
• Download Data from WebOP machine
• Flexible to update AP
• Operate type : Logged data, Logged alarms, and recipe data..
• Link setting : Serial, Ethernet, USB

11. Level 2 : Creating a Project to Read/Write
ModBus Address Values
1.Createing a new project and link setup
2.Modbus protocol and utility (Modsim)
3.Display component: BitLamp/Numeric Display
4.Control component: BitButton/Switch/ Numeric Entry

12. Check WebOP Designer version
• V2.1.0.00

13. Creating a New Project
• Project name : WebOPTraining
• Click next
• Creating a Project Name and selecting the project Location.

14. Creating a New Project - App
• Application Name : TrainingApp
• Model : Select your WebOP model
• Click “Next” button to go to next setup page

15. Creating a New Project – Link type
• Link Tyep: Direct Link (Ethernet)
• Device/Server: Modicon Corp.  ModBus Master (TCP/IP)
• Link Port: Ethernet1

16. Creating a New Project – Link parameter
• IP address : 127.0.0.1 (local IP)
• Prot : 502 (modbus port)
• Node address: default 1

17. Creating a New Project – View
• The project

18. Creating a New Project – Add text
• Add text  Project training  Confirm

19. Creating a New Project – Compile
• Compile  Online simulation

20. Creating a New Project – Compile
• Compile  Online simulation

21. Creating a New Project – Compile
• Run  Simulator monitor

22. Creating a Project to Read/Write
ModBus Address Values
1.Createing a new project and link setup
2.Modbus protocol and utility (Modsim)
3.Display component: BitLamp/Numeric Display
4.Control component: BitButton/Switch/ Numeric Entry

23. Modbus protocol and utility
• Modbus table
• Function code
address Point type Coil/Register Numbers Data Addresses Type Table Name
DO 0x 01:coil status 1-9999 0000 to 270E Read-Write Discrete Output Coils
DI 1x 02:input status 10001-19999 0000 to 270E Read-Only Discrete Input Contacts
AI 3x 04:input register 30001-39999 0000 to 270E Read-Only Analog Input Registers
AO 4x 03:holding register 40001-49999 0000 to 270E Read-Write Analog Output Holding Registers
Function Code Action Table Name For address
01 (01 hex) Read Discrete Output Coils 0x
05 (05 hex) Write single Discrete Output Coil 0x
15 (0F hex) Write multiple Discrete Output Coils 0x
02 (02 hex) Read Discrete Input Contacts 1x
04 (04 hex) Read Analog Input Registers 3x
03 (03 hex) Read Analog Output Holding Registers 4x
06 (06 hex) Write single Analog Output Holding Register 4x
16 (10 hex) Write multiple Analog Output Holding Registers 4x

24. Modbus protocol and utility
• Modbus utility
• Modbus protocol ref
1. Wiki: https://en.wikipedia.org/wiki/Modbus
2. Simply modbus: http://www.simplymodbus.ca/index.html
Utility Master Slave
Basic ModScan32 ModSim32
Advanced ModPoll ModSlave

25. Modbus protocol – Modsim32
• ModSim32 – simulated modbus/TCP server in local PC.
• IP: 127.0.0.1 (default setting)
Name Address index Start address length Address
Write_DO 0x 0 16
0x00001-
0x00016
Read_DI 1x 0 16
1x00001-
1x00016
Read_AI 3x 0 8
3x00001-
3x00008
Write_AO 4x 0 8
4x00001-
4x00008

26. Modbus protocol – Modsim32
• ModSim32 : open file  simulate folding  4 simulated file

27. Modbus protocol – Modsim32
• ModSim32 : connect to Modbus/TCP server

28. Modbus protocol – Modsim32
• ModSim32 – simulated modbus/TCP server in local PC.
• IP: 127.0.0.1 (default setting)
DO AI
DI AO

29. Creating a Project to Read/Write
ModBus Address Values
1.Createing a new project and link setup
2.Modbus protocol and utility (Modsim)
3.Display component: BitLamp/Numeric Display
4.Control component: BitButton/Switch/ Numeric Entry

30. Display component - BitLamp
• drag and drop a BitLamp object to the Screen 1 for displaying digital tag value
• Monitor address: Link1 – node1 – 00001 address

31. Display component - BitLamp
• Simulator

32. Display component - BitLamp
• BitLamp with Icon : import icon on ON and OFF state

33. Display component - BitLamp
• On with Icon : Fit to Object and confirm
• drag and drop a BitLamp object to the Screen 1 for displaying digital tag value

34. Display component - BitLamp
• OFF with Icon : Fit to Object and confirm
• drag and drop a BitLamp object to the Screen 1 for displaying digital tag value

35. Display component - BitLamp
• Duplicate : Auto-mapping Modbus address 00001 - 00003

36. Display component - BitLamp
• Duplicate : Auto-mapping Modbus address 00001 - 00003

37. Display component - BitLamp
• Simulator

38. Display component - Numeric Display
• Monitor address: Link1 – node1 – 40001 address
• Total digits : 5 (0~65535)

39. Display component - Numeric Display
• Duplicate : Auto-mapping Modbus address 40001-40004

40. Display component - Numeric Display
• Simulator

41. Creating a Project to Read/Write
ModBus Address Values
1.Createing a new project and link setup
2.Modbus protocol and utility (Modsim)
3.Display component: BitLamp/Numeric Display
4.Control component: BitButton/Switch/ Numeric Entry

42. Control component – BitButton
• Write address: Link1 – node1 – 00001 address
• Operation : Inverter

43. Control component – BitButton
• OFF with Icon : Fit to Object

44. Control component – BitButton
• On with Icon : Fit to Object and confirm
• drag and drop a BitLamp object to the Screen 1 for displaying digital tag value

45. Control component – BitButton
• Duplicate : Auto-mapping Modbus address 00001-00003

46. Control component – BitButton
• Simulator and change the status
• HIGH: 00002-00003
• LOW: 00001

47. Control component – Switch
• Write address: Link1 – node1 – 00001 address
• ON/OFF with Icon

48. Control component – Switch
• Duplicate : Auto-mapping Modbus address 00001-00003

49. Control component – Switch
• Simulator and change the status
• HIGH: 00001 & 00003
• LOW: 00002

50. Display component – Numeric Entry
• Monitor address: Link1 – node1 – 40001 address
• Total digits : 5 (0~65535)

51. Display component – Numeric Entry
• Duplicate : Auto-mapping Modbus address 40001-40004

52. Display component – Numeric Entry
• Simulator : 4x0004 = 65535

53. Display component – Numeric Entry
• Simulator : 4x0004 = 65535

54. Level 3 : Background and Screen Setting
1.How to change background
2.Add screen and screen button
3.Base screen and picture display

55. How to change background
• Right Click  Screen Properties

56. How to change background
• Select Background  Picture  A picture for background

57. How to change background
• Select and Click

58. How to change background
• View the background

59. How to change background
• Next time: It is already imported.

60. Background and Screen Setting
1.How to change background
2.Add screen and screen button
3.Base screen and picture display

61. Add screen and screen button – Add screen
• Project manager : Screen  New Screen
• Screen Name  Screen Number : Data play  Ok

62. Add screen and screen button – Add screen
• View the new Screen

63. Add screen and screen button – Screen button
• Screen 1 : Screen button  select the corresponding Screen 2
(Data plot)

64. Add screen and screen button – Screen button
• Label  change name  ok

65. Add screen and screen button – Screen button
• Screen 2 : Screen button  Select the corresponding Screen
1

66. Add screen and screen button – Screen button
• Label  change name  ok

67. Add screen and screen button – Screen button
• Simulator

68. Background and Screen Setting
1.How to change background
2.Add screen and screen button
3.Base screen and picture display

69. Base screen and picture display – Add screen
• Project manager : Screen  New Screen
• Screen Name  Screen Number : Main  Ok

70. Base screen and picture display – Add picture
• Add a picture display : Advantech logo

71. Base screen and picture display – Add screen
• Screen prosperity : Dataplot
• Change the base screen  Main

72. Base screen and picture display – Add screen
• Screen prosperity : Screen 1
• Change the base screen  Main

73. Base screen and picture display – Screen name
• Screen Name: Screen1  Basic Training

74. Base screen and picture display – Screen button
• Screen button: Basic  Basic Training Screen
• Screen button: DataPlot  DataPlot Screen

75. Base screen and picture display – Screen button
• Simulator

76. Level 4 : Data logger and History data
display
1.Data logger
2.History data table with scroll bar
3.History trend graph

77. Data Logger – Monitor address
• The data logger will display the value of modbus address
40001-40004 and save data in database

78. Data Logger – Monitor address
• Name: 40001 (depend on user)
• Read Address: 40001 (Monitor and save the address value)
• Sample Size: 4 (Modbus address 4x0001-4x0004, 4 words)
• Number of Samples: 20 (depend on user)

79. Data Logger – Save data to file
• File type : CSV, TXT, and LDF
• Time to save : Every minute (For test only)
• Filename Suffix : _YYMMDD_hhmmss
• Saved path : project local path

80. Data Logger – Data Item
• Type: 16-bit unsigned integer
• Display Type: 16-bit unsigned integer
• Total Digits: 5
• Fractional digits: 0

81. Data Logger – Get data file
• Check data : click any one .csv file
• Data file path : project local path :
C:…WebOPDesignerTraining

82. Data Logger – Get data file
• Time to save : Every minute (For test only)
• Sample Size: 4 (Modbus address 4x0001-4x0004, 4 words)
• Number of Samples: 20 (depend on user)

83. Data logger and History data display
1.Data logger
2.History data table with scroll bar
3.History trend graph

84. History data table with scroll bar – Add
• History data table : Object  Historic Display  Historic
Data Table

85. History data table with scroll bar – Setting
• Double click history data table to change setting
• Associated Data Logger: Modbus_4X(0)
• Data Source: Data Logger
•

86. History data table with scroll bar – Data Item
• Data Item : show modbus address value 4x0001-4x0004

87. History data table with scroll bar – Add bar
• Type : vertical
• Associated Object ID: HDD0000

88. History data table with scroll bar – Add bar
• Group : link the History data table with scroll bar to a group
• Choose both objects  click right button of mouse  group

89. History data table with scroll bar
• Simulator

90. Data logger and History data display
1.Data logger
2.History data table with scroll bar
3.History trend graph

91. History trend graph - Add
• History trend graph : Object  Historic Display  Historic
Trend Graph

92. History trend graph - Add
• Double click history trend graph to change setting
• Associated Data Logger: Modbus_4X(0)
• Data Source: Data Logger
• Number of curves : 4

93. History trend graph – Curve
• Curve: change color

94. History trend graph – Axis
• Axis

95. History trend graph
• Simulator

96. Level 5 : Alarm function
1.Add alarm with specific Modbus value
2.Add alarm table

97. Add alarm with specific modbus value – add
• Add alarm block : digital or analog alarm
• Double click to open its Analog Alarm Block property page

98. Add alarm with specific modbus value – alarm
• Block ID : 64
• Read Address: 40001
• Block Size: 2
• Limit : 100
• Text : LL alarm

99. Add alarm with specific modbus value – alarm
• Read Address: 40001
• Alarm type : High High
• Limit : 800
• Text : HH alarm

100. Add alarm with specific modbus value – alarm
• Read Address: 40002
• Alarm type : High High
• Limit : 800
• Text :
power leakage

101. Alarm function
1.Add alarm with specific Modbus value
2.Add alarm table

102. Add alarm table - add
• Add alarm table

103. Add alarm table
• 4x0001 modbus value : up 800  HH alarm

104. Add alarm table
• 4x0001 modbus value : below 200  LL alarm

105. Add alarm table
• 4x0002 modbus value : up 800  HH alarm

106. Add alarm table
• 4x0002 modbus value : below 800  recovery

107. Level 6 : Internal memory and Tag
1.Tags
2.Internal memory

108. Tags – Type
• Tag : double click and check tags of data logger
• Address : L0.0-L0.3  default memory to record data

109. Tags – Add Tag
• Add tag in Link 1:
• Name : modbus40001
• Datatype : 16-Bit Unsigned Integer
• Address : 40001

110. Tags – Add Tag
• Numeric Entry : add modbus40001

111. Tags
• Simulator

112. Internal memory and Tag
1.Tags
2.Internal memory

113. Internal memory – Variable
• Variable type table

114. Internal memory – Add tags
• Add tag in internal memory :
• Name : value1 and value 2
• Datatype : 16-Bit Unsigned Integer
• Address : $U0 & $U1

115. Internal memory – Add tags
• Numeric Entry : add value1 tag (U0)

116. Internal memory – Add tags
• Numeric Display : add value2 tag (U1)

117. Internal memory
• Simulator

118. Level 7 : Macros
1.Basic Marco1 :
2.Basic Marco2 :
• $U1 = $U0
• $U0 < 100 , $U1 = modbus 40001
$U0 > 800 , $U1 = modbus 40002
Else , $U1 = modbus 40003

119. Basic Marco1 – Add
• Macros : Add Script
• Name : Macro1

120. Basic Marco1 – Script
• Macros : $U1 = $U0

121. Basic Marco1
• Open Screen Properties: Right click DataPlot
• Marco : Check CYCLE Macro with 500ms

122. Basic Marco1
• Marco Name : Macro1

123. Basic Marco1
• Simulator

124. Macros
1.Basic Marco1 :
2.Basic Marco2 :
• $U1 = $U0/10
• $U0 < 100 , $U1 = modbus 40001
$U0 > 800 , $U1 = modbus 40002
Else , $U1 = modbus 40003

125. • Macros : change macro context
• $U0 < 100 , $U1 = modbus 40001
$U0 > 800 , $U1 = modbus 40002
Else , $U1 = modbus 40003
Basic Marco2 – Script
IF ($U0 < 100)
$U1 = 140001
ELIF ($U0 > 800)
$U1 = 140002
ELSE
$U1 = 140003
ENDIF

126. Basic Marco2
• Simulator - $U0 < 100 , $U1 = modbus 40001

127. Basic Marco2
• Simulator - $U0 > 800 , $U1 = modbus 40002

128. Basic Marco2
• Simulator - Else , $U1 = modbus 40003

129. Macro Function
• Global Macro
A global macro is a macro that can be used by all panel applications in the
same project.
• Local Macro
A local macro is a macro that can only be used by the panel application which
the macro is located in.
• Sub-macro
A sub-macro is a macro that can be run by other macros using the CALL
command.

130. Macro Function
• Startup Macro
This macro is run only once when the application starts. The HMI will not display the start-up screen until the
macro terminates. You can use Startup Macro to initialize global data and settings for your application. Specify
Startup Macro in Panel General Setup dialog box.
• Main Macro
This macro is run all the time while the application is running. The HMI runs Main Macro cyclically, i.e. it will
delay preset time to run Main Macro starting from the first command again each time after it completes the
processing of the last command of the macro or when it encounters an END command in the middle of the
macro. Specify Main Macro in Panel General Setup dialog box.
• Event Macro
This Macro is run whenever the associated trigger bit changes from 0 (off) to 1 (on). An application can have
up to four Event Macros which are numbered from 1 to 4. Specify Event Macros in the Panel General Setup
dialog box.
• Time Macro
This Macro is run periodically with a preset time interval. An application can have up to four Time Macros
which are numbered from 1 to 4. Each Time Macro has a different set of time interval options you can choose
to specify how often you want the macro to run. Specify Time Macros in the Panel General Setup dialog box.

131. Thank You