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.
Buttons as Finite Automata
41–50 of 82 posts
Re: Buttons as Finite Automata
#42Re: Buttons as Finite Automata
#43I 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…
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
#44This 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…
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
#45Re: Buttons as Finite Automata
#46I 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…
(Under no circumstances should you show them this: https://www.youtube.com/watch?v=BKorP55Aqvg)
Re: Buttons as Finite Automata
#47I 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…
Re: Buttons as Finite Automata
#48Earlier 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.
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
#49Earlier 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.
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
#50This 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…