Download the solution Touchpanel HMI Example.dbsln.
This example demonstrates a touch-first HMI for truck refueling.
The right-hand panel provides interactive touch buttons, while status cards are read-only indicators.
Workflow
Using the UI Tags – Track truck position, fuel type, process states, and operator messages.
Using Tank and Valve Tags – Simulate product selection and stock levels.
Using Touch Controls – Operate the system with on-screen buttons.
Monitoring Runtime – Observe tag changes and feedback during refuel.
UI Tags in Action
The project already includes UI tags such as:
@Tag.UI/truckPosition → moves with “Position Truck.”
@Tag.UI/typeOfFuel → updates when a valve is touched.
@Tag.UI/amountOfFuel → adjusted with +/– buttons.
@Tag.UI/Message → shows operator prompts, auto-clears after 3–5s.
@Tag.UI/endOfRefuel → set when refuel completes.
Tank and Valve Tags
Touch the valve icons to simulate fuel selection:
@Tag.Valves/alcohol, @Tag.Valves/Disel, @Tag.Valves/addGAS, @Tag.Valves/addRegularGAS
Each updates @Tag.UI/typeOfFuel and enables refueling logic.
Tank level tags (@Tag.Tanks/levelOfAlcohol, etc.) decrease as the truck refills.
Touch Controls
Interactive buttons on the right:
Confirm and Start Refuel – Starts loading if truck is positioned and fuel is selected.
Reset – Returns all tags to initial state.
Position Truck – Moves truck graphic into place.
Next Truck – Sends current truck out and resets cycle.
+ / – – Adjust @Tag.UI/amountOfFuel.
These are designed for finger touch, with large hit areas and immediate feedback.
Monitoring Runtime
Status cards update live:
Truck in Motion (@Tag.UI/enableTruckMovement).
Type of GAS (@Tag.UI/typeOfFuel).
Amount to Refuel and **Amount Refilled`.
Operator messages confirm or block actions.
Tank visuals on the left decrease as fuel is consumed.
In this section...