FactoryTalk View Studio

Graphic Design - Basics

Programmable Logic Controllers
By
Davoud Karimi

davoud.karimi@georgebrown.ca
 Learning Outcomes
You are expected to learn:
1. How to work with components in FTV
2. How to configure and use a graphic display
3. How to setup and use grids
4. How to create and use wallpapers
5. How to create backgrounds for the display
6. How to work with graphic libraries
7. How to import images and use them with objects
8. How to work with graphic objects in FTV
9. How to use local messages
davoud.karimi@georgebrown.ca
 Design Terminology
• Graphics Editors:
• There are several editors under graphics section in FTV. Find “Graphics” in
explorer. The editors are:
• Displays, Global objects, Libraries, Images, Messages
• Components:
• Each editor has its own components. For example, if you expand displays, you
see its components. They are:
• ALARM, DIAGNOSTICS, INFORMATION, and MAIN
• Graphics objects:
• Each component may have several objects.
• Objects include buttons, indicators, images, etc
davoud.karimi@georgebrown.ca
 Working with components
• To create a new component, use one of these methods:
• Drag the component icon into the workspace.
• Right-click the editor and select New.
• From the File menu, select New, and then select the type of component to create
• To open a component, use one of these methods:
• Double-click the component.
• Right-click the component and select Open.
• Drag the component from the Explorer window to the workspace.
• To save a component
• From the File menu, select Save, or click the Save tool
• If this is the first time you’re saving the component, type a name in the Component name box, and
then click OK
• To close a component
• From the File menu, select Close, or click the Close button on the component’s title bar.
• Some components have a Close davoud.karimi@georgebrown.ca
button that you can click to close the component.
 Working with components
• To delete a component
• Deleting components deletes them from the Explorer window and from the hard disk
1. In FactoryTalk View Studio, in the Explorer window, right-click the editor icon and select Delete.
2. In the component selection dialog box, select the components to be deleted and click OK.
3. Click the Yes button to confirm the deletion.
• To delete a component, you can also right-click the component in the Explorer window and select
Delete
• To remove a component
• Removing components removes them from the Explorer window but leaves them on the hard
disk.
1. In FactoryTalk View Studio, in the Explorer window, right-click the editor icon and select
Remove.
2. In the component selection dialog box, select the components to be removed and click OK.
3. Click the Yes button to confirm the removal
• To remove a component, you can also right-click the component in the Explorer window and
select Remove davoud.karimi@georgebrown.ca
 Working with components
• To rename a component
1. Select the component in the Explorer window.
2. Right-click the component and select Rename.
3. In the Rename dialog box, type the new name in the To text box.
4. Click OK.
• To duplicate a component
• The Duplicate option is useful for creating multiple similar components. For
example, you could create a graphic display to use as a template, then duplicate the
display each time you want to use the template
1. Right-click the component, and then click Duplicate.
2. In the Component name box, type a name for the duplicate component.
3. Click OK
davoud.karimi@georgebrown.ca
 Use graphic displays
• A graphic display represents the operator’s view of plant activity.
• The display can show system or process data and provide operators with
a way to write values to an external data source.
• The data source can be memory or a device such as a programmable
controller or an OPC server
• The elements that make up a graphic display are called graphic objects.
• You can create objects in the Graphics editor, or copy them from a global
object display, from a graphic library, or from another application.
• You can use up to 1,000 tags per graphic display. This limit includes the
tags contained in embedded variables.
davoud.karimi@georgebrown.ca
Use graphic displays

davoud.karimi@georgebrown.ca
Use graphic displays

davoud.karimi@georgebrown.ca
Use graphic displays

davoud.karimi@georgebrown.ca
 Use the grid

davoud.karimi@georgebrown.ca
Setup the grid

davoud.karimi@georgebrown.ca
Test the Display

davoud.karimi@georgebrown.ca
Setup Graphic Display

davoud.karimi@georgebrown.ca
Setup Graphic Display

davoud.karimi@georgebrown.ca
Setup Graphic Display

davoud.karimi@georgebrown.ca
Working with Wallpapers

davoud.karimi@georgebrown.ca
Create Background for the
Display

davoud.karimi@georgebrown.ca
Graphic Libraries

davoud.karimi@georgebrown.ca
Graphic Libraries

davoud.karimi@georgebrown.ca
Graphic Libraries

davoud.karimi@georgebrown.ca
Graphic Libraries

davoud.karimi@georgebrown.ca
Import Images

davoud.karimi@georgebrown.ca
Import Images

davoud.karimi@georgebrown.ca
Import Images

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
 Message System

• Once the message setup is

done, a local message object
need to be created and
added to the display

davoud.karimi@georgebrown.ca
Link it to a message file and a
tag

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
Message System

davoud.karimi@georgebrown.ca
 Drawings
• Drawings can be used to create
graphical entities like lines, circles,
arcs, polygons, rectangles, etc.
• They are mainly used to create
visual figures
• They are not active objects that
can communicate with tags

davoud.karimi@georgebrown.ca
 Push Buttons
• Push buttons are used to simulate
switches
• There are different types of push
buttons:
• Momentary:
• Start a process or action by sending one value
to the tag when pressed, and another value
when released
• Maintained push button
• Toggle between two values by sending one
value to the tag when pressed, and a second
value the next time the button is pressed and
released. This button is useful for changing a
setting within a machine or process, but not
for starting the machine ordavoud.karimi@georgebrown.ca
process.
 Push Buttons
• different types of push buttons:
• Latched push button:
• Start a machine or process. The button remains set (latched) until the process is
complete. For example, use this button to start a bag filling machine. When the process
is complete (the bag is full), the button is reset (unlatched) by the Handshake connection
• Multistate push button
• Cycle through a series of values. Each time the operator presses the button, the value for
the next state is sent to the tag. When the button is in its last state, pressing it changes
the button to its first state and writes out the first state value. This button is useful when
you want the operator to see and select multiple options in sequence, using a single
button. The button shows the current state of an operation by showing a different color,
caption, or image to reflect the different states.

davoud.karimi@georgebrown.ca
 Push Buttons
• different types of push buttons:
• Interlocked push button:
• Use a group of buttons to send values to the same tag. When the operator presses one
button in the group, the button’s value is sent to the tag, and the button remains
highlighted as long as the tag value is the same as the button’s value. Pressing another
button in the group releases the first button and sends a new value to the tag. You can
also use a single Interlocked push button to send a value to a tag
• Ramp button:
• Increase or decrease the value of a tag by a specified integer or floating-point value. For
example, use two Ramp buttons together to create a raise/lower control

davoud.karimi@georgebrown.ca
 How to connect to a Tag
• You can connect
almost all objects
(except for the
drawing objects) to
a tag.
• Tag can be an HMI
or a server tag
• You can also use
expression for
most of objects

davoud.karimi@georgebrown.ca
 Numeric Display
• Numeric display:
• Display numeric tag values.
For example, show the current
temperature of an oven.
• String display:
• Display string tag values. For
example, set up the data
source to generate strings that
report on the state of a
process of operation, or that
provide the operator with
instructions about what to do
next

davoud.karimi@georgebrown.ca
 Multistate indicator
• Multistate indicator:
• The state of a process, on a
panel that changes its color,
image, or caption to indicate
the current state. Each state is
set up to correspond to a
numeric tag value.

davoud.karimi@georgebrown.ca
 Assigning an expression to an
object

• You can connect the

tag to the object or
use an expression for
the object

davoud.karimi@georgebrown.ca
 Bar Graph
• Bar Graph:
• Numeric values in bar graph
format. The bar graph increases or
decreases in size to show the
changing value.
• You may connect the bar graph to
a tag or alternatively you may
assign an expression to it

davoud.karimi@georgebrown.ca
 String Input Enable Button
• At runtime, the operator can use the String Input Enable button to
open a string pop-up keyboard or scratchpad.
• When the operator presses the button, the pop-up opens.
• The operator can use the pop-up to enter a string value to send to the
Value connection at the data source.

davoud.karimi@georgebrown.ca
To create a String Input Enable
button

davoud.karimi@georgebrown.ca
 Example
• In a furnace control project, the operator is supposed to load
the furnace up to 80 Kg. The weight is measured by an analog Signal message
100-kg load cell whose output is 0~10 VDC. value
• Indicate how much the furnace is loaded by a gauge graphic abject 1 Door is Open

• Consider a local message that indicates these messages 2 Door is Closed

• Consider a start button to turn on the furnace 3 Furnace is overloaded
• If the door is open and you press the start button an alarm is to be 4 Preheating
triggered indicating that the door is open 5 Baking
• the total baking time is 15 seconds, during which the first 5 seconds 6 Cooling
are preheating, the second 5 seconds are baking and the last 5 7 Done
seconds are cooling conditions. Indicate each phase in the local
message
• When the furnace is on consider a box that turns red
• When the furnace is off the above box on the panel turns green
davoud.karimi@georgebrown.ca
PLC Program

davoud.karimi@georgebrown.ca