codingdave 6 years ago

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.

  • mattmar96 6 years ago

    Submit a PR :)

    • robbya 6 years ago

      Or an issue. Feedback and ideas are often appreciated, even when they don't come with code. It also allows non-coders to contribute.

  • ngcc_hk 6 years ago

    Yes. Remember the way to dial in those days. You hit it and release. Guess you need to pretend you do this (and the computer already know the number haha).

  • cyborgx7 6 years ago

    The second part was going to be my complaint as well, but your observation about the catch for the finger is even more important.

    I think there might be some kind of lesson here. Rotary dials might be a usability punchline right now, but there is actually a lot of thought that went into their design which made it quite usable. I'm sure similar things can be said about other old interfaces.

    • mikestew 6 years ago

      Rotary dials might be a usability punchline right now

      Punchline? Rotary dials are great. Find number, stick finger in hole, rotate until it stops, release. The only real thinking involved is to figure out which digit you want.

      Man, sure a lot more than just punching a button, amirite? Most of the time, yup, and the rotary is an antiquated method of digit input. But because rotary is not on/off, it is more forgiving. I am unable to come up with a suitable explanation without putting a rotary dial in front of you, but you could change your mind while you were dialing. Or more accurately, you could fix your mistakes. In the midst of dialing, some correction was possible. For instance, "oops, that's '3', not an '8'. Well, even if you've already stopped at 8, you can keep going and get the 3 instead (doesn't work the other way around).

      Anyway, I'm not saying I miss them, but rather to agree that TFA is missing the things that make rotary dials more than just a circular version of a 10-key.

  • _nalply 6 years ago

    Additionally make the drag a lot more forgiving. After all, the rotary dial guides the finger around the circle. To emulate that, people should be able to drag in a very inprecise way and the dial should be reliable in rotating anyway.

  • Aardwolf 6 years ago

    Agreed, this feels a bit like the wire loop game where one wrong move makes you lose

  • virgil_disgr4ce 6 years ago

    This is why one of the next major milestones in UX technology evolution needs to be a new step in haptic interfaces: programmable physical surfaces, where textures and raised edges can be brought into existence to serve as guides and wayfinders, just as the rotary dial catch did.

  • thomaspark 6 years ago

    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

    • sleepychu 6 years ago

      Wow, that's really pretty!

    • daniel-alex 6 years ago

      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 6 years ago

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

It seems that there's a subreddit for such things now: 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.

alpaca128 6 years ago

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 6 years ago

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

    https://i.stack.imgur.com/60z61.png

    • alpaca128 6 years ago

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

  • aasasd 6 years ago

    > you have to enter every individual digit

    That's actually the fastest time input method I've used. Only I need just minutes and seconds, e.g. ‘500’—or hours and minutes in the alarm, like ‘915’. And this app has gigantic buttons for the numbers, and checks on the fly for when a ‘9’ makes no sense so the button is disabled.

    I wish devs adopted this method instead of the inane ubiquitous scrolling dial. I need three or four taps on huge buttons which are in muscle memory by now, like with a calculator pad—as opposed to a ridiculous amount of scrolling through the 60 minutes and looking for when the dial lands on the right number.

jfries 6 years ago

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 6 years ago

    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.

    • wolco 6 years ago

      In North America you dial 1 plus number. Elsewhere it's 011. It might be related to that.

    • Angostura 6 years ago

      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.

atum47 6 years ago

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.

  • wolco 6 years ago

    Not to worry there should be a few forks up soon with regional versions. This is the type of weekend project that people can relate to.

atum47 6 years ago

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 6 years ago

    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 6 years ago

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 6 years ago

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 6 years ago

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

skrebbel 6 years ago

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)

  • philmander 6 years ago

    Works for me on Chrome/Android

  • tazard 6 years ago

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

    • skrebbel 6 years ago

      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 6 years ago

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

sandwell 6 years ago

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

  • atum47 6 years ago

    went right above my head, what this is about?

    • larntz 6 years ago
      • evanb 6 years ago

        Also Jenny and her sister are twins---8675309 and 8675311 are prime.

      • atum47 6 years ago

        I'll make sure to listen, thanks

        • myself248 6 years ago

          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 6 years ago

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

  • raverbashing 6 years ago

    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 6 years ago

      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.

      • swish_bob 6 years ago

        It took a _lot_ of practice. I think I managed to successfully do it about 3 times ...

      • raverbashing 6 years ago

        Yes but you can't expect the average use to learn this. It's not user friendly at all.

      • jones1618 6 years ago

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

      • atum47 6 years ago

        I've learned this from that movie hackers. #hacktheplanet

      • w0land 6 years ago

        Heh, reminds me if my university period. In the students house each apartment had a phone with the round dialing physically removed as the phones were supposed to be used only for recieving calls. I tried the technique you are referring to and it worked perfectly. Too bad that after some months the administration noticed the receipts from the phone company and me and the other guys living in the same apartment had to pay part of it.

    • larntz 6 years ago

      In my area (in the 80s/90s I think) we had to pay extra for touch tone service.

      Anyone know if there was a technical reason for that originally?

      A quick search shows that apparently these charges were still around until recently. Maybe it was just another reason for the telco to add a fee to the bill?

      • jones1618 6 years ago

        All the fees were kind of B.S. especially as technology made providing the switching, call-forwarding and caller ID ring services easier and cheaper to provide.

        Besides, remember that they used to charge _rent_ for your phone and wouldn't allow 3rd party phones at all until the late 60's or so.

      • myself248 6 years ago

        Originally, the switching equipment was driven with pulses, and your phone interacted with it directly.

        As the dial plans got more elaborate, things like digit absorbers got in between you and the actual call routing equipment, but they all still talked to each other and to you with pulses.

        When tone dialing made its debut, some offices had switched over to electronic control and could natively understand touch-tone, but a lot had not, so there were front-end circuits that would decode the tones and control the switching equipment. Throughout the 80s, pretty much all the step, panel, and crossbar switches were replaced with common-control switches (where a computer did the thinking, even if relays were still used for the actual routing), and the fees became bogus.

        If you had Call Waiting, you should not have been paying extra for touch-tone.

    • gitgud 6 years ago

      Keep in mind the link was referring to software UI's. It's not saying the mechanical rotary dial was bad, just software implementations imitating it...

ebg13 6 years ago

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

  • atum47 6 years ago

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

Animats 6 years ago

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 6 years ago

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

  • StudentStuff 6 years ago

    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 6 years ago

Would love a real one on my physical keyboard..

  • jpl56 6 years ago

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

ehnto 6 years ago

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 6 years ago

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

forgotmypw 6 years ago

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 6 years ago

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 6 years ago

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 6 years ago

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

nobrains 6 years ago

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 6 years ago

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

KyleBrandt 6 years ago

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

varjag 6 years ago

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

whsheet 6 years ago

Could be a nice captcha.

m00dy 6 years ago

it looks like a great idea for front end interview.