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

User avatar
sharktastica

23 Nov 2020, 17:04

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
test.png (33.79 KiB) Viewed 1173 times
Currently, the customisation options are:
* Keyboard family filters: all IBM and co, Model B (beam spring) only, Model F only, Model M 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

Upcoming features/options:
* More resolutions options (including 8K) (largely implemented 2020-12-06, excluding 8K)
* Custom backgrounds options (now (2020-12-05) partially implemented with custom solid colour input)
* Option for only using an icon once when using randomised order

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!

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

UPDATE 2020-12-05

Changes:
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
* Cropping is a bit smarter now
* Custom background colours now added; to use, select "Custom Colour" as your solid background option then click the colour picker button to use

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

UPDATE 2020-12-06

Fixes:
* 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

Changes:
* Added many new resolution options for the 3:2/4:3/16:10 peeps out there, including 1024x768, 1280x800, 1440x900, 1650x1050, 1920x1200, 2160x1350 and 2736x1824
* 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

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

UPDATE 2020-12-16

Changes:
* 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

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

UPDATE 2021-01-07

Changes:
* 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)".
Last edited by sharktastica on 07 Jan 2021, 23:13, edited 10 times in total.

cakeanalytics

29 Nov 2020, 04:25

Very cool! Using this as my wallpaper now.

User avatar
Redmaus
Gotta start somewhere

29 Nov 2020, 05:05

Great work, love the options available

User avatar
Weezer

29 Nov 2020, 08:29

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.

User avatar
sharktastica

29 Nov 2020, 14:24

cakeanalytics wrote:
29 Nov 2020, 04:25
Very cool! Using this as my wallpaper now.
Awesome! Hope you're enjoying it! :D
Redmaus wrote:
29 Nov 2020, 05:05
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!
Weezer wrote:
29 Nov 2020, 08:29
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.

User avatar
Chyros

30 Nov 2020, 12:42

Man, that's really cool, well done! :D

User avatar
sharktastica

30 Nov 2020, 22:00

Moodyglo wrote:
29 Nov 2020, 16:10
Wow, it was not what I was expecting when I was imagining it! Cool!
Thanks! Hopefully, better than those expectations! 8-)
Chyros wrote:
30 Nov 2020, 12:42
Man, that's really cool, well done! :D
Thanks! :D

User avatar
sharktastica

05 Dec 2020, 23:18

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
before.png (37.49 KiB) Viewed 744 times
After the crop update - note the crop now applies to all sides:
after.png
after.png (33.45 KiB) Viewed 744 times
An example of a custom background:
colour.png
colour.png (28.48 KiB) Viewed 744 times

User avatar
sharktastica

06 Dec 2020, 16:51

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

User avatar
sharktastica

16 Dec 2020, 18:12

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
Industrial.png (35.61 KiB) Viewed 547 times
The "other" colour tone option:
Other.png
Other.png (30.83 KiB) Viewed 547 times
Example of a specific form factor filter (TKL, in this case):
Tenkeyless.png
Tenkeyless.png (41.16 KiB) Viewed 547 times

User avatar
shine

17 Dec 2020, 11:37

wow, very nice!

User avatar
sharktastica

07 Jan 2021, 23:10

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
index.png (33.45 KiB) Viewed 262 times
An overview of the current crop of Alps/Alps-mount keyboards:
boards.png
boards.png (284.09 KiB) Viewed 262 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!

User avatar
ZedTheMan

08 Jan 2021, 00:53

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 :)

User avatar
ZedTheMan

08 Jan 2021, 01:01

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.)

User avatar
sharktastica

08 Jan 2021, 01:27

ZedTheMan wrote:
08 Jan 2021, 01:01
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.

User avatar
ZedTheMan

08 Jan 2021, 01:35

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!

Post Reply

Return to “Gallery”