MadButterfly

Why Use Finite State Machine?

We know Scribboo is a tool for creating GUI. It provides 2D vector drawing, animation, component management, and action management features. But why FSM (finite state machine)? FSM is a tool that GUI designers can define and control how GUI interacting with users. When user pressing buttons, moving mouse pointer, …, it generates events. Designers define how GUI is responsible for events according current states. Without FSM, designers should do something like coding, it is too hard and complicated for most situation and for most designers.

FSM is used for controlling how a component make a response for given events. You can use it to define behavior of a button component, for example. FSM is also used for controlling work flows for GUI. You can use it to define how an application switching among scenes. For example, use it to define the flow of an application form with multiple steps to complete it.

Details of FSM

FSM is a set of states and transitions. Transitions define how a FSM transit from one state to another. Every transition is defined by a source state, a target state, a condition, and an action. Condition define when and why a FSM should transit to target state if the FSM is in given source state. The associated action of a transition defines what to do when a FSM transit from source state to target state for the transition. For example, a FSM for a button will play a animation to show visual effects for the transition from UP state to DOWN state when user press the mouse button on it.

FSM also has an action. The action associated with a FSM defines what to do when the FSM transit to the given state without considering which transition is taken.

Conditions

Condition is a set of events. Once FSM receives any event in the set will trigger the transition if the FSM is in the source state of the transition. The format of condition is a set of event names separated by semi-colons. For example, it can be “event1; event2; event3”.

• event1
• event1(“arg1”, “arg2”, …)
• src_comp.event1
• src_comp.event1(“arg1”, “arg2”, …)

Actions

Action attribute of a transition is list of commands separated by semi-colons. There are two kind of commands; play animation action and emit an event.

• play(“ani_action1”, “arg1”, “arg2”, …)
• emit(“event2”, “arg1”, “arg2”, …)

Arguments are optional.

Interaction Between Components

Sometime, you need to trigger a transition for state transition in another FSM. You can do it by condition a transition of a FSM with the event emitted by another FSM.

Integrate FSM with Program Code

The program code can monitor interesting events emitted by FSMs, and do some business logic or I/O commands. Program code can also emit events to trigger transitions.