The picture can't be display ed.

HMI User Interface:

User-centered HMI Development
Process, Basics of Web-Server
The picture can't be display ed.

What is HMI?
HMI, or Human-Machine Interface, is a user
interface that connects an operator to the
controller for an industrial system. It is a critical
component in various industries, enabling
humans to interact with machines and systems
effectively.
Definition: HMI is a platform that allows users to interact
with machines, systems, or devices. It can range from
basic screens to advanced touchscreens and displays.

Components:
• Display: Shows information such as data, graphics, and
system status.
• Input Methods: Buttons, touchscreens, keyboards, or
other input devices that allow the user to interact with
the machine.
• Software: The underlying software that manages the
interface, often running on embedded systems or PCs.
Applications:
• Manufacturing: Used to monitor and control production processes.
• Automation: In various industries, including automotive and
aerospace, for controlling automated systems.
• Utilities: Managing power plants, water treatment facilities, and
other utilities.
• Healthcare: Interfaces for medical devices and patient monitoring
systems.

Benefits:
• Efficiency: Streamlines operations by providing intuitive control and
monitoring.
• Safety: Enhances safety by providing real-time alerts and system
status.
• Data Visualization: Displays complex data in an understandable
format, aiding decision-making.
Types:
• Basic HMIs: Simple displays with basic control
functions.
• Advanced HMIs: Touchscreens with advanced
graphics and multi-function capabilities.
• Web-based HMIs: Accessible via web
browsers, providing remote access and
control.
The picture can't be display ed.

User-Centered Design
The picture can't be display ed.

User-Centered HMI Development Process

The User-Centered HMI (Human-Machine

Interface) development process involves
designing and developing interfaces that
prioritize the needs, preferences, and limitations
of the end users.

This approach ensures that the HMI is intuitive,

efficient, and effective in facilitating the
interaction between humans and machines.
The picture can't be display ed.

Overview of Stages
1. Requirements Analysis
2. Conceptual Design
3. Prototyping
4. Usability Testing
5. Implementation
6. Post-Implementation Evaluation
The picture can't be display ed.

Stage 1: Requirements Analysis

Objective: Understand the user needs, tasks, and environment
to define the HMI requirements.

Activities:
• User Research: Conduct interviews, surveys, and
observations to gather information about users, their tasks,
and the context in which they will use the HMI.
• Task Analysis: Break down the tasks users need to perform
into detailed steps to understand the workflow and
requirements.
• Environment Analysis: Analyze the physical and technical
environment where the HMI will be used to ensure it fits
well within its context.
• Define Requirements: Document functional and non-
functional requirements based on the gathered data.
The picture can't be display ed.

Stage 2: Conceptual Design

Objective: Create initial design concepts that address the
identified user needs and requirements.

Activities:
• Persona Development: Create personas representing
different user types to guide the design.
• Scenario Development: Develop usage scenarios to
understand how users will interact with the HMI.
• Sketches and Wireframes: Create low-fidelity sketches
and wireframes to visualize the design concepts.
• Design Review: Review design concepts with
stakeholders and users to gather initial feedback.
The picture can't be display ed.

Stage 3: Prototyping
Objective: Develop interactive models of the HMI to test
and refine design ideas.

Activities:
• Low-Fidelity Prototyping: Build simple, interactive
prototypes using tools like paper, cardboard, or basic
digital tools to quickly test design ideas.
• High-Fidelity Prototyping: Create detailed, interactive
prototypes using advanced prototyping tools that
closely mimic the final product.
• Iterative Testing and Refinement: Conduct usability
tests with users to gather feedback and make necessary
refinements to the design.
The picture can't be display ed.

Stage 4: Usability Testing

Objective: Evaluate the HMI design with real users to ensure it
meets their needs and is easy to use.

Activities:
• Test Planning: Define test objectives, tasks, and metrics to
evaluate the HMI.
• Recruit Participants: Select representative users to
participate in usability testing.
• Conduct Testing: Observe users as they interact with the
HMI prototype, and gather qualitative and quantitative
data.
• Analyze Results: Identify usability issues, gather insights,
and prioritize areas for improvement.
The picture can't be display ed.

Stage 5: Implementation
Objective: Develop and deploy the final HMI, ensuring it
meets the defined requirements and usability standards.

Activities:
• Development: Write the code and develop the
software for the HMI based on the refined design.
• Integration: Integrate the HMI with the underlying
system or machinery it will control.
• Testing: Conduct thorough testing, including
functional, performance, and security testing, to
ensure the HMI works as intended.
• Deployment: Roll out the HMI to the production
environment and provide necessary user training and
support.
The picture can't be display ed.

Stage 6: Post-Implementation Evaluation

Objective: Continuously monitor and improve the HMI

based on user feedback and performance data.

Activities:
• Gather Feedback: Collect feedback from users through
surveys, interviews, and support channels.
• Monitor Performance: Use analytics and monitoring
tools to track the performance and usage of the HMI.
• Iterative Improvements: Make ongoing enhancements
and updates to the HMI based on user feedback and
performance data.
 Benefits of User-Centered HMI Development

• Improved Usability: Ensures the HMI is intuitive and

easy to use.
• Increased User Satisfaction: Leads to higher user
satisfaction and acceptance.
• Enhanced Efficiency: Facilitates more efficient and
effective interactions between users and machines.
• Reduced Development Costs: Identifies and resolves
usability issues early in the design process, saving time
and resources.
• Better Product Success: Increases the likelihood of
success by aligning the HMI with user needs and
preferences.
The picture can't be display ed.

BASICS OF WEB-SERVER
The picture can't be display ed.

Web-Server
A web server is a software application that serves
web pages and other content to clients over the
internet or an intranet. It processes incoming
network requests over HTTP, the standard protocol
used to transmit web pages and other resources on
the World Wide Web.

In the context of HMI, a web server plays a crucial

role in providing a platform for the user interface
(UI) of a system or device.
 Functionality of Web Server

• Request Handling: A web server receives requests from

clients (typically web browsers) via HTTP (Hypertext Transfer
Protocol) or HTTPS (HTTP Secure).
• Content Delivery: It processes these requests and delivers
web pages, images, files, or other resources stored on it or on
connected resources like databases.
• Protocol Handling: It adheres to HTTP/HTTPS protocols to
ensure proper communication between clients and servers.
• Security: Web servers often include security features like
SSL/TLS encryption (for HTTPS) and access control
mechanisms to protect data and control access.
 Basics: How Web Servers Work?

Request-response model:
– Clients send requests to the server
– Server processes requests and sends responses

Server-side vs. client-side processing:

– Server-side: Processing done on the server (e.g.,
databases, scripts)
– Client-side: Processing done on the client's
browser (e.g., JavaScript)
 Components of a Web Server
• HTTP/HTTPS Protocol Handlers: Responsible for interpreting and
responding to HTTP requests from clients.

• Server-side Applications: Programs or scripts (e.g., PHP, Python,

Node.js) that run on the server to process requests, generate
dynamic content, or interact with databases.

• Configuration Files: Settings that determine how the server

operates, such as virtual hosts, security settings, and server
behaviors.

• Logging and Monitoring: Tools for logging server activities, errors,

and performance metrics to troubleshoot and optimize server
performance.
 Basic Operations of Web Server
• Request Handling Flow:
– Clients (web browsers) send HTTP requests to the web server.
– The web server receives the request and determines how to respond
based on the requested resource.
– It retrieves the requested resource from its file system or generates it
dynamically using server-side scripts.
– The server sends the response (e.g., HTML page, image, data) back to
the client.

• File Serving:
– Web servers store and serve static files (e.g., HTML, CSS, JavaScript,
images) directly to clients without processing.

• Dynamic Content Generation:

– Servers can generate web pages dynamically by executing server-side
scripts (e.g., PHP, Python) to process data or interact with databases
before sending the response to clients.
 Security Considerations

• SSL/TLS Encryption: Secure Socket Layer (SSL) or

Transport Layer Security (TLS) protocols provide secure
communication (HTTPS) between clients and servers.

• Access Control: Configurations to restrict access to

certain resources or directories based on user
permissions or IP addresses.

• Regular Updates and Patching: To address security

vulnerabilities and maintain server integrity.
 Types of Web Servers

• Apache HTTP Server: One of the most popular open-

source web servers, known for its flexibility and
robustness.
• Nginx: Known for its high performance, scalability, and
ability to handle concurrent connections efficiently.
• Microsoft Internet Information Services (IIS): Commonly
used on Windows servers, it integrates well with
Microsoft technologies like ASP.NET.
• LiteSpeed: Known for its speed and efficiency, often used
in high-traffic websites and web hosting environments.
Key roles of a web server in HMI:

• Hosting the HMI Application: The web server hosts the files and software
components that constitute the HMI application. This can include HTML,
CSS, JavaScript, and backend logic necessary for the UI functionality.
• User Interaction: Through the web server, users interact with the HMI via
their web browsers or other client applications. The server processes user
inputs, such as clicks or data entries, and responds by updating the UI
accordingly.
• Data Exchange: It facilitates the exchange of data between the HMI and
other system components or databases. This includes fetching real-time
data, logging information, or sending commands to other parts of the
system.
• Security and Access Control: Web servers often include mechanisms for
authentication, authorization, and secure communication (HTTPS) to
protect sensitive data and ensure only authorized users can access certain
features or information.
• Scalability and Accessibility: Web servers are designed to handle multiple
client connections simultaneously, making them scalable for large-scale
applications. They also enable remote access to HMIs, allowing users to
monitor and control systems from different locations.