A Simple State Machine Example

June 19, 2021

In order to learn how to program a state machine I have come up with an example that has two states and two transitions for each. Exiting the current state is triggered by clicking the mouse. Exiting one state causes entry into the other state. The initial state is "stateOne".

The states are each implemented as an object. They are almost equivalent. Each state has one property: "state" and two methods: "onEntry" and "onExit". The "onExit" method causes entry into the other state. All methods trigger an alert indicating the state and the method. The current state is tracked by the variable: "currState".

After correcting a few glaring errors the above state machine functions!! Clicking the link correctly causes a transition from one state to another and back again.

Now I would like to implement a traffic light initially activated by the same clicking a link method. This is done with four states. Each state represents the states of two lights. That is which color on light one is paired with which color on light two. There are four combinations, so there are four states.

An "Initialize" button turns all of the lights white via hooks to the CSS. Clicking on "Light One" in the table header cycles through each of the four states. The initial state is Light One: Red, Light Two: Green. When the button is clicked state "r1g2" is exited changing the green light to white. State "r1y2" is entered and the yellow light is changed from white to yellow. This repeats with lights turning off upon exit and on upon entry. I think I now know how to program a state machine. Now let's see if I can apply it to the HP-25 calculator with its 35 or so states.

Before jumping to the HP-25 where the definition of state is still not 100% clear, a simpler calculator will be written. Standard keypad, +-*/, enter, clear, and a display. It will have two registers: the display register and the just entered number register.

This is how the calculator works (at least the calculator on my phone). A number is entered assuming the memory has been cleared. There are two registers. The X-register is always shown in the display. The Y-register is used as temporary storage. The X-register holds the number entered and the Y-register is still empty. Upon hitting a function key, e.g. +, the X-register is pushed to the Y-register. The X-register still has the entered number as well. The X-register is now ready to accept a new number. If a number key is hit the new number is accumulated in the X-register overwriting the old number in the X-register. If the equals key is hit instead the current Y-register is added to the current X-register. The equals can be hit repeatedly.

A slightly different path is when the function key is hit repeatedly, for instance, when adding a list of numbers. In this case we have hit the function key once. The X- and Y-registers hold the same number. If we enter a number it overwrites the X-register. If instead of hitting equals, the same function key is hit again. The Y-register is added to the X-register and the X-register is pushed to the Y-register. Both registers have the same value. This can be seen by hitting equals at this point. The two registers are added and the result is displayed in the X-register.

Even this calculator I found confusing when attempting to construct the state machine. My first pass was two overarching states: accumulate and compute. Accumulate is the state selected when a number is entered. I was struggling with how to "remember" which function had been hit and found that I needed to have four function states in both the accumulate state and the compute state. A better way to do this is seen in the second attempt at state machine design. I will write this state machine up and see if it delivers the calculator described in the previous two paragraphs.

Things started simply enough, but the equals tripped me up. The first equals does not work the same as subsequent equals. The first equals pushes xReg to yReg. Subsequent equals continue to perform the function, but no longer push xReg to yReg. yReg is just continuously added to the xReg with each new equals. Interestingly, Rhea's hand calculator does not work this way. It requires + then = each time. I will focus on just getting it to work for the simpler cases.

I am returning to this after 1 1/2 years. It is difficult to wrap my head around the complexity in the state machine challenge. My first issue is a bug in the JavaScript, where a let keyword is thought to be a new property of the enclosing object. I am guessing that one can't define a variable directly in an object. That means the enclosed states need to be defined as functions or properties. After reviewing a video saved in my reading list in Safari, I decided this was too difficult for my current mental state. I will return on a day that I don't wake with a migraine.