File: Examples/Example_AnalyseString.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  jQuery FSM  >  Examples/Example_AnalyseString.html  >  Download  
File: Examples/Example_AnalyseString.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery FSM
Animate page elements using Finite State Machines
Author: By
Last change: Now compliant to jquery 3.2.0
Date: 4 years ago
Size: 7,833 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head>
<title>iFSM in action! String analysis with iFSM</title>
<meta charset="utf-8">
<script type="text/javascript" src="../extlib/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../extlib/jquery.dotimeout.js"></script>
<script type="text/javascript" src="../extlib/jquery.attrchange.js"></script>
<script type="text/javascript" src="../iFSM.js"></script>
<style type="text/css">
html {
	font-family: Helvetica, Arial, sans-serif;
}

body {
	padding: 0 20px;
}

button {
	margin: 0 2px;
	font-size: 20px;
	border: 1px solid #333;
	width: 100px;
	text-shadow: 0 -1px 0 #333;
	border-radius: 5px;
}

button.on {
	color: #dfd;
	background: #00aa00;
	background: -moz-linear-gradient(top, rgba(0, 153, 0, 1) 0%,
		rgba(0, 119, 0, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,
		153, 0, 1)), color-stop(100%, rgba(0, 119, 0, 1)));
	background: -webkit-linear-gradient(top, rgba(0, 153, 0, 1) 0%,
		rgba(0, 119, 0, 1) 100%);
	background: -o-linear-gradient(top, rgba(0, 153, 0, 1) 0%,
		rgba(0, 119, 0, 1) 100%);
	background: -ms-linear-gradient(top, rgba(0, 153, 0, 1) 0%,
		rgba(0, 119, 0, 1) 100%);
	background: linear-gradient(top, rgba(0, 153, 0, 1) 0%,
		rgba(0, 119, 0, 1) 100%);
}

button.off {
	color: #fdd;
	background: #CC0000;
	background: -moz-linear-gradient(top, rgba(204, 0, 0, 1) 0%,
		rgba(153, 0, 0, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(204,
		0, 0, 1)), color-stop(100%, rgba(153, 0, 0, 1)));
	background: -webkit-linear-gradient(top, rgba(204, 0, 0, 1) 0%,
		rgba(153, 0, 0, 1) 100%);
	background: -o-linear-gradient(top, rgba(204, 0, 0, 1) 0%,
		rgba(153, 0, 0, 1) 100%);
	background: -ms-linear-gradient(top, rgba(204, 0, 0, 1) 0%,
		rgba(153, 0, 0, 1) 100%);
	background: linear-gradient(top, rgba(204, 0, 0, 1) 0%,
		rgba(153, 0, 0, 1) 100%);
}

pre {
	font-size: 12px;
	background-color: black;
	color: green;
}
</style>
<script type="text/javascript" id="iFSMscript">
	var aStateDefinition = {
		OneB_Algo : {
			delegate_machines : {
				AlgoOneB : {
					submachine : {
						Start : {
							'a' : {
								next_state : 'Leading',
							},
							'b' : {
								next_state : 'OneB',
							},
							'$' : {
								propagate_event : 'Reject',
							},
						},
						Leading : {
							'b' : {
								next_state : 'OneB',
							},
							'$' : {
								propagate_event : 'Reject',
							},
						},

						OneB : {
							'$' : {
								propagate_event : 'Good',
							},
							'b' : {
								propagate_event : 'Reject',
							},
						},
						DefaultState : {
							start : {
								next_state : 'Start',
							},
						}

					},
				},
			},
			process : {
				next_state : 'Process',
				pushpop_state : 'PushState',
			},
		},
		SetAlgoPalindrome : {
			delegate_machines : {
				AlgoPalindrome : {
					submachine : {
						Start : {
							'$' : {
								propagate_event : 'Good',
							},
							'pop_b' : 'pop_a',
							'pop_a' : {
								next_state : 'Reject',
							},
						},
						'b' : {
							'pop_b' : {
								pushpop_state : 'PopState',
							},
							'pop_a' : {
								next_state : 'Reject',
							},
							'$' : {
								propagate_event : '$',
								next_state : 'Reject',
							},
						},
						'a' : {
							'pop_a' : {
								pushpop_state : 'PopState',
							},
							'pop_b' : {
								next_state : 'Reject',
							},
							'$' : {
								propagate_event : '$',
								next_state : 'Reject',
							},
						},
						'Reject' : {
							'$' : {
								propagate_event : 'Reject',
							},
						},
						DefaultState : {
							start : {
								next_state : 'Start',
							},
							'a' : {
								next_state : 'a',
								pushpop_state : 'PushState',
							},
							'b' : {
								next_state : 'b',
								pushpop_state : 'PushState',
							},
							process : {
								propagate_event : 'ProcessPalindromString',
							},
						}

					},
				},
			},
		},
		Good : {
			enterState : {
				init_function : function() {
					this.opts.outputText.html(this.opts.outputText.html()
							+ '> ' + this.opts.inputText.val()
							+ ':Gooood :-)<br>');
				},
				next_state : 'WaitNext',
			},
		},
		Reject : {
			enterState : {
				init_function : function() {
					this.opts.outputText.html(this.opts.outputText.html()
							+ '> ' + this.opts.inputText.val()
							+ ':Rejeeect :-(<br>');
				},
				next_state : 'WaitNext',
			},
		},
		Process : {
			enterState : {
				init_function : function() {
					var str = this.opts.inputText.val();
					if (str == '')
						return false;
					for (var i = 0; i < str.length; i++) {
						res = str.charAt(i)
						this.trigger(res);
						//alert(res);
					}
					this.trigger('$');
				},
				pushpop_state : 'PopState',
				next_state_if_error : 'Reject',
			},
		},
		ProcessPalindromString : {
			enterState : {
				init_function : function() {
					var str = this.opts.inputText.val();
					for (var i = 0; i < parseInt(str.length / 2); i++) {
						res = str.charAt(i)
						this.trigger(res);
						//alert(res);
					}
					starti = parseInt(str.length / 2);
					if (str.length % 2 == 1)
						starti++;
					for (var i = starti; i < str.length; i++) {
						res = str.charAt(i)
						this.trigger('pop_' + res);
						//alert(res);
					}
					this.trigger('$');
				},
				pushpop_state : 'PopState',
			},
		},

		WaitNext : {
			click : {
				propagate_event : 'process',
				pushpop_state : 'PopState',
			},
		},

		DefaultState : {
			click : {
				propagate_event : 'process',
			},
			ResetOutput : {
				init_function : function() {
					this.opts.outputText.html('');
				}
			},
			ProcessPalindromString : {
				next_state : 'ProcessPalindromString',
				pushpop_state : 'PushState',
			},
			SetOneBAlgo : {
				next_state : 'OneB_Algo',
			},
			SetAlgoPalindrome : {
				next_state : 'SetAlgoPalindrome',
			},
			Reject : {
				next_state : 'Reject',
				pushpop_state : 'PushState',
			},
			Good : {
				next_state : 'Good',
				pushpop_state : 'PushState',
			},
			start : {
				next_state : 'OneB_Algo',
			},
		}
	};

	$(document).ready(function() {
		$('#myButton').iFSM(aStateDefinition, {
			outputText : $('#result'),
			inputText : $('#aText')
		});
	});
</script>
</head>
<body style="margin: 20px;">
	<h1>Language Analysis with Push/Pop state and subMachine...</h1>
	<h2>Algo "only 1 'b'" : Has input only an unique "b" letter?</h2>
	<p>First example is inspired from this article :
		http://continuations.com/post/65432407939/tech-tuesday-finite-state-machines-continued</p>
	<p>Verify if the input string consisting of only two letters “a”
		and “b” and has exactly only one “b” in them.</p>
	<p>
		Example: <br> abaa -> ok <br> abbaa -> not ok
	</p>
	<h2>Algo "palindrome" : Is input a palindrome of 'a' and 'b'
		letters ?</h2>
	<p>
		Second example tests if the input is a palindrome, as this example, or
		not : <br>abba -> ok <br>abbaa -> not ok!
	</p>
	<h2>Test yourself:</h2>
	a Text to analyse:
	<input type="text" name="aText" id="aText">
	<br>
	<br>
	<input type="radio" name="Algo" id="Algo"
		onClick="$('#myButton').trigger('SetOneBAlgo');" checked>Algo
	"only 1 'b'"
	<br>
	<!-- <input type="radio" name="Algo" id="Algo" onClick="$('#myButton').trigger('SetAlgoOneAAlgo');">Algo "only 1 'a'"<br>-->
	<input type="radio" name="Algo" id="Algo"
		onClick="$('#myButton').trigger('SetAlgoPalindrome');">Algo
	"Palindrom"
	<br>
	<br>
	<button id="myButton">Test</button>
	<button id="Reset" onClick="$('#myButton').trigger('ResetOutput');">Reset
		Output</button>
	<p id="result"></p>
	<br>
	<br>
	<pre>
	<script>
		document.write($('#iFSMscript').html())
	</script>
    </pre>
	<p>
		provided by <a href="http://www.intersel.fr">Intersel</a>
	</p>

</body>
</html>