IBM (and now Alps) keyboard pixel art wallpaper generator [updated 2021-02-15]

[sharktastica]

Hi all!

Hopefully, this is the right place to post this (I couldn't find anything specific for art). But anyway, as per interest over at r/ModelM and deskthority Discords, I've developed a wallpaper generator using the IBM (and co) and Alps/Alps-mount keyboard pixel art I've made over the last few months for my website and for sharing on geekhack. As of right now, this is still a WIP with more features and options to come, but I already have something working, so feel free to have a play around with it and let me know what you think - constructive criticism is welcome!

https://sharktastica.co.uk/kb_wallpaper

Here's a sample of what it can output:

test.png (33.79 KiB) Viewed 17307 times

Currently, the customisation options are:
* Keyboard family filters: all IBM and co, Model B (beam spring) only, Model F only, Model M only, Model Ms minus POS/retail, POS/retail only, ThinkPad/TrackPoint only, buckling springs only (F + (M - M3, M4/M4-1, M7, M8, M9, M11)), capacitive switches only (B + F), all IBM and co + Alps/Alps-mount, Non-IBM Alps/Alps-mount keyboards only, Old Apple keyboards, Focus keyboards
* Resolutions: 1024x768, 1280x720, 1280x800, 1366x768, 1440x900, 1650x1050, 1600x1200, 1920x1080, 1920x1200, 2160x1350, 2560x1080, 2560x1440, 2960x1440, 3440x1440, 2736x1824, 3840x2160
* Vertical monitor/phone orientation
* Scaling: 1x, 2x and 4x
* Solid backgrounds: transparent, "dark" (#333333) and "light" (#E1E1E1), custom via colour picker
* Order styles: randomised, ascending or descending approximate time period order (loops after each completion)
* Row staggering
* Specific keyboard colour tones: all, light, dark, industrial, other
* Specific keyboard form factors: all, all minus keypads/sub-60%, keypads/sub-60% only, 60% only, TKL only, full-size only, battlecruiser/battleship only, behemoth only
* Random skips

Some final notes:
* Feel free to use and modify results as you please. If you want to rehost results on your website or blog though, I'd appreciate some credit.
* Big credit and kudos to sealcouch of geekhack for the inspiration behind the icons themselves.
* Pending the lack of custom background options, you can of course overlay a transparent result over an image of your choosing. If you have Photoshop or GIMP, this will be a piece of cake. Although, you can even do this in mspaint; open up your background, copy a transparent result in using "Paste from", immediately click "Select", click "Transparent select", align.

Note: bolded text indicates new features or changes added since the original post.

Enjoy, and feel free to share what you come up with here!

------------------------------------------------------------------

List of updates is now hosted on a dedicated update log found here: https://sharktastica.co.uk/kb_wallpaper_updates

[cakeanalytics]

Very cool! Using this as my wallpaper now.

[Redmaus]

Great work, love the options available

[Weezer]

Impressive that you have the small version on the 5280. What about the keyboard from the 3032 minicomputer? I think that's detachable, but has a really long base. Not sure though.

[sharktastica]

Very cool! Using this as my wallpaper now.

Awesome! Hope you're enjoying it!

Great work, love the options available

Yours (and matyld's) interest are the reason I ever considered doing this in the first place, so thank you!

Impressive that you have the small version on the 5280. What about the keyboard from the 3032 minicomputer? I think that's detachable, but has a really long base. Not sure though.

I'll certainly add it to the list! That list is fairly big though - from now on, I'll be adding icons as I begin to mention the keyboards themselves elsewhere on my website and in its database. At the moment, I'm focusing on getting other "mainstream" beamers, Selectrics, and Wheelwriters in. In any case, thanks for the suggestion and I'll certainly get around to it eventually.

[Chyros]

Man, that's really cool, well done!

[sharktastica]

Wow, it was not what I was expecting when I was imagining it! Cool!

Thanks! Hopefully, better than those expectations!

Man, that's really cool, well done!

Thanks!

[sharktastica]

Update 2020-12-05

Hey all, got some neat updates for the wallpaper generator:
* 4x scaling option is now available.
* Cropping is a bit smarter now. Since the icons themselves are stored at the same set resolution (128x90), resolutions that don't allow for an integer amount of icons (for example, 1920x1080 only allows 7.5 icons at 2x scale on one row) require a crop. Before today, the crop only applied on the right side and thus looked quite ugly. Now, the crop is uniform.
* Custom background colours now added; to use, select "Custom Colour" as your solid background option then click the colour picker button to use

Before the crop update - note the crop only applies to the right side:

before.png (37.49 KiB) Viewed 16878 times

After the crop update - note the crop now applies to all sides:

after.png (33.45 KiB) Viewed 16878 times

An example of a custom background:

colour.png (28.48 KiB) Viewed 16878 times

[sharktastica]

Update 2020-12-06

Yet another round of improvements today:
* Fixed bug with phone/vertical generation introduced after yesterday's cropping update (whoops)
* Fixed bug with transparency being lost when generating with an image under certain resolutions
* Added many new resolution options for the 3:2/4:3/16:10 peeps out there, including 1024x768 (for retro rigs), 1280x800, 1440x900, 1650x1050, 1920x1200, 2160x1350 (you're welcome, ThinkPad X1 Nano users) and 2736x1824 (you're welcome, Surface Pro users)
* Added option to filter keyboards of a specific colour range/tone from your wallpaper
* Added option to remove keypads and sub-60% keyboards from your wallpaper
* UI updated to categorise the available options

[sharktastica]

Update 2020-12-16

Today's a round of content filtering improvements, including:
* The replacement of the remove keypads/sub-60% option with the "Specific form factor" field, which allows you to select between all, all minus keypads/sub-60%, keypads/sub-60% only, 60% only, TKL only, full-size only, battlecruiser/battleship only, behemoth (currently, just the two kanji beamers) only
* New options for specific colour tone fields, including industrial only, others only (which includes blue-grey Ambra Ms and Ellipse's silver gray and true red F62s and F77s), and all minus others

The industrial colour tone option:

Industrial.png (35.61 KiB) Viewed 16681 times

The "other" colour tone option:

Other.png (30.83 KiB) Viewed 16681 times

Example of a specific form factor filter (TKL, in this case):

Tenkeyless.png (41.16 KiB) Viewed 16681 times

[shine]

wow, very nice!

[sharktastica]

Update 2021-01-07

Today's a fairly-big update
* The first of many Alps/Alps-mount keyboards have been added as a bonus and the first major expansion of the generation! To begin, 23 icons representing Apple, Dell, Focus, Leading Edge, Magnavox, Northgate and Zenith are available. You can find the icons separately here: https://sharktastica.co.uk/kb_icons#NonIBMs.
* Added new specific type filters for this update (highlighted as Bonus); All (IBM and co + Alps/Alps-mount), Non-IBM Alps/Alps-mount keyboards only, Old Apple keyboards only, and Focus keyboards only. Due to the new all-encompassing "All" option, the default formerly-All option is now "All (IBM and co only)".

A quick example of a Alps/Alps-mount wallpaper:

index.png (33.45 KiB) Viewed 16396 times

An overview of the current crop of Alps/Alps-mount keyboards:

boards.png (284.09 KiB) Viewed 16396 times

FYI, I'm not really an Alps expert, so feel free to point out any inaccuracies in the icons or suggest your favourite keyboard(s) for me to do!

[ZedTheMan]

Oh wow this is excellent! I'm going to see what I can do to recreate my collection in a wallpaper. Will do some testing

[ZedTheMan]

Okay, sorry to make an ask like this, but if I could make a feature request: Would it be possible to have some iteration where we can choose a blacklist or whitelist on specific boards? I want to make one as close to my collection as possible. Or am I missing this and it is already an option? For more alps boards to suggest, I would suggest Acer KB101, a Wang 725-3770, and a DataDesk Switchboard (Bonus points if the Switchboard has different configurations). I think those would be some cool iconic alps boards that are currently missing from the iconset. They all seem pretty great so far, great work!
(Seriously, I don't want to be "that guy" asking you to spend a lot of time to code something if you don't feel up to it, but I could see this really expanding in coolness with more granular options rather than just the groups.)

[sharktastica]

Okay, sorry to make an ask like this, but if I could make a feature request: Would it be possible to have some iteration where we can choose a blacklist or whitelist on specific boards? I want to make one as close to my collection as possible. Or am I missing this and it is already an option? For more alps boards to suggest, I would suggest Acer KB101, a Wang 725-3770, and a DataDesk Switchboard (Bonus points if the Switchboard has different configurations). I think those would be some cool iconic alps boards that are currently missing from the iconset. They all seem pretty great so far, great work!
(Seriously, I don't want to be "that guy" asking you to spend a lot of time to code something if you don't feel up to it, but I could see this really expanding in coolness with more granular options rather than just the groups.)

No, that's a good suggestion! The code would not be an issue (I planned ahead of such a feature), but making a good UI for a huge list would be tough though. I'm up for a challenge, so I'll have a go when time permits. I'll be sure to add the keyboards you mentioned though.

[ZedTheMan]

Oh wow, thank you! Yeah, I get what you mean regarding a good UI for that, though. Maybe you could use a checkbox, which when clicked, unhides a list of checkbox inputs and labels for all keyboards within selected groups? Sure, this might not be the prettiest, but it would be hard to make that many options pretty but also manageable. If someone is going to refine granularly from a big list, I reckon they would understand that the list is big. Making it so this only appears after a checkbox is clicked, at least keeps everything neat for non-granular refinement.
For the list I'm thinking something of a table with a defined set of columns , which appears in a line below the Arrangement section and goes from one end of the main content section to the other.
Would try to offer some sample code for something like this but I don't know how you have your website set up.

As for adding those keyboards, sweet!

[sharktastica]

Update 2021-02-12

Nothing really special today:
* Added a number of IBM and Toshiba point-of-sales keypads and keyboards that were developed from and use largely the same mechanisms as the Model M7/M8/M9/M11 family. With a lack of better designation, I'm calling them "M-e" (for Model M extended family) for now.
* Added three new Alps keyboards: NeXT Non-ADB AAE, Sega TeraDrive SM-101 variant and Wang 725-3770.
* Added the option to generate a Model M wallpaper without any POS/retail devices, and an option to generate exclusively POS/retail devices.

The new icons:

New icons.png (167.47 KiB) Viewed 15939 times

Example of a POS/retail devices result:

index.png (30.27 KiB) Viewed 15939 times

[sharktastica]

Oh wow, thank you! Yeah, I get what you mean regarding a good UI for that, though. Maybe you could use a checkbox, which when clicked, unhides a list of checkbox inputs and labels for all keyboards within selected groups? Sure, this might not be the prettiest, but it would be hard to make that many options pretty but also manageable. If someone is going to refine granularly from a big list, I reckon they would understand that the list is big. Making it so this only appears after a checkbox is clicked, at least keeps everything neat for non-granular refinement.
For the list I'm thinking something of a table with a defined set of columns , which appears in a line below the Arrangement section and goes from one end of the main content section to the other.
Would try to offer some sample code for something like this but I don't know how you have your website set up.

As for adding those keyboards, sweet!

Sorry for my lack of response! I've been playing around with a UI for this and should be going live in the coming week or two. I've been so backed up doing icons for people, I've neglected this for a while.

[sharktastica]

Also, now hosting a dedicated update log here: https://sharktastica.co.uk/kb_wallpaper_updates

[ZedTheMan]

I appreciate the work and effort you're putting into this, I am excited for that upcoming update. Great work on the icons you just got out, they look sweet. POS boards are fairly unique.

[sharktastica]

I appreciate the work and effort you're putting into this, I am excited for that upcoming update. Great work on the icons you just got out, they look sweet. POS boards are fairly unique.

So, I've been making some good progress yesterday and today on this! Below is a demonstration of the current working prototype. I ended up with this pop-out multi-column array of checkable images since it made the most sense space utilisation wise and I was already drafting a similar UI for something else on the website already.

As shown amongst the buttons presented, users will also be able to save their selection to a file so they can keep it for next time they use the generator. The files (with an eponymous .shark extension ) will be small thanks to compression (150 to 900 bytes range).

I'm hoping to go live early next week! I just need to rigorously test this and make sure I've plugged any foreseeable ways people could break/abuse it. If you (or anyone else) have any feedback, I'm all ears!

[ZedTheMan]

Wow, that's lovely!
Good thought on the selection saving of configuration files.
Honestly, seems like a better solution than I would have thought!

[sharktastica]

Update 2.5, 2021-02-15

Changes:
* The long-awaited custom icon selection option is finally here! It is accessible via selecting appropriate option in the "Specific type" drop-down box. When selected, a new option will appear next to it, and clicking it will bring up a pop-out box where you can select the specific icons you want. You can also save and load selection files (.shark) so you can recover your last selection next time you visit the site. Just don't try modifying the files themselves - they are in a compressed format and self-modification with a plain-text editor will corrupt them! FYI, you may need to clear your cache before this feature works.
* The background colour picker is now hidden by default to avoid confusion. To activate it, you must select the "Custom colour" option as your solid background.
* Added Acer KB-101A and KB-102A keyboard icons.

Fixes:
* Fixed single-pixel issue with Model M-e monitor-mounted keypad icon.
* Fixed return/enter keys for Apples M0110 (ISO), M0118 and AEK2 (ISO) and Dells AT102 and AT102W keyboard icons. Their ISO return/enter keys were incorrectly represented as stepped keys.
* Fixed issues with both ANSI and ISO Apple AEK2 keyboard icons. The unit sizes of the right-most and left-most keycaps on their respective alphanumeric blocks were 0.25u too small.

Screenshot of the new custom selection feature:

Screenshot 2021-02-15 190100.png (54.19 KiB) Viewed 15624 times

And, the custom selection's result:

Test.png (17.34 KiB) Viewed 15624 times

[dcopellino]

Wow, such a great heritage so worthily represented can't pass unobserved. knowing the passion you're putting into all this, i'am sure new features are just awaiting to pop up very soon. After all, beyond pixels there's something even more advisable, something to be printed and framed, for instance.

[John Doe]

Wut the hell is this???

5C8EC12B-37AD-4656-91DB-5A2B94F441B0.jpeg (60.3 KiB) Viewed 15025 times

[sharktastica]

Wow, such a great heritage so worthily represented can't pass unobserved. knowing the passion you're putting into all this, i'am sure new features are just awaiting to pop up very soon. After all, beyond pixels there's something even more advisable, something to be printed and framed, for instance.

As we discussed before, I'm happy for my icons to be used in such an instance! I was just cautious about the wishes of the person behind the basis of my icons if these are produced and resold for profit (and about the fact I'm not a legal expert). I could be overthinking, to be honest. Anyway, I wasn't able to get in contact with them either, so as long as such a poster design is shared specifically for non-profit usage, I don't imagine there could be any issues.

Wut the hell is this???

5C8EC12B-37AD-4656-91DB-5A2B94F441B0.jpeg

That's an IBM System 9002 Hybrid Keyboard. More details: https://sharktastica.co.uk/articles/900 ... gation.php.

[Muirium]

Nice work. I don’t see my beamspring, though. It’s a combination of these two:







I need to take a new picture of it someday. This was all the way back in its haul.