FAKULTI TEKNOLOGI KEJURUTERAAN ELEKTRIK &

ELEKTRONIK
UNIVERSITI TEKNIKAL MALAYSIA MELAKA

SYSTEM INTEGRATION DESIGNING

BEEL 3125 SEMESTER 1 SESI 2022/2023

LAB 1: INTRODUCTION TO 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 use basic graphic function such as shapes and button
ii. Know how to implement animation in the project.

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 21
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 21
4. PROCEDURE

PART 1: Creating a project

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.

Fig 2.
4. Use the default setting for the project wizard, then click OK.
5. Create a new screen by right click at the screen and click insert.

Fig 3

Page 4 of 21
6. Set the screen attributes as below then click OK.

Fig.4

7. New screen as below will appear.

Fig 5.

Page 5 of 21
8. Add Slider 1 in the screen
(Graphic Tab →Symbols→Slider→slider01

Fig 6

9. Double click on slider01 to place it in the Screen2.

Fig.7

Page 6 of 21
10. Double click on the slider,and set the Object Properties as below

Fig 8.

11. Click Yes when below command prompt appear

Fig 9.
12. Set the Type to Integer then click OK

Fig 10
13. Then close the Object Properties window.

14. Under Graphic Tab,click Shapes → Rectangle

Page 7 of 21
15. Then add a rectangle on screen as shown below.

Fig.11

16. Then click back the rectangle,

Under Graphic Tab,click Animations → Bargraph
17. Double click on the rectangle,under BarGraph Object Properties
Set Tag/Expression : Level

Fig 12
18. Then close the Object Properties window.
19. After that close Screen2 window

Page 8 of 21
20. Click Yes when you are asked whether to save changes to the Screen2.

Fig.13
21. Save the file name to Main
22. Then insert a new screen as in step 5
23. Add a button on the new screen (Graphic → Active Objects → Button)
24. Double click on the Button and set caption to Toggle.

Fig 14
25. Then click Command
26. Select command from the dropdown menu

Fig 15

Page 9 of 21
27. Then Set Type to Toggle Tag

Fig 16
28. Then set the Toggle Tag to V1.

Fig 17

29. Set V1 type to Boolean then click OK

30. Next,add an ellipse shape on the screen.
31. Click on the ellipse,then click on Color animation
(Graphic→ Animations→ Color)
32. Set the Ellipse Object properties as below

Fig 18.

33. Then close the Object Properties window

34. Add a new button and set the caption to Main Screen

Page 10 of 21
35. Then , Click on the command,set the window as below

Fig 19
36. Close the object properties window
37. Your screen should look like below

Fig 20
38. Close the screen and set the File name to Button.
39. Now Open the Main Screen,add a new button.
40. Set the caption of the button to “ Button Screen”
41. Click Command,then set the object properties as below

Fig.21

Page 11 of 21
42. Close and save changes to Main Screen.
43. Then right click on the Main.scr,then click Set as startup

Fig.22
44. Click on the Run button to start the simulation
45. You will see a window as below

Fig23.
46. Move the slider and monitor what happen to the rectangle.
47. Next,click the Button Screen and monitor what happen

Page 12 of 21
 48. Then click on the Toggle button one time,monitor the changes to the lamp.
49. Repeat step 48.
50. Next,click the Main Screen button and monitor what happen
51. Click stop button to exit the simulation.

PART 2: Basic Animation

1. Create a new screen as below and name the screen as Animation.scr

Fig.24
2. For Yvalue slider,you can use slider01 from the symbol library.
3. Set the Object Properties for Yvalue slider as below

Fig.25

Page 13 of 21
4. For Xvalue and Rotation slider,you can use slider07.
5. Set the Xvalue and Rotation Object properties as below.

Fig26.

Fig.27

6. For the blue box,you can use rectangle.

7. Configure the Main Screen button,to open Main.scr that you create earlier.

Page 14 of 21
8. Set object properties for Xval button as below

Fig.28
9. Set object properties for Yval button as below

Fig.29

10. For the rectangle box,set the Object Properties as below

Fig.30

Page 15 of 21
11. Then create any shape using closed polygon shapes (Example triangle).

Fig.31
12. Then click on the closed polygon shape,and select rotation

13. Set the Object Properties as below.

Fig.32

14. Save the changes and close the animation screen.

15. Run the simulation.
16. Move the Yvalue,Xvalue and Rotation slider and monitor the changes.
17. Click on the Xval button and monitor the changes.

Page 16 of 21
18. Click on the Yval button and monitor the changes.
19. Add a new slider and new ellipse on the screen.

Fig.33

20. Create a new tag named Size and set the type as integer for the new slider.

Fig.34
21. Enable position and resize animation for the ellipse.

Page 17 of 21
22. Set the Object Properties for position animation as below

Fig.35
23. Set the Object Properties for resize animation as below

Fig.36
24. Close the animation screen.

25. Run the animation

26. Move Xvalue,Yvalue and Size slider and monitor the changes happen to the
ellipse.

Page 18 of 21
5. EXERCISE

Design a flood monitoring level system as below.

Fig.37

The monitoring system should work as below.

 Water level simulator is used to simulate the water level at the site
 Water level value will be displayed at the Water Level Value box
 Water Level Indicator and Pilot Light will reflect the level according to range
 Warning alarm icon will appear when alarm switch is switched to ON
position.

Page 19 of 21
Fig 38 (a) Water level 0%-25%

Fig 38 (b) Water level 26%-50%

Fig 38 (c) Water level 51%-75%

Page 20 of 21
 Fig 38 (d) Water level 76%-100%

6. RESULTS
Show your result for all parts.

7. DISCUSSION

Discuss the result that you get from exercises.

8. CONCLUSION

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

Page 21 of 21