Skip to content

Home

Jump to bottom
Intersel edited this page Mar 9, 2018 · 16 revisions

Welcome to the iFSM FAQ !

Where is official help?

The Official Help page is there.

Where is official webpage?

The Official Help page is there.

Should I use a Finite State Machine (FSM)?

Definitely Yes! ;-)

In some words, managing a user interface can't be handled properly with only event-action function calls, like if the user clicks the button 'ok', do this or that... This quickly leads to have so many if/then/else conditions that the code becomes unreadable... How many javascript slideshow libraries did you try that were without any strange behaviours? As soon as you try to go left or right then left then stop then left... too quickly and nothing works no more...

You need a third dimension that is the "state" (context) in which occurs the events in order to answer with the proper behaviour. That's where state machines are really helpful.

If you know nothing about FSM, these following links may help you to better understand how they can really help you to design your web user graphic components.

Some good readings

You use setTimeout features... but can iFSM use requestAnimationFrame instead?

Yes! Just include "jquery.dorequesttimeout.js" library instead of "jquery-dotimeout.js" library.

How do I get swipe events?

The solution provided here is to use the touchSwipe jquery plugin.

Once included, in the init phase of your iFSM states description, include some code like:

this.myUIObject.swipe({
//Generic swipe handler for all directions
  swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData) {
	$(this).trigger('doSwipe',
	{ phase:phase
	, direction:direction
	, distance:distance
	, duration:duration
	, fingerCount:fingerCount
	, fingerData:fingerData}
	);
  },
//Default is 75px, set to 0 for demo so any distance triggers swipe
  threshold:0
});

Then you can use the defined triggered event "swipe" that will have all the information in the data object like in this example:

doSwipe:
{
	init_function:function(p,e,data){
		if (!data || !data.fingerData || !data.fingerData[0].end) return;
		this.trigger('swipe'+data.phase,data);//trigger event swipestart, swipemove, swipeend, swipecancel
		this.logConsole( 'DefaultState('+this.currentState+'):swipe:data.phase:'+data.phase );
	}

}

What is iFSM.compressed.js?

iFSM.compressed.js is the compressed version of iFSM.js. It has been compressed using the google utility : http://closure-compiler.appspot.com/home

After compressing iFSM.js (47.8kb), the new footprint takes 13.6kb.

Do not include iFSM.js and iFSM.compressed.js in the same file!

If you need to do some debug tasks, use the uncompressed version...

Nothing works :-(

Hereafter the things you can do to understand what is happening:

Error messages on the console

The first thing is to activate the development tool (CTRL + MAJ + I) and click on the Console Tab.

Have a look for any error syntax messages. It is very common to forget a ',' or a '{' or '}'...

iFSM Debug mode

You can then activate the debug mode of iFSM. For that, you have to set the 'debug' option to true, as in shown in the following example:

$('#myButton').iFSM(aFSMDefinition,{ debug:true });

The log may not be enough detailed then you can set the log level detail with the 'LogLevel' option.

  • '1' only errors displayed
  • '2' - errors and warnings (default)
  • '3' - all

$('#myButton').iFSM(aFSMDefinition,{debug:true,LogLevel:3});

Is there a defined "id" for the DOM objects linked to an iFSM?

If not, the FSM may have curious behaviour... So have a look to verify that you set the id as: <button **id="myButton"**>Click Me</button>

My delay on event is not working

The 'how_process_event' to define a delay (as "how_process_event:{delay:1000}") DOES NOT WORK on generic events like 'enterState', 'exitState', 'start', 'exitMachine'....

Clone this wiki locally