Skip to main content

Coffee Machine

Overview

This sample shows an automated coffee machine HMI solution. It is designed to make preparing drinks easier, smarter, and more connected through an advanced user interface. It brings together different functions in one organized way, helping users navigate the machine efficiently and manage the preparation process.

The solution includes features such as drink selection, user profiles, drink customization, and coffee machine management. Its main strength is a central interface that connects different modules for drink preparation, maintenance, and settings. These parts work together to create a smooth workflow and a consistent user experience across the entire coffee machine system.

Screenshot 2026-05-27 132821.png

Feature Description

Scene
No. Name Scene Name Description
(1) Background Scene_Background This scene acts as a commonly used layer within the Coffee Machine solution and contains the background and the bottom buttons to switch between the scenes.
(2) StatusBar StatusBar This scene indicates the selected profile and the current time.
(3) Welcome Screen Scene_Welcome The main screen upon starting the demo. The screen features a "Good Morning" message that is addressed to the selected profile. This scene features three pre-selected coffee types. More coffee variants are available in the Scene_Selection.
(4) Profiles Scene_Profiles This screen allows the selection of pre-defined profiles (Marcus, Alice). A "New Profile" button is available, however, non-functional in this demo. The changed profile is also reflected on the other scenes.
(5) Coffee Menu Scene_Selection This menu shows all available coffee variants. The selection is implemented via a horizontal scrolling list that can be navigated by swiping.
(6) Adjustments Scene_Adjustments

In this scene, the user can individually adapt the previously selected coffee to their needs. It allows the user to adjust the following parameters:

  • Intensity (amount of coffee beans)
  • Milk (amount of added milk)
  • Sugar (low, medium, high)
  • Foam (none, low, medium, high)

The previously selected coffee type is being displayed in the left of the screen.
(7) Preparing Screen Preparing Screen This scene contains the 2D part of the coffee preparation process after the drink configuration is completed. It shows a progress bar to indicate the progress of the coffee preparation.
(8) Coffee Cup CoffeeCup3D This is the only 3D scene and displays a coffee cup that gradually fills up until the process is completed. Upon completion the user is automatically re-directed back to the Welcome Screen.
(9) Settings Scene_Settings

This scene contains various options for the coffee machine maintenance and setup:

  • Maintenance
  • Beans
  • Water
  • General
  • Connection

The various options are currently implemented as placeholders and lead to the Restriced scene.
(10) Placeholder Submenu

This scene is acting as a placeholder for further functionality implementation. It currently displays a lock indicating that there is no further action possible aside from returning to the previous scene.
3x2CoffeemachineImage.png
Control

The solution is designed using the predefined controls available in the Scene Composer toolbox, including lists, buttons, etc.

There is one customer control for the progress bar. For this custom control the interpolation behaviour was removed from the default toolbox as it conflicted with the interpolation done by the Preparing animation which also changes the values of the progress bar.

Transition

The default transition is used for all scenes in this solution ("Cut").

Animations

There is one animation that animates the coffee cup in CoffeeCup3D and activates the text in the Preparing Screen. This animation is started when the Start Button in Scene_Adjustments is pressed.

State Machine

The statemachine is used to activate/deactivate the different scenes on specific button presses. Additionally correct images and text are set dependent on the button. All scenes except the Background and the StatusBar are activated when the state is entered and deactivated when left.

States
State Activated Scene(s) Trigger Additional Actions

Notes
Welcome

Scene_Background

StatusBar

Scene_Welcome

Initial State

End of preparing animation

Scene_Adjustments/ReturnButton/Return Welcome

Initial activation of the StatusBar.

This state is re-entered when the Preparing animation has finished.
Selection Scene_Selection

Scene_Background/Buttons/Coffee Selection Button 

Adjustments Scene_Adjustments

Every coffee button in SceneSelection/List and

SceneWelcome

 

Dependent on the button the correct coffee image is activated and different texts are set to the "Preparing your coffee..." TextNode of the StatusBar

Additionally the back button is switched.

This state can be entered from 2 different scenes so it is important that the back button triggers the correct one. Therefore 2 back buttons are available and only the required one is activated when the state is triggered.
Preparing

Preparing Screen

CoffeeCup3D

Scene_Adjustments/Start Button

Starts the Preparing animation that fills up the coffee cup in CoffeeCup3D


Settings Scene_Settings

Scene_Background/Buttons/Settings Button 



Profiles Scene_Profiles

Scene_Background/Buttons/Profile Button  



Settings_Submenu Submenu

All buttons in Scene_Settings/List

Sets different texts dependent on the pressed button


    Back to top