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 StateConstants.as

    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”, “io.in” 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=”http://www.revisual.co.uk/uploads/2009/may/fsm/demo1/demo1.swf” height=”400″ width=”470″ /]

    Google Ranking

    Mmmm I have just been looking at my ranking for some Google searches.

    I have come to the conclusion, that for an ActionScript Developer working in Brighton with both ActionScript 2 and ActionScript 3 in Flash, Flex and Air, I don’t mention the fact enough.

    I mean, if you put “Brighton Flash Developer”, “Brighton Flex Developer”, “Brighton Air Developer”, I just don’t show at all! Even “Brighton AS3 Developer” gets Nada.

    So, I guess I need to be a little more proactive in my choice of words….

    Brighton Freelance Flash/Flex Developers

    In the spirit of community, I am posting a list of AS3 developers whom I would personally recommend, should I (obviously top of this list) not be available.

    These are top guys, contact them now!

    Neil Manuell (revision)
    Matt Pearson (zenbullets)
    Matt Sayers (soplausable)
    Owen Bennett (steamboy)
    Rich Willis (rich text format)
    Nikos Chagialas (devGallery)
    Nick Kuh (nick kuh)
    Pedr Brown

    These guys are all members of the award nominated social network of FlashBrighton

    pureMVC assetLoader utility (2)

    Been thinking a lot about the architecture of this. Currently the AssetLoaderProxy’s clients (ie the classes that actually do the loading of the different types of data) are Commands that are triggered by Notifications given by the AssetLoaderProxy. But I think this is a case “its pureMVC, let’s use Notifications”. The same effect could be achieved by an abstract client class and a client factory, without the overhead of sending a Notification, and it would make adding new clients far easier.

    I’ve also created a client for loading Flex Modules, and added functionality to extract class instances from loaded SWFs.

    I’m aiming for the end of July for my first alpha release of the AssetLoaderProxy and the LogProxy :-/ Hopefully I will have time, as it can be combined with my next job, which is a multimedia presentation tool to be implemented in pureMVC Flex and Air – YEY!

    mmm… I guess I need to look at a FileStream client too. Best put that on the list.

    Thinking some more, lets do away with a factory altogether. We can register the clients directly, they can be added and removed at run time.