MAPUA UNIVERSITY

658 Muralla St., Intramuros, Manila, 1002 Metro Manila

School of Electrical, Electronics and Computer Engineering

INDUSTRIAL AUTOMATION AND CONTROL 3

ECEA127-3P_B14

MOD 3-1
PROJECT

Grepo, Noriel D.

May 2, 2022

Engr. Joseph Bryan Ibarra

Instructor
The images above show the complete animation of the soap creation factory that is created using the CX-
Supervisor application. The created program is composed of different parts, components, commands, and
visuals that has its own purpose on why it is used and placed in the program. Every page will be discussed
thoroughly in the next few parts of the documentation.
For the first part of the documentation, the images above show the different created points that is
used for the program. The created points are responsible for the trigger expression or in simple
terms they are responsible for triggering a certain component to perform its certain action. The
created points are responsible for moving, controlling, changing of colors, changing of visibility,
filling, and draining of certain components that would help the students to accomplish their
chosen product for the project.
Title Page

The title page is composed of the information and details of the activity and the creator of the
program. The name of the professor and the title of the program is also located in the title page, it
serves as guide for the viewers of the program for them to have an idea of what they will be
seeing in the created program. The components present in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Push Button: The push button is responsible for the changing of the page of the program.
First Page

The first page of the program shows how the soap is created, in this part mixing, heating, and
cutting of the soap can be seen. The creation of a soap bar from scratch can be seen in this part,
the mixing of Coconut oil and NaOH solution is very vital since this are the needed nourishment
of the soap that can help the users to clean their body. It will be mixed in a mixer and will be
moved to a heater. After the mixed liquids have been mixed together it will be mixed again with
salt as it will be the solid structure of the soap. After mixing, it will pass through the cutter to cut
the excess part of the soap. The components present in this page are:

Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page. The rectangles are also used as steel pillars, steel floorings,
heater, cutter, conveyor belts, special containers, soap bar, mixing containers, nozzles, mixing
blades, and rims of the wheels.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Push Button: The push button is responsible for the changing of the page of the program.
Toggle Button: The toggle button are responsible to trigger or signal a certain component to
perform its action.
Slider: The slider is used to control the movements of some components and it is also used to
control the temperature of the heater. The slider is also used to move the container to make it
look like it is pouring liquid in the container. The slider is also used for the filling and draining of
the liquid substances.
Ellipse: The ellipse is used for the wheels of the conveyor belt; it is also used as a head of a
person for the animation.
Lines: The lines are used for braces or support for the steel floors where the special containers
will be pouring its contents in the mixing container. The lines also represent the arms, body, and
legs of the human for the animation.
Rotational Gauge: The rotational gauge gives us details on the amount or level of a certain
component is. On this page the rotational gauge gives us information on the temperature of the
heater.

Heater Page

The image above shows the heater page of the created program. It shows what is happening on
the heater box of the program. In this page we can control the movement of the special container
and the level of flames for the heater. The slider is also connected to the heater slider in the first
page. The components used in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page. The rectangles are also used as steel pillars, steel floorings,
and special containers.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Slider: The slider is used to control the movements of some components and it is also used to
control the temperature of the heater. The slider is also used to move the container horizontally.
Push Button: The push button is responsible for the changing of the page of the program.
Graphics library: The graphics library that I used is a tank, I used it because it looks like a
burner that can emit fire for the heating of the liquids.
Picture: The picture that is used in this page is a fire picture that I got from the internet. It
represents the fire that would heat the liquid inside the heater.

Second Page

The second page is the continuous process of the first page. In this page the color and fragrance
of the soap is added, we can see that the fragrance and color of the soap can be classified into
three, Cherry, Green Apple, and Lavender. After adding the color and fragrance they would be
directly sent to the cooler to avoid the dripping of the color and to strengthen the fragrance of
each flavor. After the color has been dried it will now be sent to the packaging part and will be
released afterwards in a box for delivery. The components present in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page. The rectangles are also used as steel pillars, steel floorings,
cooler, packaging, conveyor belts, special containers, soap bar, color containers, nozzles, rims of
the wheels, and colors and fragrance container.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Slider: The slider is used to control the movements of some components horizontally and
vertically. The slider is also used to move the soap horizontally. The slider is also used for the
filling and draining of the liquid substances
Push Button: The push button is responsible for the changing of the page of the program.
Toggle Button: The toggle button is responsible to trigger or signal a certain component to
perform its action.
Ellipse: The ellipse is used for the wheels of the conveyor belt.

Cooler

The image above shows the cooler page, it has the same concept as the heater page the only
difference is that the operator can choose on what type of flavored scented soaps are going in the
cooler and the difference is that instead of flames for the image, I used cold winds for the drying
of the color of the soap. The image shows on what is happening inside the cooler section in page
2 of the program. The components present in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page. The rectangles are also used as steel pillars, steel floorings,
and soap bars.
Toggle Button: The toggle button is responsible to trigger or signal a certain component to
perform its action. In this page it is used to choose on what type of flavor or scented soap will
pass through the cooler for drying.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Push Button: The push button is responsible for the changing of the page of the program.
Slider: The slider is used to control the movements of some components and it is also used to
control the temperature of the cooler. The slider is also used to move the soap horizontally.
Graphics library: The graphics library that I used is a tank, I used it because it looks like a
compressor that can emit cold wind for the cooling of the liquids.
Picture: The picture that is used in this page is a wind picture that I got from the internet. It
represents the cold wind that would cool the liquid inside the cooler.
Packaging

The image above shows the packaging page, it has the same concept as the cooler since we can
choose the flavor and scent of the soap that will pass through the packaging section. This page
shows what is happening in the packaging area in the page 2 of the program. The concept is that
the bar of soap will be moved to the package of the soap and will be placed to a larger container
for transport. The components present in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page. The rectangles are also used as steel pillars, steel floorings,
soap bars, and soap bar container.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Toggle Button: The toggle button is responsible to trigger or signal a certain component to
perform its action. In this page it is used to choose on what type of flavor or scented soap will
pass through the packaging area.
Slider: The slider is used to control the movements of some components and it is also used to
control the movement of the soap towards the container.
Line: The line represents that the left side of the container is open for the soap to enter.
Ellipse: The ellipse represents the logo of the soap bar container.
Push Button: The push button is responsible for the changing of the page of the program.
End Page

The image above shows the end of the program. The components present in this page are:
Rectangle: The rectangles in this page are used as title blocks that serves as background for the
text, this is used for the proper vision of the text so that the viewers won’t have a hard time
reading the text present in this page.
Text: The text are responsible for the giving of information to the viewers so that they will know
what kind of features and experience they will have when viewing the program.
Push Button: The push button is responsible for the changing of the page of the program.

Animation
Draining

The image above shows the information and details that is used in draining a container.

Filling

The image above shows the information and details that is used in filling a container.
Rotation

The image above shows the information and details that is used in the rotation of the wheels.

Color Change

The image above shows the information and details that is used in the changing of colors.
Blinking

The image above shows the information and details that is used in the blinking of colors.
Toggle Button

The image above shows the information and details that is used in a toggle button.
Display Page

The image above shows the information and details that is used in displaying a page.

Move Horizontal

The image above shows the information and details that is used in moving horizontally.
Move Vertical

The image above shows the information and details that is used in moving vertically.

Visibility

The image above shows the information and details that is used in visibility.
Resizing

The image above shows the information and details that is used in resizing.