State machine based user interfaces generation#

Most developers know state diagrams for modeling control behavior or protocol machines. But user interfaces can also be specified with their help, with great clarity.

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 signaling 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 behavior of the complete HMI. The state Display on the left allows navigation 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 selecting 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, whether they are control tasks, user interface interactions, or protocol machines.

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

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