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.<p>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.<p>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.<p>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.<p>(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)
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.<p>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.<p>[0]: <a href="https://docs.google.com/document/d/1lTOxHxHFjwJXeCLROAPf6OJDonKZ9pliw2NMhQ-8QLw/edit#heading=h.52vufnqzfry9" rel="nofollow">https://docs.google.com/document/d/1lTOxHxHFjwJXeCLROAPf6OJD...</a>
<a href="https://www.youtube.com/watch?v=9BnLbv6QYcA" rel="nofollow">https://www.youtube.com/watch?v=9BnLbv6QYcA</a> immediately comes to mind.
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.
It would be funny if the Next button took you to clickwheeljt.com and the Previous button took you to clickwheeljr.com.<p>"Everything is just a few hundred clicks away." -<a href="https://www.youtube.com/watch?v=9BnLbv6QYcA" rel="nofollow">https://www.youtube.com/watch?v=9BnLbv6QYcA</a>
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 <i>only</i> areas where clicking has no effect.
I actually use a variant of the Clickwheel on a daily basis.<p>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.<p>But yeah, it works almost the same.<p>docs on how to set it up: [0]<p>[0] <a href="https://wiki.archlinux.org/title/Touchpad_Synaptics#Circular_scrolling" rel="nofollow">https://wiki.archlinux.org/title/Touchpad_Synaptics#Circular...</a>
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.
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!<p><a href="https://github.com/daniel5151/clicky" rel="nofollow">https://github.com/daniel5151/clicky</a>
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.<p>You get so accustomed to this kind of things, you only start appreciating them when they are taken a way from you.
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.<p>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.<p>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.<p>I wrote something similar, for native Swift, on iOS[0], so I know some of the challenges.<p>[0] <a href="https://github.com/RiftValleySoftware/RVS_Spinner" rel="nofollow">https://github.com/RiftValleySoftware/RVS_Spinner</a>
Add morse code support for inputting text by pushing the central button.<p>I can't tell if using jQuery and React at the same time is part of the artwork.
<a href="https://tannerv.com/ipod/" rel="nofollow">https://tannerv.com/ipod/</a> (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.
Works <i>extremely</i> 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.<p>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
<a href="https://codepen.io/theprojectsomething/full/Exbzjya" rel="nofollow">https://codepen.io/theprojectsomething/full/Exbzjya</a>
you should credit the people who wrote the code for you!<p><a href="https://github.com/agencyenterprise/clickwheel-js/blob/master/src/ClickWheel.js" rel="nofollow">https://github.com/agencyenterprise/clickwheel-js/blob/maste...</a><p><a href="https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js" rel="nofollow">https://github.com/aterrien/jQuery-Knob/blob/master/js/jquer...</a>
circular scrolling has been in production definitely by early 2003 in panasonic toughbooks: <a href="http://ixbtlabs.com/news.html?00/85/36" rel="nofollow">http://ixbtlabs.com/news.html?00/85/36</a><p>more discussion and screenshots of the settings software: <a href="http://ixbtlabs.com/articles2/portopc/panas-cf-y2.html" rel="nofollow">http://ixbtlabs.com/articles2/portopc/panas-cf-y2.html</a>
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 feel I should point out a bit of pervasive misinformation.<p>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.