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.
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.
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.
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.
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.
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 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.
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.
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.
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!
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.
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.
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.
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.
[+] [-] samwillis|4 years ago|reply
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)
[+] [-] jarrenae|4 years ago|reply
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.
[+] [-] LASR|4 years ago|reply
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.
[+] [-] albertzeyer|4 years ago|reply
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...
[+] [-] admax88qqq|4 years ago|reply
Invariably I was unable to remove my finger from the wheel without it scrolling a few more items.
[+] [-] anderspitman|4 years ago|reply
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...
[+] [-] WesleyHale|4 years ago|reply
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.
[+] [-] dgunay|4 years ago|reply
[+] [-] macspoofing|4 years ago|reply
[+] [-] samwillis|4 years ago|reply
I knew exactly what the video was going to be before I clicked.
[+] [-] tverbeure|4 years ago|reply
[+] [-] bonestamp2|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
[+] [-] tppiotrowski|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
[+] [-] dcj|4 years ago|reply
"Everything is just a few hundred clicks away." -https://www.youtube.com/watch?v=9BnLbv6QYcA
[+] [-] hn_throwaway_99|4 years ago|reply
[+] [-] DoctorOW|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
[+] [-] wmichelin|4 years ago|reply
[+] [-] corny|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
[+] [-] keymone|4 years ago|reply
[deleted]
[+] [-] trevcanhuman|4 years ago|reply
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...
[+] [-] bonestamp2|4 years ago|reply
[+] [-] zeptonix|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
It would be interesting to use the cursor motion without a click though.
[+] [-] echan00|4 years ago|reply
[+] [-] eyelidlessness|4 years ago|reply
[+] [-] bonestamp2|4 years ago|reply
[+] [-] motoxpro|4 years ago|reply
[+] [-] daniel5151|4 years ago|reply
https://github.com/daniel5151/clicky
[+] [-] jarrenae|4 years ago|reply
- keep and eye on the repo and we'll be adding more features.
[+] [-] replygirl|4 years ago|reply
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
[+] [-] iamleppert|4 years ago|reply
[+] [-] jpalomaki|4 years ago|reply
You get so accustomed to this kind of things, you only start appreciating them when they are taken a way from you.
[+] [-] jarrenae|4 years ago|reply
[+] [-] trapier|4 years ago|reply
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.
[+] [-] ChrisMarshallNY|4 years ago|reply
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
[+] [-] tiborsaas|4 years ago|reply
I can't tell if using jQuery and React at the same time is part of the artwork.
[+] [-] jarrenae|4 years ago|reply
--. .-. . .- - / .. -.. . .-
[+] [-] paxys|4 years ago|reply
[+] [-] jarrenae|4 years ago|reply
[+] [-] TazeTSchnitzel|4 years ago|reply
[+] [-] dbtc|4 years ago|reply
[+] [-] lostgame|4 years ago|reply
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.