HMI screen design basics in PLC Programming

Introduction

HMI screens let people see and control machines easily. Good design helps users work safely and quickly.

When you want to show machine status clearly to operators.

When you need buttons or controls for users to start or stop machines.

When you want to display alarms or warnings in a simple way.

When you want to make sure users can navigate between different machine parts easily.

When you want to improve safety by showing important information clearly.

Syntax

PLC Programming

Screen {
  Title: string
  Controls: [
    {Type: string, Label: string, Action: string, Position: {x: int, y: int}},
    ...
  ]
  Colors: {Background: string, Text: string, Alarm: string}
  Navigation: [
    {From: string, To: string, Trigger: string},
    ...
  ]
}

Each screen has a title and controls like buttons or indicators.

Positions use coordinates to place controls on the screen.

Examples

A simple main menu screen with a start button and a status indicator.

PLC Programming

Screen {
  Title: "Main Menu"
  Controls: [
    {Type: "Button", Label: "Start", Action: "StartMachine", Position: {x: 10, y: 20}},
    {Type: "Indicator", Label: "Status", Action: "ShowStatus", Position: {x: 50, y: 20}}
  ]
  Colors: {Background: "Blue", Text: "White", Alarm: "Red"}
  Navigation: [
    {From: "Main Menu", To: "Settings", Trigger: "SettingsButton"}
  ]
}

An alarm screen that shows alarm messages in red on black background.

PLC Programming

Screen {
  Title: "Alarm Screen"
  Controls: [
    {Type: "Text", Label: "Alarm Message", Action: "ShowAlarm", Position: {x: 5, y: 5}}
  ]
  Colors: {Background: "Black", Text: "Red", Alarm: "Bright Red"}
  Navigation: []
}

Sample Program

This screen lets the user turn the pump on or off and see its status. It also allows going back to the main menu.

PLC Programming

Screen {
  Title: "Pump Control"
  Controls: [
    {Type: "Button", Label: "Pump On", Action: "TurnPumpOn", Position: {x: 10, y: 10}},
    {Type: "Button", Label: "Pump Off", Action: "TurnPumpOff", Position: {x: 10, y: 40}},
    {Type: "Indicator", Label: "Pump Status", Action: "ShowPumpStatus", Position: {x: 50, y: 25}}
  ]
  Colors: {Background: "Gray", Text: "Black", Alarm: "Red"}
  Navigation: [
    {From: "Pump Control", To: "Main Menu", Trigger: "BackButton"}
  ]
}

Important Notes

Keep controls spaced well so users can easily press buttons without mistakes.

Use colors consistently: for example, red always means alarm or stop.

Test your screen on the actual HMI device to check readability and usability.

Summary

HMI screens help users control and monitor machines easily.

Design screens with clear titles, controls, and consistent colors.

Plan navigation so users can move between screens smoothly.

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