FreertosHow-ToBeginner · 4 min read

How to Design HMI Screen: Simple Steps for PLC Programming

To design an HMI screen, start by defining the process variables and user interactions, then create clear visual elements like buttons, indicators, and data displays using your HMI software. Organize the layout logically for easy navigation and test the screen with your PLC to ensure real-time data updates and control.

📐

Syntax

Designing an HMI screen involves these key parts:

Tags/Variables: Link HMI elements to PLC variables for real-time data.
Visual Elements: Buttons, indicators, sliders, and text fields to interact with the process.
Screens/Pages: Organize multiple views for different process areas.
Alarms and Messages: Show alerts based on PLC conditions.
Navigation: Buttons or menus to move between screens.

Each element must be configured with properties like size, color, and linked PLC address.

plaintext

Tag: TemperatureSensor
Type: Analog Input
Address: %IW0

Element: Numeric Display
Linked Tag: TemperatureSensor

Element: Button
Action: StartPump
Linked Tag: %Q0.0

Screen: MainScreen
Contains: Numeric Display, Button, Alarm List

💻

Example

This example shows a simple HMI screen setup with a temperature display and a start button linked to PLC tags.

yaml

Tags:
  TemperatureSensor:
    Type: Analog Input
    Address: %IW0
  StartPump:
    Type: Digital Output
    Address: %Q0.0

Screen: MainScreen
Elements:
  - Type: NumericDisplay
    Tag: TemperatureSensor
    Position: {x: 50, y: 50}
    Size: {width: 100, height: 30}
  - Type: Button
    Tag: StartPump
    Text: "Start Pump"
    Position: {x: 50, y: 100}
    Size: {width: 100, height: 40}
    Action: Toggle

Navigation:
  - Button: "Go to Settings"
    TargetScreen: SettingsScreen

Output

Screen 'MainScreen' created with: - Numeric Display showing 'TemperatureSensor' value - Button labeled 'Start Pump' toggling 'StartPump' output - Navigation button to 'SettingsScreen'

⚠️

Common Pitfalls

Common mistakes when designing HMI screens include:

Linking elements to wrong PLC addresses causing incorrect data display.
Overcrowding the screen with too many elements making it confusing.
Using unclear labels or colors that confuse the operator.
Not testing the screen with live PLC data before deployment.
Ignoring alarm visibility and navigation ease.

Always verify tag addresses and keep the interface simple and intuitive.

plaintext

Wrong:
Element: Numeric Display
Linked Tag: %IW1  # Incorrect address

Right:
Element: Numeric Display
Linked Tag: %IW0  # Correct address

📊

Quick Reference

Tips for effective HMI screen design:

Use consistent colors and fonts for readability.
Group related controls and displays logically.
Keep navigation simple with clear buttons.
Test with real PLC data to ensure accuracy.
Include alarms and status indicators prominently.

✅

Key Takeaways

Link HMI elements correctly to PLC variables for real-time control and monitoring.

Design clear, simple layouts with logical grouping and easy navigation.

Test your HMI screen with live PLC data before final use.

Avoid clutter and use consistent colors and labels for operator clarity.

Include alarms and status indicators to improve process safety and awareness.