Domino rides again

Strange how things come full circle.

Last year I was trying to manage the flow of pureMVC commands in my applications. Two things came out of this, the StateMachine utility, and an idea that I christened Domino. Well, Domino went a bit strange on me, and eventually I let it fallow for a bit while I worked on the FSMVisualiser.

I’ve been manically working on several projects this year, and as I was commenting a utility that had been evolving throughout this time, I realised that with a tweek here and there I could create a layer of abstraction over the StateMachine utility in a simple and (I hope) elegant way. It would fulfill the original purpose of Domino without getting really complicated in the process. Basically it extends the StateMachine markup XML so that it also defines the relationships between pureMVC actors within each state.

This month I’ve been able to do a bit more work on the FSMVisualiser, and am incorporating my Domino utility into it as a proof of concept.
Continue reading

FSMViz Version 0.4

FSMViz for pureMVC StateMachine Utility

FSMViz for pureMVC StateMachine Utility

source code here:

Added the decode to AS3.

OK, so next I’m going to rip this all down and re-architecture it.

  • create a shell and a deployment agnostic module
  • split up the encoding/decoding and parsing of the data from the data editing
  • take all the manipulation of the visualisation from the view so that the view just fires notifications
  • make the visualisation into a module so that it can be changed easily
  • add preference data so that properties can be changed easily
  • oh, and implement an FSM :)
  • FSMViz Version 0.3

    FSMViz for pureMVC StateMachine Utility

    FSMViz for pureMVC StateMachine Utility

    source code here:

    OK, so I’ve added the ability to open from JSON or XML and also to decode to them. Originally, I was just going to save out to JSON as the main “file-type”, and export to an AS3 file, but after Jason MacDonald suggested it would be good to export/import the xml, I thought why not, it only took an hour.

    The only things to note are that the XML looses all the meta data that the JSON preserves. And secondly, because of this, it can only import XML that uses the naming conversions outlined below.

    Naming convertions:

  • States will have all white spaces removed and have title case. Thus “Data aquisition” becomes “DataAquisiton”
  • Actions will have white spaces removed and have camel case. Thus “Acquisition failed” becomes “aquisitionFailed”
  • In addition to the above a prefix will be added to further define the name:
  • State names will have the prefix “state/”. Thus “Data aquisition” becomes “state/DataAquisiton”
  • Action names will have the prefix “action/”. Thus “Acquisition failed” becomes “action/aquisitionFailed”
  • Entering notification names will have the same name as their associated state, but with a prefix “entering/”. Thus the entering notification name for the state “Data aquisition” will be “entering/DataAquisiton”
  • Exiting notification names will have the same name as their associated state, but with a prefix “exiting/”. Thus the exiting notification name for the state “Data aquisition” will be “exiting/DataAquisiton”
  • Changed notification names will have the same name as their associated state, but with a prefix “changed/”. Thus the entering notification name for the state “Data aquisition” will be “changed/DataAquisiton”
  • I think that these are pretty uncontentious with the exception of the choice of delimiter for the prefix. This I think will be changable by the user.

    All I have to do now is that all important conversion to an AS3 file, then I can rip the whole thing apart and rebuild it.

    So, any suggestions as to deployment? Air, online with php service?, Zinc? (Zinc? LOL only joking!)

    FSMViz Version 0.2

    FSMVis for pureMVC StateMachine Utility

    FSMViz for pureMVC StateMachine Utility

    source code here:

    So this is just the visualisation and the editing of the States and Actions. I still need to implement the saving out of state, and the export of the

    A few points and pointers:

  • If you do look at the code, please consider that it is a quick prototype, it will need to be optimised and architechtured (it doesn’t even have a FSM yet ;~/).
  • The visualisation is done using the Flare package
  • I am using the flex framework RSL, so the first time you visit, the app might take a fair time to initiate. However, from then on it will be cashed on your machine, so it will be much quicker.
  • I have used Joel Hook’s FSM diagram from his Piping the Machine tutorial as the initial diagram
  • You can add states with the form on the bottom left, the package is an optional field that allows grouping of states for a prettier layout using a dot as the delimiter (eg “io.out”, “” or “display”). Then fill in the name and hit ENTER to submit.
  • Rolling over a state will highlight outgoing actions (red) and with ctrl down, all incoming actions (green).
  • Clicking on a state will switch to Edit mode, and bring up forms for editing the state and outgoing actions.
  • Rolling over the highlighted actions will popup their names
  • Clicking the top right x (or hitting ESC) will close the panels with out committing changes
  • Clicking the red X buttons will perminently delete the state/action (hitting DEL will delete the state)
  • Clicking the green tick (or hitting ENTER) will commit any changes
  • Clicking the strange-green-plus-arrow button (or hitting F1) will create a new Action. You can then give it a name and choose its target state.
  • FSM Visualisation 3

    Sorry I’ve been neglecting my blog recently. What with a brute force attack of malware, and working on some bread-and-butter projects, I’ve been a bit diverted.

    However, I have found the time to play around with the FSM Visualiser and have been working on the best way to display and interact with it, so I’ll probably stick something fresh up with in the next week or so.

    FSM Visualisation 2

    UPDATE: removed this demo due to it getting infected. Will upload a newer version once I have time to work on something

    I have added some more functionality to the FSMViualisation.

    Just a few notes:

    1) I haven’t been able to add labels to the actions (arrows) yet (well, not prettily anyhow).

    2) I have used the BundledEdgeRouter which makes those nice arrows. The problem with this is that any arrow that connects the same two nodes will lie on the same line.

    3) at the moment, to update the diagram, I am having to edit my VOs, parse them into a Flare Data object, then construct a new Visualisation with it. It seems a bit expensive (not that affects the speed at all).

    4) you can add States into a package. This does not affect any of the code that will eventually be exported, but does allow you to group the state together, and makes the diagram look far more appealing.

    FSM Visualisation

    OK, have put together the first visualisation for a pureMVC StateMachine Utility markup tool.

    The purposes of this tool are:
    1) to make a state diagram for easier visualisation of the flow of your application
    2) to create the FSMInjector class for your application, along with all the necessary constants, and the XML declaration.

    I’m using the flare framework and what you see is really just a development from the Dependency Graph.

    The visualisation data is stored as a text file in JSON, along with all the metadata associated with each node and edge. This will be the file format for saving and retrieving work. There will also eventually be an export routine that will convert this format into the FSMInjector.

    At the moment we just have the ability to visualise, not to edit. The next pieces of functionality I will be working on will be:
    1) adding states.
    2) deleting states.
    3) adding edges (actions).
    4) deleting edges.

    [kml_flashembed movie=”” height=”400″ width=”470″ /]