Buttons as Finite Automata
web.stanford.edu
Buttons as Finite Automata
1–10 of 82 posts
Re: Buttons as Finite Automata
#2XState is useful for modelling these interactions.
Re: Buttons as Finite Automata
#3This 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. :-)
Re: Buttons as Finite Automata
#4This 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. :-)
Right click locks you in the "press" state, just so you know.
Re: Buttons as Finite Automata
#5This 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. :-)
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).
Re: Buttons as Finite Automata
#6Neat.
...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar to activate it, but that didn't do anything).
------
I'm thinking this page could likely be reimplemented without any JavaScript, using only CSS' interaction state pseudo-classes (`:active, :hover, :focus`, etc) as proxies for the button's state (with the sibling `~` selector to control the state-diagram image). Hmm, though the "held outside" state might be difficult (perhaps `body:hover button:not(:hover):active ~ #stateImage` would work for that?).
Re: Buttons as Finite Automata
#7Neat. ...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar to activate it, but that didn't do anything). ------ I'm thinking this page could likely be reimplemented without any JavaScript, using only CSS' interaction state pseudo-classes (`:active, :hover, :focus`, etc) as proxies for the button's state (with the siblin…
just hold down the mouse outside the button.
Re: Buttons as Finite Automata
#8Neat. ...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar to activate it, but that didn't do anything). ------ I'm thinking this page could likely be reimplemented without any JavaScript, using only CSS' interaction state pseudo-classes (`:active, :hover, :focus`, etc) as proxies for the button's state (with the siblin…
> how do I get the button into the "idle, down" state?
Click and hold outside of the button, and drag over it.
Re: Buttons as Finite Automata
#9Neat. ...how do I get the button into the "idle, down" state? (i.e. how do you press a button without first hovering over it? I tried with [Tab] and spacebar to activate it, but that didn't do anything). ------ I'm thinking this page could likely be reimplemented without any JavaScript, using only CSS' interaction state pseudo-classes (`:active, :hover, :focus`, etc) as proxies for the button's state (with the siblin…
I figured this out too but I wonder if the button is strictly the fsm if the mouse state is also being tracked, in the example yes, if there was more than one button probably not... but the idea is brilliant and probably worth playing with.
Re: Buttons as Finite Automata
#10Minor nit: right click is interpreted as 'press' with odd behavior if the context menu selection is 'Inspect Element'.