Package: transitions-gui
An extension for thetransitionsstate machine package.transitions-guiusestornadoas a web server andcytoscapefor graph drawing and manipulation. For information about the javascript workflow head tofrontend.
The server (including the state machine) and client (your web browser) communicate viaWebSockets.Feedback wanted: Things do not work out of the box? You are not a big fan of the chosen icons, colours, layouts or styles? Now is the time to speak up and file anew issue.InstallationInstalltransitions-guifromPyPIpipinstalltransitions-guior clone the GitHub repo# clone the repositorygitclonehttps://github.com/pytransitions/transitions-gui.gitcdtransitions-gui# install transitions-gui and all dependenciespythonsetup.pyinstallQuickstartLet's begin by creating a simple circular state machine.
Runningpython examples/simple.pywill execute the following code:fromtransitions_guiimportWebMachineimporttimestates=['A','B','C','D','E','F']# initializing the machine will also start the server (default port is 8080)machine=WebMachine(states=states,initial='A',name="Simple Machine",ordered_transitions=True,ignore_invalid_triggers=True,auto_transitions=False)try:whileTrue:time.sleep(5)machine.next_state()exceptKeyboardInterrupt:# Ctrl + C will shutdown the machinemachine.stop_server()This will create a simple transitions state machine 'ordered' (as in circular) transitions. The name of the machine will beSimple Machineand it will act as its own model which is the default behaviour. The initial state is stateAand every 5 seconds, the state will be changed. Next, open your favourite yet up-to-date web browser and head tolocalhost:8080. You should see something similar to this:The GUI is rather simplistic and contains only two buttons which you can see on the top left:- toggles betweenEvent ModeandEdit Mode- saves the current layoutEvent ModeThe GUI always starts inEvent Modewhich is represented by the pencil'swhitebackground. In this mode, the graph can be moved around by clicking and dragging but nodes cannot be moved individually. Clicking an edge/transition inEvent Modewill dispatch the related trigger to the machine. Give it a try! Clicking any edge should trigger an instant state change. Since all edges trigger thenext_stateevent it does not matter which edge you click here.Edit ModeNow let's rearrange some state nodes, shall we? Click the pencil symbol to switch toEdit Mode(the pencil's background changes its background) and start dragging that nodes like this:InEdit Modeclicking edges will not trigger an event. However, the machine's model state will be updated regardlessly.
When you are done, switch back toEvent Mode. Or don't. The mode does not matter for the next step. We will save that layout for the next time we want to run our state machine. Clicking the save button () will store the nodes' current positions in the browser's local storage. Layouts are stored by their name. If you plan to usetransitions-guiwith multiple state machines, it is recommended to make them distinguishable by name. Now reload your browser tab. Your node arangement should be recreated.
Dragging nodes around will not alter the saved layout unless you save it again.About layoutsWhen a transition state machine configuration is sent to the browser, the browser will determine the layout based on the following priority list:value of the passed URL argumentlayoutlayout stored in the browsers local storagedefault layoutthe machine containsnested states->dagreotherwise ->concentrictransitions-guimight not choose the right layout for your graph right away. By passing different layout values, you can check which arrangement suits your needs the best. Additionally, you can 'reset' the layout if you want your graph to be automatically arranged again. Whenlayout=<value>is passed, the manually stored arrangement is ignored. Check the simple machine with an improved version of the CoSE arangement by opening the GUI withlocalhost:8080?layout=bilkent. This should look like this:The currently supported layout values are:dagre (src)concentric (src)bilkent (src)This functionality is provided bycytoscape.js. If you thinktransitions-guishould support more layouts, feel free to open an issue to propose your favourite layout.Show more detailsBy default, only states and edges are shown.
If you want to annotateconditionsandenter/exitcallbacks as well you can passdetails=trueas an URL argument.
This graph (does not make much sense and) has been generated byexamples/process.py.
You might remember that graph from transitions' documentation.NestedWebMachineIn case you want to use hierarchical machines, you need to useNestedWebMachineinstead ofWebMachine.
See for instanceexamples/hsm.pyorexamples/parallel.py.HSM is a slightly tweaked version of thetransitionsexample ...... andparallel.py-- as the name suggests -- makes use of parallel states:By the way, the orientation of the dashed line will change when the parallel state's height is larger than its width.This is an experimental solution and might change in the future.I have a [bug report/issue/question]...For bug reports and other issues, please open an issue on GitHub.