QMK has good OLED support out of the box. My favorite keyboard Corne has by default some informational text going on the displays if you just enable the feature and do nothing else. On the right side you can see a beautiful Corne logo and that peak my curiosity to see how do you put images into those displays.
The most common display used for this keyboard is 128x32 pixels.
So that’s what we use, jump into photoshop or use an oline equivalent like Photopea and create an image with those dimensions with a black background:
Note I’ve used width 32px and height 128px because I’m going to do an example image that is vertical (this will make sense in a bit).
Then you can go crazy with text, or all the pixel art you can imagine with that amount of pixels.
Keep in mind the OLED display can only handle on/off pixels so go full white or black, gray won’t show well.
I’ll go with this to start:
Save it as a JPG or PNG, then let’s convert that to code.
Convert pixels to code
Now go to the utility Image 2 CPP.
Pick the image file you just created and change the following settings:
- Background: ‘Black’
- Code Output Format: ‘Plain bytes’
- Draw Mode: ‘Vertical - 1 bit per pixel’
Hit ‘Generate code’ and copy that output, in my case:
Add it to your firmware
Now let’s add it to your firmware, I assume you already have the QMK environment and a base keymap to work with.
Make sure that OLED support is enabled, inside your
rules.mk file you should have:
Then add a conditional block to handle the OLED display if it is enabled:
Let’s set the right orientation first, since we want to have this vertically, we set the rotation degrees:
Next we write he method that actually shows stuff.
And that’s it! after that just flash your firmware and the image will show correctly.
This is just the tip of the iceberg, check out the complete API for more info. The combination of several images and a timer can be used to display animations and such. Another good use could be to indicate activated layers with conditionals.