Live data from Hacker News

Buttons as Finite Automata

web.stanford.edu

41–50 of 82 posts

Re: Buttons as Finite Automata

#41

Earlier quoted context omitted.

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.

Repro's on Chrome/Mac as well--I think it's a macOS issue.

Re: Buttons as Finite Automata

#43
post #18

I am an embedded software engineer, and I love everything about this FSM example. It shows that seemingly simple and binary things often have more complexity then meets the eye. I love using old fashioned finite state machines for implementing all kinds of behavior; if forces you to think about every single state and transition, and it naturally isolates the different cases - basically, it makes it easier to think an…

You: "So you want action A to happen immediately when the button is pushed AND 3 seconds after that when the button is still held action B should happen?"

Customer: "No, I only want action B when it is held for 3 seconds"

You: "Todays technology can't do that"

Customer: "What. Wait. Why?"

You: "Because at the point when action A would be triggered we would have to know the future to tell whether the button will have been held for 3 seconds or not."

Re: Buttons as Finite Automata

#44
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. :-)

There appears to be a mistake in the automaton diagram (not operation). The start state is "Idle, Up", and assumes the mouse is presently outside the button. But after doing "Click to Reset", you're already inside the button and so cannot enter it. Thus you should actually, and unfortunately, be in "Idle, Up". The demonstration gets around this by magically jumping to "hover", but this violates the whole educational…

Well...

You've made a couple mistakes here.

1. You've made the unfounded leap that the diagram intends to represent state after the button has fired. That's manifestly incorrect.

2. You've made the incorrect assumption that a full reset of the diagram is accomplished by clicking the button. But that's not what it says. Obviously, you also need to move the mouse out of the button to return to the start state. So you could criticized this for incomplete instruction, however, since the context is a demo for a college course, omitting over-instruction of obvious and irrelevant details is most likely the best decision to reach the overall instructional goal.

If you want to be pedantic on the internet, you need to go a bit deeper than that. ;-)

Re: Buttons as Finite Automata

#46
post #43
post #18

I am an embedded software engineer, and I love everything about this FSM example. It shows that seemingly simple and binary things often have more complexity then meets the eye. I love using old fashioned finite state machines for implementing all kinds of behavior; if forces you to think about every single state and transition, and it naturally isolates the different cases - basically, it makes it easier to think an…

You: "So you want action A to happen immediately when the button is pushed AND 3 seconds after that when the button is still held action B should happen?" Customer: "No, I only want action B when it is held for 3 seconds" You: "Todays technology can't do that" Customer: "What. Wait. Why?" You: "Because at the point when action A would be triggered we would have to know the future to tell whether the button will have…

PM: "Let's not rush into any hasty answers!"

(Under no circumstances should you show them this: https://www.youtube.com/watch?v=BKorP55Aqvg)

Re: Buttons as Finite Automata

#47
post #18

I am an embedded software engineer, and I love everything about this FSM example. It shows that seemingly simple and binary things often have more complexity then meets the eye. I love using old fashioned finite state machines for implementing all kinds of behavior; if forces you to think about every single state and transition, and it naturally isolates the different cases - basically, it makes it easier to think an…

This isn't quite as impossible as you make it sound. You can certainly make it feel like you have this behaviour by triggering A on release if the button is held for Of course now you have to accept the button doing nothing if it's held for longer than 300ms but shorter than 3s, but making it slowly fill up with another colour or something is probably enough to communicate the long press behaviour.

Re: Buttons as Finite Automata

#48
post #32
post #31

Earlier quoted context omitted.

Not sure what you mean. I've played with some buttons that struck me as fairly standard and found that they have exactly the semantics implemented here (to fire, you need to press down inside the button area, hold down (leaving the area or not), and release inside the area).

Buttons can't remember their state. The "fire" circle shouldn't exist, and after you click and release, it should go back to idle up or hover. This diagram is showing more checkbox behavior rather than button.

Ah, for illustration purposes this is showing a "one-shot" button. Notice the "fire" state is a double circle -- this means that it's a terminal state for the state machine, meaning the state machine is "done" once it enters that. In practice, the fire state would be wired up to the start state of another state machine, which would be wired up to the start state of the button machine to get things going again. The "Click to Reset", notice, isn't part of the state machine itself, and instead it's modeling the stuff that happens between firing and transitioning back through "start."

A button that has no "on click," so to speak, could be represented by having the fire state transition immediately back through "start."

Re: Buttons as Finite Automata

#49
post #28

Earlier quoted context omitted.

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.

> When you click the mouse down outside the button, then enter the button area and release, you do not want to fire

If you're referring to not wanting the `mouseup` event to fire, you are correct - however web-pages should not be using `mouseup` / `mousedown` to detect clicks in the first place: they should be listening to only the `click` event, which is not raised when the user releases a held-down mouse button anyway. And the `click` event is also raised when the is activated by other means, such as the spacebar which makes it more accessible too.

When you have the page open, open your console and run this:

`document.querySelector('input[type=button]').addEventListener('click', e => console.log("button 'click' event") )`

and then do the mousedown-and-hover-and-release described and you won't see anything logged until you really do click on it.

Re: Buttons as Finite Automata

#50
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. :-)

There appears to be a mistake in the automaton diagram (not operation). The start state is "Idle, Up", and assumes the mouse is presently outside the button. But after doing "Click to Reset", you're already inside the button and so cannot enter it. Thus you should actually, and unfortunately, be in "Idle, Up". The demonstration gets around this by magically jumping to "hover", but this violates the whole educational…

Just think of it as throwing the old button away and buying a new one. Buttons come idle from the factory. Once the old button is hauled away and the new one is installed under where your cursor happens to be, it transitions to hover.
Post reply on HN