[HN Gopher] Show HN: iPod Clickwheel.js
___________________________________________________________________
Show HN: iPod Clickwheel.js
Author : jarrenae
Score : 70 points
Date : 2022-03-07 19:46 UTC (3 hours ago)
(HTM) web link (www.clickwheeljs.com)
(TXT) w3m dump (www.clickwheeljs.com)
| anderspitman wrote:
| 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...
| WesleyHale wrote:
| 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.
| tppiotrowski wrote:
| 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.
| jarrenae wrote:
| Thanks! I've had a few people point this out which is very
| helpful. it's now on our todo list.
| paxys wrote:
| Disappointed that the buttons don't do anything. I want the
| entire site navigation to be controlled by this!
| jarrenae wrote:
| 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!
| trapier wrote:
| 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.
| Graffur wrote:
| TIL that Apple didn't event this
| jpalomaki wrote:
| 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.
| jarrenae wrote:
| 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.
| DoctorOW wrote:
| 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
| jarrenae wrote:
| I've heard that from another firefox user as well. Thanks for
| the heads up, I'll add it to my list of changes!
| samwillis wrote:
| 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)
| admax88qqq wrote:
| 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.
| samwillis wrote:
| 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.
| admax88qqq wrote:
| 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.
| jarrenae wrote:
| 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.
| samwillis wrote:
| 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?
| jarrenae wrote:
| 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.
| LASR wrote:
| 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.
| trevcanhuman wrote:
| 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...
| dcj wrote:
| 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
| zeptonix wrote:
| Should really detect circular movement on a touchpad. That's
| probably truest to its original form.
| jarrenae wrote:
| 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.
| wmichelin wrote:
| This doesn't appear to work at all in Chrome on MacOS
| corny wrote:
| 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.
| boogies wrote:
| 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.
| keymone wrote:
| jarrenae wrote:
| 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.
| iamleppert wrote:
| 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.
| jarrenae wrote:
| 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!
| ada1981 wrote:
| Doesn't work on mobile For me
| tiborsaas wrote:
| 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.
| jarrenae wrote:
| 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.
|
| --. .-. . .- - / .. -.. . .-
| macspoofing wrote:
| https://www.youtube.com/watch?v=9BnLbv6QYcA immediately comes to
| mind.
| tverbeure wrote:
| The agile aardvark arrived by airmail.
| samwillis wrote:
| 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.
| jarrenae wrote:
| this may or may not have been my inspiration haha
| daniel5151 wrote:
| 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
| jarrenae wrote:
| 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.
| ushakov wrote:
| 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!
| jarrenae wrote:
| I can't wait to file my taxes with this. Next up, field &
| keyboard support.
| CarVac wrote:
| I use a rotary dial like this as an alternate, more precise,
| input method for sliders in my photo editor Filmulator.
| jarrenae wrote:
| A phone rotary phone dial? How very 1960s of you.
| hn_throwaway_99 wrote:
| 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.
| hajile wrote:
| 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.
___________________________________________________________________
(page generated 2022-03-07 23:00 UTC)