Show HN: iPod Clickwheel.js | Hacker News Reader

Show HN: iPod Clickwheel.js

clickwheeljs.com

112 pointsjarrenae73 comments

Major issue, velocity of the scroll seems to be consistent ignoring how fast you scroll/rotate the click wheel - I love the idea but it doesn't truly represent the joy of using the original thing.

On the iPod you could scroll incredibly fast but with incredible control, stopping at just the right place. The UI would give you a little scroll bar indicating your position and I think some versions gave you an alphabet to see where you were in the very long list.

So, I like the idea and the homage to a beautiful and iconic piece of UX design (possibly the best bit of UX design ever), but the implementation is lacking the finesse of the real thing.

Oh and that beautiful little "click" sound you would get through your earbuds, speeding up as you scrolled faster, really needs to be represented. I can hear it now, it's the sound of a iPod click wheel.

(Also the demo really should show how you can use the buttons, there seems be be support in the library, they seem to do nothing)

Agreed, I'd like to get the velocity working correctly. I think about how natural it feels on https://tannerv.com/ipod/ we still have a bit to go to get to that point.

And I appreciate the mention about the button support, we're going to add a few more pages to show that functionality, as well as adding in the original click sound as you scroll.

I think it could be something really fun if we get the UX right.

Do continue! I love these little projects, and it's a great start.

Could I ask a question, I haven't done much React (much more Vue.js and loads of jQuery/plain js in the past). Why have you decided to use both React and jQuery in the implementation? Did React lack support for something you needed that jQuery made easer without just going for plain JS?

We definitely will. Great question - honestly we were moving really quickly for this one and got it out the door as a proof of concept. In a future version we'll move over to react completely.

If you made it a web component it could work in Vue, Svelte, Angular, etc. too.

One thing that's always blown me away about the TouchWheel iPod and the original iPhone is the mountain of design/engineering work beneath a very simple user experience.

It's what competitors found hard to replicate when these products were first launched.

Nobody ever talks about the kinetic scrolling behavior as a marketable feature on paper. But for the end customer, it builds the image of "it just works" very convincingly.

Scroll acceleration feeling unnatural in Android was the top reason I’ve never considered switching from iOS. Granted I don’t know if/how much it’s improved, but it was such a jarring experience I’ve never bothered to find out.

I never had an iPod, but I wonder, did it use some acceleration scheme? I.e. your physical scroll speed was not just linearly mapped to the virtual scroll speed but some quadratic or even exponential scheme?

Because I know that they do the same on OSX for scrolling, i.e. scrolling has an acceleration scheme, which I very much enjoy, and always miss when I'm on other operating systems.

For that reason, I implemented such scroll acceleration in user space. Some further details and references are in the README. https://github.com/albertz/mouse-scroll-wheel-acceleration-u...

Maybe my thumbs are too big but I was never able to stop "at just the right place"

Invariably I was unable to remove my finger from the wheel without it scrolling a few more items.

Ah, but you got pretty dam close didn't you? And with a little "jig" back were on the one you want. Even with tens or hundreds of thousands of songs you could get to the right one in seconds.

That little jig would often overshoot, again and again lol.

But yes the switching from scrolling by item to scrolling by first letter was pretty clever, but I found making small adjustments to go forward only one item, took many tries.

Maybe I was holding it wrong, but I don't think that the scroll wheel was as flawless as we're making it out to be.

What I wouldn't give to have more physical interfaces for our devices. For large classes of problems, touchscreens are fantastic for programmers and terrible for users.

I did a school project a few years ago called NotherButton[0] which was a wrist-worn device that was intended to simply add a few physical buttons that could be mapped to arbitrary actions on your phone via bluetooth. I wish such a product existed. Just a few buttons and a click wheel would be incredible.

[0]: https://docs.google.com/document/d/1lTOxHxHFjwJXeCLROAPf6OJD...

The Google G1 has been my best experience with a phone to date. I loved that keyboard and have been searching for a phone to scratch that itch ever since.

There are a few devices that are in the physical button niche still, but from smaller companies and on crowd funding platforms. Their specs leave a lot of room for improvement as well and there is there is risk the device is never produced unfortunately. The two that have the most traction right now are the Pro 1X and the Astro Slide 5G.

The Pro 1X is a second generation device that has a bad history with order completion. There are customers who ordered the first generation years ago who never received a phone. They bumped their order to the Pro 1X and are still waiting.

the Astro 5g on the other hand is from Planet Computers. They've successfully produced a couple devices such as the Cosmo Communicator.

I'll hopefully be getting my Astro this month after backing the project since November bof last year.

I actually have a Bluetooth device that attaches to my steering wheel with play/pause and scrubbing buttons to let me control my phone's music while driving. It's rough but usable. I think it's a great way to retrofit controls like that onto older cars.

I have one like this too. It's just a little round device that has play/pause volume and next/prev tracks. Shows up on my Android phone as a standard Bluetooth keyboard. Sat in a drawer for years because it didn't work with my iPhones.

https://www.youtube.com/watch?v=9BnLbv6QYcA immediately comes to mind.

I once worked with someone who genuinely fell for that video, he also had his bank account cleared out from a phishing email too though...

I knew exactly what the video was going to be before I clicked.

The agile aardvark arrived by airmail.

I forgot about that video. It's funny that one thing in that video did come true... from google, and it's great (predictive sentence completion).

this may or may not have been my inspiration haha

Might want to add pointer-events:none or make the MENU and <<, >> buttons background images because (in Firefox on Mac at least) dragging with the mouse causes the browser to think you want to drag those images and save them on the desktop.

Thanks! I've had a few people point this out which is very helpful. it's now on our todo list.

It would be funny if the Next button took you to clickwheeljt.com and the Previous button took you to clickwheeljr.com.

"Everything is just a few hundred clicks away." -https://www.youtube.com/watch?v=9BnLbv6QYcA

The interaction paradigm of this is pretty much backwards, though, in that the cursor turns into a pointer over the menu, forward/backward, play/pause icons, yet those are the only areas where clicking has no effect.

I'm on Firefox on Windows and found it a little difficult to use because I kept clicking and dragging the buttons on the wheel

I've heard that from another firefox user as well. Thanks for the heads up, I'll add it to my list of changes!

This doesn't appear to work at all in Chrome on MacOS

If you click and drag any of the icons on the wheel it won't work. Click and drag the whitespace within the wheel and it works.

That’s what I (not OP) needed to hear! I’ve never used a physical iPod clickwheel and I tried dragging from the center and from the buttons (not between the buttons) dozens of times before coming back here and reading this. Hope jarrenae considers clarifying this on the site.

I've heard this from a few people, definitely working to clarify it more.

same almost gave up after clicking/right-clicking all over and nothing.. Thanks. What the hell's an iPod? /s

I'm in chrome on MacOS and it works for me and others, you don't have JS disabled with an extension do you? Also you have to click and drag around in a circle for it to work.

I actually use a variant of the Clickwheel on a daily basis.

I use a synaptics touchpad on a Thinkpad T490. There are Linux programs that allow you to control the properties of your touchpad. And guess what? Synaptics allows for 'circular scrolling'. I've seen it also written as 'chiral' scrolling.

But yeah, it works almost the same.

docs on how to set it up: [0]

[0] https://wiki.archlinux.org/title/Touchpad_Synaptics#Circular...

That's really interesting. I guess the benefit is that you don't have to lift your fingers and reset their position when scrolling up/down in the traditional way.

Should really detect circular movement on a touchpad. That's probably truest to its original form.

If you click and hold on a touchpad, it does work while moving in a circular motion. But you'd have to click first.

It would be interesting to use the cursor motion without a click though.

I hate to say this but it is not very intuitive, I was click on dragging for a while. Circular motions while dragging with a trackpad is not a natural motion.

It feels weird if you’re not interacting with it directly, but on a touch screen it feels almost as natural and intuitive as it did on the real physical click wheel.

Ya, it's fun but it's not an improvement in usability on a website the way it was on a handheld device.

I feel so dumb. I literally thought it was broken, I thought I tried everything haha.

Any chance I could borrow this code for my (very WIP) classic clickwheel iPod emulator? I've actually got an experimental WASM build of it up and running, so this would be super appropriate!

https://github.com/daniel5151/clicky

I think that should be fine. I'm going to be adding more documentation, and the license will be/is open source.

- keep and eye on the repo and we'll be adding more features.

you should reach out to the actual authors of the code

this is a lightly tweaked jquery-knob with the license stripped

https://github.com/agencyenterprise/clickwheel-js/blob/maste...

https://github.com/aterrien/jQuery-Knob/blob/master/LICENSE

Just to clarify, the first link is me and my teammate who developed this at https://www.ae.studio but with that said, you are correct that we didn't include the license from work we leaned on, we hadn't added any documentation to Github yet. We'll update it to reflect that.

Needs to take into consideration acceleration and velocity and correctly model the physics of the bounce / overshoot characteristics. Note that this only works and makes sense if you're able to render at a high enough frame rate to make navigation at high speeds possible. I'm not convinced this is a better way to scroll a web page...my Logitech mouse has a scroll wheel that you can click to enable acceleration/velocity scrolling (based on the actual physics of the wheel itself), and the mouse buttons are close to my fingers which matches the analogy of the play/pause etc buttons on the original ipod wheel, without any added UI taking up space on the page.

This reminded me how convenient the touch screen or mouse wheel if, when you can just ”give it some speed” and page scrolls automatically.

You get so accustomed to this kind of things, you only start appreciating them when they are taken a way from you.

To be fair, even the iPod click wheel did have velocity scrolling. We're working on getting that added. This version doesn't have it quite yet unfortunately.

The Google (news?) app on Android used to have a nice continuous scrolling behavior where you could start scrolling with two thumbs then keep one thumb on the screen and rock it back and forth on just the thumb pad. Any displacement of the "held" touch caused the screen to smooth scroll in the direction of the initial scroll in an amount proportional to the speed of the initial scroll.

Found it quite pleasant, but was never able to locate documentation of it. Would have enjoyed it as a generic behavior for all apps, particularly the browser.

That's nice.

It behaves like the old iPod clickwheel, with the exception that it has a single velocity. The old clickwheel did not have "flywheel" behavior; which is good, because there was no visual feedback.

I wrote something similar, for native Swift, on iOS[0], so I know some of the challenges.

[0] https://github.com/RiftValleySoftware/RVS_Spinner

Add morse code support for inputting text by pushing the central button.

I can't tell if using jQuery and React at the same time is part of the artwork.

Quite possibly a result of moving very quickly for MVP and not being too careful with it. We'll push an update removing jQuery soon enough.

--. .-. . .- - / .. -.. . .-

Disappointed that the buttons don't do anything. I want the entire site navigation to be controlled by this!

I have support for it in the library, but haven't build more pages on the site to showcase it yet. It's on the list!

https://tannerv.com/ipod/ (which has been posted on HN before) has not only a clickwheel, but a full-on iPod simulation. Might be interesting to compare clickwheel feel and implementation.

This is what I've been wanting to make for a while now... Darn! but nice! It's really well done. On my phone it is just like I'm holding an iPod again, and I noticed immediately the smooth-tactile sensation of my thumb on the glass screen - something I completely ignore or am unconscious of when swiping and scrolling.

Works extremely poorly for me on iOS. Rotating the wheel rarely scrolls the page as expected, rather it bounces the page up and down slightly rather uselessly.

I really mean no offence to the author - but for what would be such a simple script to implement - I’m kinda shocked how broken it is.

Agreed with everyone on the sounds .. I had to get them working in Firefox / Chrome https://codepen.io/theprojectsomething/full/Exbzjya

you should credit the people who wrote the code for you!

https://github.com/agencyenterprise/clickwheel-js/blob/maste...

https://github.com/aterrien/jQuery-Knob/blob/master/js/jquer...

Jarren runs the Same Day Skunkworks Department at AE Studio, which is "Agency Enterprise" (https://github.com/agencyenterprise) in the first link you shared there

yes, and the second link is the original work

Yes you are correct. We didn't include the license from work we leaned on, we hadn't added any documentation to Github yet. We'll update it to reflect that.

circular scrolling has been in production definitely by early 2003 in panasonic toughbooks: http://ixbtlabs.com/news.html?00/85/36

more discussion and screenshots of the settings software: http://ixbtlabs.com/articles2/portopc/panas-cf-y2.html

We built this as a bit of a nostalgia trip for people who want to navigate the web using an early 2000's iPod clickwheel. We hope others enjoy it too!

I use a rotary dial like this as an alternate, more precise, input method for sliders in my photo editor Filmulator.

A phone rotary phone dial? How very 1960s of you.

I feel I should point out a bit of pervasive misinformation.

The clickwheel is entirely based on tech from Creative. Apple paid them royalties for their patents. Creative used parts of their touch technology (albeit in a vertical configuration) on several of their own music players. I'd also note that sound quality on Creative devices was much better than the ipod.

[citation needed]

Everything I've ever read said it was developed by Synaptics.

The only reference I can find to Apple paying Creative royalties for patents is for some B.S. "hierarchical tree of music" UI patent

among all the new web trends i like this one the most

frameworks keep coming and going, but iPod click wheel will serve us for centuries!

I can't wait to file my taxes with this. Next up, field & keyboard support.

TIL that Apple didn't event this

Doesn’t work on mobile For me

What device/browser? I'd like to troubleshoot if possible.

IPhone 11 Pro / 14.8 iOS Safari

It’s kinda janky alignment and I can’t scroll or click.

Reply on news.ycombinator.com