Touch Tracker is application uses the standard Flutter's 🙌 GestureDetector component to translate down, up and move events to tap, longPress, move (start, continue and final) and pause commands.
- The main element allows implementing the declared filter is the hierarchical state machine (hsm), the code of which is automatically generated by the QHsm editor.
- The main goal is to encapsulate HSM into a Flutter application in order to make this application work in accordance with the logic embedded in the state machine scheme.
The application consists of the following elements:
- A widget, which is a primitive graphical component capable of reflecting touch and moving as a track and the state of this track, for example, as text.
- This widget must physically catch touch and transmit the corresponding events to the state machine.
- The state machine must interpret the events and translate them into tap, long press, move or pause events and render them in the app.
Below is a list of these elements and a brief description.
DrawingWidget is StatelessWidget, on the one hand it uses a standard GestureDetector to intercept onPanStart, onPanUpdate and onPanEnd events and interpret them by the state machine, and on the other hand it uses a GesturePainter to graphically display changes. GesturePainter reflects the state of the special bloc-class DrawingBloc.
This singleton object manages the hierarchical state machine. When gesture action is started, an instance of Tracker object is created inside this object, which contains the HSM.
Tracker is a holder of the state machine created by the graphical editor. HSM consists of three classes: TrackQHsmScheme, TrackMediator and TrackContextObject. The first two classes do not change, and the third - TrackContextObject must be adapted and matched to the features of the application. And finally, there is a TrackHsmWrapper class that glues TrackQHsmScheme and TrackMediator for lazy internal interaction.
As noted above, the TrackQHsmScheme, TrackMediator, and TrackContextObject classes are automatically created by the graphical editor when compiling the data structure describing the graphical representation of the HSM. These classes are derive classes from the base classes of the Quantum HSM core system of Miro Samek ported to dart: QHsm, QState, and QEvent. Note the q_hsm_core project folder.
The movie consists of two parts: the first demonstrates the state machine structure and simulation, and the second demonstrates the One Touch Tracker app.
track.mp4
I tried to create an application that uses some of the advantages of the HSM graphic editor I created, such for instance as automatic code generation. However, the ported Quantum framework can be used without any connection with my exercises. You can write your own QHsm class derived from QHsm manually.