11 ms·
Show HN: iPod Clickwheel.js
- DoctorOW 5y agoI'm on Firefox on Windows and found it a little difficult to use because I kept clicking and dragging the buttons on the wheel
- jarrenae 5y agoI've heard that from another firefox user as well. Thanks for the heads up, I'll add it to my list of changes!
- samwillis 5y agoMajor 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)
- admax88qqq 5y agoMaybe 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.
- samwillis 5y agoAh, 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.
- admax88qqq 5y agoThat 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.
- jarrenae 5y agoAgreed, I'd like to get the velocity working correctly. I think about how natural it feels on https://tannerv.com/ipod/ 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.
- kronks 5y ago
- samwillis 5y agoDo 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?
- jarrenae 5y agoWe 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.
- spankalee 5y agoIf you made it a web component it could work in Vue, Svelte, Angular, etc. too.
- LASR 5y agoOne 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.
- eyelidlessness 5y agoScroll 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.
- albertzeyer 5y agoI 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-userspace https://github.com/albertz/mouse-scroll-wheel-acceleration-u...
- deleted 5y ago[deleted]
- wmichelin 5y agoThis doesn't appear to work at all in Chrome on MacOS
- keymone 5y ago
- jarrenae 5y agoI'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.
- corny 5y agoIf 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.
- boogies 5y agoThat’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.
- ChrisArchitect 5y agosame almost gave up after clicking/right-clicking all over and nothing.. Thanks. What the hell's an iPod? /s
- jarrenae 5y agoI've heard this from a few people, definitely working to clarify it more.
- jarrenae 5y agoWe 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!
- macspoofing 5y agohttps://www.youtube.com/watch?v=9BnLbv6QYcA https://www.youtube.com/watch?v=9BnLbv6QYcA immediately comes to mind.
- jarrenae 5y agothis may or may not have been my inspiration haha
- samwillis 5y agoI 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.
- tverbeure 5y agoThe agile aardvark arrived by airmail.
- bonestamp2 5y agoI 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).
- daniel5151 5y agoAny 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 https://github.com/daniel5151/clicky
- jarrenae 5y agoI 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.
- replygirl 5y agoyou 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/master/Readme.md https://github.com/agencyenterprise/clickwheel-js/blob/maste... https://github.com/aterrien/jQuery-Knob/blob/master/LICENSE https://github.com/aterrien/jQuery-Knob/blob/master/LICENSE
- jarrenae 5y agoJust to clarify, the first link is me and my teammate who developed this at https://www.ae.studio 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.
- ushakov 5y agoamong 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!
- jarrenae 5y agoI can't wait to file my taxes with this. Next up, field & keyboard support.
- paxys 5y agoDisappointed that the buttons don't do anything. I want the entire site navigation to be controlled by this!
- jarrenae 5y agoI 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!
- jpalomaki 5y agoThis 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.
- jarrenae 5y agoTo 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.
- zeptonix 5y agoShould really detect circular movement on a touchpad. That's probably truest to its original form.
- jarrenae 5y agoIf 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.
- iamleppert 5y agoNeeds 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.
- anderspitman 5y agoWhat 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/1lTOxHxHFjwJXeCLROAPf6OJDonKZ9pliw2NMhQ-8QLw/edit#heading=h.52vufnqzfry9 https://docs.google.com/document/d/1lTOxHxHFjwJXeCLROAPf6OJD...
- WesleyHale 5y agoThe 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.
- dgunay 5y agoI 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.
- olyjohn 5y agoI 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.
- trapier 5y agoThe 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.
- hn_throwaway_99 5y agoThe 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.
- tppiotrowski 5y agoMight 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.
- jarrenae 5y agoThanks! I've had a few people point this out which is very helpful. it's now on our todo list.
- Graffur 5y agoTIL that Apple didn't event this
- tiborsaas 5y agoAdd 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.
- jarrenae 5y agoQuite 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. --. .-. . .- - / .. -.. . .-
- CarVac 5y agoI use a rotary dial like this as an alternate, more precise, input method for sliders in my photo editor Filmulator.
- jarrenae 5y agoA phone rotary phone dial? How very 1960s of you.
- dcj 5y agoIt 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 https://www.youtube.com/watch?v=9BnLbv6QYcA
- hajile 5y agoI 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.
- kalleboo 5y ago[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
- trevcanhuman 5y agoI 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_scrolling https://wiki.archlinux.org/title/Touchpad_Synaptics#Circular...
- bonestamp2 5y agoThat'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.
- ada1981 5y agoDoesn’t work on mobile For me
- lostgame 5y agoWorks 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.
- ChrisMarshallNY 5y agoThat'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 https://github.com/RiftValleySoftware/RVS_Spinner
- TazeTSchnitzel 5y agohttps://tannerv.com/ipod/ 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.
- dbtc 5y agoThis 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.
- echan00 5y agoI 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.
- eyelidlessness 5y agoIt 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.
- motoxpro 5y agoI feel so dumb. I literally thought it was broken, I thought I tried everything haha.
- bonestamp2 5y agoYa, it's fun but it's not an improvement in usability on a website the way it was on a handheld device.
- replygirl 5y agoyou should credit the people who wrote the code for you! https://github.com/agencyenterprise/clickwheel-js/blob/master/src/ClickWheel.js https://github.com/agencyenterprise/clickwheel-js/blob/maste... https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js https://github.com/aterrien/jQuery-Knob/blob/master/js/jquer...
- kvee 5y agoJarren runs the Same Day Skunkworks Department at AE Studio, which is "Agency Enterprise" (https://github.com/agencyenterprise https://github.com/agencyenterprise) in the first link you shared there
- somishere 5y agoAgreed with everyone on the sounds .. I had to get them working in Firefox / Chrome https://codepen.io/theprojectsomething/full/Exbzjya https://codepen.io/theprojectsomething/full/Exbzjya
- 5- 5y agocircular scrolling has been in production definitely by early 2003 in panasonic toughbooks: http://ixbtlabs.com/news.html?00/85/36 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 http://ixbtlabs.com/articles2/portopc/panas-cf-y2.html