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.

Overview_CoffeeMachine.png

Feature Description

Scene
No. Name Scene Name Description
(1) Background StatusBar This scene acts as a commonly used layer within the Coffee Machine solution and contains shared components such as profile information and digital time display. It also shows text information about which coffee gets prepared.
(2) 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.
(3) 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.
(4) 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.
(5) Adjustments Scene_Adjustments

In this scene, the use 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.
(6) Preparing Screen Preparing Screen This scene coverscontains 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.
(7) 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. (7)8) 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.

(8)9) 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 to restrict animation behaviour when changing values on the progress bar (used for Milk and Intensity adjustment).

Please note that this could also be achieved by using the default progress bar and changing its "InterpolateBarValue" property "Receivers" --> settings "UnitsPerSecond" & "FilterTimeConstant" to "0".

Transition

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

State Machine

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

States
State Activated Scene(s) Trigger Additional Actions

Notes

Welcome

Scene_Welcome

StatusBar

Initial State

End of preparing animation


Initial activation of the StatusBar.

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

Selection Scene_Selection

SceneWelcome/Coffee Selection Button 

SceneAdjustments/Coffee Selection Button 

SceneProfiles/Coffee Selection Button 

SceneSettings/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. Therefor 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

SceneWelcome/Settings Button 

SceneAdjustments/Settings Button

SceneProfiles/Settings Button

SceneSelections/Settings Button 



Profiles Scene_Profiles

SceneWelcome/Profile Button 

SceneAdjustments/Profile Button

SceneSettings/Profile Button

SceneSelections/Profile Button 



Settings_Submenu Submenu

All buttons in Scene_Settings/List

Sets different texts dependent on the pressed button


 

 

    Back to top