
Show HN: I've made a rotary dial number input, because why not? - atum47
https://github.com/victorqribeiro/dial
======
codingdave
Clever - I like it.

But the key thing that made rotary dials usable was the catch at the end - it
stopped your finger, so you just pushed until it stopped you, and it
registered whichever number your finger was in.

Without that, this version isn't really usable. It needs to lock into a
draggable state, then keep rotating so long as the mouse is down, even if you
drag outside the control. And then it needs to stop dragging at the end, so
you cannot over-drag and pick the wrong number. Do those 2 things, and it
would be solid.

~~~
thomaspark
Agreed, it's like the principle of Fitt's Law and screen edges having infinite
width.

I made a version a little while back that takes this into account:
[https://github.com/thomaspark/rotary](https://github.com/thomaspark/rotary)

~~~
daniel-alex
After "dialing" 01189998819991197253 on the OP website and your's, I can say
this one was easier and consequently faster to input the number correctly.

------
aasasd
Reddit's ProgrammingHumor subreddit had stints with several topics in this
vein: volume knobs, phone inputs, etc. I think you can find them at
[https://www.reddit.com/r/ProgrammerHumor/search/?q=flair%3A%...](https://www.reddit.com/r/ProgrammerHumor/search/?q=flair%3A%22Bad+UI%22&sort=top)

It seems that there's a subreddit for such things now:
[https://www.reddit.com/r/badUIbattles/](https://www.reddit.com/r/badUIbattles/)

The whole thing started with a couple inputs found in the wild: a volume
slider bar that glitched and had to be slided in the 10px across instead of
the >100px along the bar. And a phone number input that had four-digit groups
as _dropdown inputs_ with 9999 values.

~~~
jammaloo
That's correct, I chimed in with a rotary phone input
[https://twitter.com/jmcfreeman/status/724012572861718528](https://twitter.com/jmcfreeman/status/724012572861718528)

but I literally just built this project
[https://github.com/peterszerzo/rotary-
phone](https://github.com/peterszerzo/rotary-phone) and recorded it. It
handles the rotation input very well.

------
asimjalis
The other thing that made rotary dials hypnotic was the sound effect. Would be
a nice enhancement.

[https://www.youtube.com/watch?v=7pIw9xyDQkY](https://www.youtube.com/watch?v=7pIw9xyDQkY)

------
p1mrx
Here's a USB version:
[https://windfisch.org/rotarydial/rotarydial.html](https://windfisch.org/rotarydial/rotarydial.html)

~~~
jansan
Thanks for the link, that's a really cool little project. If I find some time
I will try to replicate this.

------
alpaca128
Reminds me of the preinstalled clock app on the pre-Android Blackerry
smartphones. Basically to set any alarm or timer you just moved the finger
around a clock to the desired time. It was satisfying to use and intuitive.

Now my "Android One" phone has the worst UI I've ever seen for setting
timers(you have to enter every individual digit, from hours to seconds, in the
right order...).

I really wish Google would copy more good ideas from the now-dead competitors,
like the text selection and context menus on Windows Phone. Or the
alphabetical lists that also work well for left-handed people. Many great user
interface ideas died with these systems. But to be honest I'm not sure if they
would even be allowed to do that legally. You never know what kind of crazy
software patents are floating around out there.

~~~
treerock
Android's 'time picker' sounds very much like the blackberry version you
describe.

[https://i.stack.imgur.com/60z61.png](https://i.stack.imgur.com/60z61.png)

~~~
alpaca128
It does have similarities, but is still more complicated - BB simply had one
watchface view where you'd set the time for alarms with minute accuracy just
by dragging around a marker(one for each active alarm). On a separate tab you
had the same UI for the timer etc.

Google's approach feels like a more convoluted approach to the same idea,
where the hours and minutes are separated and the selection is in a separate
popup view instead of being embedded directly into the clock. It makes sense
as it's a more generalized widget usable by other apps, but that's also the
reason it's not quite as natural to use.

EDIT - here's a (partial) example screenshot:
[https://forums.crackberry.com/attachments/blackberry-10-apps...](https://forums.crackberry.com/attachments/blackberry-10-apps-f274/312401d1415232481t-new-
blackberry-clock-app-img_20141105_180736.png)

------
jfries
Interestingly (or perhaps annoyingly) enough, the placement of the 0 was
different in different countries. At least in Sweden the first digit was 0,
and not 1 as in this implementation. This was reflected in the emergency
number which was 90000 at the time, which is easy to dial without mistakes
even in a stressful situation.

Is there a need for localization?

~~~
thedufer
Does that mean that different countries used incompatible dialing patterns?
Since our 1 emitted one tone and 0 emitted 10, but presumably Sweden's 0
emitted one tone and 9 emitted 10.

~~~
Angostura
Rotary dials didn't emit tones, but basically briefly disconnected the line.
IN most countries it was 1 pulse for the digit 1, 2 pulses for 2 etc. up to
10, for zero

However Wikipedia notes:

> Exceptions to this are: Sweden (example dial), with one pulse for 0, two
> pulses for 1, and so on; and New Zealand with ten pulses for 0, nine pulses
> for 1, etc. Oslo, the capital city of Norway, used the New Zealand system,
> but the rest of the country did not.

If ever you were in a house which tried to prevent outgoing calls by using a
lock on the dial, you could still make a call by tapping out the requisite
digits on the hang-up buttons.

~~~
ztetranz
This is the type of phone I grew up with
[https://collection.motat.org.nz/objects/111551](https://collection.motat.org.nz/objects/111551)
It seems more logical to me. Those from other countries seem backwards. Pulse
count = 10 - digit.

------
atum47
hi, I really like the attention this project is getting and I'm very grateful
to all for making pull requests and opening issues, but since last month I'm
working on a full time job. the hours are hell but it's decent pay. anyway,
I'm about to go in and I don't think I'll have time to dedicate to this
project anymore. it was supposed to be a gag, I made the whole thing in a few
hours on my Saturday. I have other things I want to do on my next break, but
who knows? maybe I come back to this and add sound and the "finger" collision.
sorry if I don't respond comments and github, they don't like us to be on our
phones during work hours.

~~~
StavrosK
There's [https://www.codeshelter.co/](https://www.codeshelter.co/) that can
help with co-maintainers, if someone is interested.

------
atum47
My dad use to fix telephones when I was growing up. I remember fiddling with
them a lot. If you grab the disc and rotate it, even without the finger on the
proper number hole, the number that would be recognized was the number on the
"recognition" area. I tried to put that on my code. If you let go of the disc
going outside or inside of it, it will activate the spring back movement.

~~~
z2
First, thanks, it made me chuckle!

I have no dog in this race, but it seems to me that a finger hook and stopper
is a functional feature of the rotary dialer. If and only if the user put
their finger in the hole to dial, then the finger stop should catch and
prevent the wheel from moving beyond that number. In other words, the number
choice is actually strongly implied (but not locked in) the moment the finger
is in a hole, and the stopper isn't merely an indicator but is step 2 of
guiding that choice through. How best to simulate that distinction in a 2d
screen, no idea...

------
sopooneo
When I was about eight I found an _old_ rotary dial phone that I decided to
take apart. Can't remember if I had permission.

But seeing how unbelievably simple the underlying functionality was absolutely
blew me away and opened my eyes to how much you can do by building on top of
very simple things.

For those who don't know, early local phone connections did NOT work on tones.
Instead, the rotary dial simply broke the connection in quick succession
whatever number times for the number you'd dialed to. And the rotary dial did
this by simply breaking it once for every number that went by on the way back
to its rest position. Just notches in a disk. Simple as that.

This gave me a little revelation, and I found you could actually make calls
_without use of the dial at all_. You simply clicked the hangup button very
quickly in succession for the number you wanted, then paused, then repeated. I
made it a sport to try to reach my friends that way. Which was risky, because
a couple wrong clicks and I might be opening an expensive long distance call
to anywhere.

Formative stuff. So big thanks to the poster for the walk back down memory
lane. I love the project.

------
reificator
If you click on a number and start to spin, that number should be the furthest
you can take it, because your virtual finger is in that hole.

------
xwowsersx
This is great. You gotta add audio to deliver those sweet, satisfying sounds!

------
skrebbel
Nice idea! I'm a bit sad though that this doesn't appear to work on
touchscreens, isn't that sortof the point? (tried in Edge and Firefox, win10)

~~~
tazard
It works fine on my phone (android) chrome + Firefox

~~~
skrebbel
Hm, odd. Maybe it has some `if desktop then disable touch handlers` kind of
code somewhere.

note to coders: don't do that, lots of laptops have touchscreens :-)

------
sumosudo
Now the young ones will understand why people with 9's and zeroes in their
numbers were such a pain to call.

------
sandwell
Disappointed that there is no easter egg revealed for dialing 8675309.... But
cool nonetheless.

~~~
atum47
went right above my head, what this is about?

~~~
larntz
It's from a song.

[https://en.m.wikipedia.org/wiki/867-5309/Jenny](https://en.m.wikipedia.org/wiki/867-5309/Jenny)

~~~
atum47
I'll make sure to listen, thanks

~~~
myself248
Side note, if you're ever in a store where you need a "loyalty card" to get
the posted prices, but they let you use "alternate ID" like a phone number
instead of scanning your loyalty card, try (local area code)+867-5309. Odds
are good that someone already signed up for a card under this number.

------
gitgud
Interesting idea, but it's also entry #3 in [1] this collection of the _worst_
user interfaces...

[1] [https://www.boredpanda.com/funny-worst-input-
fields](https://www.boredpanda.com/funny-worst-input-fields)

~~~
raverbashing
It's the best of the worse, because that's what they needed: a reliable way to
generate a pulse sequence with different number of pulses for signaling.

For 60s technology (maybe even earlier) this was the best they could come up
with for the desired price point.

~~~
kd5bjo
With a little bit of practice, you could dial a phone number directly on the
receiver hook. This also worked on touch-tone phones because the switches were
all made backwards compatible with the old equipment.

~~~
jones1618
I stumbled on this accidentally when I started to dial information (411) and
meant to hang up with my finger before the last '1'. Instead, the switch hook
"bounced" (making the click signifying the last '1') and I got connected
anyway. (A bummer since every call to information was a charge on your bill.)

Still, once I figured that out my friends and I would try to call girls we
liked using this method. The skill involved and the fact that you'd fail 2/3
of the time would distract you from the fear of actually talking to the girl
once you got connected. "Oh, sh*t! It worked. Oh, hi, Rachel. I was playing
around with the phone and must've accidentally dialed you."

------
ebg13
It looks like you have some numerical instability causing the numbers to
wobble as they rotate.

~~~
atum47
Yeah, I was rounding up the cos and sin. Got rid of that.

------
herodotus
See this:
[https://www.patentlyapple.com/.a/6a0120a5580826970c01310f2ed...](https://www.patentlyapple.com/.a/6a0120a5580826970c01310f2ede7c970c-pi)

------
Animats
Oh, I thought he'd used a physical dial. You can still buy them, in new
condition. I bought one and hooked it up to a pen register, to demo old-school
wiretapping.

------
arthurcolle
Live demo doesn't seem to work on iPad (using Chrome)

~~~
StudentStuff
Seems to work for me on Linux using older Firefox, must be a legacy WebKit
issue (as Apple forces all browsers to use Safari's WebKit engine).

Apple really is dragging their heels on supporting HTML5, when even
(deprecated) Edge has better standards compliance, something is plainly wrong
in Cupertino.

------
basicplus2
Would love a real one on my physical keyboard..

~~~
jpl56
You are not alone, lookup "USB rotary dial" ;-)

------
ehnto
These are the kinds of things I expected to come out of WebComponents/other
component architectures taking off. Inatead we got nested component spaghetti
and app wide state management. (tongue in cheek, I know you can avoid it and I
know it has it's purpose)

------
emilfihlman
Bad ux for mouse. It shouldn't stop accepting input if your mouse goes outside
the donut.

------
abhiminator
The project site
([https://victorribeiro.com/dial](https://victorribeiro.com/dial)) is down at
the time of this comment. Guessing it got HN's 'hug-of death.'

------
forgotmypw
Nice work! Thank you for sharing it.

Aside from the number-stopping request others have made, I think it would be
more accurate for the callback to happen once the dial has finished rotating
back into its place, not on initial mouse release.

------
rectangletangle
Had issues dragging the rotary bit on my iPhone in landscape mode. I noticed
that it didn't entirely fit on the screen, so perhaps that's causing the
issue. However it works great in portrait mode.

------
chelovek89
Could this be used as a way to provide a "call us" link to prevent scrapers
and spambots for getting our number? For example at the end of a successful
dial you get a "tel:8675309"

~~~
andrewshadura
It will also prevent people with motion or sensory disabilities from using it.

------
rgoulter
Good example of a skeuomorph.
[https://en.wikipedia.org/wiki/Skeuomorph](https://en.wikipedia.org/wiki/Skeuomorph)

------
hn3333
Reminds me of a Sega game, Shenmue:
[https://www.youtube.com/watch?v=GaHqOVZ5JvE](https://www.youtube.com/watch?v=GaHqOVZ5JvE)

------
nobrains
Make the rotate based on mouse move in any direction (i.e. there will be no
reverse rotate).

Make the rotate limited to emulate the finger catch.

Then its perfect.

------
wolco
I'll issue a challenge to all. Who can take this and fork in as many cool
versions with additional features/details?

------
KyleBrandt
It would be good if the whole dial would sometimes slip (move on the screen)
when trying to dial a number.

------
SilasX
Yes! Now Domino's can offer a convenient option to the blind users they're
forcing to call in because they've made their website unusable!

[https://news.ycombinator.com/item?id=21188092](https://news.ycombinator.com/item?id=21188092)

------
varjag
Rotary dials have the arrow near the 0: it minimizes the movement.

------
whsheet
Could be a nice captcha.

------
starvingbear
Thanks!

~~~
atum47
you're welcome! =)

------
m00dy
it looks like a great idea for front end interview.

------
thescribbblr
I like it.

