Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Build a local operator HMI interface.

How-to Examples Architecture → Touchpanel HMI



Info

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.Download the solution Touchpanel HMI Example.dbsln.


Table of Contents
maxLevel2
minLevel2
excludeOverview
stylenone
classon-this-page
printablefalse





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.

Step 1:

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.

Step 2:

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.

Step 3:

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.

Step 4:

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...

Page Tree
root@parent
spaces93DRAF