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)
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
76 comments
[ 2.7 ms ] story [ 148 ms ] threadOn 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)
Invariably I was unable to remove my finger from the wheel without it scrolling a few more items.
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.
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.
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?
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.
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...
I knew exactly what the video was going to be before I clicked.
frameworks keep coming and going, but iPod click wheel will serve us for centuries!
https://github.com/daniel5151/clicky
- keep and eye on the repo and we'll be adding more features.
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
You get so accustomed to this kind of things, you only start appreciating them when they are taken a way from you.
It would be interesting to use the cursor motion without a click though.
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...
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.
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.
I can't tell if using jQuery and React at the same time is part of the artwork.
--. .-. . .- - / .. -.. . .-
"Everything is just a few hundred clicks away." -https://www.youtube.com/watch?v=9BnLbv6QYcA
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.
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
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...
It’s kinda janky alignment and I can’t scroll or click.
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.
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