88230 - Enabling Industrial Technologies for Web and HMI P

Academic Year 2024/2025

  • Teaching Mode: Traditional lectures
  • Campus: Bologna
  • Corso: First cycle degree programme (L) in Mechatronics (cod. 6009)

    Also valid for First cycle degree programme (L) in Mechatronics (cod. 5818)

Learning outcomes

The student learns the fundamental methodological aspects and the main enabling technologies for the design and development of Human-Machine Interfaces (HMI) that meet modern application requirements related to the paradigm of “WEB-based interoperability and seamless connectivity.”

Course contents

The first part of the course is dedicated to the study of the fundamentals of human-machine interaction in terms of human factors, user models, interaction styles, and usability.

The second part of the course focuses on implementation techniques for industrial HMIs, both through HMI and SCADA supervision systems and through a "Web-based" application.

The topics covered will include:

Definition of Human-Machine Interface (HMI) in an Industrial Environment
  • Definition and differences between HMI and SCADA.

  • History of the evolution of operator interfaces.

  • Basic concepts of UI/UX.

HMI Interface Design Process
  • User and scenario analysis (User Experience).

  • Usability principles and related metrics (User Interface).

  • Rapid prototyping (storyboards, graphical mockups).

Interface Implementation with HMI and SCADA Supervision Systems
  • Brief description of HMI and SCADA supervision systems.

  • Use of supervision systems for HMI creation.

  • Use of the OPC-UA protocol for connection with the PLC.

  • Example of an industrial HMI implementation.

Interface Implementation through a Web-Based Application
  • Overview of HTML5, CSS, and JavaScript languages.

  • Brief introduction to the React library.

  • Concepts of animation/interactivity using React.

  • Use of WebSocket for backend communication.

  • Example of an industrial HMI implementation.

Teaching methods

Lectures supported by slides and in-depth explanations on the whiteboard.

Assessment methods

The student can choose one of the following exam modalities:

  1. Oral Exam: During the exam, four open-ended questions will be asked on the topics covered during the lectures, along with a short HTML/JavaScript programming exercise.

  2. HMI Project Development: The student must provide both a theoretical description of the project implementation and a description of a simple prototype developed using HTML/JavaScript.

Teaching tools

Use of Visual Studio Code software for the implementation of exercises.

Office hours

See the website of Roberto Pioggia