Visual monitor for Hisma, a hierarchical state machine implementation.

Hisma defines a monitoring API: One can register monitor creator functions and the monitors created by these will be invoked by Hisma when the state machines are created or their active state changes.

This monitor is a visual monitor implementation for hisma. It transforms and then sends state machine information to its counterpart, the visma application. visma in turn renders these state machines to its interactive web user interface.

Features

See hisma_visual_monitor in action using visma and an actual Flutter (example) application side-by-side. Note that left side rendered state machine diagrams are updated regardless the event triggering the state machine change was initiated from the application or from the visma user interface:

Getting started

Create your hisma state machines that you want to monitor.

Usage

Practically right at the beginning of your program in the main function set visual monitor creator for the StateMachine:

StateMachine.monitorCreators = [
  (machine) => VisualMonitor(machine),
];

This VisualMonitor will connect to visma listening at the localhost on its default port (4020).

You can also connect to a visma instance listening on a different port or even at a remote host:

StateMachine.monitorCreators = [
    (machine) => VisualMonitor(
          machine,
          host: '192.168.1.2',
          port: 1111,
        ),
  ];

Furthermore as visma state machine overview page will organize machines into hierarchy not only based in their position in the state machine hierarchy, but also the hostname and domain of their VisualMonitor, it is possible to set these to something else (any string) than their default values (and those are "localhost" and "domain" respectively):

VisualMonitor.hostname = 'testMachine1';
VisualMonitor.domain = 'groupA';

This allows organizing your state machines into two hierarchy levels at the top. In this image we see the visma overview page showing that those state machines visualized are coming from three sources ("testMachine1", "testMachine2" and "host") and they are further organized into domains ("groupA", "groupB" and "domain"):

Additional information

If you have any questions, comments please go to Hisma GitHub Discussions to start or join discussions.