Most developers know state diagrams for modelling control behaviour or protocol machines. But also user interfaces can be specified with their help with great clearness.

Often small devices monitoring or controlling a process value like drive shaft speed, temperatures or the like have a built-in display. It is used to show the current device status and to configure thresholds such as low or high limits of the process value.

The figure below shows a simple HMI of a frequency monitoring device. The top line presents the actually measured value, whether the value is within the given limits (triangle points to the right) and the status of an output relay signalling an alarm. The bottom part of the HMI shows the frequency spectrum of the measured signal.

Figure 1: GUI of a frequency monitoring device

The state machine below is used to model the behaviour of the complete HMI. The state Display on the left allow to navigate between various displays showing the different measured values (min, max, actual). The right state Edit of the machine shows the configuration part of the HMI. The interaction is done with the help of three buttons. Two buttons are used to step up/down triggering events evInc/evDec. The third button is used for selection a menu item (evButtonLong/evButtonShort).

Figure 2: State machine of a small embedded GUI based on the PicoTK toolkit.

State machines are a flexible tool to model all kinds of stateful applications. Might it be control tasks, user interface interactions or realising protocol machines.

The Sinelabore code generator automatically generates code from your model. The payback comes in very short time because all the error-prone stupid coding is taken from the developer. Focus can be put on the model and model correctness. Model and code is always in sync. Fast development cycles are ensured.

Acknowledgement: The HMI uses PicoTk a great small footprint C GUI kit for embedded systems