FSMViz Version 0.4

FSMViz for pureMVC StateMachine Utility

FSMViz for pureMVC StateMachine Utility


source code here:
http://puremvc-utilities.googlecode.com/svn/tags/fsm_viz_0.4

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:
    http://puremvc-utilities.googlecode.com/svn/tags/fsm_viz_0.3

    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:
    http://puremvc-utilities.googlecode.com/svn/tags/fsm_viz_0.2

    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.

    Asynch StateMachine Demo

    I’ve whipped up a quick demo for the pureMVC StateMachine utility, illustrating the encapsulation of an asynchronous process (loading external images) within a state.

    State Diagram:
    [kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo/state_diagram.swf” height=”180″ width=”300″ /]
    The red LOADING state represents the non-interactive state, were the laoding takes place. The state is left when all the images are loaded (to DISPLAY), or an error occurs (to READY).

    Demo App:
    [kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo/asynchStateDemo.swf” height=”300″ width=”470″ /]

    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)
    and
    Pedr Brown

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

    pureMVC simple StateMachine utility

    *Update see this post for the latest version*

    Here is an implementation of a simple State Machine for pureMVC that I whipped up for a project. This is really useful for anyone creating applications, honest, its saved my life a few times :) It suddenly occurred to me that because its so simple I’ve been taking its power for granted, and I should share it for the greater geek good. I’ve been using it in combination with trilec’s command chaining utility as a way of controling my command structures.

    Have put the code in the svn on my google code page and will prepare a download when I’ve documented it.

    Initiate the StateMachine

    // instanitate 
    var stateMachine:StateMachine = new StateMachine();
    // register with the facade before registering any commands
    facade.registerMediator(stateMachine);
    // create a state 
    var state:State = new State(ApplicationStates.STATE_ONE)
    // register the commands to be triggered when 
    // entering and exiting that state 
    stateMachine.registerStateChangeCommands(EnterStateOne,
                                             ExitStateOne,
    				         state);
    // repeat for each state (this can be done any time)
    state = new State(ApplicationStates.STATE_TWO)
    stateMachine.registerStateChangeCommands(EnterStateTwo,
                                             ExitStateTwo,
    				         state);
    

    Changing State
    This is very simple, just send a notification from anywhere within the pureMVC framework with a new state as its body:

    // create a state 
    var state:State = new State(ApplicationStates.STATE_TWO)
    sendNotification(StateNoteNames.CHANGE_APPLICATION_STATE,
                     state))
    

    [kml_flashembed movie=”http://www.revisual.co.uk/uploads/2008/oct/statemachine/state_machine_demo.swf” height=”300″ width=”470″ /]