HMI screen design basics in PLC Programming - Step-by-Step Execution

Concept Flow - HMI screen design basics

Start Design

↓

Define Screen Purpose

↓

Select Screen Elements

↓

Arrange Elements Visually

↓

Set Element Properties

↓

Add Navigation Controls

↓

Test Screen Functionality

↓

Deploy Screen

↓

End

This flow shows the step-by-step process of designing an HMI screen from start to deployment.

Execution Sample

PLC Programming

1. Define screen purpose: Monitor temperature
2. Add elements: Numeric display, Alarm indicator
3. Arrange elements: Numeric top-left, Alarm bottom-right
4. Set properties: Units °C, Alarm color red
5. Add navigation: Button to main menu
6. Test and deploy

This example outlines the basic steps to create a simple HMI screen for temperature monitoring.

Execution Table

Step	Action	Details	Result
1	Define screen purpose	Monitor temperature	Clear goal set
2	Add elements	Numeric display, Alarm indicator	Elements added to screen
3	Arrange elements	Numeric top-left, Alarm bottom-right	Layout established
4	Set properties	Units °C, Alarm color red	Elements customized
5	Add navigation	Button to main menu	User can navigate screens
6	Test screen	Check display and alarm	Screen works as expected
7	Deploy screen	Upload to HMI device	Screen ready for use

💡 All steps completed, screen is designed and deployed

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Screen Purpose	None	Monitor temperature	Monitor temperature	Monitor temperature	Monitor temperature	Monitor temperature
Elements	None	Numeric display, Alarm indicator	Arranged elements	Customized elements	Customized elements	Customized elements
Layout	None	None	Numeric top-left, Alarm bottom-right	Same	Same	Same
Properties	None	None	None	Units °C, Alarm color red	Same	Same
Navigation	None	None	None	None	Button to main menu	Button to main menu
Test Status	Not tested	Not tested	Not tested	Not tested	Not tested	Passed
Deployment Status	Not deployed	Not deployed	Not deployed	Not deployed	Not deployed	Deployed

Key Moments - 3 Insights

Why do we define the screen purpose first before adding elements?

Defining the purpose guides what elements to add and how to arrange them, as shown in execution_table step 1 and 2.

What happens if we skip testing the screen before deployment?

Skipping testing risks errors or poor usability, which is why step 6 ensures the screen works as expected before deployment.

Why is navigation important in HMI screens?

Navigation allows users to move between screens easily, improving usability, as seen in step 5 where a button is added.

Visual Quiz - 3 Questions

Look at the execution_table, what elements are added at step 2?

A Numeric display and Alarm indicator

B Button to main menu

C Units °C and Alarm color red

D Screen purpose definition

💡 Hint

Check the 'Details' column in row for step 2 in execution_table

At which step is the screen layout arranged?

A Step 5

B Step 1

C Step 3

D Step 6

💡 Hint

Look at the 'Action' column in execution_table for arranging elements

If navigation controls were not added, which variable in variable_tracker would remain 'None' after step 5?

A Elements

B Navigation

C Properties

D Layout

💡 Hint

Check the 'Navigation' row values after step 5 in variable_tracker

Concept Snapshot

HMI Screen Design Basics:
1. Define screen purpose clearly.
2. Add and arrange elements logically.
3. Set element properties (units, colors).
4. Include navigation controls.
5. Test screen before deployment.
6. Deploy to HMI device for use.

Full Transcript

HMI screen design starts by defining the screen's purpose, such as monitoring temperature. Next, you add elements like numeric displays and alarm indicators. Then, arrange these elements visually on the screen for clarity. After that, set properties like units and colors to make the display meaningful. Add navigation controls so users can move between screens easily. Test the screen to ensure it works correctly. Finally, deploy the screen to the HMI device for operation.

Practice

1. What is the main purpose of an HMI screen in PLC programming?

easy

A. To store machine data permanently

B. To write complex PLC code

C. To replace the PLC hardware

D. To allow users to control and monitor machines easily

Solution

1. Step 1: Understand HMI function

   An HMI (Human-Machine Interface) screen is designed to help users interact with machines.

2. Step 2: Identify main purpose

   The main goal is to make control and monitoring simple and clear for users.

3. Final Answer:

   To allow users to control and monitor machines easily -> Option D

4. Quick Check:

   HMI = control and monitor [OK]

Hint: HMI means user interface for machine control [OK]

Common Mistakes:

• Confusing HMI with PLC programming itself
• Thinking HMI stores data permanently
• Assuming HMI replaces hardware

2. Which of the following is the correct way to label a button on an HMI screen?

easy

A. Use only icons without text

B. Use vague text like 'Click Here'

C. Use clear text like 'Start Motor'

D. Use very long sentences explaining the button

Solution

1. Step 1: Understand button labeling

   Buttons should have clear, simple labels so users know their function immediately.

2. Step 2: Evaluate options

   'Start Motor' clearly tells the user what the button does, unlike vague or overly long labels.

3. Final Answer:

   Use clear text like 'Start Motor' -> Option C

4. Quick Check:

   Clear labels = better usability [OK]

Hint: Label buttons with clear, simple text [OK]

Common Mistakes:

• Using unclear or vague labels
• Relying only on icons without text
• Writing long explanations on buttons

3. Consider this HMI screen design rule: "Use consistent colors for similar controls." What is the likely result if this rule is ignored?

medium

A. Users may get confused about control functions

B. The PLC program will stop working

C. The screen will load faster

D. The machine will run automatically

Solution

1. Step 1: Understand color consistency

   Consistent colors help users recognize similar controls easily.

2. Step 2: Predict effect of ignoring rule

   If colors vary randomly, users may not know which controls do similar things, causing confusion.

3. Final Answer:

   Users may get confused about control functions -> Option A

4. Quick Check:

   Consistent colors = less confusion [OK]

Hint: Consistent colors help users understand controls [OK]

Common Mistakes:

• Thinking color affects PLC operation
• Assuming color changes speed up screen
• Believing color affects machine automation

4. You designed an HMI screen but users report they can't find the navigation buttons easily. What is the most likely design mistake?

medium

A. Navigation buttons are hidden or placed inconsistently

B. Buttons have clear labels and consistent colors

C. Screen title is too large and clear

D. Screen uses standard navigation layout

Solution

1. Step 1: Analyze user feedback

   Users can't find navigation buttons easily means buttons are not visible or confusingly placed.

2. Step 2: Identify design mistake

   Hidden or inconsistent placement of navigation buttons causes difficulty in finding them.

3. Final Answer:

   Navigation buttons are hidden or placed inconsistently -> Option A

4. Quick Check:

   Visible, consistent navigation = easy to find [OK]

Hint: Place navigation buttons clearly and consistently [OK]

Common Mistakes:

• Ignoring button placement importance
• Assuming large titles improve navigation
• Using non-standard layouts without testing

5. You want to design an HMI screen for a machine with multiple steps. Which approach best helps users navigate smoothly between steps?

hard

A. Place all controls on one screen without navigation

B. Use a clear menu with buttons labeled for each step

C. Use random colors for each step's controls

D. Hide navigation buttons to save screen space

Solution

1. Step 1: Understand multi-step navigation needs

   Users need to move easily between steps without confusion.

2. Step 2: Evaluate navigation methods

   A clear menu with labeled buttons helps users know where to go next and jump between steps.

3. Step 3: Reject poor options

   Putting all controls on one screen can overwhelm users; random colors confuse; hiding buttons blocks navigation.

4. Final Answer:

   Use a clear menu with buttons labeled for each step -> Option B

5. Quick Check:

   Clear menus = smooth navigation [OK]

Hint: Label navigation buttons clearly for each step [OK]

Common Mistakes:

• Overloading one screen with all controls
• Using inconsistent colors that confuse users
• Hiding navigation buttons to save space