geekhack
geekhack Community => geekhack Media => Topic started by: sharktastica on Sat, 29 July 2023, 15:33:54
-
As a Star Trek fan, I've long enjoyed looking at charts of various ships on websites like Ex Astris Scientia (https://www.ex-astris-scientia.org/fleet-charts.htm) and Starfleet Museum (https://www.starfleet-museum.org/). 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 (https://sharktastica.co.uk/directory) with an easy to follow visible pick-and-choose chart. And that's what I'm working on!
[attachimg=1]
The Admiral Shark's Keyboards Keyboard Identification Chart (KBIDC). A demonstration is currently live on my website that you can play with:
- Desktop: https://sharktastica.co.uk/media/kbidc?scale=1&cols=12&stagger=0&families=b,f,m,l
- Mobile: https://sharktastica.co.uk/media/kbidc?scale=2&cols=4&stagger=0&families=b,f,m,l
It's basically a generated image based on information from my site's database and icons (the same used by my earlier wallpaper generator (https://geekhack.org/index.php?topic=109770.msg2982981#msg2982981)) 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!