Shark's IBM/Lexmark/Unicomp Keyboard ID Chart (W.I.P.)

sharktastica · 29 Jul 2023, 22:17

As a Star Trek fan, I've long enjoyed looking at charts of various ships on websites like Ex Astris Scientia and Starfleet Museum. I've been wanting to bring this magic over to my website, in the process making some cool content that looks neat and shows the evolution of IBM's keyboard families, and possibility improving accessibility to information by supplementing my existing Keyboard Directory project with an easy to follow visible pick-and-choose chart. And that's what I'm working on!

: kbidc.jpg (2.96 MiB) Viewed 3945 times

The Admiral Shark's Keyboards Keyboard Identification Chart (KBIDC). A demonstration is currently live on my website that you can play with:

It's basically a generated image based on information from my site's database and icons (the same used by my earlier wallpaper generator) that also generates a HTML map that allows you to select a keyboard on the chart to find out more info.

Depending on the settings specified in the URL, it may take a few seconds to render. Speaking of settings, you can change the following URL parametres:

scale - changes how big everything is rendered; values 1 to 3 supported
cols - how wide the render should be; values 4 and larger supported
stagger - enable row staggering; can either by 0 or 1
families - select what keyboard families to display; * means all, but you can comma separate (with no spaces) in specifics (b - Model B, f - Model F, m - Model M, l - LPFK)

Once this becomes an actual site feature, I'll probably make it so it detects your monitor aspect ratio and work out the best column count to make it visible without zooming on first generation and you only have to scroll to view the rest of the chart. But for now if you're on mobile, reduce the columns to something like 4 to 6.

What else am I'm working on for it:

More keyboard families
Making sure every keyboard is clickable
A new set of higher detail keyboard icons
Option to enable/disable per-family colours
Options to modify said per-family colours
Ensuring WCAG (accessibility, specifically colour/contrast) guidelines are followed
Possibility of a "live-action" variant (real keyboard photos)
Find ways to minimise or completely eliminate the need for JavaScript for the dynamic HTML map component (the image is generated server side, so that will always appear regardless of noscript) (to be honest, I'm not sure if this is really possible, but if there's a way, I'll use it)

Enjoy and let me know what you think!

Falkenroth · 30 Jul 2023, 00:39

I enjoyed looking through the compiled list. Very nice.

guidemetothelight · 31 Jul 2023, 09:02

This is great. It will be such a big help for beginners to figure out what board they found in the back rooms of their workplace

depletedvespene · 12 Aug 2023, 15:42

Magnificent work.

You may consider adding to the "to do" list an option that allows the user to filter by a particular layout ("show only battleships", etc.) for ease of lookup.