Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Basic State Machines

A State Machine is a program, logic circuit, or mechanical device, that has a finite number of legal states. For example a traffic control signal can be in the state of red, yellow, or green. It can't be in the state red and green because that might cause a disaster. It can't be in the state of violet because nobody would know what that means.

Sometimes a state machine is called a finite state machine. It's possible to have an infinite state machine, but that doesn't have many practical uses. A state machine begins from a start state, it then transitions from one legal state to another legal state. You can view a state as a set of specific set of input and output conditions. An action is a change that causes the state machine to transition to another legal state.

Which state the state machine to transition to depends not only upon the current action, but also on what its past states were. So which state an action causes a transition to depends no only on the current state, but on the past state or past states. To accomplish this, a state machine has finite amount of internal memory.

A state machine can be represented with a special kind of flow chart called a state diagram. On a state diagram, each state is represented by a circle, and each transition is represented by an arrow. Sometimes the circles contain labels like "state 1, state 2, state 3, ..." or "S1, S2, S3, ...". Transition arrows can be labeled with letters like "A, B, C, ..." Then a separate table or chart specifies each state and transition.

Traffic control signal state machine

A very common, very simple, example of a state machine is a traffic control signal. The legal states are red, yellow, and green. When red it transitions directly to green. When green, it must transition to yellow before it can transition to red. Shown below is JavaScript code for the traffic control signal state machine.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style>
#lite
{
width:24px;
height:58px;
padding:4px;
border-style: solid;
}
#redbulb
{
border-style: solid;
background-color:red;
}
#yellowbulb
{
border-style: solid;
background-color:#650000;
}
#greenbulb
{
border-style: solid;
background-color:#650000;
}
</style>

<script>
var myTimer;
var lastColor ="off";
var currentColor = "off";

function myState()
{
   switch(lastColor + "|" + currentColor)
   {
       case "off|off":
           document.getElementById("redbulb").style.backgroundColor = "red";
           currentColor = "red";
           break;

      case "off|red":
           lastColor ="red";
           document.getElementById("redbulb").style.backgroundColor = "#650000";
           currentColor = "green";
           document.getElementById("greenbulb").style.backgroundColor = "green";
           break;

     case "red|green":
           lastColor ="green";
           document.getElementById("greenbulb").style.backgroundColor = "#650000";
           currentColor = "yellow";
           document.getElementById("yellowbulb").style.backgroundColor = "yellow";
           break;

     case "green|yellow":
           lastColor ="yellow";
           document.getElementById("yellowbulb").style.backgroundColor = "#650000";
           currentColor = "red";
           document.getElementById("redbulb").style.backgroundColor = "red";
           break;

     case "yellow|red":
           lastColor ="red";
           document.getElementById("redbulb").style.backgroundColor = "#650000";
           currentColor = "green";
           document.getElementById("greenbulb").style.backgroundColor = "green";
           break;
   }
   myTimer = setTimeout(myState, 3000);
}

window.onload = myState;

</script>

</head>
</body>

<div id="lite">
<span id="redbulb">    </span>
<span id="yellowbulb">    </span>
<span id="greenbulb">    </span>
</div>

</body>
</html>

As you know, to use this code you simply have to cut and paste it into a text file (Windows Notepad), save it with the file extension .htm, and then load it into your web browser.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268