Scribd
Upload
18 views67 pages

UNIT4 HMI User Interface 2

The document provides an overview of web-based Human Machine Interfaces (HMIs) and their integration with technologies like TwinCAT, HTML, CSS, and JavaScript. It discusses the principles of mobile UI design, the benefits of mobile HMIs, and key features of mobile HMI development suites. Additionally, it highlights the importance of consistency, simplicity, feedback, and accessibility in mobile UI design, along with the advantages of using mobile HMI development tools.

Uploaded by

abhaysk1023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views67 pages

UNIT4 HMI User Interface 2

The document provides an overview of web-based Human Machine Interfaces (HMIs) and their integration with technologies like TwinCAT, HTML, CSS, and JavaScript. It discusses the principles of mobile UI design, the benefits of mobile HMIs, and key features of mobile HMI development suites. Additionally, it highlights the importance of consistency, simplicity, feedback, and accessibility in mobile UI design, along with the advantages of using mobile HMI development tools.

Uploaded by

abhaysk1023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

Web-based HMI:

Basics of TwinCAT and HTML,


CSS, JavaScript

HMI on Mobile: Four Principles of


Mobile UI Design, Benefits of
Mobile HMIs, Mobile HMI
Development Suites.
Web-based HMI
• Web-based HMIs allow users to interact with
machinery and systems through a web browser.

• Key benefits
– remote access, remote monitoring: Enables access
and monitoring to control from anywhere.
– Flexibility: Accessible from any device with a web
browser.
– Ease of Integration: Easily integrates with existing web
technologies and systems.
Overview of TwinCAT
• TwinCAT (The Windows Control and Automation Technology)
is a software platform developed by Beckhoff for real-time
control in automation systems.
• It integrates PLC (Programmable Logic Controller) and PC-
based control technology (combines PLC, motion control, and
HMI functionalities).

• Key features:
– Real-time Control: Provides real-time processing for automation tasks.
– Programming Environments: Supports multiple programming
languages (IEC 61131-3 programming languages).
– Integration Capabilities: Can be integrated with various industrial
protocols and devices.
Architecture of TwinCAT
Components
• TwinCAT Runtime: Executes real-time control tasks.
• TwinCAT Engineering: Provides development environment for
programming and configuration.
Modules
• TwinCAT PLC: For programming PLC logic.
• TwinCAT NC: For motion control tasks.
• TwinCAT I/O: For handling input/output devices.
TwinCAT Development Environment
TwinCAT XAE (eXtended Automation Engineering)
• Integrated development environment within Microsoft Visual Studio.
• Supports C/C++ and IEC 61131-3 programming languages.

Features
• Code editor, debugger, and project management tools.
• Simulation and testing tools.
Programming in TwinCAT
IEC 61131-3 Languages
Ladder Diagram (LD), Function Block Diagram (FBD), Structured Text (ST)
Instruction List (IL), Sequential Function Chart (SFC)
C/C++ Extensions
For high-performance applications and custom functionalities.
Real-time Capabilities of TwinCAT
TwinCAT Real-time Kernel
Ensures deterministic execution of control tasks.
Prioritizes real-time tasks over standard Windows processes.
Task Management
Configurable task scheduling and priority settings.
Multitasking support for concurrent execution.
TwinCAT I/O System
Integration
Seamless integration with Beckhoff I/O devices.
Support for various fieldbus systems (e.g., EtherCAT, Profibus).
Configuration
Easy setup and mapping of I/O channels.
Diagnostic tools for monitoring and troubleshooting.
Motion Control with TwinCAT
TwinCAT NC/PTP
Point-to-point motion control for single-axis movements.
TwinCAT NC/I
Interpolated motion control for multi-axis synchronization.
Applications
Robotics, CNC machines, and automated assembly lines.
(Computer numerical control (CNC) is a manufacturing method that automates the control, movement and precision of machine tools through the use of
preprogrammed computer software, which is embedded inside the tools)
TwinCAT HMI
Tool for creating user interfaces for monitoring and controlling automation
systems.
Features
Drag-and-drop interface designer.
Support for web-based and mobile HMI.
Real-time data visualization.
Communication Protocols in TwinCAT
Supported Protocols
EtherCAT (https://infosys.beckhoff.com/english.php?content=../content/1033/eap/1521731467.html&id=)
OPC UA (Open Platform Communications Unified Architecture)
Modbus TCP/RTU
Interoperability
Facilitates communication between different devices and systems in an
automation setup.
Overview of HTML
HTML (HyperText Markup Language) is the standard language for
creating web pages. It defines the structure of web content.

History
Developed by Tim Berners-Lee in 1991.
Current version: HTML5 (released in October 2014)
HTML Document Structure
Basic Structure
<!DOCTYPE html>: Declaration to define HTML5.
<html>: Root element.
<head>: Contains meta-information about the document.
<body>: Contains the content of the document.
HTML Elements
Elements are building blocks of HTML. It consist of a start tag, content,
and an end tag.
Examples: <h1>, <p>, <div>, <a>, <img>

Headings
<h1> to <h6>: Define headings of different levels.

Paragraph
<p>: Defines a paragraph.

Links
<a href="URL">: Defines a hyperlink.

Images
<img src="URL" alt="description">: Embeds an image.
HTML Attributes
Attributes provide additional information about elements. They are
placed inside the opening tag.

Common Attributes
href for links
src and alt for images
class and id for styling and scripting

Ordered Lists
<ol>: Defines an ordered list.
<li>: Defines a list item.

Unordered Lists
<ul>: Defines an unordered list.
<li>: Defines a list item.
HTML Attributes…
Table Elements
<table>: Defines a table.
<tr>: Defines a table row.
<td>: Defines a table cell.
<th>: Defines a table header.

Form Elements
<form>: Defines a form.
<input>: Defines an input field.
<label>: Defines a label for an input.
<button>: Defines a clickable button.
HTML5 New Features
Semantic Elements
<header>, <footer>, <section>, <article>
Provide better structure.
Multimedia
<audio> and <video>: Embed audio and video.
Graphics
<canvas>: Draw graphics on the fly.
HTML: Practical Applications
Web Development
Foundation for creating websites and web applications.
Human Machine Interface (HMI)
Designing user interfaces for interacting with machines.
Case Study
Example of a simple HMI dashboard using HTML and JavaScript.
Overview of CSS
CSS (Cascading Style Sheets) is a stylesheet language used to
describe the presentation of a document written in HTML or
XML. It controls the layout and appearance of web pages.

History
Developed by Håkon Wium Lie and Bert Bos.
First released in December 1996.
CSS Syntax
Basic Structure
Selector: Indicates the HTML
element to be styled.

Declaration Block: Contains one


or more declarations separated
by semicolons.

Declaration: Consists of a
property and a value.
Types of CSS
Inline CSS
Added directly to an HTML element using the style attribute.

Internal CSS
Defined within a <style> tag inside the <head> section of an HTML
document.

External CSS
Linked to an HTML document using the <link> tag.
Selectors in CSS
Basic Selectors
Element Selector: Selects elements by tag name.

Class Selector: Selects elements with a specific class.

ID Selector: Selects elements with a specific ID.


CSS Box Model
Components
Content: The actual content of the element.
Padding: Space between the content and the border.
Border: Surrounds the padding and content.
Margin: Space outside the border.
CSS Positioning
Types
• Static: Default positioning.
• Relative: Positioned relative to its normal position.
• Absolute: Positioned relative to the nearest positioned
ancestor.
• Fixed: Positioned relative to the viewport.
• Sticky: Switches between relative and fixed based on scroll
position.
CSS Flexbox
A layout model for creating responsive layouts.

Properties
display: flex;
justify-content, align-items, flex-direction, flex-wrap
CSS Grid
A layout system for creating complex, responsive web layouts.

Properties
display: grid;
grid-template-columns, grid-template-rows, grid-gap
Responsive Design with CSS
Media Queries
Used to apply styles based on device characteristics like screen
size.

Flexbox and Grid


Utilize flexible and grid layouts for responsiveness.
CSS: Practical Applications
Web Development
Essential for designing
modern, responsive
websites.

HMI
Styling user interfaces for
better usability and
aesthetics.

Case Study
Example of a styled HMI
dashboard using CSS.
Overview of Javascript
JavaScript is a high-level, interpreted programming language
used to create dynamic and interactive web pages. It is
developed by Brendan Eich in 1995.

Purpose
Enhances HTML and CSS by adding interactivity and logic.

Where It Runs
Primarily in web browsers, but also on servers using Node.js.
JavaScript Syntax and Basics
Basic Syntax
Statements are written in plain text and are case-sensitive.
Ends with semicolons (;), although they are optional.

Variables
Declared using ‘var’, ‘let’, or ‘const’.
Data Types in Javascript
Primitive Types
Number, String, Boolean, Null, Undefined, Symbol
Operators in Javascript
Arithmetic Operators
+, -, *, /, %
Comparison Operators
==, ===, !=, !==, <, >, <=, >=
Logical Operators
&& (and), || (or), ! (not)
Control structures in Javascript
Conditional Statements
if, else if, else

Loops
for, while, do...while
Functions in Javascript
Definition
Functions are reusable blocks of code.
Declared using the function keyword.

Arrow Functions
A concise way to write functions.
Objects and Arrays in Javascript
Objects
Collections of key-value pairs.

Arrays
Ordered collections of values.
DOM Manipulation
Document Object Model (DOM)
Represents the structure of a web page.
JavaScript can manipulate the DOM to change the content and
style of a page.
Event Handling
Events
Actions that occur on a web page (e.g., clicks, keypresses).

Event Listeners
JavaScript can listen for events and execute code in response.
Javascript: Practical Applications
Web Development
Creating dynamic, interactive web pages.
HMI
Enhancing user interfaces for better interaction and control.
Case Study
Example of an interactive HMI element:
HMI on Mobile
Introduction to Mobile UI Design
• Mobile UI Design focuses on creating user interfaces for
mobile applications.
• Human Machine Interface (HMI) on mobile devices is critical
for enabling users to interact with systems effectively.
• Mobile UI design principles ensure usability, efficiency, and
satisfaction.

• Importance of design in enhancing usability and user


satisfaction.
– Mobile devices have unique constraints and opportunities.
– Designing effective mobile HMIs can significantly enhance user
experience.
Principle 1 - Consistency
Consistency refers to maintaining uniformity across the UI to ensure a
cohesive experience.

Key Aspects:
Uniformity in Elements: Consistent use of colors, fonts, and buttons.
Predictable Navigation: Familiar patterns and layouts.
Examples:
Apps like Facebook and Instagram that use consistent iconography and
layout. (Use of consistent icons, colors, and typography throughout the
app.)
Importance of Consistency:
Enhances usability by reducing the learning curve.
Builds trust and reliability in the app’s interface.
Strategies for Ensuring Consistency:
Create and follow design guidelines and standards.
Use style guides and reusable components.
Implementing Consistency
Guidelines
Follow platform guidelines (e.g., Material Design for Android,
Human Interface Guidelines for iOS).
Reuse design patterns and components.
Maintain uniform navigation structure.

Case Study
Example of a mobile HMI maintaining consistent button styles
and navigation patterns.
Principle 2 - Simplicity
Simplicity involves designing interfaces that are easy to understand and use.
Key Aspects:
Minimalism: Use of essential elements to avoid clutter (Focuses on core
tasks and functionalities)
Clear Navigation: Simple and intuitive pathways for users.
Examples:
Apps with minimalistic design like Google Search.
Clean and uncluttered home screens.
(Minimalistic design with essential features highlighted.)
Common Pitfalls:
Overloading users with too many features or options.
Complex navigation structures that confuse users.
Tips for Designing Simple Interfaces:
Prioritize content and features that align with user needs.
Use clear labels and straightforward actions.
Implementing Simplicity
Guidelines
Use clear and concise language.
Avoid unnecessary elements and features.
Prioritize content and actions.

Case Study
Example of a mobile HMI with a clean layout and easy-to-
navigate menu.
Principle 3 - Feedback
Feedback provides users with responses to their actions, helping them
understand the outcome.
Key Aspects:
– Visual Feedback: Changes in color or animations in response to user actions.
– Auditory Feedback: Sounds or alerts indicating actions or errors.
– Haptic Feedback: Vibrations or physical responses.
Examples:
Button animations after being pressed.
Notifications and alert sounds.
Designing for Timely and Clear Feedback:
Ensure feedback is immediate and understandable.
Use different types of feedback to enhance the user experience.
Common Issues and Solutions:
Issue: Feedback that is too subtle or delayed.
Solution: Ensure feedback is prominent and occurs promptly.
Implementing Feedback
Guidelines
Provide immediate response to user actions.
Use visual, auditory, and tactile feedback.
Clearly indicate system status and progress.

Case Study
Example of a mobile HMI with real-time feedback for form
submissions and error handling.
Principle 4 - Accessbility
Feedback provides users with responses to their actions, helping them
understand the outcome.
Key Aspects:
– Visual Feedback: Changes in color or animations in response to user actions.
– Auditory Feedback: Sounds or alerts indicating actions or errors.
– Haptic Feedback: Vibrations or physical responses.
Examples:
Button animations after being pressed.
Notifications and alert sounds.
Designing for Timely and Clear Feedback:
Ensure feedback is immediate and understandable.
Use different types of feedback to enhance the user experience.
Common Issues and Solutions:
Issue: Feedback that is too subtle or delayed.
Solution: Ensure feedback is prominent and occurs promptly.
Implementing Accessibility
Guidelines
Follow accessibility standards
(e.g., WCAG-Web Content Accessibility Guidelines ).
Provide multiple ways to interact with the interface
(touch, voice, etc.).
Ensure compatibility with assistive technologies.

Case Study
Example of a mobile HMI designed with accessibility features like
screen readers and adjustable text size.
Best Practices
Consistency, simplicity, feedback, and accessibility are crucial
principles for effective mobile UI design.

Best Practices
Regularly test with real users, including those with
disabilities.
Keep updating the interface based on user feedback and
technological advancements.

Future Trends
Increased use of AI for personalized interfaces.
Enhanced integration with IoT for seamless user experiences.
Key Benefits of Mobile HMIs
Increased Accessibility
– Users can access and control systems from anywhere, at any time.
– Enhances convenience and flexibility, especially for remote monitoring and
operation.
Improved Efficiency
– Streamlines processes and reduces time required for system interactions.
– Faster response times and reduced operational delays, leading to increased
productivity.
Enhanced User Experience
– Mobile HMIs are designed with user-friendly interfaces tailored for
touchscreens.
– Provides intuitive navigation and controls, resulting in higher user satisfaction.
Cost Savings
– Reduces the need for expensive specialized hardware.
– Utilizes existing mobile devices, leading to lower initial setup and maintenance
costs.
…Key Benefits of Mobile HMIs

Real-Time Data and Analytics


– Provides immediate access to system performance data and analytics.
– Enables informed decision-making based on real-time information.
Scalability and Flexibility
– Easily adapts to different system sizes and types.
– Flexible integration with various technologies and environments.
Enhanced Security
– Incorporates advanced security features to protect sensitive data.
– Ensures secure access and control, safeguarding against unauthorized use.
Mobile HMI Development Suites
Introduction to
Mobile HMI Development Suites
Mobile HMI development suites are tools and platforms used to
design, develop, and deploy Human Machine Interfaces on
mobile devices.

Importance
These suites simplify the development process and enhance
the functionality and usability of mobile HMIs.

Objective
To understand the key features, benefits, and examples of
popular mobile HMI development suites.
Key Features of
Mobile HMI Development Suites
Drag-and-Drop Interface
Simplifies UI design with a visual editor.

Pre-built Components
Includes buttons, sliders, graphs, and more.

Cross-Platform Support
Allows development for both Android and iOS platforms.

Real-Time Preview
Enables immediate feedback on design changes.

Integration with IoT and Cloud Services


Facilitates connectivity with external devices and data sources.
Benefits of Using
Mobile HMI Development Suites
Efficiency
Reduces development time with pre-built components and
templates.
Usability
Enhances user experience with intuitive design tools.
Flexibility
Supports a wide range of devices and screen sizes.
Scalability
Easily adapts to different project requirements.
Cost-Effectiveness
Reduces the need for extensive coding knowledge and
resources.
Popular Mobile HMI Development Suites

Ignition by Inductive Automation


Comprehensive tool for designing industrial HMIs.
Supports real-time data monitoring and control.

InduSoft Web Studio


Offers a robust set of tools for creating dynamic and responsive HMIs.
Includes a wide range of communication protocols.

Vijeo Designer
Focuses on intuitive design and ease of use.
Integrates seamlessly with Schneider Electric products.
Ignition by Inductive Automation

Key Features
Unified platform for SCADA, IIoT, and HMI development.
Web-based designer for easy access and collaboration.
Extensive library of pre-built templates and components.

Use Cases
Industrial automation and control systems.
Real-time data visualization and analysis.

https://inductiveautomation.com/
InduSoft Web Studio (Now Aveva Edge)

Key Features
Cross-platform development for mobile and desktop.
Supports over 250 communication protocols.
Real-time data logging and reporting.

Use Cases
Manufacturing and process control.
Building automation and energy management.

https://www.aveva.com/en/products/edge/
Vijeo Designer

Key Features
User-friendly interface with drag-and-drop functionality.
Seamless integration with Schneider Electric hardware.
Supports multiple languages and localization.

Use Cases
Energy management systems.
Industrial equipment control.

https://www.se.com/in/en/product-range/1054-
vijeo-designer/#products
Comparison of Mobile HMI Development Suites

Ease of Use
• Ignition: Advanced features with a moderate learning curve.
• InduSoft Web Studio: Comprehensive toolset with robust
capabilities.
• Vijeo Designer: Intuitive and user-friendly, ideal for beginners.

Integration Capabilities
• Ignition: Excellent integration with various industrial
protocols.
• InduSoft Web Studio: Wide range of supported protocols.
• Vijeo Designer: Best suited for Schneider Electric products.
Best Practices for Developing Mobile HMIs
• User-Centered Design: Focus on the needs and preferences of end-users.
• Consistency: Maintain a uniform look and feel across the interface.
• Simplicity: Keep the interface clean and uncluttered.
• Feedback: Provide immediate feedback for user actions.
• Testing and Iteration: Regularly test and refine the interface based on user
feedback.

Mobile HMI development suites play a crucial role in creating efficient, user-
friendly interfaces. Popular suites like Ignition, InduSoft Web Studio, and Vijeo
Designer offer diverse features and benefits.

Future Trends:
Increased integration with AI and machine learning for predictive
maintenance and analytics.
Enhanced support for augmented reality (AR) and virtual reality (VR)
interfaces.
Popular HMIs Developed Using InduSoft Web Studio
Oil and Gas Industry HMIs
Company/Software: Petrobras (Brazil)
Application: Supervising and controlling oil extraction and refining processes.
Features: Real-time monitoring, alarm management, and historical data analysis.
Benefits: Enhanced safety, optimized production, and reduced downtime.
Water and Wastewater Treatment HMIs
Company/Software: Veolia Water
Application: Managing and monitoring water treatment plants.
Features: Monitoring water quality, controlling treatment processes, and generating
compliance reports.
Benefits: Improved water quality, regulatory compliance, and efficient operations.
Building Automation Systems
Company/Software: Johnson Controls
Application: Managing HVAC, lighting, and security systems in buildings.
Features: Centralized control, real-time monitoring, and automated scheduling.
Benefits: Increased energy efficiency, improved comfort, and enhanced security.
Manufacturing Process Control HMIs
Company/Software: General Motors
Application: Monitoring and controlling manufacturing processes in automotive production.
Features: Real-time data visualization, process control, and quality assurance.
Benefits: Increased productivity, consistent product quality, and reduced waste.
…Popular HMIs Developed Using InduSoft Web Studio
Power Generation and Distribution HMIs
Company/Software: Duke Energy
Application: Supervising and controlling power generation and distribution systems.
Features: Real-time performance tracking, fault detection, and load balancing.
Benefits: Improved grid reliability, reduced outages, and optimized energy distribution.
Food and Beverage Industry HMIs
Company/Software: Nestlé
Application: Controlling and monitoring production lines in food and beverage processing.
Features: Recipe management, process control, and compliance monitoring.
Benefits: Consistent product quality, reduced downtime, and compliance with safety standards.
Pharmaceutical Manufacturing HMIs
Company/Software: Pfizer
Application: Managing and monitoring pharmaceutical production processes.
Features: Batch tracking, process validation, and regulatory compliance reporting.
Benefits: Ensured product quality, compliance with regulations, and efficient production.
Renewable Energy Systems HMIs
Company/Software: Siemens Gamesa Renewable Energy
Application: Monitoring and managing wind and solar energy systems.
Features: Real-time performance tracking, system diagnostics, and remote control.
Benefits: Maximized energy production, early fault detection, and improved maintenance
planning.
Popular HMIs Developed Using Vijeo Designer
Energy Management Systems
Company/Software: Schneider Electric EcoStruxure Power
Application: Monitoring and controlling energy usage in buildings and industrial facilities.
Features: Real-time data visualization, alarms for abnormal energy consumption, and historical data
analysis.
Benefits: Improved energy efficiency, reduced costs, and better regulatory compliance.
Industrial Equipment Control
Company/Software: Schneider Electric Modicon HMIs
Application: Managing and monitoring industrial machinery and processes.
Features: Intuitive control panels, real-time status updates, and remote control capabilities.
Benefits: Increased operational efficiency, minimized downtime, and enhanced safety.
Water Treatment Plants
Company/Software: Schneider Electric Water and Wastewater Management
Application: Supervising and controlling water treatment processes.
Features: Monitoring water quality parameters, controlling treatment processes, and generating reports.
Benefits: Ensured compliance with environmental regulations, improved water quality, and optimized
operations.
Building Automation Systems
Company/Software: Schneider Electric SmartStruxure Solution
Application: Managing HVAC, lighting, and security systems in commercial and residential buildings.
Features: Centralized control, real-time monitoring, and automated scheduling.
Benefits: Increased comfort, energy savings, and enhanced security.
… Popular HMIs Developed Using Vijeo Designer
Renewable Energy Systems
– Company/Software: Schneider Electric Renewable Energy Solutions
– Application: Monitoring and managing solar, wind, and other renewable energy sources.
– Features: Real-time performance tracking, system diagnostics, and remote control.
– Benefits: Maximized energy production, early fault detection, and better maintenance planning.
Food and Beverage Processing
– Company/Software: Schneider Electric PlantStruxure PES
– Application: Controlling and monitoring production lines in the food and beverage industry.
– Features: Recipe management, process control, and quality monitoring.
– Benefits: Consistent product quality, reduced waste, and compliance with food safety standards.
HVAC Systems in Industrial Facilities
– Company/Software: Schneider Electric Andover Continuum
– Application: Managing heating, ventilation, and air conditioning systems in large industrial settings.
– Features: Temperature and humidity control, system diagnostics, and energy usage monitoring.
– Benefits: Optimized climate control, reduced energy consumption, and extended equipment life.
Transportation Systems
– Company/Software: Schneider Electric Transportation Management
– Application: Supervising and controlling public transportation systems, such as buses and trains.
– Features: Real-time tracking, schedule management, and passenger information systems.
– Benefits: Improved service reliability, enhanced passenger experience, and efficient fleet
management.
References
• https://www.w3.org/WAI/standards-guidelines/wcag/
• https://inductiveautomation.com/
• https://www.se.com/in/en/product-range/1054-vijeo-
designer/#products
• https://www.aveva.com/en/products/edge/

You might also like