Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Buttons as Finite Automata

web.stanford.edu

Post reply on HN
Print view View original

11–20 of 82 posts

Re: Buttons as Finite Automata

#11

Post by DaiPlusPlus »

beaconstudios wrote: post #7
DaiPlusPlus wrote: post #6

Neat. ...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.

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).

Re: Buttons as Finite Automata

#14

Post by picture »

htiek wrote: 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. :-)

Woah. This is what I find seriously cool about HN. Was searching around for "push button+state machine" the other day to learn how to program some menus with a microcontroller, and came across this. It's a really neat visualization, thanks for your work years ago!

Re: Buttons as Finite Automata

#15

Post by progval »

blamestross wrote: post #13

Its all fun and games until somebody managed to click on your button without hovering first.

I see two ways to do that:

1. keyboard navigation (Enter and space are ignored)

2. hover, then F5 to reload the page (this resets the state, and you get your cursor on the button without a state transition)

presses are completely ignored either way

Re: Buttons as Finite Automata

#17

Post by jibbit »

it was a long time ago, but there used to be a model of the state machine for selecting a file in the mac os9 Finder that was often shared (yes i'm talking about around the time that OS9 was current). I don't suppose anyone remembers that? I'd love to see it again

Re: Buttons as Finite Automata

#18

Post by zevv »

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 and talk about the implementation.

Buttons get even more fun when you add a "long push" to it. I can not recall how often I have had discussions with customers about the intended behavior of physical buttons on devices; it takes some effort and patience to explain how requirements like "Perform action A when the button is pushed, or perform action B when the button is pushed for a 3 seconds" simply can not be implemented. "Oh, so you mean, perform action A when the button us released within 3 seconds?". "Well, no I want it do A when I push the button".

And then I draw a little picture on the white board showing the circles and arrows.

Re: Buttons as Finite Automata

#19

Post by zanethomas »

htiek wrote: 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. :-)

nice! how about something like that for drag/drop? anyone? :)
Post reply on HN