Before diving into the code, it’s important to understand the user interface we’re building. A successful kOS UI application begins with a clear understanding of the available data and where it originates. Effective collaboration between UI and Java developers—by establishing clear contracts—helps prevent duplicated effort and ensures a cohesive system.
Our target state is a simple Consumer UI (CUI) that displays beverages based on the currently assigned ingredients. Users will be able to select available beverages and trigger the pouring process via the nozzle.
Breaking Down the UI Components
For our data analysis and implementation, we have identified three main components:
Beverage List
Purpose:
- Displays a list of beverages that are potentially available for pouring.
- The list is derived from the Brandset and assigned ingredients, as configured in the beverage pipeline.
Beverage List
| Inputs | Source | |
|---|---|---|
| beverages | List of beverages for the dispenser | Availability |
| selected | The currently selected beverage | Nozzle |
| onBeverageSelected | event handler for beverage selection | CUI Kit |
Beverage Selection Item
Purpose:
- Renders a single beverage within the list and allows users to select it for pouring.
States:
A Beverage Selection Item can be in one of three states:
- Normal State: Default appearance when unselected.
- Selected State: Visual feedback when the beverage is chosen.
- Unavailable State: Indicates the beverage cannot be poured (e.g., due to missing ingredients).
| Inputs | Source | |
|---|---|---|
| name | the name of the current beverage. Can fall back to the note on the Availability model if present | UI Brandset Data → Availability |
| icon | the URL of the icon to display for the current beverage | UI Brandset Data → Availability |
| primaryColor | the primary background color for the beverage | UI Brandset Data → Availability |
| secondaryColor | (optional) a secondary color where a beverage is mixed | UI Brandset Data → Availability |
| isAvailable | whether the beverage is currently available for pouring. | Availability |
| selected | Is the current beverage selected. | Nozzle |
| onBeverageSelected | Event handler for beverage selection | CUI Kit |
Pour Button
Purpose:
- Initiates the pouring of a selected beverage.
States:
The Pour Button can be in one of the following states:
- Disabled: No beverage is selected.
- Enabled: A valid beverage is selected and ready for pouring.
- Pouring In Progress: The beverage is currently being poured.
| Inputs | Source | |
|---|---|---|
| canPour | whether the conditions for enabling pouring are currently met. Generally requires a valid selected beverage. | Nozzle |
| isPouring | is the nozzle is currently pouring | Nozzle |
| handlePour | invoked when the user initiates a pour by clicking on the pour button | CUI Kit → Nozzle Model |
| handleCancel | invoked when the user cancels a pour by releasing the pour button | CUI Kit → Nozzle Model |
| pourName | name of the beverage that is currently selected for pouring | Nozzle & Availability |
| primaryColor | the primary background color for the beverage | UI Brandset Data → Availability |
| secondaryColor | (optional) a secondary color where a beverage is mixed | UI Brandset Data → Availability |
Note: These colors are provided on a CUI application basis and are peer to the brand set data.
Data Sources and Services
The proposed UI leverages several services from the underlying system application:
Availability Service:
- Provides the list of available beverages based on ingredient assignments.
Brandset UI Data:
- Supplies additional information such as beverage names, icons, and color schemes.
Nozzle Service:
- Manages selection and pouring actions, enabling the interactive aspects of the UI.
Summary
By breaking the UI into three main components—Beverage List, Beverage Selection Item, and Pour Button—we establish a clear structure for our Consumer UI. Each component is designed to interact with specific data sources and services:
- Beverage List shows the available beverages.
- Beverage Selection Item provides detailed, interactive representations of each beverage.
- Pour Button allows users to initiate pouring actions.
This clear delineation ensures that data and responsibilities are well-organized, making it easier for UI developers to work closely with Java developers and maintain a robust, scalable application.