Live data from Hacker News

Buttons as Finite Automata

web.stanford.edu

21–30 of 82 posts

Re: Buttons as Finite Automata

#21

I don’t see how to enter the two states at the bottom left (idle, down and hover, pressed). I can’t press without first hovering. Those two states seem to be inaccessible.

I am able to enter "idle, down" on chromium on linux by clicking and holding the very edge of the button.

Re: Buttons as Finite Automata

#23
post #21

I don’t see how to enter the two states at the bottom left (idle, down and hover, pressed). I can’t press without first hovering. Those two states seem to be inaccessible.

I am able to enter "idle, down" on chromium on linux by clicking and holding the very edge of the button.

Oh, how silly of me. I can enter that state by clicking anywhere outside the button (Vivaldi (basically Chrome) on Debian).

Re: Buttons as Finite Automata

#24
post #4

Earlier quoted context omitted.

Right click locks you in the "press" state, just so you know.

No repro here (Chrome 99 on Windows): right-clicking the button works the same as left-clicking it (yes, there's my browser's context-menu, but it doesn't seem to interfere with the webpage's logic at my end).

Safari on a mac. The context menu pulls up, but even when dismissed, it's still stuck in the "idle, down" state.

Re: Buttons as Finite Automata

#25

I don’t see how to enter the two states at the bottom left (idle, down and hover, pressed). I can’t press without first hovering. Those two states seem to be inaccessible.

Click/hold the mouse while outside of the button. Middle-bottom state is hovering over the button while your mouse is down, without having clicked the button. I can see that being useful. However, I can't see why the bottom-left state is ever useful, except perhaps as the only way to get to the "hover, pressed" state.

Re: Buttons as Finite Automata

#27
What I love about this is back in the archaic days when car radios had (mechanical) radio buttons, that was the introductory example of a tiny state machine. They were also used in other devices but the car radio was the application everybody had seen.

Nowadays I imagine only a small proportion of people who deploy "radio buttons" have even seen such a car radio, so the metaphor is now empty, like the floppy disk icon for "save".

Re: Buttons as Finite Automata

#28

Earlier quoted context omitted.

just hold down the mouse outside the button.

aaaahh! now I feel silly. However, the page shouldn't be doing that because the state of the is not actually affected by the mouse-pointer's state, so that entire "idle, down" state node shouldn't be there at all (nor "hover, pressed", as browsers use the same `:hover:not(:active)` state for the as "hover" in that situation).

No, it needs to do that. When you click the mouse down outside the button, then enter the button area and release, you do not want to fire. So you need those extra states.

Re: Buttons as Finite Automata

#29
post #25

I don’t see how to enter the two states at the bottom left (idle, down and hover, pressed). I can’t press without first hovering. Those two states seem to be inaccessible.

Click/hold the mouse while outside of the button. Middle-bottom state is hovering over the button while your mouse is down, without having clicked the button. I can see that being useful. However, I can't see why the bottom-left state is ever useful, except perhaps as the only way to get to the "hover, pressed" state.

It is useful because you don't want to fire when you click and hold outside the button, then enter the button area, then release. So, when you release inside the button, you must know whether you clicked inside or outside the button. Thus you need those states. I think.

Re: Buttons as Finite Automata

#30
post #3

This is something I created many, many years back for Stanford’s CS103 course as a lecture demo. Apologies for the lack of mobile support - I’ve always presented this from my laptop. :-)

Beautiful.

Small suggestion for improvement: There are really two boolean variables (inside the button area, or not; mouse button down, or not). They give rise to more than 4 states because the order of actions is important.

But the diagram might be made more intuitive by placing the states within a 2x2 chess board corresponding to in/out, up/down. Not much change is necessary (for example: shift "held outside" left, "pressed" down, and "fire" up).

Post reply on HN