FAKULTI TEKNOLOGI KEJURUTERAAN ELEKTRIK &

ELEKTRONIK
UNIVERSITI TEKNIKAL MALAYSIA MELAKA

SYSTEM INTEGRATION DESIGNING

BEEL 3125 SEMESTER 1 SESI 2022/2023

LAB 2: ACTIVE OBJECT IN INDUSOFT WEB STUDIO

NAME OF GROUP 1.
MEMBERS &
MATRIX NUMBER 2.

3.

COURSE / SECTION 1 BEEL /

DATE

NAME OF INSTRUCTOR FAREES EZWAN BIN MOHD SANI @ ARIFFIN

EXAMINER’S COMMENT VERIFICATION STAMP

TOTAL MARKS
1. OBJECTIVES

At the end of this experiment, student should be able to:

i. Understand how to create a screen group in Indusoft Web Studio
ii. Know how to use active objects in Indusoft Web Studio

2. EQUIPMENT/COMPONENTS

i. Indusoft Web Studio

3. SYNOPSIS & THEORY

Introduction

InduSoft Web Studio is powerful software for developing HMI,

SCADA, and OEE/Dashboard projects that can be deployed anywhere.
Each IWS project consists of:
• A project tags database to manage all run-time data, including both internal
variables and I/O data;
• Configurable drivers to communicate in real-time with programmable logic
controllers (PLCs), remote I/O devices, and other data-acquisition equipment;
• Animated HMI screens and OEE dashboards; and
• Optional modules such as alarms, events, trends, recipes, reports, scriptable
logic, schedulers, a project security system, and a complete database interface.

After we develop our project, we can either run it locally on our development
workstation or download it to a remote computer and run it there. The project
runtime server processes I/O data from connected devices according to our
project parameters and then reacts to, displays, and/or saves the data.

Page 2 of 26
Development Environment

InduSoft Web Studio incorporates a modern, Ribbon-based Windows interface

to provide an integrated and user-friendly development environment.

Fig.1 IWS Development Environment

Page 3 of 26
4. PROCEDURE

PART 1: Creating a screen group

Fig 2

1. Open Wonderware Indusoft Web Studio software

2. Create a new project
3. Name the project with suitable project name.Set the product type to windows
local interface.
4. Set the Project Wizard display resolution to 1024 x 768 as in Fig.3

Fig.3
5. Insert a new screen.

Page 4 of 26
6. Set the screen size to 1024 (Width) x 150 (Height) as in Fig.4 ,then click OK

Fig 4.
7. Set the screen content as below.

Fig.5
8. Save the screen as Header.scr
9. Insert a new screen.
10. Set the screen size and location as in Fig.6 and then click OK

Fig.6

Page 5 of 26
11. Insert a button inside the screen and save the screen as Navigation.scr

Fig.7
12. Set the button to open Main screen.
13. Insert a new screen
14. Set the screen size and location as in Fig.8 and then click OK

Fig.8
15. Then save the screen to Template.scr
16. After that,double click the Template screen

Page 6 of 26
17. Click the file icon

Fig.9
18. Then click save as,save the screen as Main.scr
19. Right Click on the Screen Group
20. Insert screen group
21. Select HEADER.SCR,MAIN.SCR and NAVIGATION.SCR
22. Set the name for the group as Startup
23. Right click on Startup.SG and select Set as startup
24. Close all screen if any of it is open.
25. Click the Run button.
26. Your screen should look like as Fig.10

Fig.10

Page 7 of 26
27. Click Exit button to stop the simulation.
28. Double click on the Main.scr
29. Right click on the screen.Open the screen attributes
30. Change the top location setting from 150 to 140 and set the Style to
Replace(Partial) as shown below.Then click OK.

Fig.11
31. Close and save the screen
32. Run the simulation.
33. Monitor the different with previous simulation result.
34. Now change the Style to Overlapped and click OK

Page 8 of 26
 Fig.12
35. Repeat step 31 to step 33.
36. Set back Main.scr screen attributes as the first setting
(Location : Top 150 ,Style : Replace (Partial).

Page 9 of 26
PART 2: Active object 1 (Text ,Button and Push Button)

1. Using the project that you had created in Part 1.Double click on the Template
screen.
2. Then base on that Template screen,save a new screen title ActiveObjects.
3. Then on the Navigation screen,add a new button to open ActiveObjects screen as
shown in Fig.13 and save the Navigation screen.

Fig.13

4. Now open the ActiveObjects screen,add Text and button on the screen as shown
below (For Tag V1,set type to Boolean)

Fig.14

Page 10 of 26
5. For each of the button,set the style to 3D sharp,3D soft, OS like and standard

Fig.15

6. Your ActiveObjects screen should look like Fig.16

Fig.16
7. Double click on the button,click Command,set the object properties as below

Fig.17

Page 11 of 26
8. Copy a new button and place it below as shown in Fig.18.

Fig.18

9. Double click on the new button.

10. If it is in Command properties, select Back to button to return to Button properties
11. Click Images.
12. Images window will be shown as in Fig.19

Fig.19
13. Browse tools image from internet and download it in JPG/PNG/BMP file.
14. Browse the image file location and put the link inside the File column

Page 12 of 26
15. Set the Images properties as below and then click OK

Fig.20
16. Close the Object Properties.Your ActiveObjects screen should look like Fig.21

Fig.21

17. Expand the button

Page 13 of 26
18. Change the caption to Call Maintenance

Fig.22
19. Add a new Pushbutton as below

Fig.23
20. Set Object Properties as below

Fig.24

Page 14 of 26
21. Then,click Config
22. Set Caption to Momentary

Fig.25
23. Click OK and close it.
24. Then copy the pushbutton and put it beside the momentary pushbutton
25. Set the pushbutton type and caption to Maintained
26. Copy another one pushbutton.
27. Set the pushbutton type to Latched
28. Create a new Tag named as Reset (Boolean) as below

Fig.26

Page 15 of 26
29. Copy another one momentary pushbutton,change the Tag/Expression to Reset and
put it below latched pushbutton.
30. Your screen should look like below.

Fig.27

31. Save the screen

32. Run simulation
33. Press the pushbutton and monitor the differences between momentary,maintained
and latched pushbutton.

Page 16 of 26
PART 3: Active objects 2 (Check Box ,Radio button and Combo box)

1. Using the project that you had created in Part 1.Double click on the Template
screen.
2. Then base on that Template screen,save a new screen title ActiveObjects2.
3. Then on the Navigation screen,add a new button to open ActiveObjects2 screen as
shown in below figure and save the Navigation screen.

Fig.28
4. Click Check Box icon then place check box on the ActiveObjects2 screen.
5. Double click on the check box that you just placed on the ActiveObjects2 screen.
6. Change the object properties for the check box as below

Fig.29

Page 17 of 26
7. Your screen should look like below

Fig.30
8. Copy and paste the checkbox
9. Now,set the object properties as below.

Fig.31
10. Repeat step 8 and 9 with below object properties
11. Now your ActiveObjects2 screen should look like below figure

Fig.32

Page 18 of 26
12. Then place a rectangle on the screen
13. Set the caption of the rectangle to Bread
14. Then,click back the rectangle, check the position animation from Graphic tab.
15. Then set the rectange object properties as below

Fig.33
16. Repeat step 12 until 15 for Cookies and Cake but make sure the caption and show
on condition is for Cookies and Cake.
17. Your screen should look like below

Fig.34
18. Now add a radio button on the screen
19. Set the radio button property as in figure 35.

Page 19 of 26
 Fig.35
20. Set the True Value to 3
21. Add another 3 radio button with caption Medium,True Value = 2 ,
Slow,True Value=1 and Off,True Value=0.
22. Copy previous rectangle.
23. Set the caption to Fast and Show on condition Speed=3.
24. Copy another 3 rectangle and set object properties as below
Table.1
No Caption Show on condition
1 Medium Speed=2
2 Slow Speed=1
3 Off Speed=0

25. Your screen should look like below.

Fig.36

Page 20 of 26
26. Run simulation,What is the different between check box and radio button?
27. Next,place a combo box on the screen
28. Double click on the combo box
29. Set the object properties of the combo box as below
[LabelTag:String , PositionTag: Integer]

Fig.37
30. Next,click Data Sources,set type as Static Labels then click the setting button
31. Then write down related drink shown in below figure and then click OK

Fig.38
32. Add a new text beside the combo box as in Fig.38

Fig.39

Page 21 of 26
33. Double click on the Label and Position text,set the Text Data Link Tag/Expression
to LabelTag and PositionTag.
34. Close and save the screen
35. Run simulation and monitor the behavior of the screen.
36. You can adjust the number of the drop down list item by double click on the
combo box,click advanced and change the Drop List Size (Items) to your
preference.
37. Double click on the Position text,click Input enabled box.
38. Set the minimum value to 0 and 10 and close the property window.
39. Run the simulation and monitor the behaviour of the screen.

PART 4: Active objects 3 (List Box,Smart Message and Test Box)

1. Add a List box object on the ActiveObject2 screen.

2. Double click on list box and set the object properties as below.
[ListRead : Integer & ListWrite : String]

Fig.40
3. Then add a new text as below and set the Text Data link tags to ListRead and
ListWrite accordingly.

Fig.41

Page 22 of 26
4. For ListRead text,tick the Input Enabled box
5. Next,double click on the List Box then click Messages.
6. Set the message configuration as below

Fig.42
7. You can change the List Box highlight colour in the object properties.
8. Save the changes on the screen and run simulation.
9. Check the behaviour when you select the messages.What happen to the value
in the ListWrite?
10. Next,insert 4 into the ListRead text and monitor the changes to the list box.
11. Exit the simulation.
12. Now,change the message configuration for the last messages as below
[Status : Integer]

Fig.43
13. Then add a new text below the list box with the caption Status : #.
Tick the Input Enabled checkbox and then set Text Data Link tag to
Status.Then click the Input
14. Next double click on the List Box properties

Page 23 of 26
15. Set the User Enable and Control Enable as below
[User : Boolean, Control: Boolean]

Fig.44
16. Now add two pushbutton on the screen with the caption User and Control.
17. Then set the Tag for the pushbutton accordingly.
18. Set the pushbutton to Maintained type.
19. Save the screen.Your screen should look like below figure

Fig.45
20. Run simulation.

Page 24 of 26
21. When you didn’t click User and Control pushbutton,can you click the
message?
22. Now click the User pushbutton,can you click the message?
23. Now in this condition what happen when you key in integer into the ListRead?
Does the correct message had been highlighted?
24. Compare the behaviour when you click the Control pushbutton.
25. Now,key in integer into the Status text.Monitor the changes.
26. Stop the simulation
27. Add a Smart Message box on the screen.
28. Set the Read Tag/Expression to msgRead[Integer]
29. Then click Messages
30. Add same message as in below figure

Fig.46
31. Then add a text ListRead:# with the Tag/Expression link to the msgRead
32. Exit and save the changes

Page 25 of 26
 33. Your screen should look like below

Fig.47
34. Run simulation
35. Key in value to the ListRead above the smart message

5. RESULTS
Show your result for all parts.

6. DISCUSSION

Discuss the result that you get from exercises.

7. CONCLUSION

Write a conclusion from what you have learnt in this lab activities.

Page 26 of 26